update color picker, breadcrumbs styles

src/components/Settings/ThemeColorPicker.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
-import { ColorPicker, toColor } from "react-color-palette";
 import { colord } from "colord";
+import { ColorPicker, toColor } from "react-color-palette";
 import "react-color-palette/lib/css/styles.css";
 
-import { useTheme, Grid, Typography, Stack, Box, Button } from "@mui/material";
+import { Grid, Typography, Stack, Box, Button } from "@mui/material";
 import PassIcon from "@mui/icons-material/Check";
 import FailIcon from "@mui/icons-material/Error";
 
@@ -21,8 +21,6 @@ export default function ThemeColorPicker({
   currentDark = DARK_PRIMARY,
   handleSave,
 }: IThemeColorPickerProps) {
-  const theme = useTheme();
-
   const [light, setLight] = useState(currentLight);
   const [dark, setDark] = useState(currentDark);
 
@@ -31,20 +29,7 @@ export default function ThemeColorPicker({
 
   return (
     <>
-      <Grid
-        container
-        spacing={2}
-        sx={{
-          mt: 0,
-          "& .rcp": {
-            borderRadius: 1,
-            boxShadow: (theme) =>
-              `0 0 0 1px ${theme.palette.divider} inset !important`,
-
-            "& .rcp-fields-element-input": theme.typography.body2,
-          },
-        }}
-      >
+      <Grid container spacing={2} style={{ marginTop: 0 }}>
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle2" component="h3" gutterBottom>
             Light theme
@@ -54,7 +39,6 @@ export default function ThemeColorPicker({
             height={140}
             color={toColor("hex", light)}
             onChange={(c) => setLight(c.hex)}
-            dark={theme.palette.mode === "dark"}
           />
 
           <Stack
@@ -103,7 +87,6 @@ export default function ThemeColorPicker({
             height={140}
             color={toColor("hex", dark)}
             onChange={(c: any) => setDark(c.hex)}
-            dark={theme.palette.mode === "dark"}
           />
 
           <Stack

src/components/Table/Breadcrumbs.tsx

@@ -50,16 +50,20 @@ export default function Breadcrumbs({ sx = [], ...props }: BreadcrumbsProps) {
 
   return (
     <MuiBreadcrumbs
-      separator={<ArrowRightIcon />}
-      aria-label="Sub-table breadcrumbs"
+      aria-label="Table breadcrumbs"
       {...props}
       sx={[
         {
+          fontSize: (theme) => theme.typography.h6.fontSize,
+          fontWeight: "medium",
+          color: "text.disabled",
+
           "& .MuiBreadcrumbs-ol": {
             userSelect: "none",
             flexWrap: "nowrap",
             whiteSpace: "nowrap",
           },
+          "& .MuiBreadcrumbs-li": { display: "flex" },
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

src/pages/Settings/ProjectSettings.tsx

@@ -38,9 +38,7 @@ export default function ProjectSettingsPage() {
   );
   const updateProjectSettings = useDebouncedCallback((data) => {
     if (_updateProjectSettingsDoc) {
-      _updateProjectSettingsDoc(data).then(() =>
-        enqueueSnackbar("Saved", { variant: "success" })
-      );
+      _updateProjectSettingsDoc(data).then(() => enqueueSnackbar("Saved"));
     } else {
       enqueueSnackbar("Could not update project settings", {
         variant: "error",

src/pages/Settings/UserSettings.tsx

@@ -31,9 +31,7 @@ export default function UserSettingsPage() {
   const [_updateUserSettings] = useAtom(updateUserSettingsAtom, globalScope);
   const updateSettings = useDebouncedCallback((data) => {
     if (_updateUserSettings) {
-      _updateUserSettings(data).then(() =>
-        enqueueSnackbar("Saved", { variant: "success" })
-      );
+      _updateUserSettings(data).then(() => enqueueSnackbar("Saved"));
     } else {
       enqueueSnackbar("Could not update project settings", {
         variant: "error",

src/theme/components.tsx

@@ -93,14 +93,6 @@ export const components = (theme: Theme): ThemeOptions => {
             padding: `${4 / 16}em ${8 / 16}em`,
           },
 
-          ".chrome-picker": {
-            colorScheme: "light",
-            boxShadow: theme.shadows[1] + " !important",
-            borderRadius: theme.shape.borderRadius + "px !important",
-
-            "& input, & label": theme.typography.body2,
-          },
-
           ".visually-hidden": {
             position: "absolute",
             clip: "rect(1px, 1px, 1px, 1px)",
@@ -110,6 +102,71 @@ export const components = (theme: Theme): ThemeOptions => {
             padding: 0,
             border: 0,
           },
+
+          ".rcp": {
+            backgroundColor: "transparent",
+            borderRadius: (theme.shape.borderRadius as number) * 2,
+            border: `1px solid ${theme.palette.divider}`,
+            boxSizing: "border-box",
+
+            "--rcp-background": "transparent",
+            "--rcp-input-text": theme.palette.text.primary,
+            "--rcp-input-border": theme.palette.divider,
+            "--rcp-input-label": theme.palette.text.primary,
+
+            "& .rcp-saturation": {
+              borderTopLeftRadius: (theme.shape.borderRadius as number) * 2 - 1,
+              borderTopRightRadius:
+                (theme.shape.borderRadius as number) * 2 - 1,
+            },
+            "& .rcp-body": {
+              padding: theme.spacing(2),
+            },
+            "& .rcp-fields": {
+              gridTemplateColumns: `repeat(auto-fit, minmax(${theme.spacing(
+                20
+              )}, 1fr))`,
+            },
+            "& .rcp-fields-element": {
+              flexDirection: "column-reverse",
+              alignItems: "flex-start",
+              gap: theme.spacing(0.25),
+            },
+            "& .rcp-fields-element-label": {
+              ...theme.typography.button,
+              paddingLeft: theme.spacing(0.25),
+            },
+            "& .rcp-fields-element-input": {
+              ...theme.typography.body2,
+              textAlign: "left",
+              fontVariantNumeric: "tabular-nums",
+
+              backgroundColor: theme.palette.action.input,
+              "&:hover:not(.Mui-disabled), &:focus": {
+                backgroundColor: theme.palette.action.input,
+              },
+
+              border: 0,
+              boxShadow: `0 -1px 0 0 ${theme.palette.text.disabled} inset,
+                        0 0 0 1px ${theme.palette.action.inputOutline} inset`,
+              transition: theme.transitions.create("box-shadow", {
+                duration: theme.transitions.duration.short,
+              }),
+
+              "&:hover": {
+                boxShadow: `0 -1px 0 0 ${theme.palette.text.primary} inset,
+                          0 0 0 1px ${theme.palette.action.inputOutline} inset`,
+              },
+              "&:focus, &:focus:hover": {
+                boxShadow: `0 -2px 0 0 ${theme.palette.primary.main} inset,
+                          0 0 0 1px ${theme.palette.action.inputOutline} inset`,
+              },
+
+              borderRadius: theme.shape.borderRadius,
+              padding: theme.spacing(0.75, 1.5),
+              caretColor: theme.palette.primary.main,
+            },
+          },
         },
       },