feat: switch in plugin settings (#140)

2 files changed, 28 insertions, 19 deletions

diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx
index 552f9fd..dbb5161 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -25,7 +25,7 @@ import { ChangeList } from "../../utils/ChangeList";
 import { classes, lazyWebpack } from "../../utils/misc";
 import { Plugin } from "../../utils/types";
 import { filters } from "../../webpack";
-import { Alerts, Button, Forms, Margins, Parser, React, Text, TextInput, Toasts, Tooltip } from "../../webpack/common";
+import { Alerts, Button, Forms, Margins, Parser, React, Switch, Text, TextInput, Toasts, Tooltip } from "../../webpack/common";
 import ErrorBoundary from "../ErrorBoundary";
 import { Flex } from "../Flex";
 import PluginModal from "./PluginModal";
@@ -34,6 +34,9 @@ import * as styles from "./styles";
 const Select = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
 const InputStyles = lazyWebpack(filters.byProps(["inputDefault", "inputWrapper"]));
 
+const CogWheel = lazyWebpack(filters.byCode("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069"));
+const InfoIcon = lazyWebpack(filters.byCode("4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16"));
+
 function showErrorToast(message: string) {
     Toasts.show({
         message,
@@ -79,23 +82,21 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
     }
 
     return (
-        <Flex style={styles.PluginsGridItem} flexDirection="column" onClick={() => openModal()} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-            <Text variant="text-md/bold">{plugin.name}</Text>
-            <Text variant="text-md/normal" style={{ height: 40, overflow: "hidden" }}>{plugin.description}</Text>
-            <Flex flexDirection="row-reverse" style={{ marginTop: "auto", width: "100%", justifyContent: "space-between" }}>
-                <Button
-                    onClick={e => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        toggleEnabled();
-                    }}
-                    disabled={disabled}
-                    color={isEnabled() ? Button.Colors.RED : Button.Colors.GREEN}
-                >
-                    {isEnabled() ? "Disable" : "Enable"}
-                </Button>
-                {plugin.options && <Forms.FormText style={{ cursor: "pointer", margin: "auto 0 auto 10px" }}>Click to configure</Forms.FormText>}
-            </Flex>
+        <Flex style={styles.PluginsGridItem} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+            <Switch
+                onChange={toggleEnabled}
+                disabled={disabled}
+                value={isEnabled()}
+                note={<Text variant="text-md/normal" style={{ height: 40, overflow: "hidden" }}>{plugin.description}</Text>}
+                hideBorder={true}
+            >
+                <Flex style={{ marginTop: "auto", width: "100%", height: "100%", alignItems: "center" }}>
+                    <Text variant="text-md/bold" style={{ flexGrow: "1" }}>{plugin.name}</Text>
+                    <button role="switch" onClick={() => openModal()} style={styles.SettingsIcon} className="button-12Fmur">
+                        {plugin.options ? <CogWheel /> : <InfoIcon width="24" height="24" />}
+                    </button>
+                </Flex>
+            </Switch>
         </Flex>
     );
 }
diff --git a/src/components/PluginSettings/styles.ts b/src/components/PluginSettings/styles.ts
index 767fb63..703c579 100644
--- a/src/components/PluginSettings/styles.ts
+++ b/src/components/PluginSettings/styles.ts
@@ -29,7 +29,7 @@ export const PluginsGridItem: React.CSSProperties = {
     borderRadius: 3,
     cursor: "pointer",
     display: "block",
-    height: 150,
+    height: "min-content",
     padding: 10,
     width: "100%",
 };
@@ -40,3 +40,11 @@ export const FiltersBar: React.CSSProperties = {
     gridTemplateColumns: "1fr 150px",
     display: "grid"
 };
+
+export const SettingsIcon: React.CSSProperties = {
+    height: "24px",
+    width: "24px",
+    padding: "0",
+    background: "transparent",
+    marginRight: 8
+};