Add shadow background to nav bar

centrifuge · Oct 16, 2024 · 0d488e6 · 0d488e6
1 parent eea6839
commit 0d488e6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/centrifuge-app/src/components/Menu/PageLink.tsx b/centrifuge-app/src/components/Menu/PageLink.tsx
@@ -3,6 +3,7 @@ import { Link, LinkProps, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { prefetchRoute } from '../Root'
+import { LIGHT_BACKGROUND } from './Toggle'
 import { baseButton, primaryButton } from './styles'
 
 const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
@@ -12,7 +13,7 @@ const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
   color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)};
   font-size: 14px;
   font-weight: 500;
-  background-color: transparent;
+  background-color: ${({ isActive }) => (isActive ? LIGHT_BACKGROUND : 'transparent')};
   border-radius: 4px;
   &:hover {
     color: ${({ theme }) => theme.colors.textGold};

diff --git a/centrifuge-app/src/components/Menu/Toggle.tsx b/centrifuge-app/src/components/Menu/Toggle.tsx
@@ -2,6 +2,8 @@ import { Text } from '@centrifuge/fabric'
 import styled from 'styled-components'
 import { baseButton, primaryButton } from './styles'
 
+export const LIGHT_BACKGROUND = 'rgba(145, 150, 155, 0.13)'
+
 export const Toggle = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
   ${baseButton}
   ${primaryButton}
@@ -10,7 +12,7 @@ export const Toggle = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
     stacked ? '1fr' : `${theme.sizes.iconSmall}px 1fr ${theme.sizes.iconSmall}px`};
   color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)};
   border-radius: 4px;
-  background-color: transparent;
+  background-color: ${({ isActive }) => (isActive ? LIGHT_BACKGROUND : 'transparent')};
 
   &:hover {
     color: ${({ theme }) => theme.colors.textGold};