components(PluginSettings): move css code to a file (#74)

* move disable all / reset all plugin options css to actual css files

src/components/PluginSettings/PluginModal.css

@@ -4,4 +4,74 @@
 
 .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(--button-danger-background);
+}
+
+.button-danger-background-no-margin {
+    background-color: var(--button-danger-background) !important;
+    color: var(--header-primary);
+}
+
+.vc-modal-close-button {
+    margin-left: auto !important;
 }

src/components/PluginSettings/PluginModal.tsx

@@ -407,36 +407,27 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
             transitionState={warningModalProps.transitionState}
         >
             <ModalHeader separator={false}>
-                <Text style={{ flexGrow: 1, color: "var(--text-danger)", fontSize: "1.4rem", fontWeight: "bold" }}>Warning: Dangerous Action</Text>
+                <Text className="text-danger">Warning: Dangerous Action</Text>
-                <ModalCloseButton onClick={warningModalProps.onClose} />
+                <ModalCloseButton onClick={warningModalProps.onClose} className="vc-modal-close-button" />
             </ModalHeader>
             <ModalContent>
                 <Forms.FormSection>
-                    <Flex className="vc-warning-info" style={{ gap: "15px", flexDirection: "column", userSelect: "none" }}>
+                    <Flex className="vc-warning-info">
                         <img
                             src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
                             alt="Warning"
-                            style={{ width: "60%", height: "auto", marginBottom: "10px", display: "block", margin: "auto" }}
                         />
-                        <Text style={{ fontSize: "1.2rem", color: "var(--text-normal)" }}>
+                        <Text className="text-normal">
                             You are about to reset all settings for <strong>{plugin.name}</strong> to their default values.
                         </Text>
-                        <Text style={{ fontSize: "1.2rem", color: "var(--text-danger)", fontWeight: "bold" }}>
+                        <Text className="text-danger">
                             This action is irreversible.
                         </Text>
-                        <Text style={{ fontSize: "1.2rem", color: "var(--text-normal)", marginBottom: "10px" }}>
+                        <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 style={{
+                            <Button className="disable-warning" onClick={() => {
-                                fontSize: "0.8rem",
-                                backgroundColor: "transparent",
-                                color: "red",
-                                cursor: "pointer",
-                                margin: "0 auto",
-                                width: "fit-content",
-                                textDecoration: "underline"
-                            }} onClick={() => {
                                 Settings.ignoreResetWarning = true;
                             }}>
                                 Disable this warning forever
@@ -466,7 +457,7 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
                                     }}
                                     onMouseEnter={onMouseEnter}
                                     onMouseLeave={onMouseLeave}
-                                    style={{ marginLeft: "10px", backgroundColor: "var(--button-danger-background)" }}
+                                    className="button-danger-background-no-margin"
                                 >
                                     Confirm Reset
                                 </Button>

src/components/PluginSettings/index.tsx

@@ -429,35 +429,26 @@ export default function PluginSettings() {
             {enabledPlugins.length > 0 && (
                 <Button
                     size={Button.Sizes.SMALL}
-                    style={{ backgroundColor: "var(--button-danger-background)", margin: "20px 0" }}
+                    className="button-danger-background"
                     onClick={() => {
                         if (Settings.ignoreResetWarning) return resetCheckAndDo();
 
                         return Alerts.show({
                             title: "Disable All Plugins",
                             body: (
-                                <div style={{ textAlign: "center" }}>
+                                <div className="alert-body">
                                     <img
                                         src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
                                         alt="Warning"
-                                        style={{ width: "60%", height: "auto", marginBottom: "10px", display: "block", margin: "auto" }}
                                     />
-                                    <p style={{ fontSize: "1.2rem", color: "var(--text-danger)", fontWeight: "bold" }}>
+                                    <p className="warning-text">
-                                        WARNING: You are about to disable <span style={{ textDecoration: "underline" }}>{enabledPlugins.length}</span> plugins!
+                                        WARNING: You are about to disable <span>{enabledPlugins.length}</span> plugins!
                                     </p>
-                                    <p style={{ fontSize: "1rem" }}>
+                                    <p>
                                         Are you absolutely sure you want to proceed? You can always enable them back later.
                                     </p>
                                     {!Settings.ignoreResetWarning && (
-                                        <Button style={{
+                                        <Button className="disable-warning" onClick={() => {
-                                            fontSize: "0.8rem",
-                                            backgroundColor: "transparent",
-                                            color: "red",
-                                            cursor: "pointer",
-                                            margin: "0 auto",
-                                            width: "fit-content",
-                                            textDecoration: "underline"
-                                        }} onClick={() => {
                                             Settings.ignoreResetWarning = true;
                                         }}>
                                             Disable this warning forever
@@ -466,6 +457,7 @@ export default function PluginSettings() {
                                 </div>
                             ),
                             confirmText: "Disable All",
+                            confirmColor: "button-danger-background-no-margin",
                             cancelText: "Cancel",
                             onConfirm: () => {
                                 resetCheckAndDo();

src/components/PluginSettings/styles.css

@@ -124,3 +124,66 @@
     height: 100%;
     margin: 0 10px;
 }
+
+/* disable all modal */
+
+.button-danger-background {
+    background-color: var(--button-danger-background) !important;
+    margin: 20px 0;
+}
+
+.button-danger-background-no-margin {
+    background-color: var(--button-danger-background) !important;
+    color: var(--header-primary);
+}
+
+.button-danger-background:hover {
+    background-color: var(--button-danger-background-hover);
+}
+
+.alert-body {
+    text-align: center;
+}
+
+.alert-body img {
+    width: 60%;
+    height: auto;
+    display: block;
+    margin: auto auto 10px;
+    border-radius: 8px;
+}
+
+.alert-body p.warning-text {
+    font-size: 1.2rem;
+    color: var(--text-danger);
+    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-warning:hover {
+    color: var(--text-danger);
+    background-color: transparent;
+    opacity: 0.8;
+}
+
+.disable-warning:active {
+    background-color: transparent;
+}