From 5570c859740a1860a2179783dd34795657d84fbb Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Tue, 9 Jun 2026 22:04:39 -0400
Subject: [PATCH] CustomSounds: Fix CSS

---
 .../customSounds/SoundOverrideComponent.tsx   | 126 +++++++++---------
 src/equicordplugins/customSounds/index.tsx    |  13 +-
 src/equicordplugins/customSounds/styles.css   |   8 +-
 3 files changed, 79 insertions(+), 68 deletions(-)

diff --git a/src/equicordplugins/customSounds/SoundOverrideComponent.tsx b/src/equicordplugins/customSounds/SoundOverrideComponent.tsx
index 8820fd6ba..85c7e89a6 100644
--- a/src/equicordplugins/customSounds/SoundOverrideComponent.tsx
+++ b/src/equicordplugins/customSounds/SoundOverrideComponent.tsx
@@ -5,6 +5,7 @@
  */
 
 import { AudioPlayerInterface, playAudio } from "@api/AudioPlayer";
+import { Button } from "@components/Button";
 import { Card } from "@components/Card";
 import { FormSwitch } from "@components/FormSwitch";
 import { Heading } from "@components/Heading";
@@ -13,7 +14,7 @@ import { Margins } from "@utils/margins";
 import { useForceUpdater } from "@utils/react";
 import { makeRange } from "@utils/types";
 import { findLazy } from "@webpack";
-import { Button, React, Select, showToast, Slider } from "@webpack/common";
+import { React, Select, showToast, Slider } from "@webpack/common";
 import { ComponentType, Ref, SyntheticEvent } from "react";
 
 import { deleteAudio, getAllAudio, saveAudio, StoredAudioFile } from "./audioStore";
@@ -177,100 +178,103 @@ export function SoundOverrideComponent({ type, override, onChange }: {
 
             {override.enabled && (
                 <>
-                    <div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}>
+                    <div className={cl("override-controls")}>
                         <Button
-                            color={Button.Colors.GREEN}
+                            variant="positive"
                             onClick={previewSound}
                         >
                             Preview
                         </Button>
                         <Button
-                            color={Button.Colors.RED}
+                            variant="dangerPrimary"
                             onClick={() => sound.current?.stop()}
                         >
                             Stop
                         </Button>
                     </div>
 
-                    <Heading>Volume</Heading>
-                    <Slider
-                        markers={makeRange(0, 100, 10)}
-                        initialValue={override.volume}
-                        onValueChange={val => {
-                            sound.current && (sound.current.volume = val);
-                            override.volume = val;
-                            saveAndNotify();
-                        }}
-                        className={Margins.bottom16}
-                        disabled={!override.enabled}
-                    />
+                    <div className={Margins.bottom16}>
+                        <Heading>Volume</Heading>
+                        <Slider
+                            markers={makeRange(0, 100, 10)}
+                            initialValue={override.volume}
+                            onValueChange={val => {
+                                sound.current && (sound.current.volume = val);
+                                override.volume = val;
+                                saveAndNotify();
+                            }}
+                            disabled={!override.enabled}
+                        />
+                    </div>
 
-                    <Heading>Sound Source</Heading>
-                    <Select
-                        options={[
-                            { value: "default", label: "Default" },
-                            ...(type.seasonal?.map(id => ({ value: id, label: capitalizeWords(id) })) ?? []),
-                            { value: "custom", label: "Custom" }
-                        ]}
-                        isSelected={v => v === override.selectedSound}
-                        select={async v => {
-                            override.selectedSound = v;
+                    <div className={Margins.bottom16}>
+                        <Heading>Sound Source</Heading>
+                        <Select
+                            options={[
+                                { value: "default", label: "Default" },
+                                ...(type.seasonal?.map(id => ({ value: id, label: capitalizeWords(id) })) ?? []),
+                                { value: "custom", label: "Custom" }
+                            ]}
+                            isSelected={v => v === override.selectedSound}
+                            select={async v => {
+                                override.selectedSound = v;
 
-                            if (v === "custom" && override.selectedFileId) {
-                                try {
-                                    await ensureDataURICached(override.selectedFileId);
-                                } catch (error) {
-                                    console.error(`[CustomSounds] Failed to cache data URI for ${type.id}:`, error);
-                                    showToast("Error loading custom sound file");
+                                if (v === "custom" && override.selectedFileId) {
+                                    try {
+                                        await ensureDataURICached(override.selectedFileId);
+                                    } catch (error) {
+                                        console.error(`[CustomSounds] Failed to cache data URI for ${type.id}:`, error);
+                                        showToast("Error loading custom sound file");
+                                    }
                                 }
-                            }
 
-                            await saveAndNotify();
-                        }}
-                        serialize={opt => opt.value}
-                        className={Margins.bottom16}
-                    />
+                                await saveAndNotify();
+                            }}
+                            serialize={opt => opt.value}
+                        />
+                    </div>
 
                     {override.selectedSound === "custom" && (
                         <>
-                            <Heading>Custom File</Heading>
-                            <Select
-                                options={[
-                                    { value: "", label: "Select a file..." },
-                                    ...customFileOptions
-                                ]}
-                                isSelected={v => v === (override.selectedFileId || "")}
-                                select={async id => {
-                                    if (!id) {
-                                        override.selectedFileId = undefined;
-                                    } else {
-                                        override.selectedFileId = id;
-                                        await ensureDataURICached(id);
-                                    }
+                            <div className={Margins.bottom8}>
+                                <Heading>Custom File</Heading>
+                                <Select
+                                    options={[
+                                        { value: "", label: "Select a file..." },
+                                        ...customFileOptions
+                                    ]}
+                                    isSelected={v => v === (override.selectedFileId || "")}
+                                    select={async id => {
+                                        if (!id) {
+                                            override.selectedFileId = undefined;
+                                        } else {
+                                            override.selectedFileId = id;
+                                            await ensureDataURICached(id);
+                                        }
 
-                                    await saveAndNotify();
-                                }}
-                                serialize={opt => opt.value}
-                                className={Margins.bottom8}
-                            />
+                                        await saveAndNotify();
+                                    }}
+                                    serialize={opt => opt.value}
+                                />
+                            </div>
                             <input
+                                className={cl("file-input")}
                                 ref={fileInputRef}
                                 type="file"
                                 accept=".mp3,.wav,.ogg,.m4a,.flac,.aac,.webm,.wma,.mp4"
-                                style={{ display: "none" }}
                                 onChange={uploadFile}
                             />
-                            <div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}>
+                            <div className={cl("override-controls")}>
                                 <Button
+                                    variant="primary"
                                     onClick={() => fileInputRef.current?.click()}
-                                    color={Button.Colors.BRAND}
                                 >
                                     Upload New
                                 </Button>
 
                                 {override.selectedFileId && files[override.selectedFileId] && (
                                     <Button
-                                        color={Button.Colors.RED}
+                                        variant="dangerPrimary"
                                         onClick={() => deleteFile(override.selectedFileId!)}
                                     >
                                         Delete Selected File
diff --git a/src/equicordplugins/customSounds/index.tsx b/src/equicordplugins/customSounds/index.tsx
index 5a99fe1c5..5be32f3c7 100644
--- a/src/equicordplugins/customSounds/index.tsx
+++ b/src/equicordplugins/customSounds/index.tsx
@@ -9,11 +9,12 @@ import "./styles.css";
 import { AudioProcessor, PreprocessAudioData } from "@api/AudioPlayer";
 import { get as getFromDataStore } from "@api/DataStore";
 import { definePluginSettings } from "@api/Settings";
+import { Button } from "@components/Button";
 import { Heading } from "@components/Heading";
 import { Devs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import definePlugin, { OptionType, StartAt } from "@utils/types";
-import { Button, React, showToast, TextInput } from "@webpack/common";
+import { React, showToast, TextInput } from "@webpack/common";
 
 import { getAllAudio, getAudioDataURI } from "./audioStore";
 import { SoundOverrideComponent } from "./SoundOverrideComponent";
@@ -325,15 +326,15 @@ const settings = definePluginSettings({
             return (
                 <div>
                     <div className="vc-custom-sounds-buttons">
-                        <Button color={Button.Colors.BRAND} onClick={triggerFileUpload}>Import</Button>
-                        <Button color={Button.Colors.PRIMARY} onClick={downloadSettings}>Export</Button>
-                        <Button color={Button.Colors.RED} onClick={resetOverrides}>Reset All</Button>
-                        <Button color={Button.Colors.WHITE} onClick={debugCustomSounds}>Debug</Button>
+                        <Button variant="primary" onClick={triggerFileUpload}>Import</Button>
+                        <Button variant="secondary" onClick={downloadSettings}>Export</Button>
+                        <Button variant="dangerPrimary" onClick={resetOverrides}>Reset All</Button>
+                        <Button variant="overlayPrimary" onClick={debugCustomSounds}>Debug</Button>
                         <input
+                            className={cl("file-input")}
                             ref={fileInputRef}
                             type="file"
                             accept=".json"
-                            style={{ display: "none" }}
                             onChange={handleSettingsUpload}
                         />
                     </div>
diff --git a/src/equicordplugins/customSounds/styles.css b/src/equicordplugins/customSounds/styles.css
index e3c9f2ef1..f6d1d8444 100644
--- a/src/equicordplugins/customSounds/styles.css
+++ b/src/equicordplugins/customSounds/styles.css
@@ -54,6 +54,12 @@
     gap: 16px;
 }
 
-.vc-custom-sounds-preview-controls {
+.vc-custom-sounds-override-controls {
     display: flex;
+    gap: 8px;
+    margin-bottom: 16px;
+}
+
+.vc-custom-sounds-file-input {
+    display: none;
 }
\ No newline at end of file