feat(Settings): update join buttons (#79)

* update join buttons

* revert line change, make colors variables

* Add windows transparency warning, renamed css file

src/components/PluginSettings/styles.css

@@ -169,6 +169,7 @@
     border-style: solid;
     border-width: .1rem;
     border-color: var(--button-outline-danger-border) !important;
+    border-radius: 5px;
 }
 
 .button-danger-background.top-margin {

src/components/VencordSettings/VencordTab.css

@@ -0,0 +1,49 @@
+:root{
+    --vc-donatebutton: #ffc1cbc2;
+    --vc-donatebutton-secondary: #f7536fe5;
+}
+
+.vc-donatebutton{
+    background-color: var(--background-color) !important;
+    border-color: var(--vc-donatebutton);
+    filter: brightness(1);
+    border-width: .1rem;
+    border-style: solid;
+}
+
+.vc-donatebutton:hover{
+    background-color: var(--vc-donatebutton) !important;
+    border-color: transparent !important;
+}
+
+
+.vc-joindiscordbutton{
+    background-color: var(--button-secondary-background) !important;
+}
+
+.vc-joindiscordbutton:hover{
+    background-color: var(--button-secondary-background-hover) !important;
+}
+
+.vc-settings-card-buttons{
+    display: flex;
+    gap: 1em !important;
+    margin-left: .2rem;
+    margin-bottom: .2rem;
+}
+
+.vc-settingbuttons{
+    border-radius: 5px !important;
+}
+
+.form-switch-warning {
+    font-size: 16px;
+    background-color: rgb(240 71 71 / 10%);
+    color: rgb(240 71 71);
+    border: 1px solid rgb(240 71 71 / 60%);
+    border-radius: 4px;
+    font-weight: 500;
+    padding: 6px 10px;
+    text-align: center;
+    margin-top: 10px;
+}

src/components/VencordSettings/VencordTab.tsx

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./VencordTab.css";
+
 import { openNotificationLogModal } from "@api/Notifications/notificationLog";
 import { useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
@@ -60,41 +62,49 @@ function EquicordSettings() {
         key: KeysOfType<typeof settings, boolean>;
         title: string;
         note: string;
+        warning: { enabled: boolean; message?: string; };
     }> =
         [
             {
                 key: "useQuickCss",
                 title: "Enable Custom CSS",
-                note: "Loads your Custom CSS"
+                note: "Loads your Custom CSS",
+                warning: { enabled: false }
             },
             !IS_WEB && {
                 key: "enableReactDevtools",
                 title: "Enable React Developer Tools",
-                note: "Requires a full restart"
+                note: "Requires a full restart",
+                warning: { enabled: false }
             },
             !IS_WEB && (!IS_DISCORD_DESKTOP || !isWindows ? {
                 key: "frameless",
                 title: "Disable the window frame",
-                note: "Requires a full restart"
+                note: "Requires a full restart",
+                warning: { enabled: false }
             } : {
                 key: "winNativeTitleBar",
                 title: "Use Windows' native title bar instead of Discord's custom one",
-                note: "Requires a full restart"
+                note: "Requires a full restart",
+                warning: { enabled: false }
             }),
             !IS_WEB && {
                 key: "transparent",
                 title: "Enable window transparency.",
-                note: "You need a theme that supports transparency or this will do nothing. WILL STOP THE WINDOW FROM BEING RESIZABLE!! Requires a full restart"
+                note: "You need a theme that supports transparency or this will do nothing. Requires a full restart",
+                warning: { enabled: true, message: "This will stop the window from being resizable" }
             },
             !IS_WEB && isWindows && {
                 key: "winCtrlQ",
                 title: "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)",
-                note: "Requires a full restart"
+                note: "Requires a full restart",
+                warning: { enabled: false }
             },
             IS_DISCORD_DESKTOP && {
                 key: "disableMinSize",
                 title: "Disable minimum window size",
-                note: "Requires a full restart"
+                note: "Requires a full restart",
+                warning: { enabled: false }
             },
         ];
 
@@ -154,7 +164,14 @@ function EquicordSettings() {
                         key={s.key}
                         value={settings[s.key]}
                         onChange={v => settings[s.key] = v}
-                        note={s.note}
+                        note={
+                            s.warning.enabled ? <>
+                                {s.note}
+                                <div className="form-switch-warning">
+                                    {s.warning.message}
+                                </div>
+                            </> : s.note
+                        }
                     >
                         {s.title}
                     </Switch>