chore(SW-187): update footer UI

2024-11-07 17:25:01 +01:00
parent 0a65a0d6a4
commit 908136b10b
7 changed files with 32 additions and 8 deletions
@@ -60,11 +60,13 @@
    border-top: 1px solid var(--Base-Text-Medium-contrast);
    padding-top: var(--Spacing-x2);
    flex-direction: row;
+    align-items: center;
  }
  .navigationContainer {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    gap: var(--Spacing-x4);
+    align-items: center;
  }
 }
@@ -56,7 +56,7 @@ export default async function FooterDetails() {
      </div>
      <div className={styles.bottomContainer}>
        <div className={styles.copyrightContainer}>
-          <Footnote textTransform="uppercase">
+          <Footnote type="label" textTransform="uppercase">
            © {currentYear}{" "}
            {intl.formatMessage({ id: "Copyright all rights reserved" })}
          </Footnote>
@@ -66,7 +66,12 @@ export default async function FooterDetails() {
            {footer?.tertiaryLinks.map(
              (link) =>
                link.url && (
-                  <Footnote asChild textTransform="uppercase" key={link.title}>
+                  <Footnote
+                    asChild
+                    type="label"
+                    textTransform="uppercase"
+                    key={link.title}
+                  >
                    <Link
                      className={styles.link}
                      color="peach50"
@@ -12,7 +12,7 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
      <ul className={styles.mainNavigationList}>
        {mainLinks.map((link) => (
          <li key={link.title} className={styles.mainNavigationItem}>
-            <Subtitle type="two" asChild>
+            <Subtitle color="baseTextMediumContrast" type="two" asChild>
              <Link
                color="burgundy"
                href={link.url}
@@ -1,6 +1,7 @@
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getLang } from "@/i18n/serverContext"

 import styles from "./secondarynav.module.css"
@@ -18,9 +19,13 @@ export default function FooterSecondaryNav({
    <div className={styles.secondaryNavigation}>
      {appDownloads && (
        <nav className={styles.secondaryNavigationGroup}>
-          <Body color="baseTextMediumContrast" textTransform="uppercase">
+          <Caption
+            color="textMediumContrast"
+            textTransform="uppercase"
+            type="label"
+          >
            {appDownloads.title}
-          </Body>
+          </Caption>
          <ul className={styles.secondaryNavigationList}>
            {appDownloads.links.map(
              (link) =>
@@ -50,9 +55,13 @@ export default function FooterSecondaryNav({
      )}
      {secondaryLinks.map((link) => (
        <nav className={styles.secondaryNavigationGroup} key={link.title}>
-          <Body color="baseTextMediumContrast" textTransform="uppercase">
+          <Caption
+            color="textMediumContrast"
+            textTransform="uppercase"
+            type="label"
+          >
            {link.title}
-          </Body>
+          </Caption>
          <ul className={styles.secondaryNavigationList}>
            {link?.links?.map((link) => (
              <li key={link.title} className={styles.secondaryNavigationItem}>