From 3a11ed9a2e34d1356343a0d4337df8fe6055183c Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Wed, 24 Apr 2024 16:30:49 -0400 Subject: [PATCH 01/40] Update bottom and left spacing of navigation items --- src/components/ui/page/Layout/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx index 1098e8ac30..69a5de2be1 100644 --- a/src/components/ui/page/Layout/index.tsx +++ b/src/components/ui/page/Layout/index.tsx @@ -49,8 +49,9 @@ export default function Layout() { flexDirection="column" flexGrow="1" position="fixed" - w="4.25rem" - minHeight={{ base: undefined, md: '100vh' }} + w={12} + ml={6} + minHeight={{ base: undefined, md: `calc(100vh - ${HEADER_HEIGHT})` }} > From 9bfc108516264cdcf10812e77a6d4904f611e33b Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Wed, 24 Apr 2024 16:32:01 -0400 Subject: [PATCH 02/40] Update container for the second set of navigation items --- .../Navigation/NavigationExternalLink.tsx | 1 + .../ui/page/Navigation/NavigationLinks.tsx | 28 +++++++++++++------ src/i18n/LanguageSwitcher.tsx | 3 +- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx index 18e115bc99..33a9fcbb8f 100644 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ b/src/components/ui/page/Navigation/NavigationExternalLink.tsx @@ -39,6 +39,7 @@ export function NavigationExternalLink({ justifyContent="space-between" alignItems="center" _hover={{ color: 'gold.500-hover', cursor: 'pointer' }} + my={3} > diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 10729233bc..98f9310bc2 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; import { Home, Tree, @@ -13,7 +13,6 @@ import { DAO_ROUTES } from '../../../../constants/routes'; import { URL_FAQ, URL_DISCORD, URL_DOCS } from '../../../../constants/url'; import { LanguageSwitcher } from '../../../../i18n/LanguageSwitcher'; import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider'; -import Divider from '../../utils/Divider'; import { NavigationExternalLink } from './NavigationExternalLink'; import { NavigationLink } from './NavigationLink'; @@ -79,12 +78,18 @@ export function NavigationLinks({ - - - - + + + ); } diff --git a/src/i18n/LanguageSwitcher.tsx b/src/i18n/LanguageSwitcher.tsx index 4dccc5922d..4513c4b9b9 100644 --- a/src/i18n/LanguageSwitcher.tsx +++ b/src/i18n/LanguageSwitcher.tsx @@ -23,9 +23,10 @@ export function LanguageSwitcher() { gap={8} justifyContent="space-between" alignItems="center" + my={3} > From bb3b95b28852b0313ba5e7028879c83e7df34c26 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Wed, 24 Apr 2024 16:56:21 -0400 Subject: [PATCH 03/40] Reskin the top navigation group, make it show up in the correct position --- .../ui/page/Navigation/NavigationLink.tsx | 1 + .../ui/page/Navigation/NavigationLinks.tsx | 140 ++++++++++-------- src/components/ui/page/Navigation/index.tsx | 2 +- 3 files changed, 83 insertions(+), 60 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 9818af6f66..81cb529d45 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -52,6 +52,7 @@ export function NavigationLink({ gap={8} justifyContent="space-between" alignItems="center" + my={3} {...activeColors()} > void; -}) { - const { addressPrefix } = useNetworkConfig(); +function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { return ( - <> - {showDAOLinks && address && ( - <> - - - - - - - - - )} + + + ); +} + +export function NavigationLinks({ + address, + showDAOLinks, + closeDrawer, +}: { + showDAOLinks: boolean; + address: string | null; + closeDrawer?: () => void; +}) { + const { addressPrefix } = useNetworkConfig(); + + if (!showDAOLinks || !address) { + return ; + } + + return ( + <> + + + + + + + + + + ); } diff --git a/src/components/ui/page/Navigation/index.tsx b/src/components/ui/page/Navigation/index.tsx index 13ff4898ef..247fcd4d12 100644 --- a/src/components/ui/page/Navigation/index.tsx +++ b/src/components/ui/page/Navigation/index.tsx @@ -12,7 +12,7 @@ function Navigation() { From 81bf40d3d5339376f436bd6fa235b25efc6d1285 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Wed, 24 Apr 2024 17:17:34 -0400 Subject: [PATCH 04/40] Update icons to phospher icons --- .../Navigation/NavigationExternalLink.tsx | 7 ++-- .../ui/page/Navigation/NavigationLink.tsx | 16 +++------ .../ui/page/Navigation/NavigationLinks.tsx | 35 ++++++++++--------- src/i18n/LanguageSwitcher.tsx | 7 ++-- 4 files changed, 28 insertions(+), 37 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx index 33a9fcbb8f..f5859a99c2 100644 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ b/src/components/ui/page/Navigation/NavigationExternalLink.tsx @@ -1,4 +1,5 @@ -import { Box, ComponentWithAs, Hide, IconProps, Text } from '@chakra-ui/react'; +import { Box, Hide, Text } from '@chakra-ui/react'; +import { Icon as PhospherIcon } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { NavigationTooltip } from './NavigationTooltip'; @@ -8,7 +9,7 @@ interface INavigationLink { href: string; testId: string; routeKey?: string; - Icon: ComponentWithAs<'svg', IconProps>; + Icon: PhospherIcon; closeDrawer?: () => void; } @@ -41,7 +42,7 @@ export function NavigationExternalLink({ _hover={{ color: 'gold.500-hover', cursor: 'pointer' }} my={3} > - + {t(tooltipKey)} diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 81cb529d45..272218a201 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -1,4 +1,5 @@ -import { Box, ComponentWithAs, Hide, IconProps, Text } from '@chakra-ui/react'; +import { Box, Hide, Text } from '@chakra-ui/react'; +import { Icon as PhospherIcon } from '@phosphor-icons/react'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { Link, useMatch } from 'react-router-dom'; @@ -9,7 +10,7 @@ interface INavigationLink { labelKey: string; tooltipKey?: string; testId: string; - Icon: ComponentWithAs<'svg', IconProps>; + Icon: PhospherIcon; target?: string; rel?: string; closeDrawer?: () => void; @@ -55,16 +56,7 @@ export function NavigationLink({ my={3} {...activeColors()} > - + {t(labelKey)} diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index b8d5e16676..61710c24a7 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -1,14 +1,15 @@ import { Box, Flex } from '@chakra-ui/react'; +// import { SupportQuestion, Discord, Documents } from '@decent-org/fractal-ui'; import { - Home, - Tree, - Proposals, - Treasury, - SupportQuestion, - Discord, - Documents, - Templates, -} from '@decent-org/fractal-ui'; + House, + GitFork, + Scroll, + Coins, + SquaresFour, + Question, + DiscordLogo, + BookOpen, +} from '@phosphor-icons/react'; import { DAO_ROUTES } from '../../../../constants/routes'; import { URL_FAQ, URL_DISCORD, URL_DOCS } from '../../../../constants/url'; import { LanguageSwitcher } from '../../../../i18n/LanguageSwitcher'; @@ -43,7 +44,7 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { ariaLabelKey="ariaLabelFAQ" tooltipKey="faq" testId="navigationExternal-faq" - Icon={SupportQuestion} + Icon={Question} closeDrawer={closeDrawer} /> void }) { ariaLabelKey="ariaLabelDiscord" tooltipKey="discord" testId="navigationExternal-discord" - Icon={Discord} + Icon={DiscordLogo} closeDrawer={closeDrawer} /> void }) { ariaLabelKey="ariaLabelDocumentation" tooltipKey="documentation" testId="navigationExternal-documentation" - Icon={Documents} + Icon={BookOpen} closeDrawer={closeDrawer} /> @@ -113,35 +114,35 @@ export function NavigationLinks({ href={DAO_ROUTES.dao.relative(addressPrefix, address)} labelKey="home" testId="navigation-daoHomeLink" - Icon={Home} + Icon={House} closeDrawer={closeDrawer} /> diff --git a/src/i18n/LanguageSwitcher.tsx b/src/i18n/LanguageSwitcher.tsx index 4513c4b9b9..a9da7ee2dd 100644 --- a/src/i18n/LanguageSwitcher.tsx +++ b/src/i18n/LanguageSwitcher.tsx @@ -1,5 +1,5 @@ import { Box, Center, Hide, Text } from '@chakra-ui/react'; -import { Globe } from '@decent-org/fractal-ui'; +import { GlobeSimple } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { OptionMenu } from '../components/ui/menus/OptionMenu'; import { supportedLanguages } from '.'; @@ -25,10 +25,7 @@ export function LanguageSwitcher() { alignItems="center" my={3} > - + {t(i18n.language.slice(0, 2))} From 4be70c07928d7dafdd8aa8aae354482c4c2173c4 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Wed, 24 Apr 2024 17:27:58 -0400 Subject: [PATCH 05/40] Tweak bottom margin of button groups to match left/right margin --- src/components/ui/page/Navigation/NavigationLinks.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 61710c24a7..ab178150e6 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -22,7 +22,7 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { Date: Wed, 24 Apr 2024 17:31:15 -0400 Subject: [PATCH 06/40] Fix misspelling --- src/components/ui/page/Navigation/NavigationExternalLink.tsx | 4 ++-- src/components/ui/page/Navigation/NavigationLink.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx index f5859a99c2..87eb9fa036 100644 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ b/src/components/ui/page/Navigation/NavigationExternalLink.tsx @@ -1,5 +1,5 @@ import { Box, Hide, Text } from '@chakra-ui/react'; -import { Icon as PhospherIcon } from '@phosphor-icons/react'; +import { Icon as PhosphorIcon } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { NavigationTooltip } from './NavigationTooltip'; @@ -9,7 +9,7 @@ interface INavigationLink { href: string; testId: string; routeKey?: string; - Icon: PhospherIcon; + Icon: PhosphorIcon; closeDrawer?: () => void; } diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 272218a201..3c49472587 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -1,5 +1,5 @@ import { Box, Hide, Text } from '@chakra-ui/react'; -import { Icon as PhospherIcon } from '@phosphor-icons/react'; +import { Icon as PhosphorIcon } from '@phosphor-icons/react'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { Link, useMatch } from 'react-router-dom'; @@ -10,7 +10,7 @@ interface INavigationLink { labelKey: string; tooltipKey?: string; testId: string; - Icon: PhospherIcon; + Icon: PhosphorIcon; target?: string; rel?: string; closeDrawer?: () => void; From 294d3b24ba888b2d20272773fc21845f65c56def Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Wed, 24 Apr 2024 18:18:04 -0400 Subject: [PATCH 07/40] Allow for more granular stroke/fill customization per icon in nav menu, if needed --- .../page/Navigation/NavigationExternalLink.tsx | 5 ++--- .../ui/page/Navigation/NavigationLink.tsx | 5 ++--- .../ui/page/Navigation/NavigationLinks.tsx | 17 ++++++++--------- src/i18n/LanguageSwitcher.tsx | 2 +- 4 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx index 87eb9fa036..4f03562165 100644 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ b/src/components/ui/page/Navigation/NavigationExternalLink.tsx @@ -1,5 +1,4 @@ import { Box, Hide, Text } from '@chakra-ui/react'; -import { Icon as PhosphorIcon } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { NavigationTooltip } from './NavigationTooltip'; @@ -9,7 +8,7 @@ interface INavigationLink { href: string; testId: string; routeKey?: string; - Icon: PhosphorIcon; + Icon: JSX.Element; closeDrawer?: () => void; } @@ -42,7 +41,7 @@ export function NavigationExternalLink({ _hover={{ color: 'gold.500-hover', cursor: 'pointer' }} my={3} > - + {Icon} {t(tooltipKey)} diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 3c49472587..7f9e98ad1b 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -1,5 +1,4 @@ import { Box, Hide, Text } from '@chakra-ui/react'; -import { Icon as PhosphorIcon } from '@phosphor-icons/react'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { Link, useMatch } from 'react-router-dom'; @@ -10,7 +9,7 @@ interface INavigationLink { labelKey: string; tooltipKey?: string; testId: string; - Icon: PhosphorIcon; + Icon: JSX.Element; target?: string; rel?: string; closeDrawer?: () => void; @@ -56,7 +55,7 @@ export function NavigationLink({ my={3} {...activeColors()} > - + {Icon} {t(labelKey)} diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index ab178150e6..3c040e75d6 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -1,5 +1,4 @@ import { Box, Flex } from '@chakra-ui/react'; -// import { SupportQuestion, Discord, Documents } from '@decent-org/fractal-ui'; import { House, GitFork, @@ -44,7 +43,7 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { ariaLabelKey="ariaLabelFAQ" tooltipKey="faq" testId="navigationExternal-faq" - Icon={Question} + Icon={} closeDrawer={closeDrawer} /> void }) { ariaLabelKey="ariaLabelDiscord" tooltipKey="discord" testId="navigationExternal-discord" - Icon={DiscordLogo} + Icon={} closeDrawer={closeDrawer} /> void }) { ariaLabelKey="ariaLabelDocumentation" tooltipKey="documentation" testId="navigationExternal-documentation" - Icon={BookOpen} + Icon={} closeDrawer={closeDrawer} /> @@ -114,35 +113,35 @@ export function NavigationLinks({ href={DAO_ROUTES.dao.relative(addressPrefix, address)} labelKey="home" testId="navigation-daoHomeLink" - Icon={House} + Icon={} closeDrawer={closeDrawer} /> } closeDrawer={closeDrawer} /> } closeDrawer={closeDrawer} /> } closeDrawer={closeDrawer} /> } closeDrawer={closeDrawer} /> diff --git a/src/i18n/LanguageSwitcher.tsx b/src/i18n/LanguageSwitcher.tsx index a9da7ee2dd..ef727b1117 100644 --- a/src/i18n/LanguageSwitcher.tsx +++ b/src/i18n/LanguageSwitcher.tsx @@ -25,7 +25,7 @@ export function LanguageSwitcher() { alignItems="center" my={3} > - + {t(i18n.language.slice(0, 2))} From b1ce44fd09e7f0f6b29cab89aa4d6449cd282da3 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Thu, 25 Apr 2024 09:48:06 -0400 Subject: [PATCH 08/40] Inline showing all of the various links, or not --- .../ui/page/Navigation/NavigationLinks.tsx | 110 +++++++++--------- 1 file changed, 54 insertions(+), 56 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 3c040e75d6..857af56122 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -87,65 +87,63 @@ export function NavigationLinks({ }) { const { addressPrefix } = useNetworkConfig(); - if (!showDAOLinks || !address) { - return ; - } - return ( <> - - - } - closeDrawer={closeDrawer} - /> - } - closeDrawer={closeDrawer} - /> - } - closeDrawer={closeDrawer} - /> - } - closeDrawer={closeDrawer} - /> - } - closeDrawer={closeDrawer} - /> - - + + } + closeDrawer={closeDrawer} + /> + } + closeDrawer={closeDrawer} + /> + } + closeDrawer={closeDrawer} + /> + } + closeDrawer={closeDrawer} + /> + } + closeDrawer={closeDrawer} + /> + + + )} ); From 22400fcdaf756d6a9422e58b676a3a20e389c3a2 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Thu, 25 Apr 2024 13:46:02 -0400 Subject: [PATCH 09/40] Make the "external links" navigation group icons slide open all pretty like --- src/components/ui/menus/OptionMenu/index.tsx | 1 - src/components/ui/page/Layout/index.tsx | 1 - .../Navigation/NavigationExternalLink.tsx | 42 ++++++++----------- .../ui/page/Navigation/NavigationLinks.tsx | 16 +++++-- src/i18n/LanguageSwitcher.tsx | 38 +++++++---------- 5 files changed, 45 insertions(+), 53 deletions(-) diff --git a/src/components/ui/menus/OptionMenu/index.tsx b/src/components/ui/menus/OptionMenu/index.tsx index ebc030a2e3..3a5862e431 100644 --- a/src/components/ui/menus/OptionMenu/index.tsx +++ b/src/components/ui/menus/OptionMenu/index.tsx @@ -41,7 +41,6 @@ export function OptionMenu({ > ) => { event.stopPropagation(); }} diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx index 69a5de2be1..42378602ca 100644 --- a/src/components/ui/page/Layout/index.tsx +++ b/src/components/ui/page/Layout/index.tsx @@ -49,7 +49,6 @@ export default function Layout() { flexDirection="column" flexGrow="1" position="fixed" - w={12} ml={6} minHeight={{ base: undefined, md: `calc(100vh - ${HEADER_HEIGHT})` }} > diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx index 4f03562165..6515b00e7c 100644 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ b/src/components/ui/page/Navigation/NavigationExternalLink.tsx @@ -1,6 +1,5 @@ import { Box, Hide, Text } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; -import { NavigationTooltip } from './NavigationTooltip'; interface INavigationLink { tooltipKey: string; @@ -24,29 +23,24 @@ export function NavigationExternalLink({ const { t } = useTranslation('navigation'); return ( - - + - - {Icon} - - {t(tooltipKey)} - - - - + {Icon} + {t(tooltipKey)} + + {t(tooltipKey)} + + + ); } diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 857af56122..6c8341ce5c 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -22,10 +22,14 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { width="full" mt={4} mb={6} + maxWidth={12} + _hover={{ maxWidth: '100%' }} + transitionDuration="0.5s" > void }) { borderTopColor={'neutral-3'} borderLeftColor={'neutral-3'} borderRightColor={'neutral-3'} + overflow={'hidden'} > void }) { /> @@ -88,7 +96,7 @@ export function NavigationLinks({ const { addressPrefix } = useNetworkConfig(); return ( - <> + {showDAOLinks && address && ( )} - + ); } diff --git a/src/i18n/LanguageSwitcher.tsx b/src/i18n/LanguageSwitcher.tsx index ef727b1117..b3e8bd32ce 100644 --- a/src/i18n/LanguageSwitcher.tsx +++ b/src/i18n/LanguageSwitcher.tsx @@ -1,4 +1,4 @@ -import { Box, Center, Hide, Text } from '@chakra-ui/react'; +import { Box, Hide, Text, Flex } from '@chakra-ui/react'; import { GlobeSimple } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { OptionMenu } from '../components/ui/menus/OptionMenu'; @@ -14,27 +14,19 @@ export function LanguageSwitcher() { }; }); return ( -
- - - - {t(i18n.language.slice(0, 2))} - - - } - options={supported} - namespace="languages" - tooltipKey="tooltipTitle" - /> -
+ + + {t('tooltipTitle')} + + {t(i18n.language.slice(0, 2))} + + + } + options={supported} + namespace="languages" + /> ); } From efbbc2e673657f98ee66c3125ccac98feaea6927 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Thu, 25 Apr 2024 13:52:57 -0400 Subject: [PATCH 10/40] Auto show the external links navigation button set on 2xl screen size --- src/components/ui/page/Navigation/NavigationLinks.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 6c8341ce5c..5e9105d90a 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -22,7 +22,7 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { width="full" mt={4} mb={6} - maxWidth={12} + maxWidth={{ base: 12, '2xl': '100%' }} _hover={{ maxWidth: '100%' }} transitionDuration="0.5s" > From 27ccdb12159cf48d39d7d02f62e212b11d30b931 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Thu, 25 Apr 2024 15:15:27 -0400 Subject: [PATCH 11/40] Make the buttons autoexpand at a fresh new 3xl breakpoint --- package-lock.json | 8 ++++---- package.json | 2 +- src/components/ui/page/Navigation/NavigationLinks.tsx | 5 ++++- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd46723409..006648e29a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "@adraffy/ens-normalize": "^1.10.1", "@apollo/client": "^3.7.10", "@chakra-ui/react": "^2.8.2", - "@decent-org/fractal-ui": "^0.2.5", + "@decent-org/fractal-ui": "^0.3.0", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@ethersproject/abstract-signer": "^5.7.0", @@ -3428,9 +3428,9 @@ } }, "node_modules/@decent-org/fractal-ui": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/@decent-org/fractal-ui/-/fractal-ui-0.2.5.tgz", - "integrity": "sha512-yZ36jooF79NH9moBQCZG7S1VdToCLVk7tL9V/nFDJXBrAcRSK0jeHsuzzFwPZLsmyRfRiBYegnmciiEC7CD6tg==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@decent-org/fractal-ui/-/fractal-ui-0.3.0.tgz", + "integrity": "sha512-FBzepg8+ykXdTI9K8lTbdj1l5IuxplSetKECErlCuBdyU4ZLV04gVMKVfD7X8/FLCP+UzpBtf2XXF+cePpyUTA==", "peerDependencies": { "@chakra-ui/react": "^2.3.4", "@phosphor-icons/react": "^2.1.4", diff --git a/package.json b/package.json index fb0531216d..c6eecce344 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "@adraffy/ens-normalize": "^1.10.1", "@apollo/client": "^3.7.10", "@chakra-ui/react": "^2.8.2", - "@decent-org/fractal-ui": "^0.2.5", + "@decent-org/fractal-ui": "^0.3.0", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@ethersproject/abstract-signer": "^5.7.0", diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 5e9105d90a..ce2242106c 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -22,7 +22,7 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { width="full" mt={4} mb={6} - maxWidth={{ base: 12, '2xl': '100%' }} + maxWidth={{ base: 12, '3xl': '100%' }} _hover={{ maxWidth: '100%' }} transitionDuration="0.5s" > @@ -102,6 +102,9 @@ export function NavigationLinks({ width="full" height="full" marginY="auto" + // maxWidth={{ base: 12, '2xl': '100%' }} + // _hover={{ maxWidth: '100%' }} + // transitionDuration="0.5s" > Date: Thu, 25 Apr 2024 15:18:27 -0400 Subject: [PATCH 12/40] Remove redundant code --- src/components/ui/page/Navigation/NavigationLinks.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index ce2242106c..0e6e89c9af 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -38,9 +38,7 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { borderTopWidth={1} borderLeftWidth={1} borderRightWidth={1} - borderTopColor={'neutral-3'} - borderLeftColor={'neutral-3'} - borderRightColor={'neutral-3'} + borderColor={'neutral-3'} overflow={'hidden'} > Date: Thu, 25 Apr 2024 15:21:38 -0400 Subject: [PATCH 13/40] Fix location of first set of navigation icons --- src/components/ui/page/Navigation/NavigationLinks.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 0e6e89c9af..f22d448702 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -94,7 +94,7 @@ export function NavigationLinks({ const { addressPrefix } = useNetworkConfig(); return ( - + <> {showDAOLinks && address && ( )} - + ); } From 841f063aabb4986832107fb7a7a9bea2d4aa8912 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Thu, 25 Apr 2024 15:27:36 -0400 Subject: [PATCH 14/40] Fix the location and expand behavior for real this time I hope --- .../ui/page/Navigation/NavigationLinks.tsx | 15 ++++++++----- src/components/ui/page/Navigation/index.tsx | 21 +++++++------------ 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index f22d448702..98bea10d01 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -94,15 +94,20 @@ export function NavigationLinks({ const { addressPrefix } = useNetworkConfig(); return ( - <> + {showDAOLinks && address && ( )} - + ); } diff --git a/src/components/ui/page/Navigation/index.tsx b/src/components/ui/page/Navigation/index.tsx index 247fcd4d12..75d1df99b2 100644 --- a/src/components/ui/page/Navigation/index.tsx +++ b/src/components/ui/page/Navigation/index.tsx @@ -1,4 +1,4 @@ -import { Flex, Show } from '@chakra-ui/react'; +import { Show } from '@chakra-ui/react'; import { useFractal } from '../../../../providers/App/AppProvider'; import { NavigationLinks } from './NavigationLinks'; @@ -9,19 +9,12 @@ function Navigation() { const showDAOLinks = !!daoAddress; return ( - - - - - + + + ); } From 9cc40e5c52412580e1911a5faaa8d9875b20016e Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Thu, 25 Apr 2024 15:58:24 -0400 Subject: [PATCH 15/40] More tweaking --- .../Navigation/NavigationExternalLink.tsx | 37 +++++++++---------- .../ui/page/Navigation/NavigationLinks.tsx | 11 ++---- 2 files changed, 22 insertions(+), 26 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx index 6515b00e7c..a16e187c87 100644 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ b/src/components/ui/page/Navigation/NavigationExternalLink.tsx @@ -1,4 +1,4 @@ -import { Box, Hide, Text } from '@chakra-ui/react'; +import { Box, Hide, Text, Flex } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; interface INavigationLink { @@ -23,24 +23,23 @@ export function NavigationExternalLink({ const { t } = useTranslation('navigation'); return ( - - + - {Icon} - {t(tooltipKey)} - - {t(tooltipKey)} - - - + + {Icon} + {t(tooltipKey)} + + {t(tooltipKey)} + + + + ); } diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 98bea10d01..f2125b99a4 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -20,19 +20,16 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { return ( - void }) { Icon={} closeDrawer={closeDrawer} /> - + Date: Thu, 25 Apr 2024 22:22:59 -0400 Subject: [PATCH 16/40] Clean up top set of navigation items --- .../Navigation/NavigationExternalLink.tsx | 7 ++- .../ui/page/Navigation/NavigationLink.tsx | 45 ++++++------------- .../ui/page/Navigation/NavigationLinks.tsx | 41 ++++++++--------- src/i18n/LanguageSwitcher.tsx | 7 ++- 4 files changed, 44 insertions(+), 56 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx index a16e187c87..7b21d48fd7 100644 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ b/src/components/ui/page/Navigation/NavigationExternalLink.tsx @@ -34,7 +34,12 @@ export function NavigationExternalLink({ > {Icon} - {t(tooltipKey)} + + {t(tooltipKey)} + {t(tooltipKey)} diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 7f9e98ad1b..a53a290057 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -1,13 +1,10 @@ -import { Box, Hide, Text } from '@chakra-ui/react'; -import { useCallback } from 'react'; +import { Box, Hide, Text, Flex } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; -import { Link, useMatch } from 'react-router-dom'; -import { NavigationTooltip } from './NavigationTooltip'; +import { Link } from 'react-router-dom'; interface INavigationLink { href: string; labelKey: string; - tooltipKey?: string; testId: string; Icon: JSX.Element; target?: string; @@ -19,48 +16,34 @@ export function NavigationLink({ labelKey, testId, Icon, - tooltipKey, closeDrawer, href, ...rest }: INavigationLink) { - const tooltipTranslationKey = tooltipKey || labelKey; - const { t } = useTranslation('navigation'); - const isActive = useMatch(href); - - const activeColors = useCallback(() => { - return { - color: isActive ? 'gold.500' : 'inherit', - _hover: { - color: 'gold.500-hover', - }, - }; - }, [isActive]); return ( - + - - {Icon} + + {Icon} + + {t(labelKey)} + {t(labelKey)} - + - + ); } diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index f2125b99a4..8db041e362 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -19,7 +19,6 @@ import { NavigationLink } from './NavigationLink'; function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { return ( void }) { transitionDuration="0.5s" > void }) { /> @@ -99,23 +97,20 @@ export function NavigationLinks({ > {showDAOLinks && address && ( - } closeDrawer={closeDrawer} /> - + )} diff --git a/src/i18n/LanguageSwitcher.tsx b/src/i18n/LanguageSwitcher.tsx index b3e8bd32ce..1f5a9a870d 100644 --- a/src/i18n/LanguageSwitcher.tsx +++ b/src/i18n/LanguageSwitcher.tsx @@ -18,7 +18,9 @@ export function LanguageSwitcher() { offset={[16, 8]} trigger={ - + + + {t('tooltipTitle')} {t(i18n.language.slice(0, 2))} @@ -27,6 +29,9 @@ export function LanguageSwitcher() { } options={supported} namespace="languages" + buttonProps={{ + width: 'full', + }} /> ); } From 64fd19137b9e7addf879516987616e1f15e12b15 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Thu, 25 Apr 2024 22:28:20 -0400 Subject: [PATCH 17/40] Fix spacing around top nav group --- src/components/ui/page/Navigation/NavigationLinks.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 8db041e362..f002416b89 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -97,14 +97,14 @@ export function NavigationLinks({ > {showDAOLinks && address && ( Date: Thu, 25 Apr 2024 22:43:03 -0400 Subject: [PATCH 18/40] Remove seemingly unnecessary css property --- src/components/ui/page/Layout/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx index 42378602ca..47a04416d6 100644 --- a/src/components/ui/page/Layout/index.tsx +++ b/src/components/ui/page/Layout/index.tsx @@ -47,7 +47,6 @@ export default function Layout() { area={'nav'} display="flex" flexDirection="column" - flexGrow="1" position="fixed" ml={6} minHeight={{ base: undefined, md: `calc(100vh - ${HEADER_HEIGHT})` }} From ab0301cd68c8f6edd33369e751727e41eb7a1559 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Thu, 25 Apr 2024 22:48:17 -0400 Subject: [PATCH 19/40] Fix location where hover expansion happens --- src/components/ui/page/Navigation/NavigationLinks.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index f002416b89..8bd4fd1d73 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -96,13 +96,11 @@ export function NavigationLinks({ flexGrow={1} > {showDAOLinks && address && ( - + Date: Fri, 26 Apr 2024 09:51:11 -0400 Subject: [PATCH 20/40] Fix icon type, set size in shared component --- src/components/ui/page/Navigation/NavigationLink.tsx | 7 ++++--- src/components/ui/page/Navigation/NavigationLinks.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index a53a290057..43ad9206dd 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -1,4 +1,5 @@ import { Box, Hide, Text, Flex } from '@chakra-ui/react'; +import { Icon } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; @@ -6,7 +7,7 @@ interface INavigationLink { href: string; labelKey: string; testId: string; - Icon: JSX.Element; + NavigationIcon: Icon; target?: string; rel?: string; closeDrawer?: () => void; @@ -15,7 +16,7 @@ interface INavigationLink { export function NavigationLink({ labelKey, testId, - Icon, + NavigationIcon, closeDrawer, href, ...rest @@ -32,7 +33,7 @@ export function NavigationLink({ onClick={closeDrawer} > - {Icon} + {} } + NavigationIcon={House} closeDrawer={closeDrawer} /> } + NavigationIcon={GitFork} closeDrawer={closeDrawer} /> } + NavigationIcon={Scroll} closeDrawer={closeDrawer} /> } + NavigationIcon={Coins} closeDrawer={closeDrawer} /> } + NavigationIcon={SquaresFour} closeDrawer={closeDrawer} /> From b9ce2770c6995bb6c213e5776b24565dfcf728cb Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Fri, 26 Apr 2024 09:51:27 -0400 Subject: [PATCH 21/40] Remove unneeded brackets --- src/components/ui/page/Navigation/NavigationExternalLink.tsx | 5 +++-- src/components/ui/page/Navigation/NavigationLink.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx index 7b21d48fd7..61c6141d05 100644 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ b/src/components/ui/page/Navigation/NavigationExternalLink.tsx @@ -1,4 +1,5 @@ import { Box, Hide, Text, Flex } from '@chakra-ui/react'; +import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; interface INavigationLink { @@ -7,7 +8,7 @@ interface INavigationLink { href: string; testId: string; routeKey?: string; - Icon: JSX.Element; + Icon: ReactElement; closeDrawer?: () => void; } @@ -36,7 +37,7 @@ export function NavigationExternalLink({ {Icon} {t(tooltipKey)} diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 43ad9206dd..86ad0c6fad 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -36,7 +36,7 @@ export function NavigationLink({ {} {t(labelKey)} From ece2b362d5a2ec0c3c6ca868d1e60de4b4b22102 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Fri, 26 Apr 2024 10:27:47 -0400 Subject: [PATCH 22/40] Fix small spacing issue --- .../ui/page/Navigation/NavigationLinks.tsx | 136 ++++++++++-------- 1 file changed, 78 insertions(+), 58 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index d7e244a516..679997d3bd 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -63,13 +63,13 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { @@ -77,17 +77,85 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { ); } -export function NavigationLinks({ +function InternalLinks({ address, showDAOLinks, closeDrawer, }: { - showDAOLinks: boolean; address: string | null; + showDAOLinks: boolean; closeDrawer?: () => void; }) { const { addressPrefix } = useNetworkConfig(); + if (!showDAOLinks || !address) { + return null; + } + + return ( + + + + + + + + + + ); +} + +export function NavigationLinks({ + address, + showDAOLinks, + closeDrawer, +}: { + showDAOLinks: boolean; + address: string | null; + closeDrawer?: () => void; +}) { return ( - {showDAOLinks && address && ( - - - - - - - - - - )} + ); From a13cb0ce8e436fe1dba74269059bffd87fc1bc3e Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Fri, 26 Apr 2024 11:03:37 -0400 Subject: [PATCH 23/40] Do Icon cleanup and property consolidation with External links too --- .../ui/page/Navigation/NavigationExternalLink.tsx | 8 ++++---- src/components/ui/page/Navigation/NavigationLinks.tsx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx index 61c6141d05..b91399eaba 100644 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ b/src/components/ui/page/Navigation/NavigationExternalLink.tsx @@ -1,5 +1,5 @@ import { Box, Hide, Text, Flex } from '@chakra-ui/react'; -import { ReactElement } from 'react'; +import { Icon } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; interface INavigationLink { @@ -8,7 +8,7 @@ interface INavigationLink { href: string; testId: string; routeKey?: string; - Icon: ReactElement; + NavigationIcon: Icon; closeDrawer?: () => void; } @@ -16,7 +16,7 @@ export function NavigationExternalLink({ tooltipKey, ariaLabelKey, testId, - Icon, + NavigationIcon, routeKey, closeDrawer, ...rest @@ -34,7 +34,7 @@ export function NavigationExternalLink({ rel="noreferrer noopener" > - {Icon} + {} void }) { ariaLabelKey="ariaLabelFAQ" tooltipKey="faq" testId="navigationExternal-faq" - Icon={} + NavigationIcon={Question} closeDrawer={closeDrawer} /> void }) { ariaLabelKey="ariaLabelDiscord" tooltipKey="discord" testId="navigationExternal-discord" - Icon={} + NavigationIcon={DiscordLogo} closeDrawer={closeDrawer} /> void }) { ariaLabelKey="ariaLabelDocumentation" tooltipKey="documentation" testId="navigationExternal-documentation" - Icon={} + NavigationIcon={BookOpen} closeDrawer={closeDrawer} /> From 95e0488d9a88fa25ab398ae8f7bd6c531e00751d Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Fri, 26 Apr 2024 11:28:57 -0400 Subject: [PATCH 24/40] DRY up the NavigationLink and NavigationExternalLink into one component --- .../Navigation/NavigationExternalLink.tsx | 51 -------- .../ui/page/Navigation/NavigationLink.tsx | 114 +++++++++++++----- .../ui/page/Navigation/NavigationLinks.tsx | 24 ++-- src/i18n/locales/en/navigation.json | 5 +- src/i18n/locales/uk/navigation.json | 5 +- 5 files changed, 99 insertions(+), 100 deletions(-) delete mode 100644 src/components/ui/page/Navigation/NavigationExternalLink.tsx diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx deleted file mode 100644 index b91399eaba..0000000000 --- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Box, Hide, Text, Flex } from '@chakra-ui/react'; -import { Icon } from '@phosphor-icons/react'; -import { useTranslation } from 'react-i18next'; - -interface INavigationLink { - tooltipKey: string; - ariaLabelKey: string; - href: string; - testId: string; - routeKey?: string; - NavigationIcon: Icon; - closeDrawer?: () => void; -} - -export function NavigationExternalLink({ - tooltipKey, - ariaLabelKey, - testId, - NavigationIcon, - routeKey, - closeDrawer, - ...rest -}: INavigationLink) { - const { t } = useTranslation('navigation'); - - return ( - - - - {} - - {t(tooltipKey)} - - - {t(tooltipKey)} - - - - - ); -} diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 86ad0c6fad..19a52c0460 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -1,50 +1,102 @@ import { Box, Hide, Text, Flex } from '@chakra-ui/react'; import { Icon } from '@phosphor-icons/react'; +import { TFunction } from 'i18next'; +import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; -interface INavigationLink { - href: string; +function LinkContainer({ link }: { link: ReactElement }) { + return {link}; +} + +function LinkContent({ + labelKey, + NavigationIcon, + t, +}: { labelKey: string; - testId: string; NavigationIcon: Icon; - target?: string; - rel?: string; - closeDrawer?: () => void; + t: TFunction<'navigation', undefined>; +}) { + return ( + + {} + + {t(labelKey)} + + + {t(labelKey)} + + + ); } export function NavigationLink({ + href, labelKey, testId, NavigationIcon, + scope, closeDrawer, - href, ...rest -}: INavigationLink) { +}: { + href: string; + labelKey: string; + testId: string; + NavigationIcon: Icon; + scope: 'internal' | 'external'; + closeDrawer?: () => void; +}) { const { t } = useTranslation('navigation'); - return ( - - - - {} - - {t(labelKey)} - - - {t(labelKey)} - - - - + const linkContent = ( + ); + + if (scope === 'internal') { + return ( + + {linkContent} + + } + /> + ); + } + + if (scope === 'external') { + return ( + + {linkContent} + + } + /> + ); + } + + return null; } diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 5c454c2715..6609e3e5f8 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -13,7 +13,6 @@ import { DAO_ROUTES } from '../../../../constants/routes'; import { URL_FAQ, URL_DISCORD, URL_DOCS } from '../../../../constants/url'; import { LanguageSwitcher } from '../../../../i18n/LanguageSwitcher'; import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider'; -import { NavigationExternalLink } from './NavigationExternalLink'; import { NavigationLink } from './NavigationLink'; function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { @@ -36,28 +35,28 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { borderLeftWidth={1} borderRightWidth={1} > - - - @@ -112,6 +111,7 @@ function InternalLinks({ labelKey="home" testId="navigation-daoHomeLink" NavigationIcon={House} + scope="internal" closeDrawer={closeDrawer} /> diff --git a/src/i18n/locales/en/navigation.json b/src/i18n/locales/en/navigation.json index 9a8f2c0b73..abfbc55ea1 100644 --- a/src/i18n/locales/en/navigation.json +++ b/src/i18n/locales/en/navigation.json @@ -11,8 +11,5 @@ "ariaLabelHome": "Navigate Safe Home", "ariaLabelProposals": "Navigate Safe Proposals", "ariaLabelActivities": "Navigate Safe Activities", - "ariaLabelTreasury": "Navigate Safe Treasury", - "ariaLabelFAQ": "Link to FAQ", - "ariaLabelDiscord": "Link to Discord", - "ariaLabelDocumentation": "Link to documentation" + "ariaLabelTreasury": "Navigate Safe Treasury" } diff --git a/src/i18n/locales/uk/navigation.json b/src/i18n/locales/uk/navigation.json index 8d5d9cc54b..fe42ec7144 100644 --- a/src/i18n/locales/uk/navigation.json +++ b/src/i18n/locales/uk/navigation.json @@ -4,8 +4,5 @@ "treasury": "Скарбниця", "faq": "FAQ", "documentation": "Документація", - "ariaLabelFractalBrand": "Перейти до Головної", - "ariaLabelFAQ": "Посилання на FAQ", - "ariaLabelDiscord": "Посилання на Discord", - "ariaLabelDocumentation": "Посилання на документацію" + "ariaLabelFractalBrand": "Перейти до Головної" } From 521cdde84702dc40bd94d761cb13b0ae2a7fbb9e Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Fri, 26 Apr 2024 11:57:14 -0400 Subject: [PATCH 25/40] Faster drawers --- src/components/ui/page/Navigation/NavigationLinks.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx index 6609e3e5f8..56041abbe6 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -22,7 +22,7 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { mb={6} maxWidth={{ base: 12, '3xl': '100%' }} _hover={{ maxWidth: '100%' }} - transitionDuration="0.5s" + transitionDuration="0.2s" > Date: Fri, 26 Apr 2024 11:59:10 -0400 Subject: [PATCH 26/40] Update search bar placeholder text --- src/i18n/locales/en/dashboard.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/locales/en/dashboard.json b/src/i18n/locales/en/dashboard.json index 91b5e919ec..d5bbeef126 100644 --- a/src/i18n/locales/en/dashboard.json +++ b/src/i18n/locales/en/dashboard.json @@ -3,7 +3,7 @@ "emptyFavorites": "No favorites", "errorInvalidSearch": "This is not a valid Ethereum address", "errorFailedSearch": "Sorry, this address is not a Fractal or Safe{WALLET} on {{chain}}", - "searchDAOPlaceholder": "Enter any existing Safe address", + "searchDAOPlaceholder": "Search for a Safe by address or ENS", "titleGovernance": "Governance", "titleType": "Type", "titleVotingPeriod": "Voting Period", From f418ccb05e07b33ca97e9031ef19e39efbb9c0ce Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Mon, 29 Apr 2024 15:10:08 -0400 Subject: [PATCH 27/40] Delete "Navigation index" component --- src/components/ui/page/Layout/index.tsx | 16 +++++++++++++--- src/components/ui/page/Navigation/index.tsx | 21 --------------------- 2 files changed, 13 insertions(+), 24 deletions(-) delete mode 100644 src/components/ui/page/Navigation/index.tsx diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx index 47a04416d6..48686fbb0e 100644 --- a/src/components/ui/page/Layout/index.tsx +++ b/src/components/ui/page/Layout/index.tsx @@ -1,10 +1,15 @@ -import { Box, Container, Grid, GridItem } from '@chakra-ui/react'; +import { Box, Container, Grid, GridItem, Show } from '@chakra-ui/react'; import { Outlet } from 'react-router-dom'; import { CONTENT_HEIGHT, HEADER_HEIGHT } from '../../../../constants/common'; +import { useFractal } from '../../../../providers/App/AppProvider'; import Header from '../Header'; -import Navigation from '../Navigation'; +import { NavigationLinks } from '../Navigation/NavigationLinks'; export default function Layout() { + const { + node: { daoAddress }, + } = useFractal(); + return ( - + + + ); diff --git a/src/components/ui/page/Navigation/index.tsx b/src/components/ui/page/Navigation/index.tsx deleted file mode 100644 index 75d1df99b2..0000000000 --- a/src/components/ui/page/Navigation/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Show } from '@chakra-ui/react'; -import { useFractal } from '../../../../providers/App/AppProvider'; -import { NavigationLinks } from './NavigationLinks'; - -function Navigation() { - const { - node: { daoAddress }, - } = useFractal(); - - const showDAOLinks = !!daoAddress; - return ( - - - - ); -} - -export default Navigation; From 991812a13fc3adbebbab06a720499eb813f096f5 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Mon, 29 Apr 2024 15:11:21 -0400 Subject: [PATCH 28/40] Copy and separate Navigation Links mobile menu from sidebar menu --- src/components/ui/page/Header/index.tsx | 4 +- src/components/ui/page/Layout/index.tsx | 4 +- ...ionLinks.tsx => NavigationLinksMobile.tsx} | 2 +- .../Navigation/NavigationLinksSidebar.tsx | 178 ++++++++++++++++++ 4 files changed, 183 insertions(+), 5 deletions(-) rename src/components/ui/page/Navigation/{NavigationLinks.tsx => NavigationLinksMobile.tsx} (99%) create mode 100644 src/components/ui/page/Navigation/NavigationLinksSidebar.tsx diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx index 1d07eaf4cb..25b6f2a12a 100644 --- a/src/components/ui/page/Header/index.tsx +++ b/src/components/ui/page/Header/index.tsx @@ -21,7 +21,7 @@ import { AccountDisplay } from '../../menus/AccountDisplay'; import { DAOSearch } from '../../menus/DAOSearch'; import { FavoritesMenu } from '../../menus/FavoritesMenu'; import Divider from '../../utils/Divider'; -import { NavigationLinks } from '../Navigation/NavigationLinks'; +import { NavigationLinksMobile } from '../Navigation/NavigationLinksMobile'; function HeaderLogo() { const { t } = useTranslation('navigation'); @@ -93,7 +93,7 @@ function HeaderLogo() { pt={8} > - - diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinksMobile.tsx similarity index 99% rename from src/components/ui/page/Navigation/NavigationLinks.tsx rename to src/components/ui/page/Navigation/NavigationLinksMobile.tsx index 56041abbe6..9a65412ac4 100644 --- a/src/components/ui/page/Navigation/NavigationLinks.tsx +++ b/src/components/ui/page/Navigation/NavigationLinksMobile.tsx @@ -151,7 +151,7 @@ function InternalLinks({ ); } -export function NavigationLinks({ +export function NavigationLinksMobile({ address, showDAOLinks, closeDrawer, diff --git a/src/components/ui/page/Navigation/NavigationLinksSidebar.tsx b/src/components/ui/page/Navigation/NavigationLinksSidebar.tsx new file mode 100644 index 0000000000..30f72bd060 --- /dev/null +++ b/src/components/ui/page/Navigation/NavigationLinksSidebar.tsx @@ -0,0 +1,178 @@ +import { Box, Flex } from '@chakra-ui/react'; +import { + House, + GitFork, + Scroll, + Coins, + SquaresFour, + Question, + DiscordLogo, + BookOpen, +} from '@phosphor-icons/react'; +import { DAO_ROUTES } from '../../../../constants/routes'; +import { URL_FAQ, URL_DISCORD, URL_DOCS } from '../../../../constants/url'; +import { LanguageSwitcher } from '../../../../i18n/LanguageSwitcher'; +import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider'; +import { NavigationLink } from './NavigationLink'; + +function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { + return ( + + + + + + + + + + + ); +} + +function InternalLinks({ + address, + showDAOLinks, + closeDrawer, +}: { + address: string | null; + showDAOLinks: boolean; + closeDrawer?: () => void; +}) { + const { addressPrefix } = useNetworkConfig(); + + if (!showDAOLinks || !address) { + return null; + } + + return ( + + + + + + + + + + ); +} + +export function NavigationLinksSidebar({ + address, + showDAOLinks, + closeDrawer, +}: { + showDAOLinks: boolean; + address: string | null; + closeDrawer?: () => void; +}) { + return ( + + + + + ); +} From b457f0ca3f2f6f7149cef1ff5300ad2b3e6484ab Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Mon, 29 Apr 2024 15:15:53 -0400 Subject: [PATCH 29/40] Delete drawer overlay, don't need it because drawer is full width --- src/components/ui/page/Header/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx index 25b6f2a12a..6ea60307a9 100644 --- a/src/components/ui/page/Header/index.tsx +++ b/src/components/ui/page/Header/index.tsx @@ -3,7 +3,6 @@ import { Drawer, DrawerCloseButton, DrawerContent, - DrawerOverlay, Flex, Hide, IconButton, @@ -66,14 +65,14 @@ function HeaderLogo() { size="full" isFullHeight > - Date: Mon, 29 Apr 2024 16:34:05 -0400 Subject: [PATCH 30/40] Remove some unnecessary elements --- src/components/ui/page/Navigation/NavigationLink.tsx | 5 +---- src/i18n/LanguageSwitcher.tsx | 3 --- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 19a52c0460..e721f80ecc 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -1,4 +1,4 @@ -import { Box, Hide, Text, Flex } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; import { Icon } from '@phosphor-icons/react'; import { TFunction } from 'i18next'; import { ReactElement } from 'react'; @@ -27,9 +27,6 @@ function LinkContent({ > {t(labelKey)} - - {t(labelKey)} - ); } diff --git a/src/i18n/LanguageSwitcher.tsx b/src/i18n/LanguageSwitcher.tsx index 1f5a9a870d..00f82ac4a7 100644 --- a/src/i18n/LanguageSwitcher.tsx +++ b/src/i18n/LanguageSwitcher.tsx @@ -22,9 +22,6 @@ export function LanguageSwitcher() { {t('tooltipTitle')} - - {t(i18n.language.slice(0, 2))} - } options={supported} From 5cccce23adc94aade952e5737dcbee478de91088 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Mon, 29 Apr 2024 16:35:41 -0400 Subject: [PATCH 31/40] Make the mobile menu look pretty --- src/components/ui/page/Header/index.tsx | 52 ++++--- .../page/Navigation/NavigationLinksMobile.tsx | 137 +++++++----------- src/i18n/LanguageSwitcher.tsx | 2 +- 3 files changed, 87 insertions(+), 104 deletions(-) diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx index 6ea60307a9..a487c4c45b 100644 --- a/src/components/ui/page/Header/index.tsx +++ b/src/components/ui/page/Header/index.tsx @@ -19,7 +19,6 @@ import { useFractal } from '../../../../providers/App/AppProvider'; import { AccountDisplay } from '../../menus/AccountDisplay'; import { DAOSearch } from '../../menus/DAOSearch'; import { FavoritesMenu } from '../../menus/FavoritesMenu'; -import Divider from '../../utils/Divider'; import { NavigationLinksMobile } from '../Navigation/NavigationLinksMobile'; function HeaderLogo() { @@ -66,38 +65,53 @@ function HeaderLogo() { isFullHeight > - + + + + + + - - - + diff --git a/src/components/ui/page/Navigation/NavigationLinksMobile.tsx b/src/components/ui/page/Navigation/NavigationLinksMobile.tsx index 9a65412ac4..25ad047717 100644 --- a/src/components/ui/page/Navigation/NavigationLinksMobile.tsx +++ b/src/components/ui/page/Navigation/NavigationLinksMobile.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@chakra-ui/react'; +import { Box } from '@chakra-ui/react'; import { House, GitFork, @@ -18,23 +18,10 @@ import { NavigationLink } from './NavigationLink'; function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { return ( - + void }) { /> + mx={-6} + /> + @@ -92,61 +75,52 @@ function InternalLinks({ } return ( - + + + + + + - - - - - - + mx={-6} + /> ); } @@ -161,18 +135,13 @@ export function NavigationLinksMobile({ closeDrawer?: () => void; }) { return ( - + <> - + ); } diff --git a/src/i18n/LanguageSwitcher.tsx b/src/i18n/LanguageSwitcher.tsx index 00f82ac4a7..f4684de75e 100644 --- a/src/i18n/LanguageSwitcher.tsx +++ b/src/i18n/LanguageSwitcher.tsx @@ -1,4 +1,4 @@ -import { Box, Hide, Text, Flex } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; import { GlobeSimple } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { OptionMenu } from '../components/ui/menus/OptionMenu'; From c33a820203bf627d2a00336988d8ce1358afaa5b Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Mon, 29 Apr 2024 16:58:54 -0400 Subject: [PATCH 32/40] Recombine NavigationLinks into one component --- src/components/ui/page/Header/index.tsx | 4 +- src/components/ui/page/Layout/index.tsx | 4 +- ...onLinksSidebar.tsx => NavigationLinks.tsx} | 80 ++++++---- .../page/Navigation/NavigationLinksMobile.tsx | 147 ------------------ 4 files changed, 53 insertions(+), 182 deletions(-) rename src/components/ui/page/Navigation/{NavigationLinksSidebar.tsx => NavigationLinks.tsx} (72%) delete mode 100644 src/components/ui/page/Navigation/NavigationLinksMobile.tsx diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx index a487c4c45b..211cb84793 100644 --- a/src/components/ui/page/Header/index.tsx +++ b/src/components/ui/page/Header/index.tsx @@ -19,7 +19,7 @@ import { useFractal } from '../../../../providers/App/AppProvider'; import { AccountDisplay } from '../../menus/AccountDisplay'; import { DAOSearch } from '../../menus/DAOSearch'; import { FavoritesMenu } from '../../menus/FavoritesMenu'; -import { NavigationLinksMobile } from '../Navigation/NavigationLinksMobile'; +import { NavigationLinks } from '../Navigation/NavigationLinks'; function HeaderLogo() { const { t } = useTranslation('navigation'); @@ -106,7 +106,7 @@ function HeaderLogo() { px={6} pt={8} > - - diff --git a/src/components/ui/page/Navigation/NavigationLinksSidebar.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx similarity index 72% rename from src/components/ui/page/Navigation/NavigationLinksSidebar.tsx rename to src/components/ui/page/Navigation/NavigationLinks.tsx index 30f72bd060..476c7d2b29 100644 --- a/src/components/ui/page/Navigation/NavigationLinksSidebar.tsx +++ b/src/components/ui/page/Navigation/NavigationLinks.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@chakra-ui/react'; +import { Box, Flex, Hide } from '@chakra-ui/react'; import { House, GitFork, @@ -18,22 +18,23 @@ import { NavigationLink } from './NavigationLink'; function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { return ( void }) { closeDrawer={closeDrawer} /> + + + @@ -92,19 +100,22 @@ function InternalLinks({ } return ( - + + + + ); } -export function NavigationLinksSidebar({ +export function NavigationLinks({ address, showDAOLinks, closeDrawer, diff --git a/src/components/ui/page/Navigation/NavigationLinksMobile.tsx b/src/components/ui/page/Navigation/NavigationLinksMobile.tsx deleted file mode 100644 index 25ad047717..0000000000 --- a/src/components/ui/page/Navigation/NavigationLinksMobile.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { Box } from '@chakra-ui/react'; -import { - House, - GitFork, - Scroll, - Coins, - SquaresFour, - Question, - DiscordLogo, - BookOpen, -} from '@phosphor-icons/react'; -import { DAO_ROUTES } from '../../../../constants/routes'; -import { URL_FAQ, URL_DISCORD, URL_DOCS } from '../../../../constants/url'; -import { LanguageSwitcher } from '../../../../i18n/LanguageSwitcher'; -import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider'; -import { NavigationLink } from './NavigationLink'; - -function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) { - return ( - - - - - - - - - - - - ); -} - -function InternalLinks({ - address, - showDAOLinks, - closeDrawer, -}: { - address: string | null; - showDAOLinks: boolean; - closeDrawer?: () => void; -}) { - const { addressPrefix } = useNetworkConfig(); - - if (!showDAOLinks || !address) { - return null; - } - - return ( - - - - - - - - - ); -} - -export function NavigationLinksMobile({ - address, - showDAOLinks, - closeDrawer, -}: { - showDAOLinks: boolean; - address: string | null; - closeDrawer?: () => void; -}) { - return ( - <> - - - - ); -} From 177f5024690baf302a9807ba729121553dab89e9 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Mon, 29 Apr 2024 17:05:42 -0400 Subject: [PATCH 33/40] Make link click/tap areas in nav take full heigh --- .../ui/page/Navigation/NavigationLink.tsx | 55 ++++++++----------- 1 file changed, 22 insertions(+), 33 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index e721f80ecc..9470bbfe54 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -1,14 +1,9 @@ import { Box, Flex } from '@chakra-ui/react'; import { Icon } from '@phosphor-icons/react'; import { TFunction } from 'i18next'; -import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; -function LinkContainer({ link }: { link: ReactElement }) { - return {link}; -} - function LinkContent({ labelKey, NavigationIcon, @@ -59,39 +54,33 @@ export function NavigationLink({ if (scope === 'internal') { return ( - - {linkContent} - - } - /> + + {linkContent} + ); } if (scope === 'external') { return ( - - {linkContent} - - } - /> + + {linkContent} + ); } From 6576f0819f68ea29d592f1ef19532b6608deeb23 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Tue, 30 Apr 2024 09:13:27 -0400 Subject: [PATCH 34/40] Add TODO comment to fix color --- src/components/ui/page/Header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx index 211cb84793..ac92f0645a 100644 --- a/src/components/ui/page/Header/index.tsx +++ b/src/components/ui/page/Header/index.tsx @@ -65,7 +65,7 @@ function HeaderLogo() { isFullHeight > Date: Tue, 30 Apr 2024 09:13:36 -0400 Subject: [PATCH 35/40] Make a type more generic --- src/components/ui/page/Navigation/NavigationLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 9470bbfe54..682719c364 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -11,7 +11,7 @@ function LinkContent({ }: { labelKey: string; NavigationIcon: Icon; - t: TFunction<'navigation', undefined>; + t: TFunction; }) { return ( From e621c79280e5eb01290bfea80181bc423e6eb874 Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Tue, 30 Apr 2024 12:02:18 -0400 Subject: [PATCH 36/40] Move padding out of inline style --- src/components/ui/page/Navigation/NavigationLink.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 682719c364..f4b7da18cf 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -14,7 +14,7 @@ function LinkContent({ t: TFunction; }) { return ( - + {} {linkContent} @@ -77,7 +77,7 @@ export function NavigationLink({ {...rest} target="_blank" rel="noreferrer noopener" - style={{ display: 'block', paddingTop: '0.75rem', paddingBottom: '0.75rem' }} + style={{ display: 'block' }} > {linkContent} From c63a46871458a2d25aca712d2bc663c58b1b973c Mon Sep 17 00:00:00 2001 From: Adam Gall Date: Tue, 30 Apr 2024 12:06:17 -0400 Subject: [PATCH 37/40] Move padding out of parent and into child --- src/components/ui/page/Navigation/NavigationLink.tsx | 5 ++++- src/components/ui/page/Navigation/NavigationLinks.tsx | 2 -- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index f4b7da18cf..ed3efc6d0f 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -14,7 +14,10 @@ function LinkContent({ t: TFunction; }) { return ( - + {} void }) { > Date: Tue, 30 Apr 2024 12:08:21 -0400 Subject: [PATCH 38/40] Move more css properties out of parent and into child --- src/components/ui/page/Navigation/NavigationLink.tsx | 2 ++ src/components/ui/page/Navigation/NavigationLinks.tsx | 4 ---- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index ed3efc6d0f..2e3cafa01a 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -17,6 +17,8 @@ function LinkContent({ {} void }) { width={{ base: 'full', md: 'auto' }} > Date: Tue, 30 Apr 2024 12:11:53 -0400 Subject: [PATCH 39/40] Put em back, it messed up the rounded corners --- src/components/ui/page/Navigation/NavigationLink.tsx | 2 -- src/components/ui/page/Navigation/NavigationLinks.tsx | 4 ++++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index 2e3cafa01a..ed3efc6d0f 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -17,8 +17,6 @@ function LinkContent({ {} void }) { > Date: Tue, 30 Apr 2024 13:16:47 -0400 Subject: [PATCH 40/40] Add active and hover states to navigation menu items --- .../ui/page/Navigation/NavigationLink.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx index ed3efc6d0f..fe4862dcf6 100644 --- a/src/components/ui/page/Navigation/NavigationLink.tsx +++ b/src/components/ui/page/Navigation/NavigationLink.tsx @@ -2,21 +2,28 @@ import { Box, Flex } from '@chakra-ui/react'; import { Icon } from '@phosphor-icons/react'; import { TFunction } from 'i18next'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; +import { Link, useMatch } from 'react-router-dom'; function LinkContent({ labelKey, NavigationIcon, t, + isActive, }: { labelKey: string; NavigationIcon: Icon; t: TFunction; + isActive: boolean; }) { return ( {} void; }) { const { t } = useTranslation('navigation'); + const isActive = useMatch(href.substring(0, href.indexOf('?'))); const linkContent = ( ); @@ -62,7 +71,6 @@ export function NavigationLink({ aria-label={t(labelKey)} to={href} onClick={closeDrawer} - style={{ display: 'block' }} {...rest} > {linkContent} @@ -80,7 +88,6 @@ export function NavigationLink({ {...rest} target="_blank" rel="noreferrer noopener" - style={{ display: 'block' }} > {linkContent}