dark mode

forgot to switch branches. Started working on dark mode by creating a theme for the app

client/src/App.jsx

@@ -3,12 +3,12 @@ import Header from './components/header.jsx';
 import Sidebar from './components/sidebar.jsx';
 import Widget from './components/Widget.jsx'
 import { Grid, GridItem } from "@chakra-ui/react"
-import { Box } from "@chakra-ui/react"
+
 
 function App() {
   return (
     <Grid
-      templateRows="0.75fr 11.25fr"
+      templateRows="1fr 11fr"
       templateColumns="0.25fr 11.75fr"
       height="100vh"
       width="100vw"

client/src/components/sidebar.jsx

@@ -72,9 +72,9 @@ export default function Sidebar () {
             justifyContent="start" 
             alignItems="start" 
             gap={4} paddingTop={4}
-            paddingLeft={10} paddingRight={8}
+            paddingLeft={14} paddingRight={3}
         >
-          <CloseButton color="#19332D"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-6" onClick={() => setIsOpen(!isOpen)}></CloseButton>
+          <CloseButton color="#19332D"  _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>

client/src/main.jsx

@@ -5,10 +5,11 @@ import './index.css'
 import 'react-grid-layout/css/styles.css'
 import 'react-resizable/css/styles.css'
 import App from './App.jsx'
+import theme from './theme.js'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <Provider>
+    <Provider theme={theme}>
       <App />
     </Provider>
   </StrictMode>,

client/src/theme.js

@@ -0,0 +1,14 @@
+import { extendTheme } from "@chakra-ui/react";
+
+const theme = extendTheme({
+  semanticTokens: {
+    colors: {
+      primary: {
+        defualt: 'white',
+        _dark: 'grey.800'
+      },
+    },
+  },
+});
+
+export default theme;