From 4325dcf02e9b3bc3bb3c0b37e2c4bdb9831b3c9a Mon Sep 17 00:00:00 2001
From: Lewis Crichton <lewi@lewisakura.moe>
Date: Mon, 25 Sep 2023 18:27:49 +0100
Subject: [PATCH] feat: make the color picker look prettier based on switch

---
 src/components/ThemeSettings/ThemesTab.tsx    |  2 +-
 .../components/SettingColorComponent.tsx      | 24 +++++++++++++------
 .../ThemeSettings/components/colorStyles.css  | 24 +++++++++++++++++++
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/components/ThemeSettings/ThemesTab.tsx b/src/components/ThemeSettings/ThemesTab.tsx
index 366c2387..91868e36 100644
--- a/src/components/ThemeSettings/ThemesTab.tsx
+++ b/src/components/ThemeSettings/ThemesTab.tsx
@@ -22,6 +22,7 @@ import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { ErrorCard } from "@components/ErrorCard";
 import { Flex } from "@components/Flex";
+import { CogWheel } from "@components/Icons";
 import { Link } from "@components/Link";
 import { AddonCard } from "@components/VencordSettings/AddonCard";
 import { SettingsTab, wrapTab } from "@components/VencordSettings/shared";
@@ -52,7 +53,6 @@ type FileInput = ComponentType<{
 
 const InviteActions = findByPropsLazy("resolveInvite");
 const TrashIcon = findByCodeLazy("M5 6.99902V18.999C5 20.101 5.897 20.999");
-const CogWheel = findByCodeLazy("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069");
 const FileInput: FileInput = findByCodeLazy("activateUploadDialogue=");
 
 const TextAreaProps = findLazy(m => typeof m.textarea === "string");
diff --git a/src/components/ThemeSettings/components/SettingColorComponent.tsx b/src/components/ThemeSettings/components/SettingColorComponent.tsx
index bec185e4..9c300e7f 100644
--- a/src/components/ThemeSettings/components/SettingColorComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingColorComponent.tsx
@@ -24,7 +24,15 @@ const TinyColor: tinycolor.Constructor = findByCodeLazy("this._gradientType=");
 
 const cl = classNameFactory("vc-usercss-settings-color-");
 
-const EditPencil = findByCodeLazy("M19.2929 9.8299L19.9409 9.18278C21.353 7.77064", '["color","height","width"]');
+// const EditPencil = findByCodeLazy("M19.2929 9.8299L19.9409 9.18278C21.353 7.77064", '["color","height","width"]');
+
+function EditPencil({ className, color }) {
+    return (
+        <svg viewBox="0 0 24 24" className={className}>
+            <path fillRule="evenodd" clipRule="evenodd" d="M19.2929 9.8299L19.9409 9.18278C21.353 7.77064 21.353 5.47197 19.9409 4.05892C18.5287 2.64678 16.2292 2.64678 14.817 4.05892L14.1699 4.70694L19.2929 9.8299ZM12.8962 5.97688L5.18469 13.6906L10.3085 18.813L18.0201 11.0992L12.8962 5.97688ZM4.11851 20.9704L8.75906 19.8112L4.18692 15.239L3.02678 19.8796C2.95028 20.1856 3.04028 20.5105 3.26349 20.7337C3.48669 20.9569 3.8116 21.046 4.11851 20.9704Z" fill={color}></path>
+        </svg>
+    );
+}
 
 function ColorPicker(props: ColorPickerProps) {
     const [color, setColor] = useState(props.value);
@@ -73,12 +81,14 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) {
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
-            <ColorPicker
-                key={name}
-                value={normalizedValue}
-                onChange={handleChange}
-            />
+            <div className={cl("swatch-row")}>
+                <span>{label}</span>
+                <ColorPicker
+                    key={name}
+                    value={normalizedValue}
+                    onChange={handleChange}
+                />
+            </div>
         </Forms.FormSection>
     );
 }
diff --git a/src/components/ThemeSettings/components/colorStyles.css b/src/components/ThemeSettings/components/colorStyles.css
index 53a88e95..887e3f71 100644
--- a/src/components/ThemeSettings/components/colorStyles.css
+++ b/src/components/ThemeSettings/components/colorStyles.css
@@ -18,3 +18,27 @@
     width: 14px;
     height: 14px;
 }
+
+.vc-usercss-settings-color-swatch-row {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+}
+
+.vc-usercss-settings-color-swatch-row > span {
+    display: block;
+    flex: 1;
+    overflow: hidden;
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(--header-primary);
+    line-height: 24px;
+    font-size: 16px;
+    font-weight: 500;
+    word-wrap: break-word;
+}
+
+.vc-usercss-settings-color-swatch-row > .vc-usercss-settings-color-swatch {
+    flex: 0 0 auto;
+}