added static icon link, improved tray settings css

src/renderer/components/settings/TrayIconImagePicker.tsx

@@ -6,24 +6,24 @@
 
 import { Forms, Switch, Toasts } from "@vencord/types/webpack/common";
 import { Settings } from "renderer/settings";
-
+import { STATIC_DIR } from "shared/paths";
 import { SettingsComponent } from "./Settings";
 
 export const TrayIconImagePicker: SettingsComponent = ({ settings }) => {
     return (
         <>
-            <div id="tray-setting">
-                <div id="colLeft">
+            <div id="vcd-tray-setting">
+                <div className="vcd-tray-setting-switch">
                     <Switch
                         key="tray"
                         value={Settings.store.tray ?? false}
                         onChange={v => (Settings.store.tray = v)}
                         note={"Add a tray icon for Vesktop"}
                     >
-                        {"Tray Icon"}
+                        Tray Icon
                     </Switch>
                 </div>
-                <div id="colMiddle">
+                <div className="vcd-tray-setting-reset">
                     <Forms.FormText>
                         <a
                             href="about:blank"
@@ -36,19 +36,20 @@ export const TrayIconImagePicker: SettingsComponent = ({ settings }) => {
                         </a>
                     </Forms.FormText>
                 </div>
-                <div id="colRight">
-                    <div className="tray-icon-wrap">
+                <div className="vcd-tray-icon-wrap">
                     <img
-                            className="tray-icon-image"
+                        className="vcd-tray-icon-image"
                         src={VesktopNative.tray.getTrayIcon()}
                         alt="hello"
                         width="48"
                         height="48"
                     ></img>
                     <input
-                            className="edit-button"
+                        className="vcd-edit-button"
                         type="image"
-                            src="https://cdn.discordapp.com/attachments/895550066453012480/1236925384482619433/I1oxwE7.png?ex=6639c808&is=66387688&hm=5c5f47a0c06b2e0580fd5494386bfbeebc001c20e3fd64f26783f360b12162ed&"
+                        src="https://raw.githubusercontent.com/Vencord/Vesktop/main/static/pencil-edit-icon.svg"
+                        width="40"
+                        height="40"
                         onClick={async () => {
                             const choice = await VesktopNative.fileManager.selectTrayIcon();
                             switch (choice) {
@@ -67,7 +68,6 @@ export const TrayIconImagePicker: SettingsComponent = ({ settings }) => {
                     />
                 </div>
             </div>
-            </div>
         </>
     );
 };

src/renderer/components/settings/settings.css

@@ -13,20 +13,40 @@
     margin-bottom: 0.5rem;
 }
 
-.tray-icon-wrap {
+#vcd-tray-setting {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+
+}
+.vcd-tray-setting-switch {
+    flex-grow: 1;
+    align-self: flex-start;
+    margin-right: 20rem;
+}
+.vcd-tray-setting-reset {
+    align-self: right;
     position: relative;
-    top: 0;
-    right: 0;
+    margin-left: auto;
+    margin-right: 1em;
+    bottom: 24px;
 }
 
-.tray-icon-image {
+.vcd-tray-icon-wrap {
+    position: relative;
+    align-self: right;
+    bottom: 24px;
+}
+
+.vcd-tray-icon-image {
     border-radius: 50%;
     position: relative;
     top: 0;
     right: 0;
 }
 
-.edit-button {
+.vcd-edit-button {
     visibility: visible;
     display: block;
     opacity: 0;
@@ -35,38 +55,13 @@
     left: 4px;
 }
 
-.tray-icon-wrap:hover .tray-icon-image {
+.vcd-tray-icon-wrap:hover .vcd-tray-icon-image {
     transition: 0.3s ease;
     background-color: rgb(0, 0, 0) no-repeat;
     opacity: 0.25;
 }
-.tray-icon-wrap:hover .edit-button {
+.vcd-tray-icon-wrap:hover .vcd-edit-button {
     transition: 0.3s ease;
     visibility: visible;
     opacity: 1;
 }
-
-#tray-setting {
-    height: 48px;
-    position: relative;
-}
-#colLeft {
-    height: 48px;
-    display: inline-block;
-    width: 40%;
-}
-#colMiddle {
-    height: 48px;
-    float: center;
-    display: inline-block;
-    position: relative;
-    left: 45%;
-}
-#colRight {
-    height: 48px;
-    display: inline;
-    float: right;
-    position: absolute;
-    top: -12px;
-    right: 0;
-}