Update icons

ShortestPathLab · Nov 21, 2024 · 2b81e73 · 2b81e73
1 parent f98d846
commit 2b81e73
Show file tree

Hide file tree

Showing 40 changed files with 388 additions and 360 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/client/package.json b/client/package.json
@@ -9,6 +9,8 @@
     "@emotion/styled": "^11.13.5",
     "@hello-pangea/dnd": "^17.0.0",
     "@monaco-editor/react": "^4.6.0",
+    "@mui-symbols-material/w300": "^0.3.3",
+    "@mui-symbols-material/w400": "^0.3.3",
     "@mui/icons-material": "^6.1.8",
     "@mui/lab": "^6.0.0-beta.16",
     "@mui/material": "^6.1.8",

diff --git a/client/src/Sidebar.tsx b/client/src/Sidebar.tsx
@@ -180,12 +180,12 @@ export function Sidebar({ children }: { children?: ReactNode }) {
                           alignItems: "center",
                           display: "flex",
                           "> svg > path": {
-                            strokeWidth: 0.5,
+                            strokeWidth: 1,
                             stroke: bgcolor,
                           },
                         }}
                       >
-                        {c.icon}
+                        {c.iconThin ?? c.icon}
                       </Box>
                     </Tooltip>
                   }

diff --git a/client/src/components/app-bar/FeaturePickerButton.tsx b/client/src/components/app-bar/FeaturePickerButton.tsx
@@ -1,4 +1,4 @@
-import { KeyboardArrowDownOutlined } from "@mui/icons-material";
+import { KeyboardArrowDownOutlined } from "@mui-symbols-material/w400";
 import { Box, Button, ButtonProps } from "@mui/material";
 import { Props } from "./FeaturePicker";
 

diff --git a/client/src/components/app-bar/Input.tsx b/client/src/components/app-bar/Input.tsx
@@ -1,4 +1,4 @@
-import { FileOpenOutlined } from "@mui/icons-material";
+import { FileOpenOutlined } from "@mui-symbols-material/w400";
 import { useSnackbar } from "components/generic/Snackbar";
 import { find, get, startCase } from "lodash";
 import { Map, UploadedTrace } from "slices/UIState";

diff --git a/client/src/components/app-bar/Playback.tsx b/client/src/components/app-bar/Playback.tsx
@@ -7,7 +7,7 @@ import {
   ChevronLeftOutlined as PreviousIcon,
   SkipNextOutlined as SkipIcon,
   SkipPreviousOutlined as StopIcon,
-} from "@mui/icons-material";
+} from "@mui-symbols-material/w300";
 import {
   Button,
   Collapse,
@@ -98,113 +98,115 @@ export function Playback({ layer }: { layer?: Layer<PlaybackLayerData> }) {
   const [stepInput, setStepInput] = useState("");
   const parsedStepInput = parseInt(stepInput);
   const parsedStepInputValid = !isNaN(parsedStepInput);
-  return (<>
-    <IconButton
-      label="previous-breakpoint"
-      icon={<StopIcon />}
-      onClick={() => {
-        stepTo(findBreakpoint(-1));
-      }}
-      disabled={!canStop || !canStepBackward}
-    />
-    <IconButton
-      label="step-backward"
-      icon={<PreviousIcon />}
-      onClick={stepBackward}
-      disabled={!canStepBackward}
-    />
-    <IconButton
-      {...(playing
-        ? {
-            label: "pause",
-            icon: <PauseIcon />,
-            onClick: () => pause(),
-            disabled: !canPause,
-          }
-        : {
-            label: "play",
-            icon: <PlayIcon />,
-            onClick: () => play(),
-            disabled: !canPlay,
-            color: "primary",
-          })}
-    />
-    <IconButton
-      label="step-forward"
-      icon={<NextIcon />}
-      onClick={stepForward}
-      disabled={!canStepForward}
-    />
-    <IconButton
-      label="next-breakpoint"
-      icon={<SkipIcon />}
-      onClick={() => {
-        stepTo(findBreakpoint());
-      }}
-      disabled={!canStepForward}
-    />
-    {divider}
-    <PopupState variant="popover">
-      {(state) => (
-        <>
-          <Button sx={{ minWidth: 0 }} {...bindTrigger(state)}>
-            <Typography
-              component="div"
-              variant="body2"
-              color="text.secondary"
-              sx={{
-                px: 0.25,
-                py: 0.25,
-                textAlign: "center",
-                ...paper(0),
-                borderRadius: 1,
-              }}
+  return (
+    <>
+      <IconButton
+        label="previous-breakpoint"
+        icon={<StopIcon />}
+        onClick={() => {
+          stepTo(findBreakpoint(-1));
+        }}
+        disabled={!canStop || !canStepBackward}
+      />
+      <IconButton
+        label="step-backward"
+        icon={<PreviousIcon />}
+        onClick={stepBackward}
+        disabled={!canStepBackward}
+      />
+      <IconButton
+        {...(playing
+          ? {
+              label: "pause",
+              icon: <PauseIcon />,
+              onClick: () => pause(),
+              disabled: !canPause,
+            }
+          : {
+              label: "play",
+              icon: <PlayIcon />,
+              onClick: () => play(),
+              disabled: !canPlay,
+              color: "primary",
+            })}
+      />
+      <IconButton
+        label="step-forward"
+        icon={<NextIcon />}
+        onClick={stepForward}
+        disabled={!canStepForward}
+      />
+      <IconButton
+        label="next-breakpoint"
+        icon={<SkipIcon />}
+        onClick={() => {
+          stepTo(findBreakpoint());
+        }}
+        disabled={!canStepForward}
+      />
+      {divider}
+      <PopupState variant="popover">
+        {(state) => (
+          <>
+            <Button sx={{ minWidth: 0 }} {...bindTrigger(state)}>
+              <Typography
+                component="div"
+                variant="body2"
+                color="text.secondary"
+                sx={{
+                  px: 0.25,
+                  py: 0.25,
+                  textAlign: "center",
+                  ...paper(0),
+                  borderRadius: 1,
+                }}
+              >
+                {step}
+              </Typography>
+            </Button>
+            <Popover
+              {...bindPopover(state)}
+              anchorOrigin={centered}
+              transformOrigin={centered}
             >
-              {step}
-            </Typography>
-          </Button>
-          <Popover
-            {...bindPopover(state)}
-            anchorOrigin={centered}
-            transformOrigin={centered}
-          >
-            <TextField
-              autoFocus
-              onChange={(e) => setStepInput(e.target.value)}
-              defaultValue={step}
-              placeholder="0"
-              sx={{ width: 180, border: "none" }}
-              slotProps={{
-                input: {
-                  sx: { fontSize: "0.875rem" },
-                  startAdornment: (
-                    <InputAdornment position="start">Step</InputAdornment>
-                  ),
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <IconButton
-                        icon={<ArrowForwardOutlined />}
-                        label="Go"
-                        size="small"
-                        color="inherit"
-                        disabled={
-                          !parsedStepInputValid || parsedStepInput === step
-                        }
-                        onClick={() => {
-                          stepTo(parsedStepInput);
-                          state.close();
-                        }}
-                      />
-                    </InputAdornment>
-                  ),
-                }
-              }}
-            />
-          </Popover>
-        </>
-      )}
-    </PopupState>
-  </>);
+              <TextField
+                autoFocus
+                onChange={(e) => setStepInput(e.target.value)}
+                defaultValue={step}
+                placeholder="0"
+                sx={{ width: 180, border: "none" }}
+                slotProps={{
+                  input: {
+                    sx: { fontSize: "0.875rem" },
+                    startAdornment: (
+                      <InputAdornment position="start">Step</InputAdornment>
+                    ),
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          icon={<ArrowForwardOutlined />}
+                          label="Go"
+                          size="small"
+                          color="inherit"
+                          disabled={
+                            !parsedStepInputValid || parsedStepInput === step
+                          }
+                          onClick={() => {
+                            stepTo(parsedStepInput);
+                            state.close();
+                          }}
+                        />
+                      </InputAdornment>
+                    ),
+                  },
+                }}
+              />
+            </Popover>
+          </>
+        )}
+      </PopupState>
+    </>
+  );
 }
 export function MinimisedPlaybackControls({
   layer,

diff --git a/client/src/components/generic/ListEditor.tsx b/client/src/components/generic/ListEditor.tsx
@@ -1,9 +1,9 @@
 import {
-  Add,
-  ClearOutlined as DeleteIcon,
+  AddOutlined as Add,
+  CloseOutlined as DeleteIcon,
   DragHandleOutlined,
   EditOutlined as EditIcon,
-} from "@mui/icons-material";
+} from "@mui-symbols-material/w400";
 import {
   Box,
   Button,

diff --git a/client/src/components/generic/Modal.tsx b/client/src/components/generic/Modal.tsx
@@ -1,4 +1,4 @@
-import { ArrowBack } from "@mui/icons-material";
+import { ArrowBackOutlined as ArrowBack } from "@mui-symbols-material/w400";
 import {
   AppBar,
   Box,

diff --git a/client/src/components/generic/Overline.tsx b/client/src/components/generic/Overline.tsx
@@ -1,4 +1,4 @@
-import { FiberManualRecord as Dot } from "@mui/icons-material";
+import { FiberManualRecordOutlined as Dot } from "@mui-symbols-material/w400";
 import { Typography as Type, TypographyProps } from "@mui/material";
 import { ComponentProps, ReactNode } from "react";
 

diff --git a/client/src/components/generic/Snackbar.tsx b/client/src/components/generic/Snackbar.tsx
@@ -1,4 +1,4 @@
-import { CloseOutlined as CloseIcon } from "@mui/icons-material";
+import { CloseOutlined as CloseIcon } from "@mui-symbols-material/w400";
 import { Button, IconButton, Snackbar } from "@mui/material";
 import { filter, noop } from "lodash";
 import { Label } from "./Label";

diff --git a/client/src/components/inspector/EventInspector.tsx b/client/src/components/inspector/EventInspector.tsx
@@ -1,4 +1,7 @@
-import { DataObjectOutlined, FiberManualRecord } from "@mui/icons-material";
+import {
+  DataObjectOutlined,
+  FiberManualRecordFilledOutlined as FiberManualRecord,
+} from "@mui-symbols-material/w400";
 import {
   Box,
   Divider,

diff --git a/client/src/components/inspector/FileDropZone.tsx b/client/src/components/inspector/FileDropZone.tsx
@@ -1,4 +1,4 @@
-import { WorkspacesOutlined } from "@mui/icons-material";
+import { WorkspacesOutlined } from "@mui-symbols-material/w400";
 import { Backdrop, Stack, Typography as Type } from "@mui/material";
 import { useSnackbar } from "components/generic/Snackbar";
 import { ORIGIN_FILESYSTEM, useWorkspace } from "hooks/useWorkspace";

diff --git a/client/src/components/inspector/Placeholder.tsx b/client/src/components/inspector/Placeholder.tsx
@@ -1,4 +1,4 @@
-import { WidgetsOutlined } from "@mui/icons-material";
+import { WidgetsOutlined } from "@mui-symbols-material/w400";
 import { Box, Typography as Type } from "@mui/material";
 import { Flex, FlexProps } from "components/generic/Flex";
 import { ReactElement, ReactNode } from "react";

diff --git a/client/src/components/inspector/TraceRenderer.tsx b/client/src/components/inspector/TraceRenderer.tsx
@@ -1,7 +1,7 @@
 import {
   BlurOnOutlined as DisabledIcon,
   ViewInArOutlined,
-} from "@mui/icons-material";
+} from "@mui-symbols-material/w400";
 import { Box, CircularProgress, useTheme } from "@mui/material";
 import { RendererProps, SelectEvent } from "components/renderer/Renderer";
 import { usePlaybackState } from "hooks/usePlaybackState";

diff --git a/client/src/components/inspector/TrustedContent.tsx b/client/src/components/inspector/TrustedContent.tsx
@@ -2,7 +2,7 @@ import {
   CheckOutlined,
   DoneAllOutlined,
   ShieldOutlined,
-} from "@mui/icons-material";
+} from "@mui-symbols-material/w400";
 import { Link, Stack } from "@mui/material";
 import { ReactNode } from "react";
 import { Placeholder } from "./Placeholder";

diff --git a/client/src/components/inspector/ViewControls.tsx b/client/src/components/inspector/ViewControls.tsx
@@ -4,7 +4,7 @@ import {
   MoreVertOutlined as MoreIcon,
   OpenInNewOutlined as PopOutIcon,
   ViewAgendaOutlined as SplitIcon,
-} from "@mui/icons-material";
+} from "@mui-symbols-material/w400";
 import {
   Box,
   Divider,

diff --git a/client/src/components/inspector/ViewTree.tsx b/client/src/components/inspector/ViewTree.tsx
@@ -1,5 +1,5 @@
 import Split, { SplitDirection } from "@devbookhq/splitter";
-import { DragIndicatorOutlined } from "@mui/icons-material";
+import { DragIndicatorOutlined } from "@mui-symbols-material/w400";
 import { Box, useTheme } from "@mui/material";
 import { Flex } from "components/generic/Flex";
 import {

diff --git a/client/src/components/layer-editor/LayerListEditor.tsx b/client/src/components/layer-editor/LayerListEditor.tsx
@@ -1,4 +1,4 @@
-import { MoreVertOutlined } from "@mui/icons-material";
+import { MoreVertOutlined } from "@mui-symbols-material/w400";
 import { Box, IconButton, Menu, MenuItem, MenuList } from "@mui/material";
 import { ListEditor } from "components/generic/ListEditor";
 import { head, map } from "lodash";

diff --git a/client/src/components/settings-editor/RendererEditor.tsx b/client/src/components/settings-editor/RendererEditor.tsx
@@ -1,4 +1,4 @@
-import { EditOutlined as EditIcon } from "@mui/icons-material";
+import { EditOutlined as EditIcon } from "@mui-symbols-material/w400";
 import {
   Box,
   Chip,

diff --git a/client/src/components/settings-editor/RendererListEditor.tsx b/client/src/components/settings-editor/RendererListEditor.tsx
@@ -1,4 +1,4 @@
-import { ReplayOutlined as ResetIcon } from "@mui/icons-material";
+import { ReplayOutlined as ResetIcon } from "@mui-symbols-material/w400";
 import { Box } from "@mui/material";
 import { defaultTransport } from "client";
 import { FeaturePickerButton } from "components/app-bar/FeaturePickerButton";

diff --git a/client/src/components/settings-editor/ServerListEditor.tsx b/client/src/components/settings-editor/ServerListEditor.tsx
@@ -1,4 +1,4 @@
-import { ReplayOutlined as ResetIcon } from "@mui/icons-material";
+import { ReplayOutlined as ResetIcon } from "@mui-symbols-material/w400";
 import { Box } from "@mui/material";
 import { defaultTransport } from "client";
 import { FeaturePickerButton } from "components/app-bar/FeaturePickerButton";

diff --git a/client/src/components/title-bar/ExportWorkspaceModal.tsx b/client/src/components/title-bar/ExportWorkspaceModal.tsx
@@ -1,4 +1,4 @@
-import { DownloadOutlined } from "@mui/icons-material";
+import { DownloadOutlined } from "@mui-symbols-material/w400";
 import { Box, Stack, TextField, Typography } from "@mui/material";
 import { Button } from "components/generic/Button";
 import Modal, { ModalAppBar } from "components/generic/Modal";