feat: add styleOverrides for Mui AppBar,Avatar,Chip

Nerdware-LLC · Mar 24, 2023 · ce429ea · ce429ea
1 parent be6f85b
commit ce429ea
Showing 1 changed file with 69 additions and 0 deletions.
diff --git a/src/app/ThemeProvider/components.ts b/src/app/ThemeProvider/components.ts
@@ -4,6 +4,56 @@ import type { Theme } from "@mui/material/styles";
  * Mui theme component properties
  */
 export const COMPONENTS: Partial<Theme["components"]> = {
+  ////////////////////////////////////////////////////////////
+  // AppBar
+
+  MuiAppBar: {
+    styleOverrides: {
+      root: {
+        zIndex: 998
+        /* Default MuiAppBar z-index is 1100; it's lowered here to prevent
+        all AppBars from rendering on top of the Sentry.ErrorBoundary dialog
+        component which has a z-index of 999.  */
+      }
+    }
+  },
+
+  ////////////////////////////////////////////////////////////
+  // Avatar
+
+  MuiAvatar: {
+    defaultProps: {
+      alt: "Fixit user avatar"
+    },
+    styleOverrides: {
+      root: ({ ownerState, theme: { palette } }) => ({
+        height: "2.5rem",
+        width: "2.5rem",
+        textAlign: "center",
+        overflow: "hidden !important", // <-- ensure can't be overridden
+        color: palette.text.primary,
+        ...(palette.mode === "dark"
+          ? {
+              backgroundImage: `linear-gradient(135deg, ${palette.background.default} 20%, ${palette.background.paper})`,
+              border: `1px solid ${palette.divider}`
+            }
+          : {
+              backgroundImage: `linear-gradient(135deg, ${palette.primary.dark} 5%, ${palette.primary.light})`
+            }),
+
+        "&:hover": {
+          ...(!!ownerState?.onClick && {
+            cursor: "pointer",
+            opacity: 0.7
+          })
+        }
+      })
+    }
+  },
+
+  ////////////////////////////////////////////////////////////
+  // Button
+
   MuiButton: {
     defaultProps: {
       variant: "contained"
@@ -16,11 +66,30 @@ export const COMPONENTS: Partial<Theme["components"]> = {
       }
     }
   },
+
+  ////////////////////////////////////////////////////////////
+  // Bottom Nav Bar
+
   MuiBottomNavigationAction: {
     defaultProps: {
       showLabel: true
     }
   },
+
+  ////////////////////////////////////////////////////////////
+  // Chip
+
+  MuiChip: {
+    styleOverrides: {
+      root: {
+        maxWidth: "min-content"
+      }
+    }
+  },
+
+  ////////////////////////////////////////////////////////////
+  // Tabs
+
   MuiTabs: {
     defaultProps: {
       textColor: "inherit",