fix nav and tab color

Author: debsmita1

.changeset/sweet-colts-exercise.md

@@ -0,0 +1,5 @@
+---
+'app': minor
+---
+
+updated Nav and tab styles to match PatternFly5.

packages/app/src/components/Root/Root.tsx

@@ -29,9 +29,6 @@ import { IconComponent, useApp } from '@backstage/core-plugin-api';
 const useStyles = makeStyles()({
   sidebarItem: {
     textDecorationLine: 'none',
-    '&:hover': {
-      textDecorationLine: 'underline',
-    },
   },
 });
 

packages/app/src/themes/componentOverrides.ts

@@ -1,4 +1,5 @@
 import { UnifiedThemeOptions } from '@backstage/theme';
+import { ThemeColors } from '../types/types';
 
 const redhatFont = `@font-face {
   font-family: 'Red Hat Font';
@@ -10,8 +11,54 @@ const redhatFont = `@font-face {
     url(/fonts/RedHatText-Regular.ttf) format('truetype');
 }`;
 
-export const components: UnifiedThemeOptions['components'] = {
-  MuiCssBaseline: {
-    styleOverrides: redhatFont,
-  },
+export const components = (
+  themeColors: ThemeColors,
+): UnifiedThemeOptions['components'] => {
+  return {
+    BackstageHeaderTabs: {
+      styleOverrides: {
+        tabsWrapper: {
+          paddingLeft: '0px',
+        },
+        defaultTab: {
+          textTransform: 'none',
+          fontSize: '0.875rem',
+        },
+      },
+    },
+    MuiTabs: {
+      defaultProps: {
+        TabIndicatorProps: {
+          style: {
+            height: '3px',
+            background: themeColors.navigationIndicatorColor || '#0066CC',
+          },
+        },
+      },
+      styleOverrides: {
+        root: {
+          borderBottom: '1px solid #d2d2d2',
+        },
+      },
+    },
+    MuiTab: {
+      defaultProps: {
+        disableRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          minWidth: 'initial !important',
+          '&:hover': {
+            boxShadow: '0 -3px #b8bbbe inset',
+          },
+        },
+        disabled: {
+          backgroundColor: '#6a6e73',
+        },
+      },
+    },
+    MuiCssBaseline: {
+      styleOverrides: redhatFont,
+    },
+  };
 };

packages/app/src/themes/darkTheme.ts

@@ -15,15 +15,15 @@ export const customDarkTheme = (themeColors: ThemeColors) =>
       }),
       navigation: {
         background: '#0f1214',
-        indicator: themeColors.navigationIndicatorColor || '#009596',
+        indicator: themeColors.navigationIndicatorColor || '#0066CC',
         color: '#ffffff',
         selectedColor: '#ffffff',
         navItem: {
-          hoverBackground: '#030303',
+          hoverBackground: '#3c3f42',
         },
       },
     },
     defaultPageTheme: 'home',
     pageTheme: pageTheme(themeColors),
-    components,
+    components: components(themeColors),
   });

packages/app/src/themes/lightTheme.ts

@@ -15,15 +15,19 @@ export const customLightTheme = (themeColors: ThemeColors) =>
       }),
       navigation: {
         background: '#222427',
-        indicator: themeColors.navigationIndicatorColor || '#009596',
+        indicator: themeColors.navigationIndicatorColor || '#0066CC',
         color: '#ffffff',
         selectedColor: '#ffffff',
         navItem: {
-          hoverBackground: '#4f5255',
+          hoverBackground: '#3c3f42',
         },
       },
+      text: {
+        primary: '#151515',
+        secondary: '#757575',
+      },
     },
     defaultPageTheme: 'home',
     pageTheme: pageTheme(themeColors),
-    components,
+    components: components(themeColors),
   });