From 718c95b5c1d54f657b8b62179bb1a963417f04dc Mon Sep 17 00:00:00 2001 From: peterjurco Date: Mon, 20 Jan 2025 12:03:20 +0100 Subject: [PATCH 1/3] Add privacy links & copyright to the footer --- cypress/e2e/keyboard-navigation.cy.ts | 5 +- src/components/layout/layout.module.scss | 72 ++++++++++++++++++++---- src/components/layout/layout.tsx | 58 ++++++++++++------- src/styles/fonts.module.scss | 2 +- 4 files changed, 105 insertions(+), 32 deletions(-) diff --git a/cypress/e2e/keyboard-navigation.cy.ts b/cypress/e2e/keyboard-navigation.cy.ts index ea8e6339..39f66fde 100644 --- 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 index 80ee0011..bf0750e6 100644 --- 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 index dbc37e46..8f1847d5 100644 --- 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 ( <> @@ -56,24 +64,36 @@ export const BaseLayout = ({ children, title }: BaseLayoutProps) => { {showNotice ? ( ) : ( -
- {footerLinks.map((link) => - link.href ? ( - - {link.text} - - ) : ( - - ) - )} +
+
+ {footerLinks.map((link) => + link.href ? ( + + {link.text} + + ) : ( + + ) + )} +
+
+
© {actualYear} API3 Foundation
+
+ {footerLinksSecondRow.map((link) => ( + + {link.text} + + ))} +
+
)} diff --git a/src/styles/fonts.module.scss b/src/styles/fonts.module.scss index b498f4bd..a0c0fa88 100644 --- 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 */ } From 0a613c91bf625858d77006132d84e33e6d6b18a7 Mon Sep 17 00:00:00 2001 From: peterjurco Date: Mon, 20 Jan 2025 14:09:51 +0100 Subject: [PATCH 2/3] Put links into utils file --- src/components/layout/layout.tsx | 12 +++++++----- src/utils/links.ts | 6 +++++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index 8f1847d5..b93e7ca0 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -8,6 +8,8 @@ import ErrorReportingNotice from './error-reporting-notice'; import { DesktopMenu } from '../menu'; import ExternalLink from '../external-link'; import { ALLOW_ANALYTICS, ALLOW_ERROR_REPORTING } from '../../utils/analytics'; +import { links } from '../../utils/links'; +import { link } from 'fs'; type Props = { children: ReactNode; @@ -35,15 +37,15 @@ export const BaseLayout = ({ children, title }: BaseLayoutProps) => { ); const footerLinks = [ - { text: 'Api3.org', href: 'https://api3.org/' }, + { text: 'Api3.org', href: links.API3_ORG }, { text: 'Error Reporting', onClick: () => setShowNotice(true) }, - { text: 'Github', href: 'https://github.com/api3dao/api3-dao-dashboard' }, + { text: 'Github', href: links.GITHUB }, ]; 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/' }, + { text: 'Privacy Policy', href: links.PRIVACY_POLICY }, + { text: 'Privacy and Cookies', href: links.PRIVACY_AND_COOKIES }, + { text: 'Terms and Conditions', href: links.TERMS_AND_CONDITIONS }, ]; const actualYear = new Date().getFullYear(); diff --git a/src/utils/links.ts b/src/utils/links.ts index 2199c848..b2a1e9c2 100644 --- a/src/utils/links.ts +++ b/src/utils/links.ts @@ -1,4 +1,8 @@ export const links = { - SENTRY: 'https://sentry.io/', + API3_ORG: 'https://api3.org/', + GITHUB: 'https://github.com/api3dao/api3-dao-dashboard', + PRIVACY_AND_COOKIES: 'https://api3.org/privacy-and-cookies/', PRIVACY_POLICY: 'https://api3.org/privacy-policy/', + SENTRY: 'https://sentry.io/', + TERMS_AND_CONDITIONS: 'https://api3.org/terms-and-conditions/', }; From 3545065422160afecdfd1d890b3cf69765897ac7 Mon Sep 17 00:00:00 2001 From: peterjurco Date: Mon, 20 Jan 2025 14:10:34 +0100 Subject: [PATCH 3/3] Remove unused import --- src/components/layout/layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index b93e7ca0..5941d78f 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -9,7 +9,6 @@ import { DesktopMenu } from '../menu'; import ExternalLink from '../external-link'; import { ALLOW_ANALYTICS, ALLOW_ERROR_REPORTING } from '../../utils/analytics'; import { links } from '../../utils/links'; -import { link } from 'fs'; type Props = { children: ReactNode;