From 427f4317d2d6a1cc62a2407843623005f9a277b6 Mon Sep 17 00:00:00 2001
From: KrystalSkull <150982280+KrstlSkll69@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:37:11 -0400
Subject: [PATCH] feat(Settings): Rework Buttons (#78)

* update disable button pt2.5

* edit text

* edit text again

* formatting, add warning

* add classes to Buttons

* remove warning icons

* moved button

* added shared class
---
 src/components/PluginSettings/PluginModal.css |  89 +----------
 src/components/PluginSettings/PluginModal.tsx |  49 +++---
 src/components/PluginSettings/index.tsx       | 139 ++++++++++++------
 src/components/PluginSettings/styles.css      | 132 +++++++++++------
 src/components/VencordSettings/VencordTab.tsx |   2 +
 5 files changed, 212 insertions(+), 199 deletions(-)

diff --git a/src/components/PluginSettings/PluginModal.css b/src/components/PluginSettings/PluginModal.css
index db7d54b2..ee2bec39 100644
--- a/src/components/PluginSettings/PluginModal.css
+++ b/src/components/PluginSettings/PluginModal.css
@@ -4,91 +4,4 @@
 
 .vc-plugin-modal-description {
     flex-grow: 1;
-}
-
-/* warning modal */
-
-.vc-text-selectable {
-    user-select: none;
-}
-
-.vc-warning-info {
-    gap: 15px;
-    flex-direction: column;
-    user-select: none;
-}
-
-.vc-warning-info img {
-    width: 70%;
-    height: auto;
-    display: block;
-    margin: auto auto 10px;
-}
-
-.vc-warning-info strong {
-    font-weight: bold;
-}
-
-.vc-warning-info button.disable-warning {
-    font-size: 0.8rem;
-    background-color: transparent;
-    color: red;
-    cursor: pointer;
-    margin: 0 auto;
-    width: fit-content;
-    text-decoration: underline;
-}
-
-.vc-warning-info button.disable-warning:hover {
-    background-color: transparent;
-    color: var(--text-danger);
-}
-
-.vc-warning-info button.disable-warning:active {
-    background-color: transparent;
-}
-
-.text-danger {
-    color: var(--text-danger);
-    font-size: 1.4rem;
-    font-weight: bold;
-}
-
-.text-normal {
-    color: var(--text-normal);
-    font-size: 1.2rem;
-}
-
-.text-normal.margin-bottom {
-    margin-bottom: 10px;
-}
-
-.button-danger-background {
-    background-color: var(--background-color) !important;
-    border-style: solid;
-    border-width: .1rem;
-    border-color: var(--button-outline-danger-border) !important;
-}
-
-.button-danger-background:hover{
-    background-color: var(--button-outline-danger-background-hover)  !important;
-    border-style: solid;
-    border-width: .1rem;
-    border-color: var(--button-outline-danger-border) !important;
-}
-
-.button-danger-background-no-margin {
-    background-color: var(--button-danger-background) !important;
-    color: var(--header-primary);
-}
-
-.button-danger-background-no-margin:hover{
-    background-color: var(--button-danger-background-hover) !important;
-    filter: saturate(75%);
-}
-
-.vc-modal-close-button {
-    margin-left: auto !important;
-}
-
-
+}
\ No newline at end of file
diff --git a/src/components/PluginSettings/PluginModal.tsx b/src/components/PluginSettings/PluginModal.tsx
index 05b47b97..63d5eaed 100644
--- a/src/components/PluginSettings/PluginModal.tsx
+++ b/src/components/PluginSettings/PluginModal.tsx
@@ -287,7 +287,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                         <Tooltip text="Reset to default settings" shouldShow={!isObjectEmpty(tempSettings)}>
                             {({ onMouseEnter, onMouseLeave }) => (
                                 <Button
-                                    className="button-danger-background-no-margin"
+                                    className="button-danger-background"
                                     size={Button.Sizes.SMALL}
                                     color={Button.Colors.BRAND}
                                     onClick={handleResetClick}
@@ -407,7 +407,7 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
             transitionState={warningModalProps.transitionState}
         >
             <ModalHeader separator={false}>
-                <Text className="text-danger">Warning: Dangerous Action</Text>
+                <Text className="text-danger">Dangerous Action</Text>
                 <ModalCloseButton onClick={warningModalProps.onClose} className="vc-modal-close-button" />
             </ModalHeader>
             <ModalContent>
@@ -421,39 +421,42 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
                             You are about to reset all settings for <strong>{plugin.name}</strong> to their default values.
                         </Text>
                         <Text className="text-danger">
-                            This action is irreversible.
+                            THIS ACTION IS IRREVERSIBLE
                         </Text>
                         <Text className="text-normal margin-bottom">
                             If you are certain you want to proceed, click <strong>Confirm Reset</strong>. Otherwise, click <strong>Cancel</strong>.
                         </Text>
-                        {!Settings.ignoreResetWarning && (
-                            <Button className="disable-warning" onClick={() => {
-                                Settings.ignoreResetWarning = true;
-                            }}>
-                                Disable this warning forever
-                            </Button>
-                        )}
                     </Flex>
                 </Forms.FormSection>
             </ModalContent>
-            <ModalFooter>
-                <Flex flexDirection="column" style={{ width: "100%" }}>
-                    <Flex style={{ justifyContent: "space-between" }}>
-                        <Button
-                            size={Button.Sizes.SMALL}
-                            color={Button.Colors.PRIMARY}
-                            onClick={warningModalProps.onClose}
-                            look={Button.Looks.LINK}
-                        >
-                            Cancel
-                        </Button>
+            <ModalFooter className="modal-footer">
+                <Flex className="button-container">
+                    <Button
+                        size={Button.Sizes.SMALL}
+                        color={Button.Colors.PRIMARY}
+                        onClick={warningModalProps.onClose}
+                        look={Button.Looks.LINK}
+                    >
+                        Cancel
+                    </Button>
+                    <Flex className="button-group">
+                        {!Settings.ignoreResetWarning && (
+                            <Button
+                                size={Button.Sizes.SMALL}
+                                className="button-danger-background"
+                                onClick={() => {
+                                    Settings.ignoreResetWarning = true;
+                                }}
+                            >
+                                Disable Warning Forever
+                            </Button>
+                        )}
                         <Tooltip text="This action cannot be undone. Are you sure?" shouldShow={true}>
                             {({ onMouseEnter, onMouseLeave }) => (
                                 <Button
                                     size={Button.Sizes.SMALL}
-                                    color={Button.Colors.BRAND}
                                     onClick={() => {
-                                        resetSettings(plugin, warningModalProps, pluginModalProps, onRestartNeeded);
+                                        resetSettings(plugin, pluginModalProps, pluginModalProps, onRestartNeeded);
                                     }}
                                     onMouseEnter={onMouseEnter}
                                     onMouseLeave={onMouseLeave}
diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx
index 60cf2527..0d3533b6 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -31,10 +31,11 @@ import { proxyLazy } from "@utils/lazy";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
 import { classes, isObjectEmpty } from "@utils/misc";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
 import { Plugin } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { Alerts, Button, Card, Forms, lodash, Parser, React, Select, Text, TextInput, Toasts, Tooltip, useMemo } from "@webpack/common";
+import { Alerts, Button, Card, Flex, Forms, lodash, Parser, React, Select, Text, TextInput, Toasts, Tooltip, useMemo } from "@webpack/common";
 
 import Plugins, { ExcludedPlugins, PluginMeta } from "~plugins";
 
@@ -60,7 +61,7 @@ function showErrorToast(message: string) {
     });
 }
 
-function ReloadRequiredCard({ required }: { required: boolean; }) {
+function ReloadRequiredCard({ required, enabledPlugins, openDisablePluginsModal, resetCheckAndDo }) {
     return (
         <Card className={cl("info-card", { "restart-card": required })}>
             {required ? (
@@ -80,6 +81,19 @@ function ReloadRequiredCard({ required }: { required: boolean; }) {
                     <Forms.FormText>Plugins with a cog wheel have settings you can modify!</Forms.FormText>
                 </>
             )}
+            {enabledPlugins.length > 0 && !required && (
+                <Button
+                    size={Button.Sizes.SMALL}
+                    className="button-danger-background disable-all-button"
+                    onClick={() => {
+                        if (Settings.ignoreResetWarning) return resetCheckAndDo();
+
+                        return openDisablePluginsModal(enabledPlugins, resetCheckAndDo);
+                    }}
+                >
+                    Disable All Plugins
+                </Button>
+            )}
         </Card>
     );
 }
@@ -368,6 +382,82 @@ export default function PluginSettings() {
         }
     }
 
+    function openDisablePluginsModal(enabledPlugins: String[], resetCheckAndDo: () => void) {
+        if (Settings.ignoreResetWarning) return resetCheckAndDo();
+
+        openModal(warningModalProps => (
+            <ModalRoot
+                {...warningModalProps}
+                size={ModalSize.SMALL}
+                className="vc-text-selectable"
+                transitionState={warningModalProps.transitionState}
+            >
+                <ModalHeader separator={false}>
+                    <Text className="text-danger">Dangerous Action</Text>
+                    <ModalCloseButton onClick={warningModalProps.onClose} className="vc-modal-close-button" />
+                </ModalHeader>
+                <ModalContent>
+                    <Forms.FormSection>
+                        <Flex className="vc-warning-info">
+                            <img
+                                src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
+                                alt="Warning"
+                            />
+                            <Text className="warning-text">
+                                WARNING: You are about to disable <span>{enabledPlugins.length}</span> plugins!
+                            </Text>
+                            <Text className="warning-text">
+                                THIS ACTION IS IRREVERSIBLE
+                            </Text>
+                            <Text className="text-normal margin-bottom">
+                                Are you absolutely sure you want to proceed? You can always enable them back later.
+                            </Text>
+                        </Flex>
+                    </Forms.FormSection>
+                </ModalContent>
+                <ModalFooter className="modal-footer">
+                    <Flex className="button-container">
+                        <Button
+                            size={Button.Sizes.SMALL}
+                            color={Button.Colors.PRIMARY}
+                            onClick={warningModalProps.onClose}
+                            look={Button.Looks.LINK}
+                        >
+                            Cancel
+                        </Button>
+                        <Flex className="button-group">
+                            {!Settings.ignoreResetWarning && (
+                                <Button
+                                    size={Button.Sizes.SMALL}
+                                    className="button-danger-background"
+                                    onClick={() => {
+                                        Settings.ignoreResetWarning = true;
+                                    }}
+                                >
+                                    Disable Warning Forever
+                                </Button>
+                            )}
+                            <Tooltip text="This action cannot be undone. Are you sure?" shouldShow={true}>
+                                {({ onMouseEnter, onMouseLeave }) => (
+                                    <Button
+                                        size={Button.Sizes.SMALL}
+                                        className="button-danger-background-no-margin"
+                                        onClick={resetCheckAndDo}
+                                        onMouseEnter={onMouseEnter}
+                                        onMouseLeave={onMouseLeave}
+                                    >
+                                        Disable All
+                                    </Button>
+                                )}
+                            </Tooltip>
+                        </Flex>
+                    </Flex>
+                </ModalFooter>
+            </ModalRoot>
+        ));
+    }
+
+
     // Code directly taken from supportHelper.tsx
     const isApiPlugin = (plugin: string) => plugin.endsWith("API") || Plugins[plugin].required;
 
@@ -382,7 +472,7 @@ export default function PluginSettings() {
     return (
         <SettingsTab title="Plugins">
 
-            <ReloadRequiredCard required={changes.hasChanges} />
+            <ReloadRequiredCard required={changes.hasChanges} enabledPlugins={enabledPlugins} openDisablePluginsModal={openDisablePluginsModal} resetCheckAndDo={resetCheckAndDo} />
 
             <div className={cl("stats-container")} style={{
                 marginTop: "16px",
@@ -401,7 +491,6 @@ export default function PluginSettings() {
                 />
             </div>
 
-
             <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
                 Filters
             </Forms.FormTitle>
@@ -426,48 +515,6 @@ export default function PluginSettings() {
             </div>
 
             <Forms.FormTitle className={Margins.top20}>Plugins</Forms.FormTitle>
-            {enabledPlugins.length > 0 && (
-                <Button
-                    size={Button.Sizes.SMALL}
-                    className="button-danger-background"
-                    onClick={() => {
-                        if (Settings.ignoreResetWarning) return resetCheckAndDo();
-
-                        return Alerts.show({
-                            title: "Disable All Plugins",
-                            body: (
-                                <div className="alert-body">
-                                    <img
-                                        src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
-                                        alt="Warning"
-                                    />
-                                    <p className="warning-text">
-                                        WARNING: You are about to disable <span>{enabledPlugins.length}</span> plugins!
-                                    </p>
-                                    <p>
-                                        Are you absolutely sure you want to proceed? You can always enable them back later.
-                                    </p>
-                                    {!Settings.ignoreResetWarning && (
-                                        <Button className="disable-warning" onClick={() => {
-                                            Settings.ignoreResetWarning = true;
-                                        }}>
-                                            Disable this warning forever
-                                        </Button>
-                                    )}
-                                </div>
-                            ),
-                            confirmText: "Disable All",
-                            confirmColor: "button-danger-background-no-margin",
-                            cancelText: "Cancel",
-                            onConfirm: () => {
-                                resetCheckAndDo();
-                            }
-                        });
-                    }}
-                >
-                    Disable All Plugins
-                </Button>
-            )}
 
             {plugins.length || requiredPlugins.length
                 ? (
diff --git a/src/components/PluginSettings/styles.css b/src/components/PluginSettings/styles.css
index 1b74167e..f189c7b4 100644
--- a/src/components/PluginSettings/styles.css
+++ b/src/components/PluginSettings/styles.css
@@ -60,7 +60,7 @@
 
 .vc-plugins-info-card {
     padding: 1em;
-    height: 8em;
+    height: fit-content;
     display: flex;
     flex-direction: column;
     background-color: var(--background-secondary-alt) !important;
@@ -125,11 +125,61 @@
     margin: 0 10px;
 }
 
-/* disable all modal */
+/* Shared styles for warning modal and disable all modal */
+
+.vc-text-selectable {
+    user-select: none;
+}
+
+.vc-warning-info {
+    gap: 15px;
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+}
+
+.vc-warning-info img {
+    width: 70%;
+    height: auto;
+    display: block;
+    margin: auto auto 10px;
+}
+
+.vc-warning-info strong {
+    font-weight: bold;
+}
+
+.text-danger {
+    color: var(--text-danger);
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.text-normal {
+    color: var(--text-normal);
+    font-size: 1.2rem;
+}
+
+.text-normal.margin-bottom {
+    margin-bottom: 10px;
+}
 
 .button-danger-background {
-    background-color: var(--button-danger-background) !important;
-    margin: 20px 0;
+    background-color: var(--background-color) !important;
+    border-style: solid;
+    border-width: .1rem;
+    border-color: var(--button-outline-danger-border) !important;
+}
+
+.button-danger-background.top-margin {
+    margin-top: 10px;
+}
+
+.button-danger-background:hover {
+    background-color: var(--button-outline-danger-background-hover) !important;
+    border-style: solid;
+    border-width: .1rem;
+    border-color: var(--button-outline-danger-border) !important;
 }
 
 .button-danger-background-no-margin {
@@ -137,53 +187,51 @@
     color: var(--header-primary);
 }
 
-.button-danger-background:hover {
-    background-color: var(--button-danger-background-hover);
+.button-danger-background-no-margin:hover {
+    background-color: var(--button-danger-background-hover) !important;
+    filter: saturate(75%);
 }
 
-.alert-body {
-    text-align: center;
+.vc-modal-close-button {
+    margin-left: auto !important;
 }
 
-.alert-body img {
-    width: 60%;
-    height: auto;
-    display: block;
-    margin: auto auto 10px;
-    border-radius: 8px;
+.modal-footer {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
 }
 
-.alert-body p.warning-text {
+.modal-footer .button-container {
+    display: flex !important;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.button-group {
+    display: flex !important;
+    gap: 10px;
+    align-items: center;
+    justify-content: end !important;
+}
+
+/* Specific to disable all modal */
+
+.warning-text {
+    color: var(--text-danger);
     font-size: 1.2rem;
-    color: var(--text-danger);
+}
+
+.warning-text span {
     font-weight: bold;
-}
-
-.alert-body p {
-    font-size: 1rem;
-}
-
-.alert-body span {
     text-decoration: underline;
 }
 
-.disable-warning {
-    font-size: 0.8rem;
-    background-color: transparent !important;
-    color: var(--text-danger) !important;
-    cursor: pointer;
-    margin: 0 auto;
-    width: fit-content;
-    text-decoration: underline;
-    transition: color 0.2s ease;
+.disable-all-button {
+    color: var(--header-primary);
+    width: 150px;
+    margin-left: auto;
+    margin-right: 4.5px !important;
 }
-
-.disable-warning:hover {
-    color: var(--text-danger);
-    background-color: transparent;
-    opacity: 0.8;
-}
-
-.disable-warning:active {
-    background-color: transparent;
-}
\ No newline at end of file
diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx
index 29e83da0..3ca93f3a 100644
--- a/src/components/VencordSettings/VencordTab.tsx
+++ b/src/components/VencordSettings/VencordTab.tsx
@@ -256,6 +256,7 @@ function DiscordInviteCard({ invite, image }: DiscordInviteProps) {
 
                 <div className={cl("card-buttons")}>
                     <Button
+                        className="vc-joindiscordbutton vc-settingbuttons"
                         onClick={async e => {
                             e.preventDefault();
                             openInviteModal(invite).catch(() => showToast("Invalid or expired invite"));
@@ -265,6 +266,7 @@ function DiscordInviteCard({ invite, image }: DiscordInviteProps) {
                     </Button>
 
                     <Button
+                        className="vc-donatebutton vc-settingbuttons"
                         onClick={() => { VencordNative.native.openExternal("https://github.com/sponsors/verticalsync"); }}
                     >
                         Donate