Merge branch 'main' into update-gist

flatironinstitute · Jul 30, 2024 · e0b18fa · e0b18fa
2 parents ad27ddd + f0c7de1
commit e0b18fa
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 49 deletions.
diff --git a/gui/src/app/pages/HomePage/Sidebar.tsx b/gui/src/app/pages/HomePage/Sidebar.tsx
@@ -2,11 +2,10 @@ 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";
-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";
@@ -27,7 +26,7 @@ const exampleLinks = [
   },
 ];
 
-export const drawerWidth = 240;
+export const drawerWidth = 180;
 
 const Sidebar: FunctionComponent<Sidebar> = ({
   hasUnsavedChanges,
@@ -62,53 +61,61 @@ const Sidebar: FunctionComponent<Sidebar> = ({
       {/* For spacing purposes */}
       <Toolbar />
 
-      <h3>Examples</h3>
+      <div className="Sidebar">
+        <h3>Examples</h3>
 
-      {exampleLinks.map((example, i) => (
-        <div key={i} className="SidebarContentWrapper">
-          <Link replace to={`?project=${example.link}`}>
-            {example.name}
-          </Link>
-        </div>
-      ))}
-      <Divider />
-      <List>
-        <ListItem>
-          <Button
-            variant="outlined"
-            onClick={loadProjectOpen}
-            disabled={hasUnsavedChanges}
-          >
-            Load project
-          </Button>
-        </ListItem>
+        <List>
+          {exampleLinks.map((example, i) => (
+            <ListItem key={i}>
+              <Link replace to={`?project=${example.link}`}>
+                {example.name}
+              </Link>
+            </ListItem>
+          ))}
+        </List>
+
+        <Divider />
+
+        <List>
+          <ListItem key="load-project">
+            <Button
+              variant="outlined"
+              onClick={loadProjectOpen}
+              disabled={hasUnsavedChanges}
+            >
+              Load project
+            </Button>
+          </ListItem>
+
+          <ListItem key="save-project">
+            <Button
+              variant="outlined"
+              onClick={saveProjectOpen}
+              disabled={hasUnsavedChanges}
+            >
+              Save 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>
+          <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}>
         <LoadProjectWindow onClose={loadProjectClose} />
       </ModalWindow>

diff --git a/gui/src/localStyles.css b/gui/src/localStyles.css
@@ -65,8 +65,18 @@
 }
 
 /* Sidebar */
-.SidebarContentWrapper {
-  margin: 5px;
+.Sidebar h3 {
+  padding: 0px;
+  margin-left: 12px;
+  margin-bottom: 0px;
+  margin-top: 0px;
+}
+
+.Sidebar li {
+  margin-left: 12px;
+  margin-top: 0px;
+  margin-bottom: 5px;
+  padding: 0px;
 }
 
 /* File Upload */