more modal tweaks (#564)

* more modal tweaks

* t

src/components/Button.css

@@ -195,4 +195,4 @@
 
 .vc-text-btn-link {
     color: var(--text-link);
-}
+}

src/components/FormSwitch.css

@@ -19,7 +19,6 @@
 
 .vc-form-switch-disabled {
     opacity: 0.5;
-    pointer-events: none;
     cursor: not-allowed;
 }
 

src/components/settings/tabs/plugins/LinkIconButton.css

@@ -1,12 +0,0 @@
-.vc-settings-modal-link-icon {
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-    border: 4px solid var(--background-base-lowest);
-    box-sizing: border-box
-}
-
-.vc-settings-modal-links {
-    display: flex;
-    gap: 0.2em;
-}

src/components/settings/tabs/plugins/LinkIconButton.tsx

@@ -4,38 +4,28 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import "./LinkIconButton.css";
-
+import { Button } from "@components/Button";
 import { GithubIcon, WebsiteIcon } from "@components/Icons";
-import { getTheme, Theme } from "@utils/discord";
-import { MaskedLink, Tooltip } from "@webpack/common";
-
-export function GithubLinkIcon() {
-    const theme = getTheme() === Theme.Light ? "#000000" : "#FFFFFF";
-    return <GithubIcon aria-hidden fill={theme} className={"vc-settings-modal-link-icon"} />;
-}
-
-export function WebsiteLinkIcon() {
-    const theme = getTheme() === Theme.Light ? "#000000" : "#FFFFFF";
-    return <WebsiteIcon aria-hidden fill={theme} className={"vc-settings-modal-link-icon"} />;
-}
 
 interface Props {
     text: string;
     href: string;
 }
 
-function LinkIcon({ text, href, Icon }: Props & { Icon: React.ComponentType; }) {
+export function WebsiteButton({ text, href }: Props) {
     return (
-        <Tooltip text={text}>
-            {props => (
-                <MaskedLink {...props} href={href}>
-                    <Icon />
-                </MaskedLink>
-            )}
-        </Tooltip>
+        <Button variant="secondary" size="small" style={{ gap: 4 }} onClick={() => VencordNative.native.openExternal(href)}>
+            <WebsiteIcon width={16} height={16} />
+            {text}
+        </Button>
     );
 }
 
-export const WebsiteButton = (props: Props) => <LinkIcon {...props} Icon={WebsiteLinkIcon} />;
-export const GithubButton = (props: Props) => <LinkIcon {...props} Icon={GithubLinkIcon} />;
+export function GithubButton({ text, href }: Props) {
+    return (
+        <Button variant="secondary" size="small" style={{ gap: 4 }} onClick={() => VencordNative.native.openExternal(href)}>
+            <GithubIcon width={16} height={16} />
+            {text}
+        </Button>
+    );
+}

src/components/settings/tabs/plugins/PluginModal.css

@@ -36,3 +36,21 @@
     gap: 4px;
     margin-left: auto;
 }
+
+.vc-plugin-modal-confirm [class*="footer"] {
+    flex-direction: row-reverse;
+    gap: var(--space-8, 8px);
+}
+
+.vc-plugin-modal-confirm [class*="footer"]>button {
+    flex: 1;
+    margin: 0;
+    width: 100%;
+}
+
+.vc-plugin-modal-warning {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--text-feedback-critical);
+}

src/components/settings/tabs/plugins/PluginModal.tsx

@@ -19,7 +19,7 @@
 import "./PluginModal.css";
 
 import { generateId } from "@api/Commands";
-import { Settings, useSettings } from "@api/Settings";
+import { useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { BaseText } from "@components/BaseText";
 import { Button } from "@components/Button";
@@ -31,7 +31,7 @@ import { gitRemote } from "@shared/vencordUserAgent";
 import { proxyLazy } from "@utils/lazy";
 import { Margins } from "@utils/margins";
 import { classes, isObjectEmpty } from "@utils/misc";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { OptionType, Plugin } from "@utils/types";
 import { User } from "@vencord/discord-types";
 import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
@@ -48,6 +48,8 @@ const cl = classNameFactory("vc-plugin-modal-");
 
 const AvatarStyles = findByPropsLazy("moreUsers", "emptyUser", "avatarContainer", "clickableAvatar");
 const CloseButton = findComponentByCodeLazy("CLOSE_BUTTON_LABEL");
+const ConfirmModal = findComponentByCodeLazy('parentComponent:"ConfirmModal"');
+const WarningIcon = findComponentByCodeLazy("3.15H3.29c-1.74");
 const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
 
 interface PluginModalProps extends ModalProps {
@@ -96,7 +98,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
     }, [plugin.authors]);
 
     function handleResetClick() {
-        openWarningModal(plugin, { onClose, transitionState }, onRestartNeeded);
+        openWarningModal(plugin, onRestartNeeded);
     }
 
     function renderSettings() {
@@ -210,10 +212,10 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     {renderSettings()}
                 </section>
             </ModalContent>
-            {hasSettings && (
-                <ModalFooter>
-                    <Flex flexDirection="column" style={{ width: "100%" }}>
-                        <Flex style={{ justifyContent: "space-between", alignItems: "center" }}>
+            <ModalFooter>
+                <Flex flexDirection="column" style={{ width: "100%" }}>
+                    <Flex style={{ justifyContent: "space-between", alignItems: "center" }}>
+                        {hasSettings ? (
                             <Tooltip text="Reset to default settings" shouldShow={!isObjectEmpty(pluginSettings)}>
                                 {({ onMouseEnter, onMouseLeave }) => (
                                     <Button
@@ -228,22 +230,22 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                                     </Button>
                                 )}
                             </Tooltip>
-                            {!pluginMeta.userPlugin && (
-                                <div className={cl("links")}>
-                                    <WebsiteButton
-                                        text="View more info"
-                                        href={isEquicordPlugin ? `https://equicord.org/plugins/${plugin.name}` : `https://vencord.dev/plugins/${plugin.name}`}
-                                    />
-                                    <GithubButton
-                                        text="View source code"
-                                        href={`https://github.com/${gitRemote}/tree/main/${pluginMeta.folderName}`}
-                                    />
-                                </div>
-                            )}
-                        </Flex>
+                        ) : <div />}
+                        {!pluginMeta.userPlugin && (
+                            <div className={cl("links")}>
+                                <WebsiteButton
+                                    text="Website"
+                                    href={isEquicordPlugin ? `https://equicord.org/plugins/${plugin.name}` : `https://vencord.dev/plugins/${plugin.name}`}
+                                />
+                                <GithubButton
+                                    text="Source Code"
+                                    href={`https://github.com/${gitRemote}/tree/main/${pluginMeta.folderName}`}
+                                />
+                            </div>
+                        )}
                     </Flex>
-                </ModalFooter>
-            )}
+                </Flex>
+            </ModalFooter>
         </ModalRoot >
     );
 }
@@ -258,14 +260,11 @@ export function openPluginModal(plugin: Plugin, onRestartNeeded?: (pluginName: s
     ));
 }
 
-function resetSettings(plugin: Plugin, warningModalProps?: ModalProps, pluginModalProps?: ModalProps, onRestartNeeded?: (pluginName: string) => void) {
+function resetSettings(plugin: Plugin, onRestartNeeded?: (pluginName: string) => void) {
     const defaultSettings = plugin.settings?.def;
     const pluginName = plugin.name;
 
-    if (!defaultSettings) {
-        console.error(`No default settings found for ${pluginName}`);
-        return;
-    }
+    if (!defaultSettings) return;
 
     const newSettings: Record<string, any> = {};
     let restartNeeded = false;
@@ -287,7 +286,6 @@ function resetSettings(plugin: Plugin, warningModalProps?: ModalProps, pluginMod
         }
     }
 
-
     const currentSettings = plugin.settings?.store;
     if (currentSettings) {
         Object.assign(currentSettings, newSettings);
@@ -305,87 +303,35 @@ function resetSettings(plugin: Plugin, warningModalProps?: ModalProps, pluginMod
             position: Toasts.Position.TOP
         }
     });
-
-    warningModalProps?.onClose();
-    pluginModalProps?.onClose();
 }
 
-export function openWarningModal(plugin?: Plugin | null, pluginModalProps?: ModalProps | null, onRestartNeeded?: (pluginName: string) => void, isPlugin = true, enabledPlugins?: number | null, reset?: any) {
-    if (Settings.ignoreResetWarning && isPlugin) {
-        if (plugin && pluginModalProps) return resetSettings(plugin, pluginModalProps, pluginModalProps, onRestartNeeded);
-        return;
-    } else if (Settings.ignoreResetWarning && !isPlugin) {
-        return reset();
-    }
-
-    const text = isPlugin
-        ? `You are about to reset all settings for ${plugin?.name} to their default values.`
-        : `You are about to disable ${enabledPlugins} plugins!`;
-
-    openModal(warningModalProps => (
-        <ModalRoot
-            {...warningModalProps}
-            size={ModalSize.SMALL}
-            className="vc-text-selectable"
-            transitionState={warningModalProps.transitionState}
+export function openWarningModal(plugin?: Plugin | null, onRestartNeeded?: (pluginName: string) => void, isPlugin = true, enabledPlugins?: number | null, reset?: () => void) {
+    openModal(props => (
+        <ConfirmModal
+            {...props}
+            className={cl("confirm")}
+            header={isPlugin ? "Reset Settings" : "Disable Plugins"}
+            confirmText={isPlugin ? "Reset" : "Disable All"}
+            cancelText="Cancel"
+            onConfirm={() => {
+                if (isPlugin && plugin) {
+                    resetSettings(plugin, onRestartNeeded);
+                } else {
+                    reset?.();
+                }
+            }}
+            onCancel={props.onClose}
         >
-            <ModalHeader separator={false}>
-                <BaseText className="text-danger">Dangerous Action</BaseText>
-                <ModalCloseButton onClick={warningModalProps.onClose} className="vc-modal-close-button" />
-            </ModalHeader>
-            <ModalContent>
-                <section>
-                    <Flex className="vc-warning-info">
-                        <BaseText className="text-normal">
-                            {text}
-                        </BaseText>
-                        <BaseText className="warning-text">
-                            THIS ACTION IS IRREVERSIBLE!
-                        </BaseText>
-                        <BaseText className="text-normal margin-bottom">
-                            If you are certain you want to proceed, click <strong>Confirm Reset</strong>. Otherwise, click <strong>Cancel</strong>.
-                        </BaseText>
-                    </Flex>
-                </section>
-            </ModalContent>
-            <ModalFooter className="vc-modal-footer">
-                <Flex className="vc-button-container">
-                    <Flex className="button-group">
-                        <Button
-                            size="small"
-                            variant="secondary"
-                            onClick={warningModalProps.onClose}
-                        >
-                            Cancel
-                        </Button>
-                        {!Settings.ignoreResetWarning && (
-                            <Button
-                                size="small"
-                                className={cl("disable-warning")}
-                                onClick={() => {
-                                    Settings.ignoreResetWarning = true;
-                                }}
-                            >
-                                Disable Warning Forever
-                            </Button>
-                        )}
-                        <Button
-                            size="small"
-                            onClick={() => {
-                                if (isPlugin) {
-                                    if (plugin && pluginModalProps)
-                                        resetSettings(plugin, pluginModalProps, pluginModalProps, onRestartNeeded);
-                                } else {
-                                    reset();
-                                }
-                            }}
-                            className={cl("confirm-reset")}
-                        >
-                            Confirm Reset
-                        </Button>
-                    </Flex>
-                </Flex>
-            </ModalFooter>
-        </ModalRoot>
+            <Paragraph>
+                {isPlugin
+                    ? <>Are you sure you want to reset all settings for <strong>{plugin?.name}</strong> to their default values?</>
+                    : `Are you sure you want to disable ${enabledPlugins} plugins?`
+                }
+            </Paragraph>
+            <div className={classes(Margins.top16, cl("warning"))}>
+                <WarningIcon color="var(--text-feedback-critical)" />
+                <span>This action cannot be undone.</span>
+            </div>
+        </ConfirmModal>
     ));
 }

src/components/settings/tabs/plugins/index.tsx

@@ -86,7 +86,7 @@ function ReloadRequiredCard({ required, enabledPlugins, openWarningModal, resetC
                     size="small"
                     className={"vc-plugins-disable-warning vc-modal-align-reset"}
                     onClick={() => {
-                        return openWarningModal(null, null, null, false, enabledPlugins.length, resetCheckAndDo);
+                        return openWarningModal(null, undefined, false, enabledPlugins.length, resetCheckAndDo);
                     }}
                 >
                     Disable All Plugins