Merge pull request #716 from jembi/fix-navbar-item-highlighting

Fix navbar item highlighting
jembi · Nov 6, 2024 · 6c1fad6 · 6c1fad6
2 parents 2e2b0ec + 5737ce8
commit 6c1fad6
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/packages/header-app/src/components/openhim.appbar.component.tsx b/packages/header-app/src/components/openhim.appbar.component.tsx
@@ -32,9 +32,11 @@ const navbarTextStyle = {
   textTransform: 'capitalize',
   fontWeight: '500',
   fontFamily: 'Roboto',
-  color: alpha('#000', 0.6)
+  fontStyle: 'normal',
+  order: 1
 }
 
+
 export default function OpenhimAppBar() {
   const [pages, setPages] = useState<Page[]>([
     {name: 'HOME', link: '#!/portal'},
@@ -315,7 +317,6 @@ export default function OpenhimAppBar() {
         lineHeight: '24px',
         textTransform: 'capitalize',
         fontWeight: '500',
-        color: alpha('#000', 0.6),
         zIndex: 99
       }}
     >
@@ -466,15 +467,16 @@ export default function OpenhimAppBar() {
                             textTransform: 'none',
                             fontWeight: 500,
                             marginRight: '20px',
-
+                            color: '#049D84',
+                            fontFamily:"Roboto",  
                             lineHeight: '24px'
                           }
                         : {
                             textTransform: 'none',
                             fontWeight: 500,
                             marginRight: '20px',
-
-                            color: '#00000099'
+                            fontFamily:"Roboto",                            
+                            color: 'rgba(0, 0, 0, 0.6)'
                           }
                     }
                     href={page.link}
@@ -502,15 +504,17 @@ export default function OpenhimAppBar() {
                               textTransform: 'capitalize',
                               fontWeight: 500,
                               marginRight: '20px',
-                              color: '#388e3c'
+                              fontFamily:"Roboto",  
+                              color: '#049D84'
                             }
                           : {
                               display: 'flex',
                               alignItems: 'center',
                               textTransform: 'capitalize',
                               fontWeight: 500,
                               marginRight: '20px',
-                              color: '#00000099'
+                              fontFamily:"Roboto",
+                              color: 'rgba(0, 0, 0, 0.6)'
                             }
                       }
                     >