From 32e7ab60491bdea2c13fea2b33c099bf7f0dc3e1 Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Wed, 24 Apr 2024 03:27:41 +0200 Subject: [PATCH 1/5] Refactor MobileFooterNavigation buttons into their own component --- .../MobileFooterNavigation/index.tsx | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/app/components/MobileFooterNavigation/index.tsx b/src/app/components/MobileFooterNavigation/index.tsx index 5c7d990e1d..47619b8908 100644 --- a/src/app/components/MobileFooterNavigation/index.tsx +++ b/src/app/components/MobileFooterNavigation/index.tsx @@ -9,11 +9,13 @@ import { Money } from 'grommet-icons/es6/icons/Money' import { CreditCard } from 'grommet-icons/es6/icons/CreditCard' import styled from 'styled-components' import { normalizeColor } from 'grommet/es6/utils' -import { NavLink } from 'react-router-dom' +import { NavLink, useLocation } from 'react-router-dom' import { selectAddress } from 'app/state/wallet/selectors' import { useParaTimesNavigation } from 'app/pages/ParaTimesPage/useParaTimesNavigation' import { IS_FIAT_ONRAMP_ENABLED } from '../../pages/FiatOnrampPage/isEnabled' import { mobileFooterNavigationHeight } from '../../../styles/theme/elementSizes' +// eslint-disable-next-line no-restricted-imports +import type { Icon } from 'grommet-icons/es6/icons' const StyledMobileFooterNavigation = styled.nav` background-color: ${({ theme }) => normalizeColor('background-front', theme)}; @@ -78,17 +80,23 @@ export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFo return ( {getMenuItems.map(({ label, Icon, to }) => ( - - - - - - - {label} - - - + ))} ) } + +function MobileFooterButton({ label, Icon, to }: { label: string; Icon: Icon; to: string }) { + return ( + + + + + + + {label} + + + + ) +} From b6bf8009c0da378622c4035d018e98dbe77ff88c Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Wed, 24 Apr 2024 03:56:22 +0200 Subject: [PATCH 2/5] Add active state to mobile navigation buttons --- .changelog/1903.bugfix.md | 1 + .../MobileFooterNavigation/index.tsx | 31 ++++++++++++++----- 2 files changed, 24 insertions(+), 8 deletions(-) create mode 100644 .changelog/1903.bugfix.md diff --git a/.changelog/1903.bugfix.md b/.changelog/1903.bugfix.md new file mode 100644 index 0000000000..97cb01ff0e --- /dev/null +++ b/.changelog/1903.bugfix.md @@ -0,0 +1 @@ +Add active state to mobile navigation buttons diff --git a/src/app/components/MobileFooterNavigation/index.tsx b/src/app/components/MobileFooterNavigation/index.tsx index 47619b8908..0b20fd8b98 100644 --- a/src/app/components/MobileFooterNavigation/index.tsx +++ b/src/app/components/MobileFooterNavigation/index.tsx @@ -25,8 +25,8 @@ const StyledMobileFooterNavigation = styled.nav` right: 0; height: ${mobileFooterNavigationHeight}; display: flex; - align-items: center; - justify-content: space-evenly; + align-items: stretch; + justify-content: space-between; box-shadow: ${({ theme }) => `0px 0px ${theme.global?.borderSize?.xsmall} ${normalizeColor('background-front-border', theme)}`}; border-top: ${({ theme }) => @@ -34,6 +34,12 @@ const StyledMobileFooterNavigation = styled.nav` flex-direction: row; ` +const StyledNavLink = styled(NavLink)` + &:hover { + background-color: ${({ theme }) => normalizeColor('background-contrast', theme)}; + } +` + export interface MobileFooterNavigationProps { walletHasAccounts: boolean isMobile: boolean @@ -87,16 +93,25 @@ export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFo } function MobileFooterButton({ label, Icon, to }: { label: string; Icon: Icon; to: string }) { + const location = useLocation() + const isActive = to === location.pathname + return ( - - - - - + + + {label} - + ) } From 1c236643b3bde9e555658f4acadf4db84dfeea6e Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Wed, 24 Apr 2024 22:13:20 +0200 Subject: [PATCH 3/5] Make MobileFooterNavigation buttons equal width --- src/app/components/MobileFooterNavigation/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/components/MobileFooterNavigation/index.tsx b/src/app/components/MobileFooterNavigation/index.tsx index 0b20fd8b98..382b92a835 100644 --- a/src/app/components/MobileFooterNavigation/index.tsx +++ b/src/app/components/MobileFooterNavigation/index.tsx @@ -35,6 +35,9 @@ const StyledMobileFooterNavigation = styled.nav` ` const StyledNavLink = styled(NavLink)` + // Make items equal width + flex-grow: 1; + flex-basis: 0; &:hover { background-color: ${({ theme }) => normalizeColor('background-contrast', theme)}; } @@ -103,12 +106,11 @@ function MobileFooterButton({ label, Icon, to }: { label: string; Icon: Icon; to justify="center" align="center" fill="vertical" - pad={{ horizontal: 'medium' }} background={isActive ? 'background-oasis-blue' : undefined} gap="small" > - + {label} From 01bedf5b867dc391f8fc2dce6548576de3bafc95 Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Fri, 26 Apr 2024 01:04:22 +0200 Subject: [PATCH 4/5] Update active state color in sidebar and mobile navigation to primary Needed to also update font color to improve contrast. --- .../MobileFooterNavigation/index.tsx | 4 +-- src/app/components/Sidebar/index.tsx | 27 ++++++++++++------- src/styles/theme/ThemeProvider.tsx | 5 ---- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/app/components/MobileFooterNavigation/index.tsx b/src/app/components/MobileFooterNavigation/index.tsx index 382b92a835..27814a5fea 100644 --- a/src/app/components/MobileFooterNavigation/index.tsx +++ b/src/app/components/MobileFooterNavigation/index.tsx @@ -106,10 +106,10 @@ function MobileFooterButton({ label, Icon, to }: { label: string; Icon: Icon; to justify="center" align="center" fill="vertical" - background={isActive ? 'background-oasis-blue' : undefined} + background={isActive ? 'control' : undefined} gap="small" > - + {label} diff --git a/src/app/components/Sidebar/index.tsx b/src/app/components/Sidebar/index.tsx index 2a21276df8..3072e627a5 100644 --- a/src/app/components/Sidebar/index.tsx +++ b/src/app/components/Sidebar/index.tsx @@ -75,7 +75,7 @@ export const SidebarButton = ({ const component = ( { {!isLockableOrCloseable && } {isLockableOrCloseable === 'closeable' && ( } + icon={} label={t('menu.closeWallet', 'Close wallet')} onClick={() => closeWallet()} /> )} {isLockableOrCloseable === 'unlockable' && ( } + icon={} label={t('menu.unlockProfile', 'Unlock profile')} onClick={() => closeWallet()} /> )} {isLockableOrCloseable === 'lockable' && ( } + icon={} label={t('menu.lockProfile', 'Lock profile')} onClick={() => lockProfile()} /> @@ -222,7 +222,7 @@ const SidebarFooter = (props: SidebarFooterProps) => { )} } + icon={} label="GitHub" route="https://github.com/oasisprotocol/oasis-wallet-web" newTab @@ -236,10 +236,17 @@ function SidebarMenuItems() { const { t } = useTranslation() const { getParaTimesRoutePath, paraTimesRouteLabel } = useParaTimesNavigation() const menu = { - home: } label={t('menu.home', 'Home')} route="/" data-testid="nav-home" />, + home: ( + } + label={t('menu.home', 'Home')} + route="/" + data-testid="nav-home" + /> + ), wallet: ( } + icon={} label={t('menu.wallet', 'ROSE Wallet')} needsWalletOpen={true} route={`/account/${address}`} @@ -248,7 +255,7 @@ function SidebarMenuItems() { ), stake: ( } + icon={} label={t('menu.stake', 'Stake ROSE')} needsWalletOpen={true} route={`/account/${address}/stake`} @@ -257,7 +264,7 @@ function SidebarMenuItems() { ), paraTimes: ( } + icon={} label={paraTimesRouteLabel} needsWalletOpen={true} route={getParaTimesRoutePath(address!)} @@ -266,7 +273,7 @@ function SidebarMenuItems() { ), fiatOnramp: ( } + icon={} label={t('menu.fiatOnramp', 'Buy ROSE')} needsWalletOpen={true} route={`/account/${address}/fiat`} diff --git a/src/styles/theme/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx index d212a5d7fc..414adc1798 100644 --- a/src/styles/theme/ThemeProvider.tsx +++ b/src/styles/theme/ThemeProvider.tsx @@ -133,11 +133,6 @@ const grommetCustomTheme: ThemeType = { dark: '#ffe7d9', light: '#f26111', }, - - 'background-oasis-blue': { - dark: '#0f477b', - light: '#0500e2', - }, lightText: '#a3a3a3', neutral: { dark: '#310081FF', From 75cb18872d32a7a59e2600bec9dc33ab83e8ba28 Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Fri, 26 Apr 2024 05:57:06 +0200 Subject: [PATCH 5/5] Update jest snapshots --- .../__snapshots__/index.test.tsx.snap | 207 +++++++++--------- .../__snapshots__/index.test.tsx.snap | 50 ++++- 2 files changed, 147 insertions(+), 110 deletions(-) diff --git a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap index 0b0439f7d2..b42535f33e 100644 --- a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap @@ -8,8 +8,8 @@ exports[`