Extract inline styles to css (#370)

6 files changed, 46 insertions, 40 deletions

diff --git a/src/components/VencordSettings/BackupRestoreTab.tsx b/src/components/VencordSettings/BackupRestoreTab.tsx
index f0730b3..c7dc7d2 100644
--- a/src/components/VencordSettings/BackupRestoreTab.tsx
+++ b/src/components/VencordSettings/BackupRestoreTab.tsx
@@ -18,19 +18,14 @@
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
+import { classes } from "@utils/misc";
 import { downloadSettingsBackup, uploadSettingsBackup } from "@utils/settingsSync";
 import { Button, Card, Forms, Margins, Text } from "@webpack/common";
 
 function BackupRestoreTab() {
     return (
         <Forms.FormSection title="Settings Sync">
-            <Card style={{
-                backgroundColor: "var(--info-warning-background)",
-                borderColor: "var(--info-warning-foreground)",
-                color: "var(--info-warning-text)",
-                padding: "1em",
-                marginBottom: "0.5em",
-            }}>
+            <Card className={classes("vc-settings-card", "vc-backup-restore-card")}>
                 <Flex flexDirection="column">
                     <strong>Warning</strong>
                     <span>Importing a settings file will overwrite your current settings.</span>
diff --git a/src/components/VencordSettings/ThemesTab.tsx b/src/components/VencordSettings/ThemesTab.tsx
index b673c4b..738715f 100644
--- a/src/components/VencordSettings/ThemesTab.tsx
+++ b/src/components/VencordSettings/ThemesTab.tsx
@@ -89,11 +89,7 @@ export default ErrorBoundary.wrap(function () {
 
     return (
         <>
-            <Card style={{
-                padding: "1em",
-                marginBottom: "1em",
-                marginTop: "1em"
-            }}>
+            <Card className="vc-settings-card">
                 <Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
                 <Forms.FormText>One link per line</Forms.FormText>
                 <Forms.FormText>Make sure to use the raw links or github.io links!</Forms.FormText>
diff --git a/src/components/VencordSettings/Updater.tsx b/src/components/VencordSettings/Updater.tsx
index 3369069..dea8766 100644
--- a/src/components/VencordSettings/Updater.tsx
+++ b/src/components/VencordSettings/Updater.tsx
@@ -69,14 +69,18 @@ interface CommonProps {
     repoPending: boolean;
 }
 
+function HashLink({ repo, hash, disabled = false }: { repo: string, hash: string, disabled?: boolean; }) {
+    return <Link href={`${repo}/commit/${hash}`} disabled={disabled}>
+        {hash}
+    </Link>;
+}
+
 function Changes({ updates, repo, repoPending }: CommonProps & { updates: typeof changes; }) {
     return (
         <Card style={{ padding: ".5em" }}>
             {updates.map(({ hash, author, message }) => (
                 <div>
-                    <Link href={`${repo}/commit/${hash}`} disabled={repoPending}>
-                        <code>{hash}</code>
-                    </Link>
+                    <code><HashLink {...{ repo, hash }} disabled={repoPending} /></code>
                     <span style={{
                         marginLeft: "0.5em",
                         color: "var(--text-normal)"
@@ -199,7 +203,7 @@ function Updater() {
                 <Link href={repo}>
                     {repo.split("/").slice(-2).join("/")}
                 </Link>
-            )} ({gitHash})</Forms.FormText>
+            )} (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)</Forms.FormText>
 
             <Forms.FormDivider />
 
diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx
index df25e2d..e59c449 100644
--- a/src/components/VencordSettings/VencordTab.tsx
+++ b/src/components/VencordSettings/VencordTab.tsx
@@ -18,13 +18,17 @@
 
 
 import { useSettings } from "@api/settings";
+import { classNameFactory } from "@api/Styles";
 import DonateButton from "@components/DonateButton";
 import ErrorBoundary from "@components/ErrorBoundary";
 import IpcEvents from "@utils/IpcEvents";
 import { useAwaiter } from "@utils/misc";
 import { Button, Card, Forms, Margins, React, Switch } from "@webpack/common";
 
-const st = (style: string) => `vcSettings${style}`;
+const cl = classNameFactory("vc-settings-");
+
+const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
+const SHIGGY_DONATE_IMAGE = "https://media.discordapp.net/stickers/1039992459209490513.png";
 
 function VencordSettings() {
     const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), {
@@ -32,17 +36,13 @@ function VencordSettings() {
     });
     const settings = useSettings();
 
-    const [donateImage] = React.useState(
-        Math.random() > 0.5
-            ? "https://cdn.discordapp.com/emojis/1026533090627174460.png"
-            : "https://media.discordapp.net/stickers/1039992459209490513.png"
-    );
+    const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []);
 
     return (
         <React.Fragment>
             <DonateCard image={donateImage} />
             <Forms.FormSection title="Quick Actions">
-                <Card className={st("QuickActionCard")}>
+                <Card className={cl("quick-actions-card")}>
                     {IS_WEB ? (
                         <Button
                             onClick={() => require("../Monaco").launchMonacoEditor()}
@@ -121,18 +121,10 @@ interface DonateCardProps {
 
 function DonateCard({ image }: DonateCardProps) {
     return (
-        <Card style={{
-            padding: "1em",
-            display: "flex",
-            flexDirection: "row",
-            marginBottom: "1em",
-            marginTop: "1em"
-        }}>
+        <Card className={cl("card", "donate")}>
             <div>
                 <Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
-                <Forms.FormText>
-                    Please consider supporting the development of Vencord by donating!
-                </Forms.FormText>
+                <Forms.FormText>Please consider supporting the development of Vencord by donating!</Forms.FormText>
                 <DonateButton style={{ transform: "translateX(-1em)" }} />
             </div>
             <img
@@ -140,7 +132,7 @@ function DonateCard({ image }: DonateCardProps) {
                 src={image}
                 alt=""
                 height={128}
-                style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
+                style={{ marginLeft: "auto", transform: image === DEFAULT_DONATE_IMAGE ? "rotate(10deg)" : "" }}
             />
         </Card>
     );
diff --git a/src/components/VencordSettings/index.tsx b/src/components/VencordSettings/index.tsx
index b3a3322..2ab9407 100644
--- a/src/components/VencordSettings/index.tsx
+++ b/src/components/VencordSettings/index.tsx
@@ -18,6 +18,7 @@
 
 import "./settingsStyles.css";
 
+import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { findByCodeLazy } from "@webpack";
 import { Forms, Router, Text } from "@webpack/common";
@@ -28,7 +29,7 @@ import ThemesTab from "./ThemesTab";
 import Updater from "./Updater";
 import VencordSettings from "./VencordTab";
 
-const st = (style: string) => `vcSettings${style}`;
+const cl = classNameFactory("vc-settings-");
 
 const TabBar = findByCodeLazy('[role="tab"][aria-disabled="false"]');
 
@@ -62,7 +63,7 @@ function Settings(props: SettingsProps) {
         <TabBar
             type={TabBar.Types.TOP}
             look={TabBar.Looks.BRAND}
-            className={st("TabBar")}
+            className={cl("tab-bar")}
             selectedItem={tab}
             onItemSelect={Router.open}
         >
@@ -70,7 +71,7 @@ function Settings(props: SettingsProps) {
                 if (!component) return null;
                 return <TabBar.Item
                     id={key}
-                    className={st("TabBarItem")}
+                    className={cl("tab-bar-item")}
                     key={key}>
                     {name}
                 </TabBar.Item>;
diff --git a/src/components/VencordSettings/settingsStyles.css b/src/components/VencordSettings/settingsStyles.css
index e90ef14..4b1e16b 100644
--- a/src/components/VencordSettings/settingsStyles.css
+++ b/src/components/VencordSettings/settingsStyles.css
@@ -1,16 +1,16 @@
-.vcSettingsTabBar {
+.vc-settings-tab-bar {
     margin-top: 20px;
     margin-bottom: -2px;
     border-bottom: 2px solid var(--background-modifier-accent);
 }
 
-.vcSettingsTabBarItem {
+.vc-settings-tab-bar-item {
     margin-right: 32px;
     padding-bottom: 16px;
     margin-bottom: -2px;
 }
 
-.vcSettingsQuickActionCard {
+.vc-settings-quick-actions-card {
     padding: 1em;
     display: flex;
     gap: 1em;
@@ -21,3 +21,21 @@
     flex-direction: row;
     margin-bottom: 1em;
 }
+
+.vc-settings-donate {
+    display: flex;
+    flex-direction: row;
+}
+
+.vc-settings-card {
+    padding: 1em;
+    margin-bottom: 1em;
+    margin-top: 1em;
+}
+
+.vc-backup-restore-card {
+    background-color: var(--info-warning-background);
+    border-color: var(--info-warning-foreground);
+    color: var(--info-warning-text);
+    margin-top: 0;
+}