From 03bc5cde227849e9e341bf5b24026c5d597a4daf Mon Sep 17 00:00:00 2001
From: Lewis Crichton <lewi@lewisakura.moe>
Date: Mon, 25 Sep 2023 18:32:16 +0100
Subject: [PATCH] feat: make colorpicker use props for height/width

---
 .../ThemeSettings/components/SettingColorComponent.tsx    | 8 ++++++--
 src/components/ThemeSettings/components/colorStyles.css   | 2 --
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/ThemeSettings/components/SettingColorComponent.tsx b/src/components/ThemeSettings/components/SettingColorComponent.tsx
index 9c300e7f6..34e282a39 100644
--- a/src/components/ThemeSettings/components/SettingColorComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingColorComponent.tsx
@@ -34,7 +34,7 @@ function EditPencil({ className, color }) {
     );
 }
 
-function ColorPicker(props: ColorPickerProps) {
+function ColorPicker(props: ColorPickerProps & { width: number; height: number; }) {
     const [color, setColor] = useState(props.value);
 
     const correctedColor = color ? `#${color.toString(16).padStart(6, "0")}` : "#000000";
@@ -48,7 +48,9 @@ function ColorPicker(props: ColorPickerProps) {
             {popoutProps => (
                 <div {...popoutProps} className={cl("swatch")} style={{
                     backgroundColor: correctedColor,
-                    borderColor: correctedColor
+                    borderColor: correctedColor,
+                    width: props.width,
+                    height: props.height
                 }}>
                     <EditPencil
                         className={cl("swatch-pencil")}
@@ -84,6 +86,8 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) {
             <div className={cl("swatch-row")}>
                 <span>{label}</span>
                 <ColorPicker
+                    width={40} /* same as a switch */
+                    height={24}
                     key={name}
                     value={normalizedValue}
                     onChange={handleChange}
diff --git a/src/components/ThemeSettings/components/colorStyles.css b/src/components/ThemeSettings/components/colorStyles.css
index 887e3f713..b76f0bedd 100644
--- a/src/components/ThemeSettings/components/colorStyles.css
+++ b/src/components/ThemeSettings/components/colorStyles.css
@@ -2,8 +2,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 69px;
-    height: 50px;
     box-sizing: border-box;
     position: relative;
     border: 1px solid;