From b4cde055825b5e3d2c1d1789aebeb88f523c6d3e Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Wed, 21 May 2025 16:26:30 -0400
Subject: [PATCH] Fix Error On Compile

---
 .../components/BuilderButton.tsx              |  7 +--
 .../components/BuilderColorButton.tsx         | 58 ++++++++++---------
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/equicordplugins/fakeProfileThemesAndEffects/components/BuilderButton.tsx b/src/equicordplugins/fakeProfileThemesAndEffects/components/BuilderButton.tsx
index d9aada06..45ffe141 100644
--- a/src/equicordplugins/fakeProfileThemesAndEffects/components/BuilderButton.tsx
+++ b/src/equicordplugins/fakeProfileThemesAndEffects/components/BuilderButton.tsx
@@ -5,18 +5,17 @@
  */
 
 import { Text, Tooltip } from "@webpack/common";
-import type { ComponentProps } from "react";
-
-import { buttonRef } from "./BuilderColorButton";
+import type { ComponentProps, RefObject } from "react";
 
 export interface BuilderButtonProps {
     label?: string | undefined;
     tooltip?: string | undefined;
     selectedStyle?: ComponentProps<"div">["style"];
     buttonProps?: ComponentProps<"div"> | undefined;
+    buttonRef?: RefObject<null>;
 }
 
-export const BuilderButton = ({ label, tooltip, selectedStyle, buttonProps }: BuilderButtonProps) => (
+export const BuilderButton = ({ buttonRef, label, tooltip, selectedStyle, buttonProps }: BuilderButtonProps) => (
     <Tooltip text={tooltip} shouldShow={!!tooltip}>
         {tooltipProps => (
             <div style={{ width: "60px" }}>
diff --git a/src/equicordplugins/fakeProfileThemesAndEffects/components/BuilderColorButton.tsx b/src/equicordplugins/fakeProfileThemesAndEffects/components/BuilderColorButton.tsx
index 43f38e17..aa669e87 100644
--- a/src/equicordplugins/fakeProfileThemesAndEffects/components/BuilderColorButton.tsx
+++ b/src/equicordplugins/fakeProfileThemesAndEffects/components/BuilderColorButton.tsx
@@ -13,32 +13,34 @@ export interface BuilderColorButtonProps extends Pick<BuilderButtonProps, "label
     setColor: (color: number | null) => void;
 }
 
-export const buttonRef = useRef(null);
-
-export const BuilderColorButton = ({ label, color, setColor, suggestedColors }: BuilderColorButtonProps) => (
-    <Popout
-        position="bottom"
-        targetElementRef={buttonRef}
-        renderPopout={() => (
-            <CustomColorPicker
-                value={color}
-                onChange={setColor}
-                showEyeDropper={true}
-                suggestedColors={suggestedColors}
-            />
-        )}
-    >
-        {popoutProps => {
-            const hexColor = color ? "#" + color.toString(16).padStart(6, "0") : undefined;
-
-            return (
-                <BuilderButton
-                    label={label}
-                    tooltip={hexColor}
-                    selectedStyle={hexColor ? { background: hexColor } : undefined}
-                    buttonProps={popoutProps}
+export function BuilderColorButton({ label, color, setColor, suggestedColors }: BuilderColorButtonProps) {
+    const buttonRef = useRef(null);
+    return (
+        <Popout
+            position="bottom"
+            targetElementRef={buttonRef}
+            renderPopout={() => (
+                <CustomColorPicker
+                    value={color}
+                    onChange={setColor}
+                    showEyeDropper={true}
+                    suggestedColors={suggestedColors}
                 />
-            );
-        }}
-    </Popout>
-);
+            )}
+        >
+            {popoutProps => {
+                const hexColor = color ? "#" + color.toString(16).padStart(6, "0") : undefined;
+
+                return (
+                    <BuilderButton
+                        label={label}
+                        tooltip={hexColor}
+                        selectedStyle={hexColor ? { background: hexColor } : undefined}
+                        buttonProps={popoutProps}
+                        buttonRef={buttonRef}
+                    />
+                );
+            }}
+        </Popout>
+    );
+}