chore(pluginCards): warning to few plugins, change restart modal style & more (#88)

* add warning to plugins

* update wording and restart button

* update warning gif

src/components/PluginSettings/PluginModal.tsx

@@ -414,14 +414,14 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
                 <Forms.FormSection>
                     <Flex className="vc-warning-info">
                         <img
-                            src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
+                            src="https://media.tenor.com/hapjxf8y50YAAAAi/stop-sign.gif"
                             alt="Warning"
                         />
                         <Text className="text-normal">
                             You are about to reset all settings for <strong>{plugin.name}</strong> to their default values.
                         </Text>
-                        <Text className="text-danger">
+                        <Text className="warning-text">
-                            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>.

src/components/PluginSettings/index.tsx

@@ -70,7 +70,10 @@ function ReloadRequiredCard({ required, enabledPlugins, openDisablePluginsModal,
                     <Forms.FormText className={cl("dep-text")}>
                         Restart now to apply new plugins and their settings
                     </Forms.FormText>
-                    <Button onClick={() => location.reload()}>
+                    <Button
+                        className="vc-restart-button"
+                        onClick={() => location.reload()}
+                    >
                         Restart
                     </Button>
                 </>
@@ -400,14 +403,14 @@ export default function PluginSettings() {
                     <Forms.FormSection>
                         <Flex className="vc-warning-info">
                             <img
-                                src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
+                                src="https://media.tenor.com/hapjxf8y50YAAAAi/stop-sign.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
+                                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.

src/components/PluginSettings/styles.css

@@ -75,19 +75,27 @@
 .vc-plugins-restart-card {
     padding: 1em;
     background: var(--info-warning-background);
-    border: 1px solid var(--info-warning-foreground);
+    border: inherit !important;
     color: var(--info-warning-text);
 }
 
 .vc-plugins-restart-card button {
     margin-top: 0.5em;
-    background: var(--info-warning-foreground) !important;
 }
 
 .vc-plugins-info-button svg:not(:hover, :focus) {
     color: var(--text-muted);
 }
 
+.vc-restart-button {
+    background-color: var(--background-color) !important;
+    border: 1px solid var(--info-warning-foreground);
+}
+
+.vc-restart-button:hover {
+    background-color: var(--info-warning-foreground) !important;
+}
+
 .vc-plugin-stats {
     background-color: var(--background-secondary-alt);
     border-radius: 8px;
@@ -221,8 +229,8 @@
 /* Specific to disable all modal */
 
 .warning-text {
-    color: var(--text-danger);
+    color: var(--text-danger) !important;
-    font-size: 1.2rem;
+    font-size: 1.2rem !important;
 }
 
 .warning-text span {

src/components/VencordSettings/VencordTab.tsx

@@ -91,8 +91,8 @@ function EquicordSettings() {
             !IS_WEB && {
                 key: "transparent",
                 title: "Enable window transparency.",
-                note: "You need a theme that supports transparency or this will do nothing. 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" }
+                warning: { enabled: true, message: "This will stop the window from being resizable." }
             },
             !IS_WEB && isWindows && {
                 key: "winCtrlQ",

src/equicordplugins/platformSpoofer/index.tsx

@@ -4,9 +4,12 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./style.css";
+
 import { definePluginSettings } from "@api/Settings";
 import { EquicordDevs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
+import { Forms } from "@webpack/common";
 
 const settings = definePluginSettings({
     platform: {
@@ -39,6 +42,11 @@ export default definePlugin({
     name: "PlatformSpoofer",
     description: "Spoof what platform or device you're on",
     authors: [EquicordDevs.Drag],
+    settingsAboutComponent: () => <>
+        <Forms.FormText className="platform-warning">
+            We can't guarantee this plugin won't get you warned or banned.
+        </Forms.FormText>
+    </>,
     settings: settings,
     patches: [
         {

src/equicordplugins/platformSpoofer/style.css

@@ -0,0 +1,12 @@
+.platform-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;
+    font-style: bold;
+}

src/equicordplugins/purgeMessages/index.tsx

@@ -16,11 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
 import { ApplicationCommandInputType, ApplicationCommandOptionType, findOption, sendBotMessage } from "@api/Commands";
 import { Devs, EquicordDevs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { MessageStore, UserStore } from "@webpack/common";
+import { Forms, MessageStore, UserStore } from "@webpack/common";
 import { Channel, Message } from "discord-types/general";
 
 import { loggedMessages } from "../messageLoggerEnhanced/LoggedMessageManager";
@@ -48,6 +50,11 @@ export default definePlugin({
     name: "PurgeMessages",
     description: "Purges messages from a channel",
     authors: [EquicordDevs.bhop, Devs.nyx],
+    settingsAboutComponent: () => <>
+        <Forms.FormText className="purge-warning">
+            We can't guarantee this plugin won't get you warned or banned.
+        </Forms.FormText>
+    </>,
     commands: [
         {
             name: "purge",

src/equicordplugins/purgeMessages/style.css

@@ -0,0 +1,12 @@
+.purge-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;
+    font-style: bold;
+}

src/equicordplugins/questCompleter.discordDesktop/index.tsx

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
 import { showNotification } from "@api/Notifications";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs, EquicordDevs } from "@utils/constants";
@@ -23,7 +25,7 @@ import { getTheme, Theme } from "@utils/discord";
 import { classes } from "@utils/misc";
 import definePlugin from "@utils/types";
 import { findByProps, findExportedComponentLazy } from "@webpack";
-import { Button, FluxDispatcher, RestAPI, Tooltip, UserStore } from "@webpack/common";
+import { Button, FluxDispatcher, Forms, RestAPI, Tooltip, UserStore } from "@webpack/common";
 const HeaderBarIcon = findExportedComponentLazy("Icon", "Divider");
 const isApp = navigator.userAgent.includes("Electron/");
 
@@ -188,6 +190,11 @@ export default definePlugin({
     name: "QuestCompleter",
     description: "A plugin to complete quests without having the game installed.",
     authors: [Devs.HappyEnderman, EquicordDevs.SerStars, EquicordDevs.thororen],
+    settingsAboutComponent: () => <>
+        <Forms.FormText className="remixme-warning">
+            We can't guarantee this plugin won't get you warned or banned.
+        </Forms.FormText>
+    </>,
     patches: [
         {
             find: "\"invite-button\"",

src/equicordplugins/questCompleter.discordDesktop/style.css

@@ -0,0 +1,12 @@
+.quest-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;
+    font-style: bold;
+}

src/equicordplugins/remixMe/index.tsx

@@ -4,10 +4,13 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./style.css";
+
 import { MessageEvents } from "@api/index";
 import { MessageExtra, MessageObject } from "@api/MessageEvents";
 import { EquicordDevs } from "@utils/constants";
 import definePlugin from "@utils/types";
+import { Forms } from "@webpack/common";
 
 const handleMessage = (channelID: string, message: MessageObject, messageEx: MessageExtra) => messageEx.uploads && messageEx.uploads.forEach(att => (att as any).isRemix = true);
 
@@ -15,6 +18,11 @@ export default definePlugin({
     name: "RemixMe",
     description: "Turns every single message with attachment to have remix tag",
     authors: [EquicordDevs.kvba],
+    settingsAboutComponent: () => <>
+        <Forms.FormText className="remixme-warning">
+            We can't guarantee this plugin won't get you warned or banned.
+        </Forms.FormText>
+    </>,
     start: () => MessageEvents.addPreSendListener(handleMessage),
     stop: () => MessageEvents.removePreSendListener(handleMessage)
 });

src/equicordplugins/remixMe/style.css

@@ -0,0 +1,12 @@
+.remixme-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;
+    font-style: bold;
+}