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/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[` should render mobile version of footer 1`] = `
flex: 0 0 auto;
width: 24px;
height: 24px;
- fill: #666666;
- stroke: #666666;
+ fill: currentColor;
+ stroke: currentColor;
}
.c8 g {
@@ -81,7 +81,7 @@ exports[` should render mobile version of footer 1`] = `
flex-direction: column;
}
-.c6 {
+.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -97,27 +97,21 @@ exports[` 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 {
@@ -164,14 +158,14 @@ exports[` 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;
@@ -179,6 +173,20 @@ exports[` should render mobile version of footer 1`] = `
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:hover {
+ background-color: #11111108;
+}
+
@media only screen and (max-width:768px) {
.c0 {
margin-bottom: 24px;
@@ -205,15 +213,8 @@ exports[` 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;
}
}
@@ -293,120 +294,120 @@ exports[` should render mobile version of footer 1`] = `
data-testid="mobile-footer-navigation"
>
-
-
-
+
+
+
ROSE Wallet
-
-
-
+
+
+
Stake
-
-
-
+
+
+
ParaTimes
-
-
-
+
+
+
Buy
diff --git a/src/app/components/MobileFooterNavigation/index.tsx b/src/app/components/MobileFooterNavigation/index.tsx
index 5c7d990e1d..27814a5fea 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)};
@@ -23,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 }) =>
@@ -32,6 +34,15 @@ const StyledMobileFooterNavigation = styled.nav`
flex-direction: row;
`
+const StyledNavLink = styled(NavLink)`
+ // Make items equal width
+ flex-grow: 1;
+ flex-basis: 0;
+ &:hover {
+ background-color: ${({ theme }) => normalizeColor('background-contrast', theme)};
+ }
+`
+
export interface MobileFooterNavigationProps {
walletHasAccounts: boolean
isMobile: boolean
@@ -78,17 +89,31 @@ export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFo
return (
{getMenuItems.map(({ label, Icon, to }) => (
-
-
-
-
-
-
- {label}
-
-
-
+
))}
)
}
+
+function MobileFooterButton({ label, Icon, to }: { label: string; Icon: Icon; to: string }) {
+ const location = useLocation()
+ const isActive = to === location.pathname
+
+ return (
+
+
+
+
+ {label}
+
+
+
+ )
+}
diff --git a/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap
index c71f4f896e..480fdc99bd 100644
--- a/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,8 +8,8 @@ exports[` should match snapshot 1`] = `
flex: 0 0 auto;
width: 24px;
height: 24px;
- fill: #666666;
- stroke: #666666;
+ fill: currentColor;
+ stroke: currentColor;
}
.c7 g {
@@ -35,6 +35,40 @@ exports[` should match snapshot 1`] = `
stroke: none;
}
+.c13 {
+ display: inline-block;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: 24px;
+ height: 24px;
+ fill: #666666;
+ stroke: #666666;
+}
+
+.c13 g {
+ fill: inherit;
+ stroke: inherit;
+}
+
+.c13 *:not([stroke])[fill='none'] {
+ stroke-width: 0;
+}
+
+.c13 *[stroke*='#'],
+.c13 *[STROKE*='#'] {
+ stroke: inherit;
+ fill: none;
+}
+
+.c13 *[fill-rule],
+.c13 *[FILL-RULE],
+.c13 *[fill*='#'],
+.c13 *[FILL*='#'] {
+ fill: inherit;
+ stroke: none;
+}
+
.c0 {
display: -webkit-box;
display: -webkit-flex;
@@ -139,7 +173,8 @@ exports[` should match snapshot 1`] = `
display: flex;
box-sizing: border-box;
max-width: 100%;
- background: background-oasis-blue;
+ background-color: #7D4CDB;
+ color: #f8f8f8;
min-width: 0;
min-height: 0;
-webkit-flex-direction: row;
@@ -409,7 +444,7 @@ exports[` should match snapshot 1`] = `
>