Fix spacings on a bunch of pages

At least all that use a Card with some severity
webkom · Dec 26, 2024 · be5afa5 · be5afa5
1 parent bbb771a
commit be5afa5
Show file tree

Hide file tree

Showing 17 changed files with 101 additions and 94 deletions.
diff --git a/app/components/Auth/index.tsx b/app/components/Auth/index.tsx
@@ -13,6 +13,7 @@ import {
   LoginForm,
   RegisterForm,
 } from 'app/components/LoginForm';
+import { ContentMain } from '../Content';
 import type { ComponentType } from 'react';
 
 enum AuthMode {
@@ -68,10 +69,12 @@ const Auth = ({ asPage = false, loginRequired = false }: Props) => {
           </>
         }
       >
-        {loginRequired && (
-          <Card severity="danger">Denne siden krever innlogging</Card>
-        )}
-        <Form />
+        <ContentMain>
+          {loginRequired && (
+            <Card severity="danger">Denne siden krever innlogging</Card>
+          )}
+          <Form />
+        </ContentMain>
       </Page>
     );
   }

diff --git a/app/routes/announcements/components/AnnouncementsCreate.tsx b/app/routes/announcements/components/AnnouncementsCreate.tsx
@@ -138,7 +138,6 @@ const AnnouncementsCreate = () => {
         validateOnSubmitOnly
         onSubmit={onSubmit}
         initialValues={initialValues}
-        className={styles.form}
         subscription={{}}
       >
         {({ handleSubmit }) => (
@@ -231,7 +230,7 @@ const AnnouncementsCreate = () => {
             </Card>
 
             {spyValues<FormValues>((values) => (
-              <ButtonGroup>
+              <ButtonGroup className={styles.buttonGroup}>
                 <SubmitButton
                   onPress={() => {
                     values.send = false;

diff --git a/app/routes/announcements/components/AnnouncementsList.module.css b/app/routes/announcements/components/AnnouncementsList.module.css
@@ -1,9 +1,7 @@
 @import url('~app/styles/variables.css');
 
-.form {
-  width: 100%;
-  padding: 10px;
-  margin-bottom: 20px;
+.buttonGroup {
+  margin-top: var(--spacing-md);
 }
 
 .formHeaders {

diff --git a/app/routes/announcements/components/AnnouncementsList.tsx b/app/routes/announcements/components/AnnouncementsList.tsx
@@ -2,6 +2,7 @@ import { Flex, LoadingPage, Page } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { Helmet } from 'react-helmet-async';
 import { fetchAll } from 'app/actions/AnnouncementsActions';
+import { ContentMain } from 'app/components/Content';
 import EmptyState from 'app/components/EmptyState';
 import { selectAnnouncements } from 'app/reducers/announcements';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
@@ -29,7 +30,7 @@ const AnnouncementsList = () => {
   return (
     <Page title={title}>
       <Helmet title={title} />
-      <Flex column gap="var(--spacing-md)">
+      <ContentMain>
         {actionGrant.includes('create') && <AnnouncementsCreate />}
 
         {actionGrant.includes('list') && actionGrant.includes('delete') && (
@@ -50,7 +51,7 @@ const AnnouncementsList = () => {
             )}
           </div>
         )}
-      </Flex>
+      </ContentMain>
     </Page>
   );
 };

diff --git a/app/routes/articles/components/ArticleEditor.module.css b/app/routes/articles/components/ArticleEditor.module.css
@@ -1,13 +1,3 @@
-.title {
-  width: 100%;
-  padding: 2px 0;
-}
-
-.coverImage {
-  width: 100%;
-  height: 300px;
-  overflow: hidden;
-  background: var(--additive-background);
-  margin-bottom: 20px;
-  position: relative;
+.pinnedWarning {
+  margin-bottom: var(--spacing-md);
 }
diff --git a/app/routes/articles/components/ArticleEditor.tsx b/app/routes/articles/components/ArticleEditor.tsx
@@ -47,6 +47,7 @@ import {
   required,
   validYoutubeUrl,
 } from 'app/utils/validation';
+import styles from './ArticleEditor.module.css';
 import type { EditingEvent } from 'app/routes/events/utils';
 import type { AdminDetailedArticle } from 'app/store/models/Article';
 
@@ -181,7 +182,7 @@ const ArticleEditor = () => {
               component={CheckBox.Field}
             />
             {values.pinned && (
-              <Card severity="warning">
+              <Card severity="warning" className={styles.pinnedWarning}>
                 <Card.Header>Obs!</Card.Header>
                 <p>
                   Du må ha godkjenning fra ledelsen for å feste til forsiden.

diff --git a/app/routes/events/components/EventEditor/EditorSection/Header.tsx b/app/routes/events/components/EventEditor/EditorSection/Header.tsx
@@ -67,7 +67,7 @@ const Header = ({
       />
 
       {values.pinned && (
-        <Card severity="warning">
+        <Card severity="warning" className={styles.pinnedWarning}>
           <Card.Header>Obs!</Card.Header>
           <p>Du må ha godkjenning fra ledelsen for å feste til forsiden.</p>
         </Card>

diff --git a/app/routes/events/components/EventEditor/EventEditor.module.css b/app/routes/events/components/EventEditor/EventEditor.module.css
@@ -31,6 +31,10 @@
   }
 }
 
+.pinnedWarning {
+  margin-bottom: var(--spacing-md);
+}
+
 .descriptionEditor {
   background: inherit;
   color: var(--lego-font-color);

diff --git a/app/routes/surveys/components/AddSubmission/AddSubmissionPage.tsx b/app/routes/surveys/components/AddSubmission/AddSubmissionPage.tsx
@@ -76,11 +76,12 @@ const AddSubmissionPage = () => {
         title={survey.title}
         back={{ href: '/', label: 'Tilbake til forsiden' }}
       >
-        <Card severity="warning">Denne undersøkelsen er ikke aktiv enda.</Card>
-        <p>
-          Den vil aktiveres{' '}
-          <Time time={survey.activeFrom} format="HH:mm DD. MMM" />.
-        </p>
+        <ContentMain>
+          <Card severity="warning">
+            Denne undersøkelsen er ikke aktiv enda. Den vil aktiveres{' '}
+            <Time time={survey.activeFrom} format="HH:mm DD. MMM" />.
+          </Card>
+        </ContentMain>
       </Page>
     );
   }

diff --git a/app/routes/surveys/components/AddSubmission/AlreadyAnswered.tsx b/app/routes/surveys/components/AddSubmission/AlreadyAnswered.tsx
@@ -1,4 +1,5 @@
 import { Card, Page } from '@webkom/lego-bricks';
+import { ContentMain } from 'app/components/Content';
 import StaticSubmission from '../StaticSubmission';
 import type { DetailedSurvey } from 'app/store/models/Survey';
 import type { SurveySubmission } from 'app/store/models/SurveySubmission';
@@ -13,12 +14,16 @@ const AlreadyAnswered = ({ survey, submission }: Props) => (
     title={survey.title}
     back={{ href: '/', label: 'Tilbake til forsiden' }}
   >
-    <Card severity="success">
-      <Card.Header>Du har svart på denne undersøkelsen. Takk!</Card.Header>
-    </Card>
+    <ContentMain>
+      <Card severity="success">
+        <Card.Header>Du har svart på denne undersøkelsen. Takk!</Card.Header>
+      </Card>
 
-    <h2>Du svarte følgende</h2>
-    <StaticSubmission survey={survey} submission={submission} />
+      <div>
+        <h2>Du svarte følgende</h2>
+        <StaticSubmission survey={survey} submission={submission} />
+      </div>
+    </ContentMain>
   </Page>
 );
 

diff --git a/app/routes/surveys/components/SurveyEditor/SurveyForm.tsx b/app/routes/surveys/components/SurveyEditor/SurveyForm.tsx
@@ -155,7 +155,7 @@ const SurveyForm = ({
             component={Questions}
             rerenderOnEveryChange={true}
           />
-          <Card severity="info">
+          <Card severity="info" className={styles.surveyInfo}>
             <span>
               Deltagerene på arrangementet vil få e-post med link til
               spørreundersøkelsen når den aktiveres ({<SurveyActivationTime />}

diff --git a/app/routes/surveys/components/surveys.module.css b/app/routes/surveys/components/surveys.module.css
@@ -29,6 +29,10 @@
   margin-right: 30px;
 }
 
+.surveyInfo {
+  margin: var(--spacing-md) 0;
+}
+
 .search h2 {
   display: inline;
   margin-right: 20px;

diff --git a/app/routes/users/components/UserConfirmation.tsx b/app/routes/users/components/UserConfirmation.tsx
@@ -11,6 +11,7 @@ import {
   saveToken,
   validateRegistrationToken,
 } from 'app/actions/UserActions';
+import { ContentMain } from 'app/components/Content';
 import {
   TextInput,
   MultiSelectGroup,
@@ -91,19 +92,24 @@ const UserConfirmationForm = () => {
         <Confetti />
 
         <Page title="Du er nå registrert!">
-          <Card severity="warning">
-            <Card.Header>Er du student?</Card.Header>
-            <span>
-              For å kunne melde deg på arrangementer i Abakus må du verifisere
-              at du er student.
-            </span>
-          </Card>
-          <ButtonGroup>
-            <LinkButton success href="/users/me/settings/student-confirmation/">
-              Verifiser studentstatus
-            </LinkButton>
-            <LinkButton href="/">Eller gå til hovedsiden</LinkButton>
-          </ButtonGroup>
+          <ContentMain>
+            <Card severity="warning">
+              <Card.Header>Er du student?</Card.Header>
+              <span>
+                For å kunne melde deg på arrangementer i Abakus må du verifisere
+                at du er student.
+              </span>
+            </Card>
+            <ButtonGroup>
+              <LinkButton
+                success
+                href="/users/me/settings/student-confirmation/"
+              >
+                Verifiser studentstatus
+              </LinkButton>
+              <LinkButton href="/">Eller gå til hovedsiden</LinkButton>
+            </ButtonGroup>
+          </ContentMain>
         </Page>
       </>
     );

diff --git a/app/routes/users/components/UserSettings/StudentConfirmation.tsx b/app/routes/users/components/UserSettings/StudentConfirmation.tsx
@@ -8,6 +8,7 @@ import {
   startStudentAuth,
   updateUser,
 } from 'app/actions/UserActions';
+import { ContentMain } from 'app/components/Content';
 import { Button } from 'app/components/Form';
 import { useCurrentUser } from 'app/reducers/auth';
 import { useAppDispatch } from 'app/store/hooks';
@@ -88,18 +89,16 @@ const StudentConfirmation = () => {
   };
 
   return (
-    <>
-      <h2>Verifiser studentstatus</h2>
-
+    <ContentMain>
       {currentUser.isStudent === null && (
-        <p>
+        <span>
           For å kunne bli medlem i Abakus og få mulighet til å delta på
           arrangementer, få tilgang til bilder og interessegrupper og mer må du
           verifisere at du går enten Cybersikkerhet og datakommunikasjon eller
           Datateknologi. Ved å trykke på knappen under gir du Abakus tilgang til
           dine studier og fag i StudentWeb gjennom FEIDE slik at vi kan
           registrere deg som medlem.
-        </p>
+        </span>
       )}
 
       {currentUser.isStudent !== null &&
@@ -151,7 +150,7 @@ const StudentConfirmation = () => {
               <Card.Header>
                 En feil oppsto under validering av din studentstatus:
               </Card.Header>
-              <p>{authRes.detail}</p>
+              <span>{authRes.detail}</span>
             </>
           )}
         </Card>
@@ -160,13 +159,6 @@ const StudentConfirmation = () => {
       <Button success onPress={() => performStudentAuth()}>
         Verifiser med FEIDE
       </Button>
-      {currentUser.isStudent !== null && (
-        <p className={styles.infoText}>
-          Du har allerede verifisert din status. Dersom du har byttet studie og
-          ønsker å bli medlem av Abakus, kan du verifisere deg på nytt og vi vil
-          oppdatere statusen din dersom du er registrert riktig på StudentWeb.
-        </p>
-      )}
 
       <Modal
         show={showMemberModal}
@@ -211,7 +203,7 @@ const StudentConfirmation = () => {
           </Button>
         </ButtonGroup>
       </Modal>
-    </>
+    </ContentMain>
   );
 };
 

diff --git a/app/routes/users/components/UserSettings/UserSettingsNotifications.tsx b/app/routes/users/components/UserSettings/UserSettingsNotifications.tsx
@@ -6,6 +6,7 @@ import {
   updateNotificationSetting,
 } from 'app/actions/NotificationSettingsActions';
 import { updateUser } from 'app/actions/UserActions';
+import { ContentMain } from 'app/components/Content';
 import { CheckBox } from 'app/components/Form';
 import { useCurrentUser } from 'app/reducers/auth';
 import {
@@ -68,13 +69,11 @@ const UserSettingsNotifications = () => {
   }
 
   return (
-    <div>
-      <h2>Notifikasjoner</h2>
-
-      <p>
+    <ContentMain>
+      <span>
         Abakus sender ut notifikasjoner for forskjellige hendleser som skjer.
         Her kan du selv velge hva du vil motta og på hvilken kanal.
-      </p>
+      </span>
 
       <Card severity="warning">
         <Card.Header>Pass på!</Card.Header>
@@ -152,7 +151,7 @@ const UserSettingsNotifications = () => {
           })}
         </tbody>
       </table>
-    </div>
+    </ContentMain>
   );
 };