Skip to content

Commit

Permalink
Merge branch 'lw/mobile-nav' #1903 into redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukaw3d
lukaw3d committed Apr 26, 2024
2 parents d360fda + e392fd9 commit f13b6dd
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 114 deletions.
1 change: 1 addition & 0 deletions .changelog/1903.bugfix.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Add active state to mobile navigation buttons
210 changes: 109 additions & 101 deletions src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
flex-direction: column;
}
.c6 {
.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand All @@ -97,27 +97,21 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: 24px;
padding-right: 24px;
}
.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 6px;
min-width: 0;
min-height: 0;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.c9 {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
height: 12px;
}
.c2 {
Expand Down Expand Up @@ -164,21 +158,42 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: space-evenly;
-webkit-justify-content: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
box-shadow: 0px 0px 1px #EDEDED;
border-top: solid 1px #11111108;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.c6 {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
}
.c6:first-of-type {
-webkit-box-flex: 1.1;
-webkit-flex-grow: 1.1;
-ms-flex-positive: 1.1;
flex-grow: 1.1;
}
.c6:hover {
background-color: #11111108;
}
@media only screen and (max-width:768px) {
.c0 {
margin-bottom: 24px;
Expand All @@ -205,15 +220,8 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
}
@media only screen and (max-width:768px) {
.c6 {
padding-left: 12px;
padding-right: 12px;
}
}
@media only screen and (max-width:768px) {
.c7 {
margin: 3px;
.c9 {
height: 6px;
}
}
Expand Down Expand Up @@ -293,120 +301,120 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
data-testid="mobile-footer-navigation"
>
<a
class=""
class="c6"
href="/account/dummy"
>
<span
class="c6"
class="c7"
>
<span
class="c7"
<svg
aria-label="Money"
class="c8"
viewBox="0 0 24 24"
>
<svg
aria-label="Money"
class="c8"
viewBox="0 0 24 24"
>
<path
d="M16 16c0-1.105-3.134-2-7-2s-7 .895-7 2 3.134 2 7 2 7-.895 7-2zM2 16v4.937C2 22.077 5.134 23 9 23s7-.924 7-2.063V16M9 5c-4.418 0-8 .895-8 2s3.582 2 8 2M1 7v5c0 1.013 3.582 2 8 2M23 4c0-1.105-3.1-2-6.923-2-3.824 0-6.923.895-6.923 2s3.1 2 6.923 2S23 5.105 23 4zm-7 12c3.824 0 7-.987 7-2V4M9.154 4v10.166M9 9c0 1.013 3.253 2 7.077 2C19.9 11 23 10.013 23 9"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</span>
<path
d="M16 16c0-1.105-3.134-2-7-2s-7 .895-7 2 3.134 2 7 2 7-.895 7-2zM2 16v4.937C2 22.077 5.134 23 9 23s7-.924 7-2.063V16M9 5c-4.418 0-8 .895-8 2s3.582 2 8 2M1 7v5c0 1.013 3.582 2 8 2M23 4c0-1.105-3.1-2-6.923-2-3.824 0-6.923.895-6.923 2s3.1 2 6.923 2S23 5.105 23 4zm-7 12c3.824 0 7-.987 7-2V4M9.154 4v10.166M9 9c0 1.013 3.253 2 7.077 2C19.9 11 23 10.013 23 9"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<span
class="c9"
/>
<span
class="c3"
style="line-height: 1;"
>
ROSE Wallet
</span>
</span>
</a>
<a
class=""
class="c6"
href="/account/dummy/stake"
>
<span
class="c6"
class="c7"
>
<span
class="c7"
<svg
aria-label="LineChart"
class="c8"
viewBox="0 0 24 24"
>
<svg
aria-label="LineChart"
class="c8"
viewBox="0 0 24 24"
>
<path
d="m1 16 7-7 5 5L23 4M0 22h23.999M16 4h7v7"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</span>
<path
d="m1 16 7-7 5 5L23 4M0 22h23.999M16 4h7v7"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<span
class="c9"
/>
<span
class="c3"
style="line-height: 1;"
>
Stake
</span>
</span>
</a>
<a
class=""
class="c6"
href="/account/dummy/paratimes"
>
<span
class="c6"
class="c7"
>
<span
class="c7"
<svg
aria-label="Inherit"
class="c8"
viewBox="0 0 24 24"
>
<svg
aria-label="Inherit"
class="c8"
viewBox="0 0 24 24"
>
<path
d="m17 18-5-3 5 3zM7 18l5-3v-4m5 9a3 3 0 1 0 6 0 3 3 0 0 0-6 0zM4 17a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM17 6a5 5 0 1 1-10.001-.001A5 5 0 0 1 17 6z"
fill="none"
stroke="#231F20"
stroke-width="2"
/>
</svg>
</span>
<path
d="m17 18-5-3 5 3zM7 18l5-3v-4m5 9a3 3 0 1 0 6 0 3 3 0 0 0-6 0zM4 17a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM17 6a5 5 0 1 1-10.001-.001A5 5 0 0 1 17 6z"
fill="none"
stroke="#231F20"
stroke-width="2"
/>
</svg>
<span
class="c9"
/>
<span
class="c3"
style="line-height: 1;"
>
ParaTimes
</span>
</span>
</a>
<a
class=""
class="c6"
href="/account/dummy/fiat"
>
<span
class="c6"
class="c7"
>
<span
class="c7"
<svg
aria-label="CreditCard"
class="c8"
viewBox="0 0 24 24"
>
<svg
aria-label="CreditCard"
class="c8"
viewBox="0 0 24 24"
>
<path
d="M1 5c0-.552.44-1 1.002-1h19.996A1 1 0 0 1 23 5v14c0 .552-.44 1-1.002 1H2.002A1 1 0 0 1 1 19V5zm0 3h22v2H1V8zm4 7h2v.5H5V15zm5 0h6v.5h-6V15z"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</span>
<path
d="M1 5c0-.552.44-1 1.002-1h19.996A1 1 0 0 1 23 5v14c0 .552-.44 1-1.002 1H2.002A1 1 0 0 1 1 19V5zm0 3h22v2H1V8zm4 7h2v.5H5V15zm5 0h6v.5h-6V15z"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
<span
class="c9"
/>
<span
class="c3"
style="line-height: 1;"
>
Buy
</span>
Expand Down
54 changes: 41 additions & 13 deletions src/app/components/MobileFooterNavigation/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)};
Expand All @@ -23,15 +25,27 @@ 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 }) =>
`solid ${theme.global?.borderSize?.xsmall} ${normalizeColor('background-contrast', theme)}`};
flex-direction: row;
`

const StyledNavLink = styled(NavLink)`
// Make items mostly-equal width
flex-grow: 1;
flex-basis: 0;
&:first-of-type {
flex-grow: 1.1;
}
&:hover {
background-color: ${({ theme }) => normalizeColor('background-contrast', theme)};
}
`

export interface MobileFooterNavigationProps {
walletHasAccounts: boolean
isMobile: boolean
Expand Down Expand Up @@ -78,17 +92,31 @@ export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFo
return (
<StyledMobileFooterNavigation data-testid="mobile-footer-navigation">
{getMenuItems.map(({ label, Icon, to }) => (
<NavLink to={to} key={to}>
<Box as="span" justify="center" align="center" pad={{ horizontal: 'medium' }}>
<Box as="span" margin="xsmall">
<Icon />
</Box>
<Text size="small" textAlign="center">
{label}
</Text>
</Box>
</NavLink>
<MobileFooterButton key={to} label={label} Icon={Icon} to={to} />
))}
</StyledMobileFooterNavigation>
)
}

function MobileFooterButton({ label, Icon, to }: { label: string; Icon: Icon; to: string }) {
const location = useLocation()
const isActive = to === location.pathname

return (
<StyledNavLink to={to}>
<Box
as="span"
justify="center"
align="center"
fill="vertical"
background={isActive ? 'background-oasis-blue' : undefined}
gap="small"
>
<Icon />
<Text size="small" textAlign="center" style={{ lineHeight: 1 }}>
{label}
</Text>
</Box>
</StyledNavLink>
)
}

0 comments on commit f13b6dd

Please sign in to comment.