Slight refactor and updates to brand page

app/routes/brand/components/BrandPage.module.css

@@ -7,20 +7,11 @@
 .colRight {
   flex: 2;
   align-items: center;
-  padding-top: 10px;
+  padding: var(--spacing-sm) 0;
   background-color: var(--color-absolute-white);
 }
 
 .colLeft ul {
   list-style: outside;
   padding-left: var(--spacing-lg);
 }
-
-.inlineLink {
-  display: inline-block;
-  padding-right: 5px;
-}
-
-.h2Padding {
-  padding-top: 20px;
-}

app/routes/brand/components/BrandPage.tsx

@@ -1,28 +1,32 @@
 import { Flex, Icon, LinkButton, Image, Page } from '@webkom/lego-bricks';
 import { Download } from 'lucide-react';
+import { Helmet } from 'react-helmet-async';
 import logosDonts from 'app/assets/logos-donts.png';
 import logosDos from 'app/assets/logos-dos.png';
+import { ContentMain } from 'app/components/Content';
 import styles from './BrandPage.module.css';
 
-const BrandPage = () => (
-  <Page title="Brand Guidelines">
-    <section>
-      <Flex column>
+const BrandPage = () => {
+  const title = 'Retningslinjer for merkevare';
+  return (
+    <Page title={title}>
+      <Helmet title={title} />
+      <ContentMain>
         <p>
-          Hei, vi i PR har laget noen retningslinjer for å hjelpe deg å bruke
-          vårt brand og design. For å bruke logoen og designet på en måte som
-          ikke er dekket av disse retningslinjene kontakt oss på{' '}
-          <a className={styles.inlineLink} href="mailto:[email protected]">
-            [email protected]
-          </a>
-          og legg ved en mockup av hvordan du har tenkt til å bruke det.
-        </p>
-        <h2>Bruk</h2>
-        <p>
-          Abakus{"'"} merker inkluderer Abakus-navnet, logoen og ord som
-          identifiserer oss. Vær så snill å ikke modifiser merkene eller bruk
-          dem på en forvirrende måte.
+          PR har utformet noen retningslinjer for å hjelpe deg å bruke vår
+          merkevare. For å bruke logoen og designet på en måte som ikke er
+          dekket av disse retningslinjene kontakt oss på{' '}
+          <a href="mailto:[email protected]">[email protected]</a> og legg ved en mockup
+          av hvordan du har tenkt til å bruke det.
         </p>
+        <div>
+          <h2>Bruk</h2>
+          <p>
+            Abakus{"'"} merker inkluderer Abakus-navnet, logoen og ord som
+            identifiserer oss. Vær så snill å ikke modifiser merkene eller bruk
+            dem på en forvirrende måte.
+          </p>
+        </div>
         <Flex>
           <Flex column className={styles.colLeft}>
             <h2>Logo</h2>
@@ -48,7 +52,6 @@ const BrandPage = () => (
             />
           </Flex>
         </Flex>
-
         <Flex>
           <Flex column className={styles.colLeft}>
             <b>Vi ber om at du er omtenksom og ikke:</b>
@@ -77,21 +80,23 @@ const BrandPage = () => (
           <Flex column className={styles.colRight}>
             <Image
               src={logosDonts}
-              alt="Eksempler på ikke tillatte versjoner av logo"
+              alt="Eksempler på ikke-tillatte versjoner av logo"
               width={200}
             />
           </Flex>
         </Flex>
         <div>
-          <h2 className={styles.h2Padding}>Logoer i vektorformat</h2>
+          <h2>Logoer i vektorformat</h2>
           <LinkButton
             href="https://github.com/abakus-ntnu/grafisk-profil/archive/master.zip"
             download="proposed_file_name"
           >
             <Icon iconNode={<Download />} size={19} />
             Last ned
           </LinkButton>
-          <h2 className={styles.h2Padding}>Abakusfarger</h2>
+        </div>
+        <div>
+          <h2>Abakusfarger</h2>
           <ul>
             <li>Hvit: CMYK(0,0,0,0)</li>
             <li>Svart: CMYK(0,0,0,95)</li>
@@ -100,7 +105,9 @@ const BrandPage = () => (
             <li>Lyserød: CMYK(1,98,98,0) RGB(E21617)</li>
             <li>Mørkerød: CMYK(20,99,100,13) RGB(B21C17)</li>
           </ul>
-          <h2 className={styles.h2Padding}>Powerpointmal</h2>
+        </div>
+        <div>
+          <h2>PowerPoint-mal</h2>
           <p>
             Denne malen skal brukes for presentasjoner som holdes i Abakus-regi
           </p>
@@ -112,9 +119,9 @@ const BrandPage = () => (
             Last ned
           </LinkButton>
         </div>
-      </Flex>
-    </section>
-  </Page>
-);
+      </ContentMain>
+    </Page>
+  );
+};
 
 export default BrandPage;