From 7ba1c382ebf4775f06b4619f101bf824b1a424eb Mon Sep 17 00:00:00 2001
From: Jeremy Magland <jmagland@flatironinstitute.org>
Date: Mon, 29 Jul 2024 11:58:19 -0400
Subject: [PATCH 1/3] Update sidebar style

---
 gui/src/app/pages/HomePage/Sidebar.tsx | 78 +++++++++++++-------------
 gui/src/localStyles.css                |  6 +-
 2 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/gui/src/app/pages/HomePage/Sidebar.tsx b/gui/src/app/pages/HomePage/Sidebar.tsx
index 6ff2eca0..4f416b30 100644
--- a/gui/src/app/pages/HomePage/Sidebar.tsx
+++ b/gui/src/app/pages/HomePage/Sidebar.tsx
@@ -27,7 +27,7 @@ const exampleLinks = [
   },
 ];
 
-export const drawerWidth = 240;
+export const drawerWidth = 180;
 
 const Sidebar: FunctionComponent<Sidebar> = ({
   hasUnsavedChanges,
@@ -62,7 +62,8 @@ const Sidebar: FunctionComponent<Sidebar> = ({
       {/* For spacing purposes */}
       <Toolbar />
 
-      <h3>Examples</h3>
+
+      <div className="SidebarContentWrapper SidebarHeading">Examples</div>
 
       {exampleLinks.map((example, i) => (
         <div key={i} className="SidebarContentWrapper">
@@ -72,43 +73,44 @@ const Sidebar: FunctionComponent<Sidebar> = ({
         </div>
       ))}
       <Divider />
-      <List>
-        <ListItem>
-          <Button
-            variant="outlined"
-            onClick={loadProjectOpen}
-            disabled={hasUnsavedChanges}
-          >
-            Load project
-          </Button>
-        </ListItem>
 
-        <ListItem>
-          <Button
-            variant="outlined"
-            onClick={saveProjectOpen}
-            disabled={hasUnsavedChanges}
-          >
-            Save project
-          </Button>
-        </ListItem>
-        <ListItem>
-          {/* This will probably be removed or replaced in the future. It's just for convenience during development. */}
-          <Button
-            variant="outlined"
-            color="error"
-            onClick={() => {
-              const ok = window.confirm(
-                "Are you sure you want to clear all data in the editors?",
-              );
-              if (!ok) return;
-              update({ type: "clear" });
-            }}
-          >
-            Clear all
-          </Button>
-        </ListItem>
-      </List>
+      <div className="SidebarContentWrapper">
+        <Button
+          variant="outlined"
+          onClick={loadProjectOpen}
+          disabled={hasUnsavedChanges}
+        >
+          Load project
+        </Button>
+      </div>
+
+      <div className="SidebarContentWrapper">
+        <Button
+          variant="outlined"
+          onClick={saveProjectOpen}
+          disabled={hasUnsavedChanges}
+        >
+          Save project
+        </Button>
+      </div>
+
+      {/* This will probably be removed or replaced in the future. It's just for convenience during development. */}
+      <div className="SidebarContentWrapper">
+        <Button
+          variant="outlined"
+          color="error"
+          onClick={() => {
+            const ok = window.confirm(
+              "Are you sure you want to clear all data in the editors?",
+            );
+            if (!ok) return;
+            update({ type: "clear" });
+          }}
+        >
+          Clear all
+        </Button>
+      </div>
+
       <ModalWindow visible={loadProjectVisible} onClose={loadProjectClose}>
         <LoadProjectWindow onClose={loadProjectClose} />
       </ModalWindow>
diff --git a/gui/src/localStyles.css b/gui/src/localStyles.css
index 1024392e..88a9ef75 100644
--- a/gui/src/localStyles.css
+++ b/gui/src/localStyles.css
@@ -66,7 +66,11 @@
 
 /* Sidebar */
 .SidebarContentWrapper {
-  margin: 5px;
+  margin: 8px;
+}
+
+.SidebarHeading {
+  font-weight: bold;
 }
 
 /* File Upload */

From 1f309a1604891325460914f0d04a95d2b3dfaa91 Mon Sep 17 00:00:00 2001
From: Jeremy Magland <jmagland@flatironinstitute.org>
Date: Mon, 29 Jul 2024 12:12:05 -0400
Subject: [PATCH 2/3] Remove unused List and ListItem imports from Sidebar

---
 gui/src/app/pages/HomePage/Sidebar.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/gui/src/app/pages/HomePage/Sidebar.tsx b/gui/src/app/pages/HomePage/Sidebar.tsx
index 4f416b30..e1ea7837 100644
--- a/gui/src/app/pages/HomePage/Sidebar.tsx
+++ b/gui/src/app/pages/HomePage/Sidebar.tsx
@@ -5,8 +5,6 @@ import ModalWindow, { useModalWindow } from "@fi-sci/modal-window";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import Drawer from "@mui/material/Drawer";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
 import Toolbar from "@mui/material/Toolbar";
 import { FunctionComponent, useContext } from "react";
 import { Link } from "react-router-dom";

From 9182ae1e362b34c25950162d147c4b6dcf6678a3 Mon Sep 17 00:00:00 2001
From: Jeremy Magland <jmagland@flatironinstitute.org>
Date: Tue, 30 Jul 2024 06:34:55 -0400
Subject: [PATCH 3/3] Adjust Sidebar styling

---
 gui/src/app/pages/HomePage/Sidebar.tsx | 91 ++++++++++++++------------
 gui/src/localStyles.css                | 14 ++--
 2 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/gui/src/app/pages/HomePage/Sidebar.tsx b/gui/src/app/pages/HomePage/Sidebar.tsx
index e1ea7837..6e1e8c95 100644
--- a/gui/src/app/pages/HomePage/Sidebar.tsx
+++ b/gui/src/app/pages/HomePage/Sidebar.tsx
@@ -2,6 +2,7 @@ import { ProjectContext } from "@SpCore/ProjectContextProvider";
 import LoadProjectWindow from "@SpPages/LoadProjectWindow";
 import SaveProjectWindow from "@SpPages/SaveProjectWindow";
 import ModalWindow, { useModalWindow } from "@fi-sci/modal-window";
+import { List, ListItem } from "@mui/material";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import Drawer from "@mui/material/Drawer";
@@ -60,53 +61,59 @@ const Sidebar: FunctionComponent<Sidebar> = ({
       {/* For spacing purposes */}
       <Toolbar />
 
+      <div className="Sidebar">
+        <h3>Examples</h3>
 
-      <div className="SidebarContentWrapper SidebarHeading">Examples</div>
+        <List>
+          {exampleLinks.map((example, i) => (
+            <ListItem key={i}>
+              <Link replace to={`?project=${example.link}`}>
+                {example.name}
+              </Link>
+            </ListItem>
+          ))}
+        </List>
 
-      {exampleLinks.map((example, i) => (
-        <div key={i} className="SidebarContentWrapper">
-          <Link replace to={`?project=${example.link}`}>
-            {example.name}
-          </Link>
-        </div>
-      ))}
-      <Divider />
+        <Divider />
 
-      <div className="SidebarContentWrapper">
-        <Button
-          variant="outlined"
-          onClick={loadProjectOpen}
-          disabled={hasUnsavedChanges}
-        >
-          Load project
-        </Button>
-      </div>
+        <List>
+          <ListItem key="load-project">
+            <Button
+              variant="outlined"
+              onClick={loadProjectOpen}
+              disabled={hasUnsavedChanges}
+            >
+              Load project
+            </Button>
+          </ListItem>
 
-      <div className="SidebarContentWrapper">
-        <Button
-          variant="outlined"
-          onClick={saveProjectOpen}
-          disabled={hasUnsavedChanges}
-        >
-          Save project
-        </Button>
-      </div>
+          <ListItem key="save-project">
+            <Button
+              variant="outlined"
+              onClick={saveProjectOpen}
+              disabled={hasUnsavedChanges}
+            >
+              Save project
+            </Button>
+          </ListItem>
 
-      {/* This will probably be removed or replaced in the future. It's just for convenience during development. */}
-      <div className="SidebarContentWrapper">
-        <Button
-          variant="outlined"
-          color="error"
-          onClick={() => {
-            const ok = window.confirm(
-              "Are you sure you want to clear all data in the editors?",
-            );
-            if (!ok) return;
-            update({ type: "clear" });
-          }}
-        >
-          Clear all
-        </Button>
+          {/* This will probably be removed or replaced in the future. It's just for convenience during development. */}
+          <ListItem key="clear-all">
+            <Button
+              variant="outlined"
+              color="error"
+              onClick={() => {
+                const ok = window.confirm(
+                  "Are you sure you want to clear all data in the editors?",
+                );
+                if (!ok) return;
+                update({ type: "clear" });
+              }}
+            >
+              Clear all
+            </Button>
+          </ListItem>
+        </List>
       </div>
 
       <ModalWindow visible={loadProjectVisible} onClose={loadProjectClose}>
diff --git a/gui/src/localStyles.css b/gui/src/localStyles.css
index 88a9ef75..62034d14 100644
--- a/gui/src/localStyles.css
+++ b/gui/src/localStyles.css
@@ -65,12 +65,18 @@
 }
 
 /* Sidebar */
-.SidebarContentWrapper {
-  margin: 8px;
+.Sidebar h3 {
+  padding: 0px;
+  margin-left: 12px;
+  margin-bottom: 0px;
+  margin-top: 0px;
 }
 
-.SidebarHeading {
-  font-weight: bold;
+.Sidebar li {
+  margin-left: 12px;
+  margin-top: 0px;
+  margin-bottom: 5px;
+  padding: 0px;
 }
 
 /* File Upload */