[Navigation bar] Improve nav button visibility

UniversityOfHelsinkiCS · Dec 11, 2024 · 634c4c9 · 634c4c9
1 parent 9371c7d
commit 634c4c9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/services/frontend/src/components/material/NavigationBar/index.tsx b/services/frontend/src/components/material/NavigationBar/index.tsx
@@ -90,14 +90,29 @@ export const NavigationBar = () => {
           >
             <OodikoneLogo />
             {!isLoading && location && (
-              <Tabs textColor="inherit" value={activeTab} variant="scrollable">
+              <Tabs
+                sx={{
+                  '& .MuiTabs-indicator': {
+                    backgroundColor: theme => theme.palette.activeNavigationTab,
+                  },
+                }}
+                textColor="inherit"
+                value={activeTab}
+                variant="scrollable"
+              >
                 {Object.entries(visibleNavigationItems).map(([key, item]) => (
                   <Tab
                     component={item.path ? Link : 'div'}
                     data-cy={`nav-bar-button-${key}`}
                     key={key}
                     label={<NavigationButton item={item} />}
-                    sx={{ '&:hover': { color: 'inherit' } }}
+                    sx={{
+                      opacity: 1,
+                      '&:hover': {
+                        color: 'inherit',
+                        opacity: 0.7,
+                      },
+                    }}
                     to={item.path ?? ''}
                   />
                 ))}

diff --git a/services/frontend/src/theme.ts b/services/frontend/src/theme.ts
@@ -3,6 +3,7 @@ import { createTheme } from '@mui/material/styles'
 
 declare module '@mui/material/styles' {
   interface Palette {
+    activeNavigationTab: string
     export: string
     graduationTimes: {
       onTime: string
@@ -11,6 +12,7 @@ declare module '@mui/material/styles' {
     }
   }
   interface PaletteOptions {
+    activeNavigationTab: string
     export: string
     graduationTimes?: {
       onTime: string
@@ -22,6 +24,7 @@ declare module '@mui/material/styles' {
 
 export const theme = createTheme({
   palette: {
+    activeNavigationTab: '#fff',
     export: deepPurple[500],
     graduationTimes: {
       onTime: '#90a959',