fixed theme not using theme.ts

public/AdaptiveDashboard/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "Brand X Technologies",
+  "name": "Adaptive Dashboard",
-  "short_name": "BXT",
+  "short_name": "Adaptive",
   "icons": [
     {
       "src": "favicon.ico",

src/app/UserWrapper.tsx

@@ -101,9 +101,6 @@ export default function UserWrapper() {
           <NavigationContainer />
         </main>
       </AppThemeProvider>
-      {/* <FirmwareLoader> */}
-        
-      {/* </FirmwareLoader> */}
     </StateProvider>
   )
 }

src/pages/Devices.tsx

@@ -1,5 +1,5 @@
 import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
-import { Box, Chip, Grid2, IconButton, Skeleton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, Chip, Grid2, IconButton, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material";
 import { blue, green, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -74,6 +74,7 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 export default function Devices() {
+  const theme = useTheme();
   const isMobile = useMobile();
   const classes = useStyles();
   const navigate = useNavigate();
@@ -263,7 +264,7 @@ export default function Devices() {
           const status = device.status ?? pond.DeviceStatus.create()
           const deviceStateHelper = getDeviceStateHelper(status.state);
           return (
-            <Box className={classes.cellContainer}>
+            <Box className={classes.cellContainer} style={{ width: theme.spacing(0.5)}}>
               <Tooltip title={deviceStateHelper.description}>{deviceStateHelper.icon}</Tooltip>
             </Box>
           )
@@ -279,10 +280,11 @@ export default function Devices() {
         title: "Device",
         render: (device: Device) => {
           return (
-            <Box className={classes.cellContainer} >
+            <Box className={classes.cellContainer}>
               <Chip 
                 variant="outlined"
                 label={device.settings?.name ? device.settings.name : "Device " + device.settings?.deviceId} 
+                sx={{ maxWidth: 120}}
               />
             </Box>
           )

src/theme/AppThemeProvider.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useMemo, useState } from "react";
 import { ThemeProvider, createTheme, PaletteMode } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { getTheme } from "./theme";
 
 // --- You can import your own makePaletteColor() here if needed ---
 
@@ -33,13 +34,7 @@ export const AppThemeProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
   const resolvedMode: PaletteMode = mode === "system" ? (prefersDark ? "dark" : "light") : mode;
 
-  const theme = useMemo(() => createTheme({
+  const theme = useMemo(() => getTheme(resolvedMode), [resolvedMode]);
-    palette: {
-      mode: resolvedMode,
-      primary: { main: "#1976d2" }, // Or use makePaletteColor()
-      secondary: { main: "#e91e63" },
-    },
-  }), [resolvedMode]);
 
   const toggleMode = () => {
     setMode(prev =>