adding in mui and getting rid of other styling

2022-06-10 07:44:52 -05:00
parent ae109400f7
commit a26565a715
12 changed files with 497 additions and 753 deletions
@@ -0,0 +1,100 @@
+import { createTheme, experimental_sx as sx } from '@mui/material';
+
+import { blueGrey } from '@mui/material/colors';
+
+export const NirvanaTheme = createTheme({
+  typography: {
+    fontFamily: ['IBM Plex Sans', 'sans-serif'].join(','),
+    overline: {
+      letterSpacing: 2,
+    },
+    caption: {
+      color: blueGrey[200],
+    },
+    button: {
+      textTransform: 'none',
+    },
+  },
+  palette: {
+    primary: {
+      main: '#438E86',
+    },
+    secondary: {
+      main: '#FFB6B6',
+    },
+  },
+
+  components: {
+    // Name of the component
+    MuiButtonBase: {
+      defaultProps: {
+        // The props to change the default for.
+        disableRipple: true, // No more ripple, on the whole application 💣!
+      },
+    },
+    MuiAvatar: {
+      styleOverrides: {
+        root: sx({
+          boxShadow: 1,
+        }),
+      },
+      defaultProps: {
+        variant: 'rounded',
+      },
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.9em',
+        },
+      },
+      defaultProps: {
+        disableUnderline: true,
+        fullWidth: true,
+      },
+    },
+
+    MuiListItem: {
+      styleOverrides: {
+        root: {
+          padding: '2px 0 2px 0 !important',
+        },
+      },
+      defaultProps: {
+        disableGutters: true,
+        disablePadding: false,
+      },
+    },
+
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 5,
+        },
+      },
+    },
+
+    MuiListSubheader: {
+      styleOverrides: {
+        root: {
+          '&.MuiListSubheader-root': {
+            lineHeight: 2,
+            paddingBottom: '4px',
+            display: 'flex',
+            gap: '0.7em',
+            alignItems: 'center',
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+    },
+
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          borderRadius: 5,
+        },
+      },
+    },
+  },
+});