From c981325fb345f89325e4a59edc827085239ce0c5 Mon Sep 17 00:00:00 2001
From: Lewis Crichton <lewi@lewisakura.moe>
Date: Sat, 25 Nov 2023 17:00:10 +0000
Subject: [PATCH] fix: colorpicker (sorta) this now uses the lazy-loaded
 colorpicker, but this only works if said colorpicker has already been loaded.
 need to force load before anything.

---
 .../components/SettingColorComponent.tsx      | 52 ++-----------------
 .../ThemeSettings/components/colorStyles.css  | 23 --------
 2 files changed, 5 insertions(+), 70 deletions(-)

diff --git a/src/components/ThemeSettings/components/SettingColorComponent.tsx b/src/components/ThemeSettings/components/SettingColorComponent.tsx
index 16c11af74..6adca4fa4 100644
--- a/src/components/ThemeSettings/components/SettingColorComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingColorComponent.tsx
@@ -7,61 +7,21 @@
 import "./colorStyles.css";
 
 import { classNameFactory } from "@api/Styles";
-import { LazyComponent } from "@utils/react";
-import { find, findByCodeLazy } from "@webpack";
-import { Forms, Popout, useMemo, useState } from "@webpack/common";
+import { findByCodeLazy, findComponentByCodeLazy } from "@webpack";
+import { Forms, useMemo, useState } from "@webpack/common";
 
 interface ColorPickerProps {
-    value: number | null;
+    color: number | null;
     showEyeDropper?: boolean;
     onChange(value: number | null): void;
-    onClose?(): void;
 }
-const ColorPickerModal = LazyComponent<ColorPickerProps>(() => find(m => m?.type?.toString?.().includes(".showEyeDropper")));
+const ColorPicker = findComponentByCodeLazy<ColorPickerProps>(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR");
 
 // TinyColor is completely unmangled and it's duplicated in two modules! Fun!
 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"]');
-
-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 & { width: number; height: number; }) {
-    const [color, setColor] = useState(props.value);
-
-    const correctedColor = color ? `#${color.toString(16).padStart(6, "0")}` : "#000000";
-
-    return (
-        <Popout
-            renderPopout={() => (
-                <ColorPickerModal value={props.value} onChange={value => { setColor(value); props.onChange(value); }} showEyeDropper={props.showEyeDropper} />
-            )}
-        >
-            {popoutProps => (
-                <div {...popoutProps} className={cl("swatch")} style={{
-                    backgroundColor: correctedColor,
-                    borderColor: correctedColor,
-                    width: props.width,
-                    height: props.height
-                }}>
-                    <EditPencil
-                        className={cl("swatch-pencil")}
-                        color={TinyColor(correctedColor).isLight() ? "var(--primary-530)" : "var(--white-500)"}
-                    />
-                </div>
-            )}
-        </Popout>
-    );
-}
-
 interface Props {
     label: string;
     name: string;
@@ -86,10 +46,8 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) {
             <div className={cl("swatch-row")}>
                 <span>{label}</span>
                 <ColorPicker
-                    width={80} /* same as a switch */
-                    height={48}
                     key={name}
-                    value={normalizedValue}
+                    color={normalizedValue}
                     onChange={handleChange}
                 />
             </div>
diff --git a/src/components/ThemeSettings/components/colorStyles.css b/src/components/ThemeSettings/components/colorStyles.css
index b76f0bedd..8b7bfc518 100644
--- a/src/components/ThemeSettings/components/colorStyles.css
+++ b/src/components/ThemeSettings/components/colorStyles.css
@@ -1,22 +1,3 @@
-.vc-usercss-settings-color-swatch {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    position: relative;
-    border: 1px solid;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.vc-usercss-settings-color-swatch-pencil {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    width: 14px;
-    height: 14px;
-}
-
 .vc-usercss-settings-color-swatch-row {
     display: flex;
     flex-direction: row;
@@ -36,7 +17,3 @@
     font-weight: 500;
     word-wrap: break-word;
 }
-
-.vc-usercss-settings-color-swatch-row > .vc-usercss-settings-color-swatch {
-    flex: 0 0 auto;
-}