From 0190bf7c72abc36859324153a57538cb0224376d Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Thu, 10 Jul 2025 07:49:03 -0700
Subject: [PATCH] dark mode

forgot to switch branches. Started working on dark mode by creating a theme for the app
---
 client/src/App.jsx                |  4 ++--
 client/src/components/sidebar.jsx |  4 ++--
 client/src/main.jsx               |  3 ++-
 client/src/theme.js               | 14 ++++++++++++++
 4 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 client/src/theme.js

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 8a0a2b9..591c1c2 100644
--- a/client/src/App.jsx
+++ b/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"
diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index d304cf1..542c49e 100644
--- a/client/src/components/sidebar.jsx
+++ b/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>
diff --git a/client/src/main.jsx b/client/src/main.jsx
index ff458ce..e16b3ff 100644
--- a/client/src/main.jsx
+++ b/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>,
diff --git a/client/src/theme.js b/client/src/theme.js
new file mode 100644
index 0000000..20508f3
--- /dev/null
+++ b/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;
\ No newline at end of file