From f759fc0b71d08516670494d837b3f4f7aa7e4905 Mon Sep 17 00:00:00 2001
From: Oleh Polisan <polisanoleg@gmail.com>
Date: Fri, 21 Jun 2024 00:03:24 +0300
Subject: [PATCH] ui: changed to fit Discord

---
 .../components/settings/TraySettings.tsx      | 44 +++++++++++++++----
 .../components/settings/traySetting.css       |  4 +-
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/settings/TraySettings.tsx b/src/renderer/components/settings/TraySettings.tsx
index b9d3a4e..8e16223 100644
--- a/src/renderer/components/settings/TraySettings.tsx
+++ b/src/renderer/components/settings/TraySettings.tsx
@@ -97,21 +97,49 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
                 <Modals.ModalCloseButton onClick={close} />
             </Modals.ModalHeader>
             <Modals.ModalContent className="vcd-custom-tray-modal">
-                {Object.entries(statusToSettingsKey).map(([status, { key, label }]) => (
-                    <div key={status}>
+                {Object.entries(statusToSettingsKey).map(([iconName, { key, label }]) => (
+                    <div key={iconName}>
+                        <Forms.FormTitle tag="h3">{label}</Forms.FormTitle>
                         <Forms.FormSection className="vcd-custom-tray-icon-section">
-                            <div className="vcd-custom-tray-icon-label">
-                                {trayEditButton(status)}
-                                <Forms.FormText>{label}</Forms.FormText>
-                            </div>
+                            {trayEditButton(iconName)}
+                            <Button
+                                onClick={async () => {
+                                    const choice = await VesktopNative.fileManager.selectTrayIcon(iconName);
+                                    switch (choice) {
+                                        case "cancelled":
+                                            return;
+                                        case "invalid":
+                                            Toasts.show({
+                                                message: "Please select a valid .png or .jpg image!",
+                                                id: Toasts.genId(),
+                                                type: Toasts.Type.FAILURE
+                                            });
+                                            return;
+                                    }
+
+                                    const iconKey =
+                                        statusToSettingsKey[iconName as keyof typeof statusToSettingsKey].key;
+                                    Settings[iconKey] = true;
+                                    const iconDataURL = VesktopNative.tray.getIconSync(iconName);
+                                    const img = document.getElementById(iconName) as HTMLImageElement;
+                                    if (img) {
+                                        img.src = iconDataURL;
+                                    }
+                                    setCurrentTrayIcon();
+                                }}
+                                look={Button.Looks.OUTLINED}
+                            >
+                                Choose icon
+                            </Button>
                             {Settings[key] && (
                                 <Button
                                     onClick={() => {
-                                        Settings[key] = false;
+                                        Settings.trayMainOverride = false;
                                         setCurrentTrayIcon();
                                     }}
+                                    look={Button.Looks.LINK}
                                 >
-                                    Reset
+                                    Reset Icon
                                 </Button>
                             )}
                         </Forms.FormSection>
diff --git a/src/renderer/components/settings/traySetting.css b/src/renderer/components/settings/traySetting.css
index 319ce33..1ab01eb 100644
--- a/src/renderer/components/settings/traySetting.css
+++ b/src/renderer/components/settings/traySetting.css
@@ -36,6 +36,8 @@
 .vcd-tray-icon-wrap {
     position: relative;
     align-self: end;
+    background: var(--background-secondrary);
+    border-radius: var(--radius-sm);
 }
 
 .vcd-tray-icon-image {
@@ -75,8 +77,8 @@
 .vcd-custom-tray-icon-section {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
+    column-gap: 1em;
 }
 
 .vcd-custom-tray-icon-form-text {