Add active state to mobile navigation buttons

.changelog/1903.bugfix.md

@@ -0,0 +1 @@
+Add active state to mobile navigation buttons

src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap

@@ -8,8 +8,8 @@ exports[`<Footer /> 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[`<Footer /> 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[`<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 {
@@ -164,21 +158,35 @@ 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:hover {
+  background-color: #11111108;
+}
+
 @media only screen and (max-width:768px) {
   .c0 {
     margin-bottom: 24px;
@@ -205,15 +213,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;
   }
 }
 
@@ -293,120 +294,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>

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,15 +25,24 @@ 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 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 (
     <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 ? 'control' : undefined}
+        gap="small"
+      >
+        <Icon color="currentColor" />
+        <Text size="small" textAlign="center" style={{ lineHeight: 1 }}>
+          {label}
+        </Text>
+      </Box>
+    </StyledNavLink>
+  )
+}