ux: condense customize tray settings

src/renderer/components/settings/Settings.tsx

@@ -14,7 +14,7 @@ import { isMac, isWindows } from "renderer/utils";
 import { AutoStartToggle } from "./AutoStartToggle";
 import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
-import { TrayFillColorSwitch, TrayIconPicker, TraySwitch } from "./TraySettings";
+import { TrayFillColorSwitch, TrayIconPicker, TraySwitch, CustomizeTraySwitch } from "./TraySettings";
 import { VencordLocationPicker } from "./VencordLocationPicker";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
 
@@ -70,13 +70,7 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
     ],
     Behaviour: [
         TraySwitch,
-        {
+        CustomizeTraySwitch,
-            key: "trayCustom",
-            title: "Use custom tray icons",
-            description: "Disable rewriting tray icons at config folder",
-            defaultValue: false,
-            invisible: () => Settings.store.tray === false
-        },
         TrayIconPicker,
         TrayFillColorSwitch,
         {

src/renderer/components/settings/TraySettings.tsx

@@ -49,6 +49,40 @@ export const TraySwitch: SettingsComponent = ({ settings }) => {
     );
 };
 
+export const CustomizeTraySwitch: SettingsComponent = ({ settings }) => {
+    if (!settings.tray) return null;
+
+    return (
+        <>
+            <div id="vcd-tray-setting">
+                <div className="vcd-tray-setting-switch">
+                    <Switch
+                        key="tray"
+                        value={settings.trayCustom ?? false}
+                        onChange={v => (settings.trayCustom = v)}
+                        note={"Use custom default and voice status tray icons."}
+                    >
+                        Use custom tray icons
+                    </Switch>
+                </div>
+                <div className="vcd-tray-setting-customize">
+                    <Forms.FormText>
+                        <a
+                            href="about:blank"
+                            onClick={e => {
+                                e.preventDefault();
+                                // Bring up modal here
+                            }}
+                        >
+                            Configure
+                        </a>
+                    </Forms.FormText>
+                </div>
+            </div>
+        </>
+    );
+};
+
 export const TrayIconPicker: SettingsComponent = ({ settings }) => {
     if (!settings.tray || settings.trayCustom) return null;
     return (

src/renderer/components/settings/traySetting.css

@@ -20,19 +20,17 @@
     justify-content: space-between;
     align-items: center;
     flex-wrap: nowrap;
-
 }
 .vcd-tray-setting-switch {
     flex-grow: 1;
     align-self: flex-start;
-    margin-right: 20rem;
+    margin-right: -3.6rem;
 }
-.vcd-tray-setting-reset {
+.vcd-tray-setting-customize {
     align-self: right;
     position: relative;
-    margin-left: auto;
+    margin-right: 0em;
-    margin-right: 1em;
+    bottom: 4px;
-    bottom: 24px;
 }
 
 .vcd-tray-icon-wrap {