Merge branch 'v2' of https://github.com/notsidney/xtable into v2

src/components/Settings/ThemeColorPicker.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { ChromePicker } from "react-color";
+import { ColorPicker, toColor } from "react-color-palette";
+import "react-color-palette/lib/css/styles.css";
 
-import { Grid, Typography, Stack, Box, Button } from "@mui/material";
+import { useTheme, Grid, Typography, Stack, Box, Button } from "@mui/material";
 import PassIcon from "@mui/icons-material/Check";
 import FailIcon from "@mui/icons-material/Error";
 
@@ -24,6 +25,8 @@ export default function ThemeColorPicker({
   currentDark = DARK_PRIMARY,
   handleSave,
 }: IThemeColorPickerProps) {
+  const theme = useTheme();
+
   const [light, setLight] = useState(currentLight);
   const [dark, setDark] = useState(currentDark);
 
@@ -32,25 +35,31 @@ export default function ThemeColorPicker({
 
   return (
     <>
-      <Grid container spacing={2} style={{ marginTop: 0 }}>
+      <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 item xs={12} sm={6}>
           <Typography variant="subtitle2" component="h3" gutterBottom>
             Light Theme
           </Typography>
-          <Box
-            sx={{
-              "& .chrome-picker": {
-                width: "100% !important",
-                boxShadow: (theme) =>
-                  `0 0 0 1px ${theme.palette.divider} inset !important`,
-              },
-            }}
-          >
-            <ChromePicker
-              color={light}
-              onChangeComplete={(c) => setLight(c.hex)}
-            />
-          </Box>
+          <ColorPicker
+            width={244}
+            height={140}
+            color={toColor("hex", light)}
+            onChange={(c: any) => setLight(c.hex)}
+            dark={theme.palette.mode === "dark"}
+          />
 
           <Stack
             spacing={0}
@@ -93,20 +102,13 @@ export default function ThemeColorPicker({
           <Typography variant="subtitle2" component="h3" gutterBottom>
             Dark Theme
           </Typography>
-          <Box
-            sx={{
-              "& .chrome-picker": {
-                width: "100% !important",
-                boxShadow: (theme) =>
-                  `0 0 0 1px ${theme.palette.divider} inset !important`,
-              },
-            }}
-          >
-            <ChromePicker
-              color={dark}
-              onChangeComplete={(c) => setDark(c.hex)}
-            />
-          </Box>
+          <ColorPicker
+            width={244}
+            height={140}
+            color={toColor("hex", dark)}
+            onChange={(c: any) => setDark(c.hex)}
+            dark={theme.palette.mode === "dark"}
+          />
 
           <Stack
             spacing={0}

src/components/fields/Color/PopoverCell.tsx

@@ -1,10 +1,17 @@
 import { IPopoverCellProps } from "../types";
-import { ChromePicker } from "react-color";
+import { ColorPicker, toColor } from "react-color-palette";
+import "react-color-palette/lib/css/styles.css";
 
 export default function Color({ value, onSubmit }: IPopoverCellProps) {
-  const handleChangeComplete = (color) => onSubmit(color);
+  const handleChangeComplete = (color: any) => onSubmit(color);
 
   return (
-    <ChromePicker color={value?.rgb} onChangeComplete={handleChangeComplete} />
+    <ColorPicker
+      width={240}
+      height={180}
+      color={value?.hex ? value : toColor("hex", "#fff")}
+      onChange={handleChangeComplete}
+      alpha
+    />
   );
 }

src/components/fields/Color/SideDrawerField.tsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
 import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";
-import { ChromePicker } from "react-color";
+import { ColorPicker, toColor } from "react-color-palette";
+import "react-color-palette/lib/css/styles.css";
 
 import { makeStyles, createStyles } from "@mui/styles";
-import { Grid, ButtonBase, Typography, Collapse } from "@mui/material";
+import { ButtonBase, Box, Typography, Collapse } from "@mui/material";
 
-// import { useFieldStyles } from "components/SideDrawer/Form/utils";
+import { useFieldStyles } from "components/SideDrawer/Form/utils";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -42,7 +43,7 @@ export default function Color({
   disabled,
 }: ISideDrawerFieldProps) {
   const classes = useStyles();
-  // const fieldClasses = useFieldStyles();
+  const fieldClasses = useFieldStyles();
 
   const [showPicker, setShowPicker] = useState(false);
   const toggleOpen = () => setShowPicker((s) => !s);
@@ -51,40 +52,66 @@ export default function Color({
     <Controller
       control={control}
       name={column.key}
-      render={({ onChange, onBlur, value }) => (
-        <>
-          <Grid
-            container
-            alignItems="center"
-            spacing={1}
-            className={classes.root}
-            onClick={() => {
-              toggleOpen();
-              onBlur();
-            }}
-            component={ButtonBase}
-            focusRipple
-            disabled={disabled}
-          >
-            <Grid item>
-              <div
-                className={classes.colorIndicator}
-                style={{ backgroundColor: value?.hex }}
+      render={({ onChange, onBlur, value }) => {
+        console.log(value);
+        return (
+          <>
+            <ButtonBase
+              className={fieldClasses.root}
+              onClick={() => {
+                toggleOpen();
+                onBlur();
+              }}
+              component={ButtonBase}
+              focusRipple
+              disabled={disabled}
+              sx={{
+                justifyContent: "flex-start",
+                "&&": { pl: 0.75 },
+                color: value?.hex ? "textPrimary" : "textSecondary",
+              }}
+            >
+              <Box
+                sx={{
+                  backgroundColor: value?.hex,
+                  width: 20,
+                  height: 20,
+                  mr: 2,
+                  boxShadow: (theme) =>
+                    `0 0 0 1px ${theme.palette.divider} inset`,
+                  borderRadius: 0.5,
+                }}
               />
-            </Grid>
 
-            <Grid item xs>
-              <Typography color={value?.hex ? "textPrimary" : "textSecondary"}>
-                {value?.hex ?? "Choose a color…"}
-              </Typography>
-            </Grid>
-          </Grid>
+              {value?.hex ?? "Choose a color…"}
+            </ButtonBase>
 
-          <Collapse in={showPicker}>
-            <ChromePicker color={value?.rgb} onChangeComplete={onChange} />
-          </Collapse>
-        </>
-      )}
+            <Collapse
+              in={showPicker}
+              sx={{
+                "& .rcp": {
+                  borderRadius: 1,
+                  boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider}`,
+                  m: 1 / 8,
+                },
+                "& .rcp-saturation": {
+                  borderRadius: 1,
+                  borderBottomLeftRadius: 0,
+                  borderBottomRightRadius: 0,
+                },
+              }}
+            >
+              <ColorPicker
+                width={240}
+                height={180}
+                color={value?.hex ? value : toColor("hex", "#fff")}
+                onChange={onChange}
+                alpha
+              />
+            </Collapse>
+          </>
+        );
+      }}
     />
   );
 }

src/components/fields/Slider/TableCell.tsx

@@ -10,11 +10,11 @@ const useStyles = makeStyles((theme) =>
     progress: {
       width: "100%",
       backgroundColor: theme.palette.divider,
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: 4,
     },
     bar: {
-      borderRadius: theme.shape.borderRadius,
-      height: 16,
+      borderRadius: 4,
+      height: 8,
       maxWidth: "100%",
     },
   })