Add privacy links & copyright to the footer

api3dao · Jan 20, 2025 · 718c95b · 718c95b
1 parent 93f05a7
commit 718c95b
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 32 deletions.
diff --git a/cypress/e2e/keyboard-navigation.cy.ts b/cypress/e2e/keyboard-navigation.cy.ts
@@ -24,9 +24,12 @@ describe('keyboard navigation and accessibility', () => {
     pressTabAndAssertFocusOutline(() => cy.findAllByText('Docs').filter(':visible').closest('a'));
 
     pressTabAndAssertFocusOutline(() => cy.findByTestId('connect-wallet-staking-btn'));
-    pressTabAndAssertFocusOutline(() => cy.findByText('About API3'));
+    pressTabAndAssertFocusOutline(() => cy.findByText('Api3.org'));
     pressTabAndAssertFocusOutline(() => cy.findByText('Error Reporting'));
     pressTabAndAssertFocusOutline(() => cy.findByText('Github'));
+    pressTabAndAssertFocusOutline(() => cy.findByText('Privacy Policy'));
+    pressTabAndAssertFocusOutline(() => cy.findByText('Privacy and Cookies'));
+    pressTabAndAssertFocusOutline(() => cy.findByText('Terms and Conditions'));
 
     pressTabAndAssertFocusOutline(() => cy.dataCy('api3-logo')); // Completes the TAB cycle
   });

diff --git a/src/components/layout/layout.module.scss b/src/components/layout/layout.module.scss
@@ -41,11 +41,17 @@
   position: relative;
   align-items: center;
   justify-content: center;
-  height: 196px;
+  height: 244px;
 
-  &Content {
+  &Rows {
+    width: calc(100% - 32px);
+    max-width: 468px;
+  }
+
+  &FirstRow {
     display: flex;
-    padding-top: 44px;
+    padding: 44px 0 24px 0;
+    justify-content: center;
 
     a {
       display: flex;
@@ -76,22 +82,66 @@
       background: $gradient-medium-light;
     }
   }
+
+  &SecondRow {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    gap: 24px;
+    padding: 24px 0 64px 0;
+    border-top: 1px solid $color-blue-25;
+    width: 100%;
+
+    .privacyLinks {
+      display: flex;
+      gap: 16px;
+    }
+
+    a {
+      text-decoration: none;
+      box-sizing: border-box;
+      @include font-overline-2;
+      @include menu-link-secondary;
+    }
+
+    .copyright {
+      @include font-body-18;
+      color: $color-dark-blue-50;
+    }
+  }
 }
 
 @media (min-width: $md) {
   .footer {
-    height: 140px;
+    height: 238px;
 
-    &Content {
-      padding-top: 64px;
+    &Rows {
+      width: calc(100% - 192px);
+      max-width: unset;
+    }
 
-      a {
-        @include font-body-15;
-      }
+    a,
+    .copyright {
+      @include font-body-15;
+    }
 
-      & > *,
+    &FirstRow {
+      padding: 64px 0 32px 0;
+
+      & > button,
       & > a {
-        padding: 0 40px;
+        padding: 0 40px !important;
+      }
+    }
+
+    &SecondRow {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      padding: 32px 0 64px 0;
+
+      .privacyLinks {
+        gap: 24px;
       }
     }
   }

diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
@@ -35,11 +35,19 @@ export const BaseLayout = ({ children, title }: BaseLayoutProps) => {
   );
 
   const footerLinks = [
-    { text: 'About API3', href: 'https://api3.org/' },
+    { text: 'Api3.org', href: 'https://api3.org/' },
     { text: 'Error Reporting', onClick: () => setShowNotice(true) },
     { text: 'Github', href: 'https://github.com/api3dao/api3-dao-dashboard' },
   ];
 
+  const footerLinksSecondRow = [
+    { text: 'Privacy Policy', href: 'https://api3.org/privacy-policy/' },
+    { text: 'Privacy and Cookies', href: 'https://api3.org/privacy-and-cookies/' },
+    { text: 'Terms and Conditions', href: 'https://api3.org/terms-and-conditions/' },
+  ];
+
+  const actualYear = new Date().getFullYear();
+
   return (
     <>
       <Helmet>
@@ -56,24 +64,36 @@ export const BaseLayout = ({ children, title }: BaseLayoutProps) => {
           {showNotice ? (
             <ErrorReportingNotice onShowNotice={setShowNotice} />
           ) : (
-            <div className={styles.footerContent}>
-              {footerLinks.map((link) =>
-                link.href ? (
-                  <ExternalLink href={link.href} key={link.text}>
-                    {link.text}
-                  </ExternalLink>
-                ) : (
-                  <Button
-                    key={link.text}
-                    type="menu-link-secondary"
-                    onClick={link.onClick}
-                    size="xs"
-                    md={{ size: 'sm' }}
-                  >
-                    {link.text}
-                  </Button>
-                )
-              )}
+            <div className={styles.footerRows}>
+              <div className={styles.footerFirstRow}>
+                {footerLinks.map((link) =>
+                  link.href ? (
+                    <ExternalLink href={link.href} key={link.text}>
+                      {link.text}
+                    </ExternalLink>
+                  ) : (
+                    <Button
+                      key={link.text}
+                      type="menu-link-secondary"
+                      onClick={link.onClick}
+                      size="xs"
+                      md={{ size: 'sm' }}
+                    >
+                      {link.text}
+                    </Button>
+                  )
+                )}
+              </div>
+              <div className={styles.footerSecondRow}>
+                <div className={styles.copyright}>&copy; {actualYear} API3 Foundation</div>
+                <div className={styles.privacyLinks}>
+                  {footerLinksSecondRow.map((link) => (
+                    <ExternalLink href={link.href} key={link.text}>
+                      {link.text}
+                    </ExternalLink>
+                  ))}
+                </div>
+              </div>
             </div>
           )}
         </footer>

diff --git a/src/styles/fonts.module.scss b/src/styles/fonts.module.scss
@@ -316,7 +316,7 @@
   font-family: Karla;
   font-size: 10px;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 400;
   line-height: 170%; /* 17px */
 }