quick fix

changed theme.js to use chakras new way to create a theme in v3+

client/src/components/sidebar.jsx

@@ -74,7 +74,7 @@ export default function Sidebar () {
             gap={4} paddingTop={4}
             paddingLeft={14} paddingRight={3}
         >
-          <CloseButton color="#19332D"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton>
+          <CloseButton color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton>
           <Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
             <PushPin fill="white" /> Dashboard
           </Button>
@@ -124,6 +124,7 @@ export default function Sidebar () {
           </IconButton>
         </Box>
       )}
+      
     </>
   );
 }

client/src/main.jsx

@@ -1,16 +1,16 @@
-import { Provider } from "./components/ui/provider"
+import { ChakraProvider } from '@chakra-ui/react';
-import { StrictMode } from 'react'
+import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client'
+import { createRoot } from 'react-dom/client';
-import './css/index.css'
+import './css/index.css';
-import 'react-grid-layout/css/styles.css'
+import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css'
+import 'react-resizable/css/styles.css';
-import App from './App.jsx'
+import App from './App.jsx';
-import theme from './theme.js'
+import { system } from './theme.js';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <Provider theme={theme}>
+    <ChakraProvider value={system}>
       <App />
-    </Provider>
+    </ChakraProvider>
   </StrictMode>,
 )

client/src/theme.js

@@ -1,14 +1,18 @@
-import { extendTheme } from "@chakra-ui/react";
+import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";
 
-const theme = extendTheme({
+const config = defineConfig({
-  semanticTokens: {
+  theme: {
-    colors: {
+    tokens: {
-      primary: {
+      colors: {
-        defualt: 'white',
+        primaryBG: { value: {base: "#FFFFF", _dark: "AAB8C5"} },
-        _dark: 'grey.800'
+        secondaryBG: { value: "#EDF1F1" },
+        border: {value: "#000000"}
       },
-    },
+      fonts: {
-  },
+        body: { value: "georgia, system-ui, sans-serif" },
+      },
+    }
+  }
 });
 
-export default theme;
+export const system = createSystem(defaultConfig, config);