fix: match footer to design documents with typography and colors

apps/scandic-web/components/Footer/Details/details.module.css

@@ -1,15 +1,15 @@
 .details {
-  background: var(--Base-Text-High-contrast);
+  background: var(--Primary-Dark-Surface-Normal);
   color: var(--Primary-Dark-On-Surface-Text);
-  padding: var(--Spacing-x3) 0 var(--Spacing-x6);
+  padding: var(--Space-x3) 0 var(--Space-x6);
 }
 
 .topContainer {
   display: flex;
   justify-content: space-between;
-  padding-bottom: var(--Spacing-x2);
+  padding-bottom: var(--Space-x2);
   max-width: var(--max-width-page);
-  margin: 0 auto var(--Spacing-x2);
+  margin: 0 auto var(--Space-x2);
 }
 
 .bottomContainer {
@@ -22,26 +22,26 @@
 
 .socialNav {
   display: flex;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .navigationContainer {
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--Spacing-x2);
-  padding-bottom: var(--Spacing-x2);
-  border-bottom: 1px solid var(--Base-Text-Medium-contrast);
+  margin-bottom: var(--Space-x2);
+  padding-bottom: var(--Space-x2);
+  border-bottom: 1px solid var(--Primary-Dim-On-Surface-Accent);
 }
 
 .navigation {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .link {
   &::after {
     content: "·";
-    margin-left: var(--Spacing-x1);
+    margin-left: var(--Space-x1);
   }
 
   &:last-child {
@@ -51,19 +51,14 @@
   }
 }
 
-.copyrightContainer {
-  display: flex;
-  gap: var(--Spacing-x1);
-}
-
 @media screen and (min-width: 768px) {
   .details {
-    padding: var(--Spacing-x6) 0 var(--Spacing-x4);
+    padding: var(--Space-x6) 0 var(--Space-x4);
   }
 
   .bottomContainer {
-    border-top: 1px solid var(--Base-Text-Medium-contrast);
-    padding-top: var(--Spacing-x2);
+    border-top: 1px solid var(--Primary-Dark-On-Surface-Divider);
+    padding-top: var(--Space-x2);
     flex-direction: row;
     align-items: center;
   }
@@ -72,7 +67,7 @@
     border-bottom: 0;
     padding-bottom: 0;
     margin-bottom: 0;
-    gap: var(--Spacing-x4);
+    gap: var(--Space-x4);
     align-items: center;
   }
 }

apps/scandic-web/components/Footer/Details/index.tsx

@@ -1,10 +1,11 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { getFooter } from "@/lib/trpc/memoizedRequests"
 
 import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
@@ -20,7 +21,7 @@ export default async function FooterDetails() {
   const currentYear = new Date().getFullYear()
 
   return (
-    <section className={styles.details}>
+    <div className={styles.details}>
       <div className={styles.topContainer}>
         <Link href={`/${lang}`}>
           <Image
@@ -37,8 +38,8 @@ export default async function FooterDetails() {
         </nav>
       </div>
       <div className={styles.bottomContainer}>
-        <div className={styles.copyrightContainer}>
-          <Footnote type="label" textTransform="uppercase">
+        <Typography variant="Tag/sm">
+          <p>
             {intl.formatMessage(
               {
                 defaultMessage:
@@ -46,35 +47,27 @@ export default async function FooterDetails() {
               },
               { currentYear }
             )}
-          </Footnote>
-        </div>
+          </p>
+        </Typography>
         <div className={styles.navigationContainer}>
           <nav className={styles.navigation}>
-            {footer?.tertiaryLinks.map(
-              (link) =>
-                link.url && (
-                  <Footnote
-                    asChild
-                    type="label"
-                    textTransform="uppercase"
-                    key={link.title}
-                  >
-                    <Link
-                      className={styles.link}
-                      color="peach50"
-                      href={link.url}
-                      target="_blank"
-                    >
-                      {link.title}
-                    </Link>
-                  </Footnote>
-                )
-            )}
+            {footer?.tertiaryLinks.map((link) => (
+              <Typography key={link.title} variant="Tag/sm">
+                <Link
+                  className={styles.link}
+                  color="peach50"
+                  href={link.url}
+                  target="_blank"
+                >
+                  {link.title}
+                </Link>
+              </Typography>
+            ))}
           </nav>
           <LanguageSwitcher type="footer" />
         </div>
       </div>
-    </section>
+    </div>
   )
 }
 
@@ -99,8 +92,8 @@ export async function FooterDetailsSkeleton() {
         </nav>
       </div>
       <div className={styles.bottomContainer}>
-        <div className={styles.copyrightContainer}>
-          <Footnote type="label" textTransform="uppercase">
+        <Typography variant="Tag/sm">
+          <p>
             {intl.formatMessage(
               {
                 defaultMessage:
@@ -108,8 +101,8 @@ export async function FooterDetailsSkeleton() {
               },
               { currentYear }
             )}
-          </Footnote>
-        </div>
+          </p>
+        </Typography>
         <div className={styles.navigationContainer}>
           <nav className={styles.navigation}>
             <SkeletonShimmer width="40ch" height="20px" contrast="dark" />