Unhardcode PluginSettings styles

src/components/PluginSettings/index.tsx

@@ -20,7 +20,7 @@ import "./styles.css";
 
 import * as DataStore from "@api/DataStore";
 import { showNotice } from "@api/Notices";
-import { Settings, useSettings } from "@api/settings";
+import { useSettings } from "@api/settings";
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { ErrorCard } from "@components/ErrorCard";
@@ -71,8 +71,8 @@ function ReloadRequiredCard({ plugins, ...props }: ReloadRequiredCardProps) {
     const pluginSuffix = plugins.length === 1 ? " requires a reload to apply changes." : ".";
 
     return (
-        <ErrorCard {...props} style={{ padding: "1em", display: "grid", gridTemplateColumns: "1fr auto", gap: 8, ...props.style }}>
+        <ErrorCard {...props} className={cl("reload-card")}>
-            <span style={{ margin: "auto 0" }}>
+            <span className={cl("dep-text")}>
                 {pluginPrefix} <code>{plugins.join(", ")}</code>{pluginSuffix}
             </span>
             <Button look={Button.Looks.INVERTED} onClick={() => location.reload()}>Reload</Button>
@@ -91,8 +91,6 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
     const settings = useSettings();
     const pluginSettings = settings.plugins[plugin.name];
 
-    const [iconHover, setIconHover] = React.useState(false);
-
     function isEnabled() {
         return pluginSettings?.enabled || plugin.started;
     }
@@ -154,43 +152,20 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
                 onChange={toggleEnabled}
                 disabled={disabled}
                 value={isEnabled()}
-                note={<Text variant="text-md/normal" style={{
+                note={<Text className={cl("note")} variant="text-md/normal">{plugin.description}</Text>}
-                    height: 40,
-                    overflow: "hidden",
-                    // mfw css is so bad you need whatever this is to get multi line overflow ellipsis to work
-                    textOverflow: "ellipsis",
-                    display: "-webkit-box", // firefox users will cope (it doesn't support it)
-                    WebkitLineClamp: 2,
-                    lineClamp: 2,
-                    WebkitBoxOrient: "vertical",
-                    boxOrient: "vertical"
-                }}>
-                    {plugin.description}
-                </Text>}
                 hideBorder={true}
             >
-                <Flex style={{ marginTop: "auto", width: "100%", height: "100%", alignItems: "center", gap: "8px" }}>
+                <Flex className={cl("flex")}>
                     <Text
                         variant="text-md/bold"
-                        style={{
+                        className={cl("name")}
-                            display: "flex", width: "100%", alignItems: "center", flexGrow: "1", gap: "8px"
-                        }}
                     >
-                        {plugin.name}{(isNew) && <Badge text="NEW" color="#ED4245" />}
+                        {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
                     </Text>
                     <button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
                         {plugin.options
-                            ? <CogWheel
+                            ? <CogWheel />
-                                style={{ color: iconHover ? "" : "var(--text-muted)" }}
+                            : <InfoIcon width="24" height="24" />}
-                                onMouseEnter={() => setIconHover(true)}
-                                onMouseLeave={() => setIconHover(false)}
-                            />
-                            : <InfoIcon
-                                width="24" height="24"
-                                style={{ color: iconHover ? "" : "var(--text-muted)" }}
-                                onMouseEnter={() => setIconHover(true)}
-                                onMouseLeave={() => setIconHover(false)}
-                            />}
                     </button>
                 </Flex>
             </Switch>
@@ -287,7 +262,7 @@ export default ErrorBoundary.wrap(function PluginSettings() {
         for (const p of sortedPlugins) {
             if (!pluginFilter(p)) continue;
 
-            const isRequired = p.required || depMap[p.name]?.some(d => Settings.plugins[d].enabled);
+            const isRequired = p.required || depMap[p.name]?.some(d => settings.plugins[d].enabled);
 
             if (isRequired) {
                 const tooltipText = p.required
@@ -330,10 +305,10 @@ export default ErrorBoundary.wrap(function PluginSettings() {
                 Filters
             </Forms.FormTitle>
 
-            <ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
+            <ReloadRequiredCard plugins={[...changes.getChanges()]} className={Margins.marginBottom20} />
 
             <div className={cl("filter-controls")}>
-                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} style={{ marginBottom: 24 }} />
+                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} className={Margins.marginBottom20} />
                 <div className={InputStyles.inputWrapper}>
                     <Select
                         className={InputStyles.inputDefault}
@@ -373,7 +348,7 @@ function makeDependencyList(deps: string[]) {
     return (
         <React.Fragment>
             <Forms.FormText>This plugin is required by:</Forms.FormText>
-            {deps.map((dep: string) => <Forms.FormText style={{ margin: "0 auto" }}>{dep}</Forms.FormText>)}
+            {deps.map((dep: string) => <Forms.FormText className={cl("dep-text")}>{dep}</Forms.FormText>)}
         </React.Fragment>
     );
 }

src/components/PluginSettings/styles.css

@@ -27,14 +27,13 @@
     background-color: var(--background-modifier-selected);
     color: var(--interactive-active);
     border-radius: 3px;
-    cursor: pointer;
     display: block;
     height: 100%;
     padding: 10px;
-    width: 100%
+    width: 100%;
 }
 
-.vc-plugins-card .vc-plugins-info-button {
+.vc-plugins-info-button {
     height: 24px;
     width: 24px;
     padding: 0;
@@ -58,4 +57,47 @@
     font-size: 12px;
     line-height: 16px;
     color: var(--white-500);
+    text-align: center;
+}
+
+.vc-plugins-note {
+    height: 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    box-orient: vertical;
+}
+
+.vc-plugins-name {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    flex-grow: 1;
+    gap: 8px;
+}
+
+.vc-plugins-flex {
+    margin-top: auto;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    gap: 8px;
+}
+
+.vc-plugins-dep-name {
+    margin: 0 auto;
+}
+
+.vc-plugins-reload-card {
+    padding: 1em;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1em;
+}
+
+.vc-plugins-info-button svg:not(:hover):not(:focus) {
+    color: var(--text-muted);
 }