Adjust Sidebar styling

flatironinstitute · Jul 30, 2024 · 9182ae1 · 9182ae1
1 parent 1f309a1
commit 9182ae1
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 46 deletions.
diff --git 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
@@ -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 */