From 2536e9904ef0a3cdcd41ab8aad81918ae05bd538 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 8 Nov 2022 19:43:53 +0200 Subject: [PATCH 1/9] Migrate Footer styles --- public/locales/bg/common.json | 4 +- public/locales/en/common.json | 4 +- src/components/layout/Footer.tsx | 156 ------------------ .../layout/Footer/Footer.styled.tsx | 39 +++++ src/components/layout/Footer/Footer.tsx | 20 +++ src/components/layout/Footer/FooterData.tsx | 26 +++ src/components/layout/Footer/FooterLinks.tsx | 32 ++++ src/components/layout/Footer/InfoGrid.tsx | 32 ++++ src/components/layout/Footer/SocialIcons.tsx | 32 ++++ src/components/layout/Layout.tsx | 2 +- 10 files changed, 184 insertions(+), 163 deletions(-) delete mode 100644 src/components/layout/Footer.tsx create mode 100644 src/components/layout/Footer/Footer.styled.tsx create mode 100644 src/components/layout/Footer/Footer.tsx create mode 100644 src/components/layout/Footer/FooterData.tsx create mode 100644 src/components/layout/Footer/FooterLinks.tsx create mode 100644 src/components/layout/Footer/InfoGrid.tsx create mode 100644 src/components/layout/Footer/SocialIcons.tsx diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json index 9d892fcdc..d6cbf1f36 100644 --- a/public/locales/bg/common.json +++ b/public/locales/bg/common.json @@ -64,9 +64,7 @@ "contact": "Контакти", "privacy-policy": "Защита на лични данни", "terms-of-service": "Общи условия", - "hosting-partner": "Хостинг партньор:", - "copyrights": "Podkrepi.bg ©2022 Всички права запазени.", - "version": "Версия" + "copyrights": "Podkrepi.bg ©2022 Всички права запазени." } }, "or": "или", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 13d10913c..2d808d49d 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -64,9 +64,7 @@ "contact": "Contact", "privacy-policy": "Privacy Policy", "terms-of-service": "Terms of service", - "hosting-partner": "Hosting partner:", - "copyrights": "Podkrepi.bg ©2022 All rights reserved.", - "version": "Version" + "copyrights": "Podkrepi.bg ©2022 All rights reserved." } }, "or": "or", diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx deleted file mode 100644 index ae1894652..000000000 --- a/src/components/layout/Footer.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import { Grid, Container, lighten, useTheme, useMediaQuery } from '@mui/material' -import Link from 'next/link' -import { useRouter } from 'next/router' -import { useTranslation } from 'next-i18next' -import { Facebook, Instagram, LinkedIn, YouTube } from '@mui/icons-material' -import PodkrepiLogo from 'components/brand/PodkrepiLogo' -import ExternalLink from 'components/common/ExternalLink' -import { routes, socialUrls, staticUrls } from 'common/routes' - -type FooterLink = { - label: string - href: string - external?: boolean -} -const footerItems: FooterLink[][] = [ - [ - { label: 'components.footer.about-us', href: routes.about }, - { label: 'components.footer.about-project', href: routes.aboutProject }, - { label: 'components.footer.support', href: routes.support }, - { label: 'components.footer.contact', href: routes.contact }, - { external: true, label: 'nav.blog', href: staticUrls.blog }, - ], - [ - { external: true, label: 'GitHub', href: staticUrls.github }, - { external: true, label: 'components.footer.docs', href: staticUrls.projectDocs }, - { external: true, label: 'components.footer.dev-docs', href: staticUrls.devDocs }, - ], - [ - { label: 'components.footer.privacy-policy', href: routes.privacyPolicy }, - { label: 'components.footer.terms-of-service', href: routes.termsOfService }, - ], -] - -export default function Footer() { - return ( - ({ - backgroundColor: theme.palette.primary.dark, - color: lighten(theme.palette.primary.main, 0.75), - '& a': { - color: lighten(theme.palette.primary.main, 0.75), - '&:hover': { - color: lighten(theme.palette.primary.main, 0.55), - }, - }, - })}> - - ({ - xs: { - textAlign: 'center', - padding: theme.spacing(5, 0), - }, - textAlign: 'left', - padding: theme.spacing(5), - })}> - - - - - - - - - - ) -} - -const InfoGrid = () => { - const { t } = useTranslation() - const { locale } = useRouter() - - return ( - - - - - - - - - - - - {t('components.footer.copyrights')} - - {t('components.footer.hosting-partner')}{' '} - - SuperHosting.BG - - - {process.env.APP_VERSION && ( - - {t('components.footer.version')} {process.env.APP_VERSION} - - )} - - ) -} - -const SocialIcons = () => { - const theme = useTheme() - const sm = useMediaQuery(theme.breakpoints.up('sm')) - return ( - - - - - - - - - - - - - - - - - - - - - - - ) -} -const FooterLinks = () => { - const { t } = useTranslation() - return ( - - {footerItems.map((links, column) => ( - - - {links.map(({ label, href, external }, row) => ( - - {external ? ( - {t(label)} - ) : ( - - {t(label)} - - )} - - ))} - - - ))} - - ) -} diff --git a/src/components/layout/Footer/Footer.styled.tsx b/src/components/layout/Footer/Footer.styled.tsx new file mode 100644 index 000000000..39ff87e44 --- /dev/null +++ b/src/components/layout/Footer/Footer.styled.tsx @@ -0,0 +1,39 @@ +import { Container, Grid, lighten } from '@mui/material' +import { styled } from '@mui/system' + +import theme from 'common/theme' + +export const Root = styled(Container)(() => ({ + display: 'flex', + justifyContent: 'center', + textAlign: 'left', + backgroundColor: theme.palette.primary.dark, + color: lighten(theme.palette.primary.main, 0.75), + + '& a': { + color: lighten(theme.palette.primary.main, 0.75), + + '&:hover': { + color: lighten(theme.palette.primary.main, 0.55), + }, + }, +})) + +export const FooterWrapper = styled(Grid)(() => ({ + padding: theme.spacing(4), + + [theme.breakpoints.up('md')]: { + textAlign: 'left', + padding: theme.spacing(4, 0), + }, +})) + +export const InfoGridWrapper = styled(Grid)(() => ({ + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(3), + }, +})) + +export const FooterLinksWrapper = styled(Grid)(() => ({ + paddingTop: theme.spacing(3), +})) diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx new file mode 100644 index 000000000..83ec09ce6 --- /dev/null +++ b/src/components/layout/Footer/Footer.tsx @@ -0,0 +1,20 @@ +import { Grid } from '@mui/material' + +import { FooterWrapper, Root } from './Footer.styled' +import { InfoGrid } from './InfoGrid' +import { FooterLinks } from './FooterLinks' + +export default function Footer() { + return ( + + + + + + + + + + + ) +} diff --git a/src/components/layout/Footer/FooterData.tsx b/src/components/layout/Footer/FooterData.tsx new file mode 100644 index 000000000..f5884c793 --- /dev/null +++ b/src/components/layout/Footer/FooterData.tsx @@ -0,0 +1,26 @@ +import { routes, staticUrls } from 'common/routes' + +type FooterLink = { + label: string + href: string + external?: boolean +} + +export const footerItems: FooterLink[][] = [ + [ + { label: 'components.footer.about-us', href: routes.about }, + { label: 'components.footer.about-project', href: routes.aboutProject }, + { label: 'components.footer.support', href: routes.support }, + { label: 'components.footer.contact', href: routes.contact }, + { external: true, label: 'nav.blog', href: staticUrls.blog }, + ], + [ + { external: true, label: 'GitHub', href: staticUrls.github }, + { external: true, label: 'components.footer.docs', href: staticUrls.projectDocs }, + { external: true, label: 'components.footer.dev-docs', href: staticUrls.devDocs }, + ], + [ + { label: 'components.footer.privacy-policy', href: routes.privacyPolicy }, + { label: 'components.footer.terms-of-service', href: routes.termsOfService }, + ], +] diff --git a/src/components/layout/Footer/FooterLinks.tsx b/src/components/layout/Footer/FooterLinks.tsx new file mode 100644 index 000000000..41a893659 --- /dev/null +++ b/src/components/layout/Footer/FooterLinks.tsx @@ -0,0 +1,32 @@ +import { useTranslation } from 'next-i18next' +import Link from 'next/link' + +import { Grid } from '@mui/material' + +import ExternalLink from 'components/common/ExternalLink' + +import { footerItems } from './FooterData' +import { FooterLinksWrapper } from './Footer.styled' + +export const FooterLinks = () => { + const { t } = useTranslation() + return ( + + {footerItems.map((links, column) => ( + + {links.map(({ label, href, external }, row) => ( + + {external ? ( + {t(label)} + ) : ( + + {t(label)} + + )} + + ))} + + ))} + + ) +} diff --git a/src/components/layout/Footer/InfoGrid.tsx b/src/components/layout/Footer/InfoGrid.tsx new file mode 100644 index 000000000..115130366 --- /dev/null +++ b/src/components/layout/Footer/InfoGrid.tsx @@ -0,0 +1,32 @@ +import { useTranslation } from 'next-i18next' +import Link from 'next/link' +import { useRouter } from 'next/router' + +import { Grid } from '@mui/material' + +import { routes } from 'common/routes' +import PodkrepiLogo from 'components/brand/PodkrepiLogo' +import { SocialIcons } from './SocialIcons' + +import { InfoGridWrapper } from './Footer.styled' + +export const InfoGrid = () => { + const { t } = useTranslation() + const { locale } = useRouter() + + return ( + + + + + + + + + + + + {t('components.footer.copyrights')} + + ) +} diff --git a/src/components/layout/Footer/SocialIcons.tsx b/src/components/layout/Footer/SocialIcons.tsx new file mode 100644 index 000000000..ec3fd0ac4 --- /dev/null +++ b/src/components/layout/Footer/SocialIcons.tsx @@ -0,0 +1,32 @@ +import { Facebook, LinkedIn, YouTube, Instagram } from '@mui/icons-material' +import { Grid } from '@mui/material' + +import { socialUrls } from 'common/routes' +import ExternalLink from 'components/common/ExternalLink' + +export const SocialIcons = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index a2a3db914..50cd4bfdb 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -3,7 +3,7 @@ import { useMemo, useState } from 'react' import { useTranslation } from 'next-i18next' import { Box, BoxProps, Container, ContainerProps, Typography } from '@mui/material' -import Footer from 'components/layout/Footer' +import Footer from 'components/layout/Footer/Footer' import { defaultOgImage } from 'common/routes' import Snackbar from 'components/layout/Snackbar' import DetailsModal from 'components/modal/DetailsModal' From 8cd45f0bd39d2e45bdb1b396d2a8a7e27ad5d35e Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 8 Nov 2022 21:02:47 +0200 Subject: [PATCH 2/9] Update footer links --- .../layout/Footer/Footer.styled.tsx | 2 +- src/components/layout/Footer/Footer.tsx | 4 ++++ src/components/layout/Footer/FooterLinks.tsx | 5 +++-- src/components/layout/Footer/InfoGrid.tsx | 1 - .../Footer/{ => helpers}/FooterData.tsx | 19 ++++++++++++------- 5 files changed, 20 insertions(+), 11 deletions(-) rename src/components/layout/Footer/{ => helpers}/FooterData.tsx (53%) diff --git a/src/components/layout/Footer/Footer.styled.tsx b/src/components/layout/Footer/Footer.styled.tsx index 39ff87e44..112f589e9 100644 --- a/src/components/layout/Footer/Footer.styled.tsx +++ b/src/components/layout/Footer/Footer.styled.tsx @@ -30,7 +30,7 @@ export const FooterWrapper = styled(Grid)(() => ({ export const InfoGridWrapper = styled(Grid)(() => ({ [theme.breakpoints.up('sm')]: { - padding: theme.spacing(3), + padding: theme.spacing(3, 0), }, })) diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx index 83ec09ce6..8a2a0f42a 100644 --- a/src/components/layout/Footer/Footer.tsx +++ b/src/components/layout/Footer/Footer.tsx @@ -1,3 +1,4 @@ +import { useTranslation } from 'next-i18next' import { Grid } from '@mui/material' import { FooterWrapper, Root } from './Footer.styled' @@ -5,6 +6,8 @@ import { InfoGrid } from './InfoGrid' import { FooterLinks } from './FooterLinks' export default function Footer() { + const { t } = useTranslation() + return ( @@ -14,6 +17,7 @@ export default function Footer() { + {t('components.footer.copyrights')} ) diff --git a/src/components/layout/Footer/FooterLinks.tsx b/src/components/layout/Footer/FooterLinks.tsx index 41a893659..c27afacfa 100644 --- a/src/components/layout/Footer/FooterLinks.tsx +++ b/src/components/layout/Footer/FooterLinks.tsx @@ -5,15 +5,16 @@ import { Grid } from '@mui/material' import ExternalLink from 'components/common/ExternalLink' -import { footerItems } from './FooterData' +import { footerItems } from './helpers/FooterData' import { FooterLinksWrapper } from './Footer.styled' export const FooterLinks = () => { const { t } = useTranslation() + return ( {footerItems.map((links, column) => ( - + {links.map(({ label, href, external }, row) => ( {external ? ( diff --git a/src/components/layout/Footer/InfoGrid.tsx b/src/components/layout/Footer/InfoGrid.tsx index 115130366..e51cae6fd 100644 --- a/src/components/layout/Footer/InfoGrid.tsx +++ b/src/components/layout/Footer/InfoGrid.tsx @@ -26,7 +26,6 @@ export const InfoGrid = () => { - {t('components.footer.copyrights')} ) } diff --git a/src/components/layout/Footer/FooterData.tsx b/src/components/layout/Footer/helpers/FooterData.tsx similarity index 53% rename from src/components/layout/Footer/FooterData.tsx rename to src/components/layout/Footer/helpers/FooterData.tsx index f5884c793..d0231ab48 100644 --- a/src/components/layout/Footer/FooterData.tsx +++ b/src/components/layout/Footer/helpers/FooterData.tsx @@ -8,19 +8,24 @@ type FooterLink = { export const footerItems: FooterLink[][] = [ [ - { label: 'components.footer.about-us', href: routes.about }, + { label: 'nav.campaigns.all-campaigns', href: routes.campaigns.index }, + { label: 'nav.campaigns.create', href: routes.faq_campaigns }, + ], + [ + { label: 'nav.about.who-are-we', href: routes.about }, { label: 'components.footer.about-project', href: routes.aboutProject }, - { label: 'components.footer.support', href: routes.support }, - { label: 'components.footer.contact', href: routes.contact }, - { external: true, label: 'nav.blog', href: staticUrls.blog }, + { label: 'nav.about.support_us', href: routes.support_us }, + { label: 'components.footer.support', href: routes.reports }, + { label: 'nav.about.reports', href: routes.support }, ], [ - { external: true, label: 'GitHub', href: staticUrls.github }, - { external: true, label: 'components.footer.docs', href: staticUrls.projectDocs }, - { external: true, label: 'components.footer.dev-docs', href: staticUrls.devDocs }, + { external: true, label: 'nav.blog', href: staticUrls.blog }, + { label: 'components.footer.contact', href: routes.contact }, + { label: 'nav.campaigns.faq', href: routes.faq }, ], [ { label: 'components.footer.privacy-policy', href: routes.privacyPolicy }, { label: 'components.footer.terms-of-service', href: routes.termsOfService }, + { label: 'GitHub', href: staticUrls.github }, ], ] From ac542e863c55428f599602600003d42c1295e2d5 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 8 Nov 2022 21:20:11 +0200 Subject: [PATCH 3/9] Remove unused translations from footer, fix footer links --- public/locales/bg/common.json | 3 --- public/locales/en/common.json | 3 --- src/components/layout/Footer/helpers/FooterData.tsx | 6 +++--- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json index d6cbf1f36..c7ef2d64f 100644 --- a/public/locales/bg/common.json +++ b/public/locales/bg/common.json @@ -56,10 +56,7 @@ "link": "Линк", "components": { "footer": { - "about-us": "За доброволците", "about-project": "За проекта", - "docs": "Документация", - "dev-docs": "Техническа Документация", "support": "Станете доброволец", "contact": "Контакти", "privacy-policy": "Защита на лични данни", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 2d808d49d..3c631f114 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -56,10 +56,7 @@ "support": "Donate", "components": { "footer": { - "about-us": "About us", "about-project": "The project", - "docs": "Documentation", - "dev-docs": "Technical Documentation", "support": "Support us", "contact": "Contact", "privacy-policy": "Privacy Policy", diff --git a/src/components/layout/Footer/helpers/FooterData.tsx b/src/components/layout/Footer/helpers/FooterData.tsx index d0231ab48..5d4ee8a79 100644 --- a/src/components/layout/Footer/helpers/FooterData.tsx +++ b/src/components/layout/Footer/helpers/FooterData.tsx @@ -15,8 +15,8 @@ export const footerItems: FooterLink[][] = [ { label: 'nav.about.who-are-we', href: routes.about }, { label: 'components.footer.about-project', href: routes.aboutProject }, { label: 'nav.about.support_us', href: routes.support_us }, - { label: 'components.footer.support', href: routes.reports }, - { label: 'nav.about.reports', href: routes.support }, + { label: 'components.footer.support', href: routes.support }, + { label: 'nav.about.reports', href: routes.reports }, ], [ { external: true, label: 'nav.blog', href: staticUrls.blog }, @@ -26,6 +26,6 @@ export const footerItems: FooterLink[][] = [ [ { label: 'components.footer.privacy-policy', href: routes.privacyPolicy }, { label: 'components.footer.terms-of-service', href: routes.termsOfService }, - { label: 'GitHub', href: staticUrls.github }, + { external: true, label: 'GitHub', href: staticUrls.github }, ], ] From bd1f9d6a75732dfd4d899ee440dbd7538237cff3 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Fri, 11 Nov 2022 11:53:50 +0200 Subject: [PATCH 4/9] Add title abobe footer link groups --- public/locales/bg/common.json | 4 ++ public/locales/en/common.json | 4 ++ .../layout/Footer/Footer.styled.tsx | 3 +- src/components/layout/Footer/Footer.tsx | 6 +- src/components/layout/Footer/FooterLinks.tsx | 12 ++-- .../layout/Footer/helpers/FooterData.tsx | 62 ++++++++++++------- 6 files changed, 59 insertions(+), 32 deletions(-) diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json index c7ef2d64f..eedd14616 100644 --- a/public/locales/bg/common.json +++ b/public/locales/bg/common.json @@ -56,6 +56,10 @@ "link": "Линк", "components": { "footer": { + "donatе": "Дарете", + "about-us": "За нас", + "resources": "Ресурси", + "others": "Други", "about-project": "За проекта", "support": "Станете доброволец", "contact": "Контакти", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 3c631f114..5468e27b3 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -56,6 +56,10 @@ "support": "Donate", "components": { "footer": { + "donatе": "Donate", + "about-us": "About us", + "resources": "Resources", + "others": "Others", "about-project": "The project", "support": "Support us", "contact": "Contact", diff --git a/src/components/layout/Footer/Footer.styled.tsx b/src/components/layout/Footer/Footer.styled.tsx index 112f589e9..fa12f7f6c 100644 --- a/src/components/layout/Footer/Footer.styled.tsx +++ b/src/components/layout/Footer/Footer.styled.tsx @@ -22,8 +22,7 @@ export const Root = styled(Container)(() => ({ export const FooterWrapper = styled(Grid)(() => ({ padding: theme.spacing(4), - [theme.breakpoints.up('md')]: { - textAlign: 'left', + [theme.breakpoints.up('lg')]: { padding: theme.spacing(4, 0), }, })) diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx index 8a2a0f42a..98ec032d7 100644 --- a/src/components/layout/Footer/Footer.tsx +++ b/src/components/layout/Footer/Footer.tsx @@ -1,16 +1,18 @@ import { useTranslation } from 'next-i18next' + import { Grid } from '@mui/material' -import { FooterWrapper, Root } from './Footer.styled' import { InfoGrid } from './InfoGrid' import { FooterLinks } from './FooterLinks' +import { FooterWrapper, Root } from './Footer.styled' + export default function Footer() { const { t } = useTranslation() return ( - + diff --git a/src/components/layout/Footer/FooterLinks.tsx b/src/components/layout/Footer/FooterLinks.tsx index c27afacfa..0bf867ea7 100644 --- a/src/components/layout/Footer/FooterLinks.tsx +++ b/src/components/layout/Footer/FooterLinks.tsx @@ -1,11 +1,12 @@ import { useTranslation } from 'next-i18next' import Link from 'next/link' -import { Grid } from '@mui/material' +import { Grid, Typography } from '@mui/material' import ExternalLink from 'components/common/ExternalLink' import { footerItems } from './helpers/FooterData' + import { FooterLinksWrapper } from './Footer.styled' export const FooterLinks = () => { @@ -13,10 +14,11 @@ export const FooterLinks = () => { return ( - {footerItems.map((links, column) => ( - - {links.map(({ label, href, external }, row) => ( - + {footerItems.map((data, index) => ( + + {t(data.title)} + {data.links.map(({ label, href, external }, linkIndex) => ( + {external ? ( {t(label)} ) : ( diff --git a/src/components/layout/Footer/helpers/FooterData.tsx b/src/components/layout/Footer/helpers/FooterData.tsx index 5d4ee8a79..5fc8160f3 100644 --- a/src/components/layout/Footer/helpers/FooterData.tsx +++ b/src/components/layout/Footer/helpers/FooterData.tsx @@ -1,31 +1,47 @@ import { routes, staticUrls } from 'common/routes' -type FooterLink = { +export type FooterLink = { label: string href: string external?: boolean } -export const footerItems: FooterLink[][] = [ - [ - { label: 'nav.campaigns.all-campaigns', href: routes.campaigns.index }, - { label: 'nav.campaigns.create', href: routes.faq_campaigns }, - ], - [ - { label: 'nav.about.who-are-we', href: routes.about }, - { label: 'components.footer.about-project', href: routes.aboutProject }, - { label: 'nav.about.support_us', href: routes.support_us }, - { label: 'components.footer.support', href: routes.support }, - { label: 'nav.about.reports', href: routes.reports }, - ], - [ - { external: true, label: 'nav.blog', href: staticUrls.blog }, - { label: 'components.footer.contact', href: routes.contact }, - { label: 'nav.campaigns.faq', href: routes.faq }, - ], - [ - { label: 'components.footer.privacy-policy', href: routes.privacyPolicy }, - { label: 'components.footer.terms-of-service', href: routes.termsOfService }, - { external: true, label: 'GitHub', href: staticUrls.github }, - ], +type FooterSection = { + title: string + links: FooterLink[] +} + +export const footerItems: FooterSection[] = [ + { + title: 'components.footer.donatе', + links: [ + { label: 'components.footer.about-us', href: routes.about }, + { label: 'components.footer.about-project', href: routes.aboutProject }, + { label: 'components.footer.support', href: routes.support }, + { label: 'components.footer.contact', href: routes.contact }, + { external: true, label: 'nav.blog', href: staticUrls.blog }, + ], + }, + { + title: 'components.footer.about-us', + links: [ + { external: true, label: 'GitHub', href: staticUrls.github }, + { external: true, label: 'components.footer.docs', href: staticUrls.projectDocs }, + { external: true, label: 'components.footer.dev-docs', href: staticUrls.devDocs }, + ], + }, + { + title: 'components.footer.resources', + links: [ + { label: 'components.footer.privacy-policy', href: routes.privacyPolicy }, + { label: 'components.footer.terms-of-service', href: routes.termsOfService }, + ], + }, + { + title: 'components.footer.others', + links: [ + { label: 'components.footer.privacy-policy', href: routes.privacyPolicy }, + { label: 'components.footer.terms-of-service', href: routes.termsOfService }, + ], + }, ] From 9fa8b65c2bcdf620786f17087fdd601fbe263a5a Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Fri, 11 Nov 2022 12:46:10 +0200 Subject: [PATCH 5/9] Update footer links --- public/locales/bg/common.json | 6 ++++++ public/locales/en/common.json | 14 +++++++++---- .../layout/Footer/helpers/FooterData.tsx | 21 ++++++++++--------- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json index eedd14616..35bc7b21e 100644 --- a/public/locales/bg/common.json +++ b/public/locales/bg/common.json @@ -60,9 +60,15 @@ "about-us": "За нас", "resources": "Ресурси", "others": "Други", + "all-campaigns": "Всички кампании", + "suggest-campaign": "Предложете кампания", + "who-are-we": "Кои сме ние?", "about-project": "За проекта", + "support-us": "Подкрепете ни", "support": "Станете доброволец", + "reports": "Отчети", "contact": "Контакти", + "faq": "Често задавани въпроси", "privacy-policy": "Защита на лични данни", "terms-of-service": "Общи условия", "copyrights": "Podkrepi.bg ©2022 Всички права запазени." diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 5468e27b3..83ecde567 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -2,7 +2,7 @@ "nav": { "home": "Home", "about": { - "about-project": "The Project", + "about-project": "The project", "about-us": "About us", "who-are-we": "Who are we?", "support_us": "Support us", @@ -14,7 +14,7 @@ "index": "Campaigns", "all-campaigns": "All campaigns", "create": "Suggest a campaign", - "faq": "Frequently Asked Questions" + "faq": "Frequently asked questions" }, "admin": { "index": "Administration", @@ -60,11 +60,17 @@ "about-us": "About us", "resources": "Resources", "others": "Others", - "about-project": "The project", + "all-campaigns": "All campaigns", + "who-are-we": "Who are We?", + "suggest-campaign": "Suggest a campaign", + "about-project": "About the project", + "support-us": "Support us", "support": "Support us", + "reports": "Reports", "contact": "Contact", + "faq": "Frequently asked questions", "privacy-policy": "Privacy Policy", - "terms-of-service": "Terms of service", + "terms-of-service": "Terms of Service", "copyrights": "Podkrepi.bg ©2022 All rights reserved." } }, diff --git a/src/components/layout/Footer/helpers/FooterData.tsx b/src/components/layout/Footer/helpers/FooterData.tsx index 5fc8160f3..6c631fd49 100644 --- a/src/components/layout/Footer/helpers/FooterData.tsx +++ b/src/components/layout/Footer/helpers/FooterData.tsx @@ -15,26 +15,26 @@ export const footerItems: FooterSection[] = [ { title: 'components.footer.donatе', links: [ - { label: 'components.footer.about-us', href: routes.about }, - { label: 'components.footer.about-project', href: routes.aboutProject }, - { label: 'components.footer.support', href: routes.support }, - { label: 'components.footer.contact', href: routes.contact }, - { external: true, label: 'nav.blog', href: staticUrls.blog }, + { label: 'components.footer.all-campaigns', href: routes.campaigns.index }, + { label: 'components.footer.suggest-campaign', href: routes.campaigns.create }, ], }, { title: 'components.footer.about-us', links: [ - { external: true, label: 'GitHub', href: staticUrls.github }, - { external: true, label: 'components.footer.docs', href: staticUrls.projectDocs }, - { external: true, label: 'components.footer.dev-docs', href: staticUrls.devDocs }, + { label: 'components.footer.who-are-we', href: routes.about }, + { label: 'components.footer.about-project', href: routes.aboutProject }, + { label: 'components.footer.support-us', href: routes.support_us }, + { label: 'components.footer.support', href: routes.support }, + { label: 'components.footer.reports', href: routes.reports }, ], }, { title: 'components.footer.resources', links: [ - { label: 'components.footer.privacy-policy', href: routes.privacyPolicy }, - { label: 'components.footer.terms-of-service', href: routes.termsOfService }, + { external: true, label: 'nav.blog', href: staticUrls.blog }, + { label: 'components.footer.contact', href: routes.contact }, + { label: 'components.footer.faq', href: routes.faq }, ], }, { @@ -42,6 +42,7 @@ export const footerItems: FooterSection[] = [ links: [ { label: 'components.footer.privacy-policy', href: routes.privacyPolicy }, { label: 'components.footer.terms-of-service', href: routes.termsOfService }, + { external: true, label: 'GitHub', href: staticUrls.github }, ], }, ] From 7bc457ac7cabfa46ecee5dd8d054cd7876a6a51d Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Fri, 11 Nov 2022 12:52:44 +0200 Subject: [PATCH 6/9] Fix footer links translations --- public/locales/bg/common.json | 2 +- public/locales/en/common.json | 4 ++-- src/components/layout/Footer/helpers/FooterData.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json index 35bc7b21e..3da910bff 100644 --- a/public/locales/bg/common.json +++ b/public/locales/bg/common.json @@ -65,7 +65,7 @@ "who-are-we": "Кои сме ние?", "about-project": "За проекта", "support-us": "Подкрепете ни", - "support": "Станете доброволец", + "vecome-a-volunteer": "Станете доброволец", "reports": "Отчети", "contact": "Контакти", "faq": "Често задавани въпроси", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 83ecde567..ab578b0f6 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -61,11 +61,11 @@ "resources": "Resources", "others": "Others", "all-campaigns": "All campaigns", - "who-are-we": "Who are We?", + "who-are-we": "Who are we?", "suggest-campaign": "Suggest a campaign", "about-project": "About the project", "support-us": "Support us", - "support": "Support us", + "vecome-a-volunteer": "Become a volunteer", "reports": "Reports", "contact": "Contact", "faq": "Frequently asked questions", diff --git a/src/components/layout/Footer/helpers/FooterData.tsx b/src/components/layout/Footer/helpers/FooterData.tsx index 6c631fd49..9473dcb1d 100644 --- a/src/components/layout/Footer/helpers/FooterData.tsx +++ b/src/components/layout/Footer/helpers/FooterData.tsx @@ -25,7 +25,7 @@ export const footerItems: FooterSection[] = [ { label: 'components.footer.who-are-we', href: routes.about }, { label: 'components.footer.about-project', href: routes.aboutProject }, { label: 'components.footer.support-us', href: routes.support_us }, - { label: 'components.footer.support', href: routes.support }, + { label: 'components.footer.vecome-a-volunteer', href: routes.support }, { label: 'components.footer.reports', href: routes.reports }, ], }, From c14665b3665500ec9801809426819bd39d17392d Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Fri, 11 Nov 2022 12:56:14 +0200 Subject: [PATCH 7/9] Fix translation typo --- public/locales/bg/common.json | 2 +- public/locales/en/common.json | 2 +- src/components/layout/Footer/helpers/FooterData.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json index 3da910bff..77ccfdcd4 100644 --- a/public/locales/bg/common.json +++ b/public/locales/bg/common.json @@ -65,7 +65,7 @@ "who-are-we": "Кои сме ние?", "about-project": "За проекта", "support-us": "Подкрепете ни", - "vecome-a-volunteer": "Станете доброволец", + "become-a-volunteer": "Станете доброволец", "reports": "Отчети", "contact": "Контакти", "faq": "Често задавани въпроси", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index ab578b0f6..221140550 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -65,7 +65,7 @@ "suggest-campaign": "Suggest a campaign", "about-project": "About the project", "support-us": "Support us", - "vecome-a-volunteer": "Become a volunteer", + "become-a-volunteer": "Become a volunteer", "reports": "Reports", "contact": "Contact", "faq": "Frequently asked questions", diff --git a/src/components/layout/Footer/helpers/FooterData.tsx b/src/components/layout/Footer/helpers/FooterData.tsx index 9473dcb1d..00a9e0526 100644 --- a/src/components/layout/Footer/helpers/FooterData.tsx +++ b/src/components/layout/Footer/helpers/FooterData.tsx @@ -25,7 +25,7 @@ export const footerItems: FooterSection[] = [ { label: 'components.footer.who-are-we', href: routes.about }, { label: 'components.footer.about-project', href: routes.aboutProject }, { label: 'components.footer.support-us', href: routes.support_us }, - { label: 'components.footer.vecome-a-volunteer', href: routes.support }, + { label: 'components.footer.become-a-volunteer', href: routes.support }, { label: 'components.footer.reports', href: routes.reports }, ], }, From d0ff2d7cc371c628733b3004004932c12df547ca Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Fri, 11 Nov 2022 23:01:41 +0200 Subject: [PATCH 8/9] Style footer titles --- src/components/layout/Footer/Footer.styled.tsx | 15 ++++++++++++++- src/components/layout/Footer/FooterLinks.tsx | 15 +++++++-------- .../layout/Footer/helpers/FooterData.tsx | 2 +- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/components/layout/Footer/Footer.styled.tsx b/src/components/layout/Footer/Footer.styled.tsx index fa12f7f6c..1e5c7b560 100644 --- a/src/components/layout/Footer/Footer.styled.tsx +++ b/src/components/layout/Footer/Footer.styled.tsx @@ -1,4 +1,4 @@ -import { Container, Grid, lighten } from '@mui/material' +import { Container, Grid, lighten, Typography } from '@mui/material' import { styled } from '@mui/system' import theme from 'common/theme' @@ -36,3 +36,16 @@ export const InfoGridWrapper = styled(Grid)(() => ({ export const FooterLinksWrapper = styled(Grid)(() => ({ paddingTop: theme.spacing(3), })) + +export const FooterLinkTitle = styled(Typography)(() => ({ + fontWeight: 600, + fontSize: theme.typography.pxToRem(16), + marginBottom: theme.spacing(1), + paddingBottom: theme.spacing(0.5), + width: 'fit-content', + borderBottom: '2px solid #B0E5FF', +})) + +export const FooterLink = styled(Grid)(() => ({ + padding: theme.spacing(0.5, 0), +})) diff --git a/src/components/layout/Footer/FooterLinks.tsx b/src/components/layout/Footer/FooterLinks.tsx index 0bf867ea7..9fe31467b 100644 --- a/src/components/layout/Footer/FooterLinks.tsx +++ b/src/components/layout/Footer/FooterLinks.tsx @@ -1,24 +1,23 @@ import { useTranslation } from 'next-i18next' import Link from 'next/link' -import { Grid, Typography } from '@mui/material' +import { Grid } from '@mui/material' import ExternalLink from 'components/common/ExternalLink' +import { footerLinks } from './helpers/FooterData' -import { footerItems } from './helpers/FooterData' - -import { FooterLinksWrapper } from './Footer.styled' +import { FooterLink, FooterLinksWrapper, FooterLinkTitle } from './Footer.styled' export const FooterLinks = () => { const { t } = useTranslation() return ( - {footerItems.map((data, index) => ( + {footerLinks.map((data, index) => ( - {t(data.title)} + {t(data.title)} {data.links.map(({ label, href, external }, linkIndex) => ( - + {external ? ( {t(label)} ) : ( @@ -26,7 +25,7 @@ export const FooterLinks = () => { {t(label)} )} - + ))} ))} diff --git a/src/components/layout/Footer/helpers/FooterData.tsx b/src/components/layout/Footer/helpers/FooterData.tsx index 00a9e0526..76fd74115 100644 --- a/src/components/layout/Footer/helpers/FooterData.tsx +++ b/src/components/layout/Footer/helpers/FooterData.tsx @@ -11,7 +11,7 @@ type FooterSection = { links: FooterLink[] } -export const footerItems: FooterSection[] = [ +export const footerLinks: FooterSection[] = [ { title: 'components.footer.donatе', links: [ From fba1943a2e7f8063deb08e0e8929409e5fcbf901 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Sat, 12 Nov 2022 22:36:49 +0200 Subject: [PATCH 9/9] Fix responsive styles for Footer --- .../layout/Footer/Footer.styled.tsx | 32 +++++++++------ src/components/layout/Footer/Footer.tsx | 18 ++++----- src/components/layout/Footer/FooterLinks.tsx | 4 +- .../{InfoGrid.tsx => LogoSocialIcons.tsx} | 14 ++----- src/components/layout/Footer/SocialIcons.tsx | 39 ++++++++----------- yarn.lock | 12 ------ 6 files changed, 50 insertions(+), 69 deletions(-) rename src/components/layout/Footer/{InfoGrid.tsx => LogoSocialIcons.tsx} (61%) diff --git a/src/components/layout/Footer/Footer.styled.tsx b/src/components/layout/Footer/Footer.styled.tsx index 1e5c7b560..fff0a7ef8 100644 --- a/src/components/layout/Footer/Footer.styled.tsx +++ b/src/components/layout/Footer/Footer.styled.tsx @@ -20,21 +20,20 @@ export const Root = styled(Container)(() => ({ })) export const FooterWrapper = styled(Grid)(() => ({ - padding: theme.spacing(4), - - [theme.breakpoints.up('lg')]: { - padding: theme.spacing(4, 0), - }, + margin: theme.spacing(5), })) -export const InfoGridWrapper = styled(Grid)(() => ({ +export const FooterLinksWrapper = styled(Grid)(() => ({ + margin: theme.spacing(6, 0, 3, 0), + [theme.breakpoints.up('sm')]: { - padding: theme.spacing(3, 0), + marginTop: 0, }, -})) -export const FooterLinksWrapper = styled(Grid)(() => ({ - paddingTop: theme.spacing(3), + [theme.breakpoints.up('md')]: { + display: 'inline-flex', + gap: theme.spacing(1), + }, })) export const FooterLinkTitle = styled(Typography)(() => ({ @@ -43,9 +42,20 @@ export const FooterLinkTitle = styled(Typography)(() => ({ marginBottom: theme.spacing(1), paddingBottom: theme.spacing(0.5), width: 'fit-content', - borderBottom: '2px solid #B0E5FF', + borderBottom: `2px solid ${lighten(theme.palette.primary.main, 0.4)}`, })) export const FooterLink = styled(Grid)(() => ({ padding: theme.spacing(0.5, 0), })) + +export const Copyright = styled(Grid)(() => ({ + borderTop: `2px solid ${lighten(theme.palette.primary.main, 0.4)}`, + paddingTop: theme.spacing(3), +})) + +export const SocialIconsWrapper = styled(Grid)(() => ({ + display: 'flex', + gap: theme.spacing(1), + marginTop: theme.spacing(2), +})) diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx index 98ec032d7..f997e9c7f 100644 --- a/src/components/layout/Footer/Footer.tsx +++ b/src/components/layout/Footer/Footer.tsx @@ -1,11 +1,9 @@ import { useTranslation } from 'next-i18next' -import { Grid } from '@mui/material' - -import { InfoGrid } from './InfoGrid' +import { LogoSocialIcons } from './LogoSocialIcons' import { FooterLinks } from './FooterLinks' -import { FooterWrapper, Root } from './Footer.styled' +import { Copyright, FooterWrapper, Root } from './Footer.styled' export default function Footer() { const { t } = useTranslation() @@ -13,13 +11,11 @@ export default function Footer() { return ( - - - - - - - {t('components.footer.copyrights')} + + + + {t('components.footer.copyrights')} + ) diff --git a/src/components/layout/Footer/FooterLinks.tsx b/src/components/layout/Footer/FooterLinks.tsx index 9fe31467b..fa6bff6d2 100644 --- a/src/components/layout/Footer/FooterLinks.tsx +++ b/src/components/layout/Footer/FooterLinks.tsx @@ -12,9 +12,9 @@ export const FooterLinks = () => { const { t } = useTranslation() return ( - + {footerLinks.map((data, index) => ( - + {t(data.title)} {data.links.map(({ label, href, external }, linkIndex) => ( diff --git a/src/components/layout/Footer/InfoGrid.tsx b/src/components/layout/Footer/LogoSocialIcons.tsx similarity index 61% rename from src/components/layout/Footer/InfoGrid.tsx rename to src/components/layout/Footer/LogoSocialIcons.tsx index e51cae6fd..98c9108fb 100644 --- a/src/components/layout/Footer/InfoGrid.tsx +++ b/src/components/layout/Footer/LogoSocialIcons.tsx @@ -1,4 +1,3 @@ -import { useTranslation } from 'next-i18next' import Link from 'next/link' import { useRouter } from 'next/router' @@ -8,14 +7,11 @@ import { routes } from 'common/routes' import PodkrepiLogo from 'components/brand/PodkrepiLogo' import { SocialIcons } from './SocialIcons' -import { InfoGridWrapper } from './Footer.styled' - -export const InfoGrid = () => { - const { t } = useTranslation() +export const LogoSocialIcons = () => { const { locale } = useRouter() return ( - + @@ -23,9 +19,7 @@ export const InfoGrid = () => { - - - - + + ) } diff --git a/src/components/layout/Footer/SocialIcons.tsx b/src/components/layout/Footer/SocialIcons.tsx index ec3fd0ac4..5c5c2b097 100644 --- a/src/components/layout/Footer/SocialIcons.tsx +++ b/src/components/layout/Footer/SocialIcons.tsx @@ -1,32 +1,25 @@ import { Facebook, LinkedIn, YouTube, Instagram } from '@mui/icons-material' -import { Grid } from '@mui/material' import { socialUrls } from 'common/routes' import ExternalLink from 'components/common/ExternalLink' +import { SocialIconsWrapper } from './Footer.styled' + export const SocialIcons = () => { return ( - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + ) } diff --git a/yarn.lock b/yarn.lock index 2dacbb380..d57dc5531 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6266,11 +6266,6 @@ pegjs@^0.10.0: resolved "https://registry.yarnpkg.com/pegjs/-/pegjs-0.10.0.tgz#cf8bafae6eddff4b5a7efb185269eaaf4610ddbd" integrity sha1-z4uvrm7d/0tafvsYUmnqr0YQ3b0= -performance-now@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz" - integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= - picocolors@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz" @@ -6595,13 +6590,6 @@ quill@^1.3.7, quill@^1.x: parchment "^1.1.4" quill-delta "^3.6.2" -raf@^3.4.0: - version "3.4.1" - resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz" - integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== - dependencies: - performance-now "^2.1.0" - ramda@^0.26.1: version "0.26.1" resolved "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz"