From 3db990f3c01649a86bfeba807228c16c971d1305 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Sat, 6 Aug 2022 15:34:48 +0300 Subject: [PATCH 1/4] Update global menu - initial changes --- public/locales/bg/common.json | 5 +-- public/locales/en/common.json | 5 +-- src/components/layout/nav/DonationMenu.tsx | 4 --- src/components/layout/nav/GenericMenu.tsx | 10 +++--- src/components/layout/nav/MainNavMenu.tsx | 36 ++++++++++------------ src/components/layout/nav/PublicMenu.tsx | 13 ++------ 6 files changed, 32 insertions(+), 41 deletions(-) diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json index f08d1924e..b011163be 100644 --- a/public/locales/bg/common.json +++ b/public/locales/bg/common.json @@ -26,9 +26,10 @@ "open-source": "Отворен Код", "open-data": "Отворени Данни" }, - "donation-menu": "Дарете", + "donatе": "Дарете", + "donation-menu": "Дарителство", "blog": "Блог", - "support_us_button": "Подкрепи Подкрепи.бг", + "support_us_button": "Подкрепете ни", "profile": "Моят профил", "login": "Вход", "login-with": "Вход с", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index a1f148267..bae9c0fb9 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -26,9 +26,10 @@ "open-source": "Open Source", "open-data": "Open Data" }, - "donation-menu": "Donatе", + "donatе": "Donate", + "donation-menu": "Donation", "blog": "Blog", - "support_us_button": "Support Podkrepi.bg", + "support_us_button": "Support us", "profile": "Profile", "login": "Login", "login-with": "Login with", diff --git a/src/components/layout/nav/DonationMenu.tsx b/src/components/layout/nav/DonationMenu.tsx index 38f575440..8d34731f2 100644 --- a/src/components/layout/nav/DonationMenu.tsx +++ b/src/components/layout/nav/DonationMenu.tsx @@ -24,11 +24,7 @@ const StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({ }, [`& .${classes.dropdownLinkText}`]: { - color: theme.palette.primary.dark, width: '100%', - '&:hover': { - color: theme.palette.primary.main, - }, }, })) diff --git a/src/components/layout/nav/GenericMenu.tsx b/src/components/layout/nav/GenericMenu.tsx index d61aeeb62..d366ffcc5 100644 --- a/src/components/layout/nav/GenericMenu.tsx +++ b/src/components/layout/nav/GenericMenu.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { Button, Menu } from '@mui/material' -import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp' -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' +import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp' type Props = { label: string @@ -19,10 +19,12 @@ export default function GenericMenu({ label, children }: Props) { <> - - - - + - + - + - + + {/* + + */} {children} ) diff --git a/src/components/layout/nav/PublicMenu.tsx b/src/components/layout/nav/PublicMenu.tsx index d958c15b0..9618d134f 100644 --- a/src/components/layout/nav/PublicMenu.tsx +++ b/src/components/layout/nav/PublicMenu.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { styled } from '@mui/material/styles' import { useTranslation } from 'next-i18next' -import PersonOutlineIcon from '@mui/icons-material/PersonOutline' +import PersonIcon from '@mui/icons-material/Person' import { Grid, IconButton, Menu, Typography, lighten, Avatar } from '@mui/material' import { routes } from 'common/routes' @@ -47,15 +47,8 @@ export default function PublicMenu() { return ( - - - - + + Date: Sat, 6 Aug 2022 20:40:46 +0300 Subject: [PATCH 2/4] Change language switch color, change nav height --- src/components/index/sections/Jumbotron.tsx | 1 - src/components/layout/AppNavBar.tsx | 3 +-- src/components/layout/LocaleButton.tsx | 4 ++-- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/index/sections/Jumbotron.tsx b/src/components/index/sections/Jumbotron.tsx index 1ed30a391..7eebfe036 100644 --- a/src/components/index/sections/Jumbotron.tsx +++ b/src/components/index/sections/Jumbotron.tsx @@ -40,7 +40,6 @@ export default function Jumbotron() { xs: 3, md: 5, lg: 7, - xl: 9, }, textAlign: 'center', color: theme.palette.common.white, diff --git a/src/components/layout/AppNavBar.tsx b/src/components/layout/AppNavBar.tsx index 40ccb7762..1c2b45a3e 100644 --- a/src/components/layout/AppNavBar.tsx +++ b/src/components/layout/AppNavBar.tsx @@ -30,8 +30,7 @@ export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) { sx={(theme) => ({ overflow: 'hidden', transition: 'height .5s, background-color .5s ease 0s', - height: theme.spacing(14), - lineHeight: theme.spacing(14), + height: theme.spacing(11), [theme.breakpoints.down('md')]: { height: theme.spacing(10), }, diff --git a/src/components/layout/LocaleButton.tsx b/src/components/layout/LocaleButton.tsx index a11756dda..2b2dc0a08 100644 --- a/src/components/layout/LocaleButton.tsx +++ b/src/components/layout/LocaleButton.tsx @@ -20,14 +20,14 @@ export default function LocaleButton() { if (router.locale === 'bg') { return ( - ) } return ( - ) From c56e93779328240895172ee2ee2ddcbfd176876d Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Sat, 6 Aug 2022 22:26:53 +0300 Subject: [PATCH 3/4] Fixed spacings, icon's sizes, added icon to locale switcher --- src/components/layout/nav/MainNavMenu.tsx | 7 +++++-- src/components/layout/nav/PrivateMenu.tsx | 2 +- src/components/layout/nav/PublicMenu.tsx | 22 ++++++++++++++++++---- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/components/layout/nav/MainNavMenu.tsx b/src/components/layout/nav/MainNavMenu.tsx index a3cb21947..88c097c75 100644 --- a/src/components/layout/nav/MainNavMenu.tsx +++ b/src/components/layout/nav/MainNavMenu.tsx @@ -11,7 +11,7 @@ export default function MainNavMenu({ children }: { children?: React.ReactNode } const { t } = useTranslation() return ( - + diff --git a/src/components/layout/nav/PrivateMenu.tsx b/src/components/layout/nav/PrivateMenu.tsx index c0c82836e..48f5488e4 100644 --- a/src/components/layout/nav/PrivateMenu.tsx +++ b/src/components/layout/nav/PrivateMenu.tsx @@ -67,7 +67,7 @@ export default function PrivateMenu() { return ( - + {session?.user?.picture ? ( ) : ( diff --git a/src/components/layout/nav/PublicMenu.tsx b/src/components/layout/nav/PublicMenu.tsx index 9618d134f..f0c3429d6 100644 --- a/src/components/layout/nav/PublicMenu.tsx +++ b/src/components/layout/nav/PublicMenu.tsx @@ -2,12 +2,13 @@ import React, { useState } from 'react' import { styled } from '@mui/material/styles' import { useTranslation } from 'next-i18next' import PersonIcon from '@mui/icons-material/Person' -import { Grid, IconButton, Menu, Typography, lighten, Avatar } from '@mui/material' +import { Grid, Button, Menu, Typography, lighten } from '@mui/material' +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' +import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp' import { routes } from 'common/routes' import LinkMenuItem from 'components/common/LinkMenuItem' -import theme from 'common/theme' import { useSession } from 'next-auth/react' const PREFIX = 'PublicMenu' @@ -15,6 +16,7 @@ const PREFIX = 'PublicMenu' const classes = { dropdownLinkButton: `${PREFIX}-dropdownLinkButton`, dropdownLinkText: `${PREFIX}-dropdownLinkText`, + dropdownArrowIcon: `${PREFIX}-dropdownArrowIcon`, } const StyledGrid = styled(Grid)(({ theme }) => ({ @@ -31,12 +33,17 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ color: theme.palette.primary.main, }, }, + + [`& .${classes.dropdownArrowIcon}`]: { + marginLeft: '2px', + }, })) export default function PublicMenu() { const { t } = useTranslation() const { data: session } = useSession() const [anchorEl, setAnchorEl] = useState(null) + const open = Boolean(anchorEl) const handleMenu = (event: React.MouseEvent) => setAnchorEl(event.currentTarget) const handleClose = () => setAnchorEl(null) @@ -47,9 +54,16 @@ export default function PublicMenu() { return ( - + Date: Wed, 17 Aug 2022 19:59:23 +0300 Subject: [PATCH 4/4] Change nav menu tabs --- public/locales/bg/common.json | 4 +++- public/locales/en/common.json | 6 ++++-- src/components/layout/AppNavBar.tsx | 6 +++--- src/components/layout/nav/DonationMenu.tsx | 10 +--------- src/components/layout/nav/MainNavMenu.tsx | 8 -------- src/components/layout/nav/ProjectMenu.tsx | 18 +++++++++++++----- 6 files changed, 24 insertions(+), 28 deletions(-) diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json index b011163be..487c41b10 100644 --- a/public/locales/bg/common.json +++ b/public/locales/bg/common.json @@ -4,6 +4,7 @@ "about": { "about-project": "За проекта", "about-us": "За нас", + "who-are-we": "Кои сме ние?", "support_us": "Подкрепете ни", "support-us": "Станете доброволец", "reports": "Отчети", @@ -11,6 +12,7 @@ }, "campaigns": { "index": "Кампании", + "all-campaigns": "Всички кампании", "create": "Предложете кампания", "faq": "Често задавани въпроси" }, @@ -27,7 +29,7 @@ "open-data": "Отворени Данни" }, "donatе": "Дарете", - "donation-menu": "Дарителство", + "donation-menu": "Кампании", "blog": "Блог", "support_us_button": "Подкрепете ни", "profile": "Моят профил", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index bae9c0fb9..8e67d2640 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -4,6 +4,7 @@ "about": { "about-project": "The Project", "about-us": "About us", + "who-are-we": "Who are we?", "support_us": "Support us", "support-us": "Join us", "reports": "Reports", @@ -11,7 +12,8 @@ }, "campaigns": { "index": "Campaigns", - "create": "Suggest campaign", + "all-campaigns": "All campaigns", + "create": "Suggest a campaign", "faq": "Frequently Asked Questions" }, "admin": { @@ -27,7 +29,7 @@ "open-data": "Open Data" }, "donatе": "Donate", - "donation-menu": "Donation", + "donation-menu": "Campaigns", "blog": "Blog", "support_us_button": "Support us", "profile": "Profile", diff --git a/src/components/layout/AppNavBar.tsx b/src/components/layout/AppNavBar.tsx index 1c2b45a3e..afc6dd51a 100644 --- a/src/components/layout/AppNavBar.tsx +++ b/src/components/layout/AppNavBar.tsx @@ -32,11 +32,11 @@ export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) { transition: 'height .5s, background-color .5s ease 0s', height: theme.spacing(11), [theme.breakpoints.down('md')]: { - height: theme.spacing(10), + height: theme.spacing(8), }, '&.shrink': { - height: theme.spacing(10), - lineHeight: theme.spacing(10), + height: theme.spacing(8), + lineHeight: theme.spacing(8), backgroundColor: 'hsla(0,0%,100%,0.85)', backdropFilter: 'saturate(180%) blur(5px)', }, diff --git a/src/components/layout/nav/DonationMenu.tsx b/src/components/layout/nav/DonationMenu.tsx index 8d34731f2..0d431327b 100644 --- a/src/components/layout/nav/DonationMenu.tsx +++ b/src/components/layout/nav/DonationMenu.tsx @@ -37,20 +37,12 @@ type NavItem = { const allNavItems: NavItem[] = [ { href: routes.campaigns.index, - label: 'nav.campaigns.index', + label: 'nav.campaigns.all-campaigns', }, { href: routes.faq_campaigns, //temporarily lead to FAQ label: 'nav.campaigns.create', }, - { - href: routes.termsOfService, - label: 'components.footer.terms-of-service', - }, - { - href: routes.faq, - label: 'nav.campaigns.faq', - }, ] export const navItems = allNavItems.filter((el) => typeof el.enabled === 'undefined' ?? el.enabled) diff --git a/src/components/layout/nav/MainNavMenu.tsx b/src/components/layout/nav/MainNavMenu.tsx index 88c097c75..257eb83eb 100644 --- a/src/components/layout/nav/MainNavMenu.tsx +++ b/src/components/layout/nav/MainNavMenu.tsx @@ -21,14 +21,6 @@ export default function MainNavMenu({ children }: { children?: React.ReactNode } {t('nav.donatе')} - - - diff --git a/src/components/layout/nav/ProjectMenu.tsx b/src/components/layout/nav/ProjectMenu.tsx index 5208a0e1f..38588c763 100644 --- a/src/components/layout/nav/ProjectMenu.tsx +++ b/src/components/layout/nav/ProjectMenu.tsx @@ -40,12 +40,12 @@ type NavItem = { const allNavItems: NavItem[] = [ { - href: routes.aboutProject, - label: 'nav.about.about-project', + href: routes.about, + label: 'nav.about.who-are-we', }, { - href: routes.about, - label: 'nav.about.about-us', + href: routes.aboutProject, + label: 'nav.about.about-project', }, { href: routes.support_us, @@ -63,6 +63,14 @@ const allNavItems: NavItem[] = [ href: routes.contact, label: 'nav.about.contacts', }, + { + href: routes.termsOfService, + label: 'components.footer.terms-of-service', + }, + { + href: routes.faq, + label: 'nav.campaigns.faq', + }, ] export const navItems = allNavItems.filter((el) => typeof el.enabled === 'undefined' ?? el.enabled) @@ -72,7 +80,7 @@ export default function ProjectMenu() { const router = useRouter() return ( - + {navItems.map(({ href, label }, key) => (