Extract inline styles to css (#370)

src/components/PluginSettings/components/BadgeComponent.tsx

@@ -16,15 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { BadgeStyle } from "@components/PluginSettings/styles";
-
 export function Badge({ text, color }): JSX.Element {
     return (
-        <div style={{
+        <div className="vc-plugins-badge" style={{
             backgroundColor: color,
             justifySelf: "flex-end",
-            marginLeft: "auto",
-            ...BadgeStyle
+            marginLeft: "auto"
         }}>{text}</div>
     );
 }

src/components/PluginSettings/index.tsx

@@ -16,16 +16,18 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./styles.css";
+
 import * as DataStore from "@api/DataStore";
 import { showNotice } from "@api/Notices";
 import { Settings, useSettings } from "@api/settings";
+import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { ErrorCard } from "@components/ErrorCard";
 import { Flex } from "@components/Flex";
 import { handleComponentFailed } from "@components/handleComponentFailed";
 import { Badge } from "@components/PluginSettings/components";
 import PluginModal from "@components/PluginSettings/PluginModal";
-import * as styles from "@components/PluginSettings/styles";
 import { ChangeList } from "@utils/ChangeList";
 import Logger from "@utils/Logger";
 import { classes, LazyComponent, useAwaiter } from "@utils/misc";
@@ -36,6 +38,8 @@ import { Alerts, Button, Forms, Margins, Parser, React, Select, Switch, Text, Te
 
 import Plugins from "~plugins";
 
+const cl = classNameFactory("vc-plugins-");
+
 import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
 
 const logger = new Logger("PluginSettings", "#a6d189");
@@ -145,7 +149,7 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
     }
 
     return (
-        <Flex style={styles.PluginsGridItem} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        <Flex className={cl("card")} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
             <Switch
                 onChange={toggleEnabled}
                 disabled={disabled}
@@ -174,7 +178,7 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
                     >
                         {plugin.name}{(isNew) && <Badge text="NEW" color="#ED4245" />}
                     </Text>
-                    <button role="switch" onClick={() => openModal()} style={styles.SettingsIcon} className="button-12Fmur">
+                    <button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
                         {plugin.options
                             ? <CogWheel
                                 style={{ color: iconHover ? "" : "var(--text-muted)" }}
@@ -278,8 +282,8 @@ export default ErrorBoundary.wrap(function Settings() {
 
             <ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
 
-            <div style={styles.FiltersBar}>
-                <TextInput value={searchValue.value} placeholder={"Search for a plugin..."} onChange={onSearch} style={{ marginBottom: 24 }} />
+            <div className={cl("filter-controls")}>
+                <TextInput value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} style={{ marginBottom: 24 }} />
                 <div className={InputStyles.inputWrapper}>
                     <Select
                         className={InputStyles.inputDefault}
@@ -298,7 +302,7 @@ export default ErrorBoundary.wrap(function Settings() {
 
             <Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle>
 
-            <div style={styles.PluginsGrid}>
+            <div className={cl("grid")}>
                 {sortedPlugins?.length ? sortedPlugins
                     .filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a))
                     .map(plugin => {
@@ -319,7 +323,7 @@ export default ErrorBoundary.wrap(function Settings() {
             <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
                 Required Plugins
             </Forms.FormTitle>
-            <div style={styles.PluginsGrid}>
+            <div className={cl("grid")}>
                 {sortedPlugins?.length ? sortedPlugins
                     .filter(a => a.required || dependencyCheck(a.name, depMap).length && pluginFilter(a))
                     .map(plugin => {

src/components/PluginSettings/styles.css

@@ -0,0 +1,61 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+.vc-plugins-grid {
+    margin-top: 16px;
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.vc-plugins-card {
+    background-color: var(--background-modifier-selected);
+    color: var(--interactive-active);
+    border-radius: 3px;
+    cursor: pointer;
+    display: block;
+    height: 100%;
+    padding: 10px;
+    width: 100%
+}
+
+.vc-plugins-card .vc-plugins-info-button {
+    height: 24px;
+    width: 24px;
+    padding: 0;
+    background: transparent;
+    margin-right: 8px;
+}
+
+.vc-plugins-filter-controls {
+    display: grid;
+    height: 40px;
+    gap: 10px;
+    grid-template-columns: 1fr 150px;
+}
+
+.vc-plugins-badge {
+    padding: 0 6px;
+    font-family: var(--font-display);
+    font-weight: 500;
+    border-radius: 8px;
+    height: 16px;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--white-500);
+}

src/components/PluginSettings/styles.ts

@@ -1,61 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-export const PluginsGrid: React.CSSProperties = {
-    marginTop: 16,
-    display: "grid",
-    gridGap: 16,
-    gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
-};
-
-export const PluginsGridItem: React.CSSProperties = {
-    backgroundColor: "var(--background-modifier-selected)",
-    color: "var(--interactive-active)",
-    borderRadius: 3,
-    cursor: "pointer",
-    display: "block",
-    height: "100%",
-    padding: 10,
-    width: "100%",
-};
-
-export const FiltersBar: React.CSSProperties = {
-    gap: 10,
-    height: 40,
-    gridTemplateColumns: "1fr 150px",
-    display: "grid"
-};
-
-export const SettingsIcon: React.CSSProperties = {
-    height: "24px",
-    width: "24px",
-    padding: "0",
-    background: "transparent",
-    marginRight: 8
-};
-
-export const BadgeStyle: React.CSSProperties = {
-    padding: "0 6px",
-    fontFamily: "var(--font-display)",
-    fontWeight: "500",
-    borderRadius: "8px",
-    height: "16px",
-    fontSize: "12px",
-    lineHeight: "16px",
-    color: "var(--white-500)",
-};