From 186e8baefcc174d2df3f0f7d0f4ae9e9d3771dbc Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Wed, 9 Jul 2025 08:43:52 -0700
Subject: [PATCH] added close button to sidebar

I added the close button to the sidebar (no functionality yet). I also fixed the canvas grid width and height
---
 client/src/App.jsx                | 12 ++++++------
 client/src/assets/close_btn.svg   |  4 ----
 client/src/components/header.jsx  |  5 +++--
 client/src/components/sidebar.jsx | 17 +++--------------
 4 files changed, 12 insertions(+), 26 deletions(-)
 delete mode 100644 client/src/assets/close_btn.svg

diff --git a/client/src/App.jsx b/client/src/App.jsx
index ef17a63..4ba2739 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -7,8 +7,8 @@ import { Box } from "@chakra-ui/react"
 function App() {
   return (
     <Grid
-      templateRows="1fr 11fr"
-      templateColumns="2fr 10fr"
+      templateRows="0.75fr 11.25fr"
+      templateColumns="1fr 11fr"
       height="100vh"
       width="100vw"
     >
@@ -21,11 +21,11 @@ function App() {
       <GridItem colSpan={1}>
         <Grid
           templateRows="repeat(6 1fr)"
-          templateColumns="repeat(6 1fr)"
-          height="100vh"
-          width="100vw"
+          templateColumns="repeat(4 1fr)"
+          height="100%"
+          width="100%"
           >
-          <Widgets></Widgets>
+          {/* <Widgets></Widgets> */}
         </Grid>
       </GridItem>
     </Grid>
diff --git a/client/src/assets/close_btn.svg b/client/src/assets/close_btn.svg
deleted file mode 100644
index 5879df9..0000000
--- a/client/src/assets/close_btn.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="30" height="30" rx="2" fill="black" fill-opacity="0.06"/>
-<path d="M21.3535 11.3536L16.7071 16.0001L21.3535 20.6466L20.6465 21.3536L16 16.7071L11.3535 21.3536L10.6465 20.6466L15.293 16.0001L10.6465 11.3536L11.3535 10.6466L16 15.2931L20.6465 10.6466L21.3535 11.3536Z" fill="black"/>
-</svg>
diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx
index 5c4713b..e7fe26c 100644
--- a/client/src/components/header.jsx
+++ b/client/src/components/header.jsx
@@ -11,8 +11,9 @@ export default function Header() {
           flexDirection="row" 
           justifyContent="space-between" 
           alignItems="center" paddingLeft={5} paddingRight={2}
-          >
-      <Button variant="plain" textStyle="4xl" fontWeight="bold">VDAP</Button>
+          bg="#EDF1F1"
+    >
+      <Button variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
       <Button variant="plain">
         <HStack key={user.email} gap="4">
           <Stack gap="0">
diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index 985a30c..60e8a76 100644
--- a/client/src/components/sidebar.jsx
+++ b/client/src/components/sidebar.jsx
@@ -1,6 +1,7 @@
 import { Box, Button } from "@chakra-ui/react"
 import { FaVolcano } from "react-icons/fa6";
 import { createIcon } from "@chakra-ui/react";
+import { CloseButton } from "@chakra-ui/react"
 import { useState } from "react"
 
 // ICONS
@@ -56,18 +57,6 @@ export const Users = createIcon({
   ),
 });
 
-export const Close = createIcon({
-  displayName: "Close",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  path: (
-    <>
-      <rect x="1" y="1" width="30" height="30" rx="2" fill="black" fill-opacity="0.06"/>
-      <path d="M21.3535 11.3536L16.7071 16.0001L21.3535 20.6466L20.6465 21.3536L16 16.7071L11.3535 21.3536L10.6465 20.6466L15.293 16.0001L10.6465 11.3536L11.3535 10.6466L16 15.2931L20.6465 10.6466L21.3535 11.3536Z" fill="black"/>
-    </>
-  ),
-});
-
 export default function Sidebar () {
   return (
     <Box  w="100%" h="100%" 
@@ -79,8 +68,8 @@ export default function Sidebar () {
           justifyContent="start" 
           alignItems="start" 
           gap={4} padding={14}
-          >
-      <Button><Close fill="white" stroke="black"/></Button>
+    >
+      <CloseButton size="xs" variant="subtle" position="relative" top="-12" left="-12"></CloseButton>
       <Button fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
       <Button fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button>
       <Button fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button>