mess around with footer + misc adjustments on event header and venue item

web/src/components/layout/Footer.tsx

@@ -39,7 +39,7 @@ export const Footer = () => {
     <>
     <footer className={styles.footer}>
       <div className={styles.social}>
-        <h2 className="suphead">Følg oss</h2>
+        <h2>Følg oss</h2>
         <ul>
           <li>
             <a
@@ -74,7 +74,7 @@ export const Footer = () => {
         </ul>
       </div>
       <div className={styles.contact}>
-        <h2 className="suphead">Kontakt oss</h2>
+        <h2>Kontakt oss</h2>
         <div className={styles.emails}>
           <div>
             Generelle henvendelser
@@ -91,14 +91,14 @@ export const Footer = () => {
             </a>
           </div>
           <div>
-            <Link href="/kontakt">Øvrig kontaktinfo</Link>
+            <Link href="/kontakt">Øvrig kontaktinfo&nbsp;<Icon type="arrowRight" /></Link>
           </div>
         </div>
       </div>
       <div className={styles.visit}>
-        <h2 className="suphead">Besøk oss</h2>
+        <h2>Besøk oss</h2>
         <div className={styles.address}>
-          <h2 className="suphead">Adresse</h2>
+          <h3 className="suphead">Adresse</h3>
           <div>
             Chateau Neuf
             <br />
@@ -107,26 +107,26 @@ export const Footer = () => {
             0369 Oslo
             <br />
             <a href="#" target="_blank">
-              Vis i Google Maps
+              Vis i Google Maps&nbsp;<Icon type="externalLink" />
             </a>
           </div>
         </div>
 
         <div className={styles.openingHoursWrapper}>
-          <h2 className="suphead">Åpningstider i dag</h2>
+          <h3 className="suphead">Åpningstider i dag</h3>
           <OpeningHoursTable />
-          <Link href="/praktisk#apningstider">Se alle åpningstider</Link>
+          <Link href="/praktisk#apningstider">Se alle åpningstider&nbsp;<Icon type="arrowRight" /></Link>
         </div>
       </div>
       <div className={styles.pig}>
         <NeonChillPig />
       </div>
+    </footer>
+    <div className={styles.pigPattern}>
       <div className={styles.toTop}>
         <ToTop />
       </div>
-    </footer>
-    <div className={styles.pigPattern}>
-      </div>
-      </>
+    </div>
+  </>
   );
 };

web/src/components/layout/ToTop.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useInView } from "react-intersection-observer";
+import Icon from "../general/Icon";
 
 export const ToTop = () => {
   const scrollToTop = () => {
@@ -8,5 +9,8 @@ export const ToTop = () => {
       behavior: "smooth",
     });
   };
-  return <button onClick={scrollToTop}>Til toppen</button>;
+  return <button onClick={scrollToTop}>
+    Til toppen
+    <Icon type="arrowUp" />
+  </button>;
 };

web/src/components/layout/footer.module.scss

@@ -6,6 +6,16 @@
   z-index: 700;
   font-size: var(--font-size-caption);
   overflow: hidden;
+
+  h2 {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    font-size: var(--font-size-h3);
+  }
+
+  h3 {
+    margin-bottom: 1em;
+  }
 }
 
 .contactList {
@@ -20,10 +30,6 @@
   list-style: none;
   grid-column: span 4;
 
-  h2 {
-    margin-bottom: 1em;
-  }
-
   ul {
     list-style: none;
   }
@@ -90,8 +96,7 @@
 }
 
 .emailLink {
-  font-family: var(--font-serif);
-  font-size: var(--font-size-lead);
+  font-size: var(--font-size-caption);
 }
 
 .pig {