fixed some theming stuff, buttons highlight correctly now

src/app/App.tsx

@@ -9,7 +9,7 @@ import { Theme, ThemeProvider } from '@mui/material'
 import { CreateTheme } from '../theme/theme'
 import { getThemeType, setThemeType } from '../theme/themeType'
 
-function AuthHTTPWrapper() {
+function App() {
   const [token, setToken] = useState<string | undefined>(undefined)
   const [palette, setPalette] = useState<Theme>(CreateTheme(getThemeType()));
 
@@ -56,4 +56,4 @@ function AuthHTTPWrapper() {
   )
 }
 
-export default AuthHTTPWrapper
+export default App

src/app/Header.tsx

@@ -82,14 +82,9 @@ interface Props {
 export default function Header(props: Props) {
 
     const { sideIsOpen, openSide, toggleTheme } = props;
-    // const { mode, setMode } = useColorScheme();
-
     const themeType = useThemeType();
     const classes = useStyles() 
 
-    console.log(getSignatureColour())
-    console.log(getSignatureAccentColour())
-
     return (
         <AppBar position="fixed" className={classes.appBar}>
             <Toolbar disableGutters className={classes.toolbar}>

src/app/main.tsx

@@ -1,10 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import AuthHTTPWrapper from './AuthHTTPWrapper.tsx'
+import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <AuthHTTPWrapper />
+    <App />
   </StrictMode>,
 )

src/theme/theme.ts

@@ -27,11 +27,12 @@ function options(themeType: "light" | "dark"): ThemeOptions {
   
   const signature = getSignatureColour();
   const accent = getSignatureAccentColour();
+  const bg = generateBackgroundShades(Colours.grey[800], themeType)
   return {
     palette: {
       primary: Colours[getPrimaryColour() as keyof typeof Colours],
       secondary: Colours[getSecondaryColour() as keyof typeof Colours],
-      background: generateBackgroundShades(Colours.grey[800], themeType),
+      background: bg,
       mode: themeType,
       bxt: {
         primaryBlue: "#005bb0",
@@ -175,6 +176,29 @@ function options(themeType: "light" | "dark"): ThemeOptions {
           checked: {},
           track: {}
         }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            '& .MuiTouchRipple-root': {
+              color: accent, // Customize ripple color here
+              // color: "white"
+            },
+            '&:hover': {
+              backgroundColor: "rgba(125, 125, 125, 0.2)"
+            },
+          },
+        },
+      },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: {
+            '& .MuiTouchRipple-root': {
+              color: accent, // Customize ripple color here
+              // color: "white"
+            },
+          },
+        },
       }
     }
   } as ThemeOptions;