Fix broken classNames (#1174)

* Fix broken classNames

* Remove old title classNames

renderer/src/modules/componentpatcher.js

@@ -1,6 +1,7 @@
 import {Config} from "data";
 import WebpackModules from "./webpackmodules";
 import DiscordModules from "./discordmodules";
+import DiscordClasses from "./discordclasses";
 import Utilities from "./utilities";
 import Patcher from "./patcher";
 import BDLogo from "../ui/icons/bdlogo";
@@ -67,7 +68,7 @@ export default new class ComponentPatcher {
                 children[children.length - 2].type = newOne;
             }
 
-            const additional = DiscordModules.React.createElement("div", {className: "colorMuted-HdFt4q size12-3cLvbJ"}, `BetterDiscord ${Config.version}`);
+            const additional = DiscordModules.React.createElement("div", {className: `${DiscordClasses.Text.colorMuted} ${DiscordClasses.Text.size12}`}, `BetterDiscord ${Config.version}`);
 
 
             const originalVersions = children[children.length - 1].type;

renderer/src/modules/discordclasses.js

@@ -0,0 +1,59 @@
+import Utilities from "./utilities";
+import ClassName from "../structs/classname";
+import WebpackModules from "./webpackmodules";
+
+const combineClasses = function (...props) {
+    return Object.assign({}, ...props.map(prop => WebpackModules.getByProps(...prop)));
+};
+
+const DiscordClassModules = Utilities.memoizeObject({
+    get Divider() {
+        const toolbar = WebpackModules.getByProps("divider", "toolbar");
+        const discovery = WebpackModules.getByProps("divider", "emptyGuilds");
+        
+        return {
+            verticalDivider: toolbar.divider,
+            dividerLarge: discovery.divider,
+            divider: "bd-divider"
+        };
+    },
+    get Text() {
+        return combineClasses(
+            ["size20", "size12"],
+            ["selectable", "colorMuted"]
+        );
+    },
+    get Titles() {
+        return combineClasses(
+            ["wrapper", "base"],
+            ["defaultColor", "h4"]
+        );
+    },
+    get EmptyImage() {return WebpackModules.getByProps("emptyImage", "emptyHeader");},
+    get Modal() {return WebpackModules.getByProps("content", "root", "header");},
+    get Scrollers() {return WebpackModules.getByProps("thin", "scrollerBase", "content");},
+    get Margins() {return WebpackModules.getByProps("marginXSmall", "marginBottom8");},
+    get Integrations() {return WebpackModules.getByProps("secondaryHeader", "detailsWrapper");},
+    get Card() {return WebpackModules.getByProps("card", "topDivider", "description");},
+});
+
+const emptyClassModule = new Proxy({}, {
+    get() {return "";}
+});
+
+const DiscordClasses = new Proxy(DiscordClassModules, {
+    get(list, item) {
+        if (list[item] === undefined) return emptyClassModule;
+        if (typeof(list[item]) === "string") return list[item];
+        
+        return new Proxy(list[item], {
+            get(obj, prop) {
+                if (!Reflect.has(obj, prop)) return "";
+
+                return new ClassName(obj[prop]);
+            }
+        });
+    }
+});
+
+export default DiscordClasses;

renderer/src/modules/modules.js

@@ -16,4 +16,5 @@ export {default as ReactComponents} from "./reactcomponents";
 export {default as LocaleManager} from "./localemanager";
 export {default as Strings} from "./strings";
 export {default as IPC} from "./ipc";
-export {default as Logger} from "common/logger";
+export {default as Logger} from "common/logger";
+export {default as DiscordClasses} from "./discordclasses";

renderer/src/structs/classname.js

@@ -0,0 +1,59 @@
+// import Selector from "./selector";
+
+/** 
+ * Representation of a Class Name
+ * @memberof module:DOMTools
+ **/
+class ClassName {
+    /**
+     * 
+     * @param {string} name - name of the class to represent
+     */
+    constructor(name) {
+        this.value = name;
+    }
+    
+    /**
+     * Concatenates new class names to the current one using spaces.
+     * @param {string} classNames - list of class names to add to this class name
+     * @returns {ClassName} returns self to allow chaining
+     */
+    add(...classNames) {
+        for (let i = 0; i < classNames.length; i++) this.value += " " + classNames[i];
+        return this;
+    }
+    
+    /**
+     * Returns the raw class name, this is how native function get the value.
+     * @returns {string} raw class name.
+     */
+    toString() {
+        return this.value;
+    }
+    
+    /**
+     * Returns the raw class name, this is how native function get the value.
+     * @returns {string} raw class name.
+     */
+    valueOf() {
+        return this.value;
+    }
+    
+    // /**
+    //  * Returns the classname represented as {@link module:DOMTools.Selector}.
+    //  * @returns {Selector} selector representation of this class name.
+    //  */
+    // get selector() {
+    //     return new Selector(this.value);
+    // }
+
+    get single() {
+        return this.value.split(" ")[0];
+    }
+
+    get first() {
+        return this.value.split(" ")[0];
+    }
+}
+
+export default ClassName;

renderer/src/styles/index.css

@@ -42,4 +42,10 @@
 
 .bd-link:hover {
     text-decoration: underline;
+}
+
+.bd-divider {
+    width: 100%;
+    height: 1px;
+    border-top: thin solid hsl(0deg 0% 100% / 6%);
 }

renderer/src/styles/ui/bdsettings.css

@@ -204,8 +204,24 @@
     margin-top: 0;
 }
 
+.bd-settings-title {
+    color: #ffffff;
+    font-weight: 600;
+    cursor: default;
+    flex: 1;
+}
+
+.bd-settings-title:not(.bd-settings-group-title) {
+    margin-bottom: 20px;
+    font-size: 20px;
+    line-height: 24px;
+}
+
 .bd-settings-title.bd-settings-group-title {
     margin-bottom: 10px;
+    text-transform: uppercase;
+    font-size: 14px;
+    color: var(--interactive-normal);
 }
 
 .checkbox-item {

renderer/src/ui/addonerrormodal.jsx

@@ -1,4 +1,4 @@
-import {React, Strings, WebpackModules} from "modules";
+import {React, Strings, WebpackModules, DiscordClasses} from "modules";
 import Extension from "./icons/extension";
 import ThemeIcon from "./icons/theme";
 
@@ -21,7 +21,7 @@ class AddonError extends React.Component {
         const stack = err.error && err.stack;
         if (!this.state.expanded || !stack) return null;
         return <div className="bd-addon-error-body">
-            <div className="divider-3573oO topDivider-3G26Ct"></div>
+            <div className={`${DiscordClasses.Card.topDivider} ${DiscordClasses.Divider.divider}`} />
             <div className="bd-addon-error-stack">
                 {Parser ? Parser.codeBlock.react({content: stack, lang: "js"}, null, {}) : stack}
             </div>
@@ -35,12 +35,12 @@ class AddonError extends React.Component {
                     {err.type == "plugin" ? <Extension /> : <ThemeIcon />}
                 </div>
                 <div className="bd-addon-error-header-inner">
-                    <h3 className="bd-addon-error-file secondaryHeader-2oeRPO base-1x0h_U size16-1P40sf">{err.name}</h3>
-                    <div className="bd-addon-error-details detailsWrapper-3XSaoN">
-                        <svg className="detailsIcon-2LZ7Bq" aria-hidden="false" width="16" height="16" viewBox="0 0 12 12">
+                    <h3 className={`bd-addon-error-file ${DiscordClasses.Text.colorHeaderPrimary} ${DiscordClasses.Integrations.secondaryHeader} ${DiscordClasses.Text.size16}`}>{err.name}</h3>
+                    <div className={`bd-addon-error-details ${DiscordClasses.Integrations.detailsWrapper}`}>
+                        <svg className={DiscordClasses.Integrations.detailsIcon} aria-hidden="false" width="16" height="16" viewBox="0 0 12 12">
                             <path fill="currentColor" d="M6 1C3.243 1 1 3.244 1 6c0 2.758 2.243 5 5 5s5-2.242 5-5c0-2.756-2.243-5-5-5zm0 2.376a.625.625 0 110 1.25.625.625 0 010-1.25zM7.5 8.5h-3v-1h1V6H5V5h1a.5.5 0 01.5.5v2h1v1z"></path>
                         </svg>
-                        <div className="colorHeaderSecondary-3Sp3Ft size12-3cLvbJ">{err.message}</div>
+                        <div className={`${DiscordClasses.Text.colorHeaderSecondary} ${DiscordClasses.Text.size12}`}>{err.message}</div>
                     </div>
                 </div>
                 <svg className="bd-addon-error-expander" width="24" height="24" viewBox="0 0 24 24">
@@ -102,13 +102,13 @@ export default class AddonErrorModal extends React.Component {
         const selectedTab = this.getTabs().find(e => this.state.selectedTab === e.id);
         const tabs = this.getTabs();
         return <>
-            <div className="bd-error-modal-header header-1TKi98 separator-2-RRj_">
-                <h4 className="colorStandard-2KCXvj size14-e6ZScH h4-AQvcAz title-3sZWYQ defaultColor-1_ajX0 marginBottom8-AtZOdT">{Strings.Modals.addonErrors}</h4>
+            <div className={`bd-error-modal-header ${DiscordClasses.Modal.header} ${DiscordClasses.Modal.separator}`}>
+                <h4 className={`${DiscordClasses.Titles.defaultColor} ${DiscordClasses.Text.size14} ${DiscordClasses.Titles.h4} ${DiscordClasses.Margins.marginBottom8}`}>{Strings.Modals.addonErrors}</h4>
                 <div className="bd-tab-bar">
                     {tabs.map(tab => <div onClick={() => {this.switchToTab(tab.id);}} className={joinClassNames("bd-tab-item", tab.id === selectedTab.id && "selected")}>{tab.name}</div>)}
                 </div>
             </div>
-            <div className="bd-error-modal-content content-1LAB8Z thin-1ybCId scrollerBase-289Jih">
+            <div className={`bd-error-modal-content ${DiscordClasses.Modal.content} ${DiscordClasses.Scrollers.thin}`}>
                 <div className="bd-addon-errors">
                     {selectedTab.errors.map((error, index) => <AddonError index={index} err={error} />)}
                 </div>

renderer/src/ui/blankslates/emptyimage.jsx

@@ -1,13 +1,11 @@
-import {React, WebpackModules} from "modules";
+import {React, DiscordClasses} from "modules";
 import SimpleMarkdown from "../../structs/markdown";
 
-const EmptyImageClasses = WebpackModules.getByProps("emptyImage") || {};
-
 export default class EmptyImage extends React.Component {
     render() {
-        return <div className={`bd-empty-image-container ${EmptyImageClasses.emptyContainer}` + (this.props.className ? ` ${this.props.className}` : "")}>
-                    <div className={`bd-empty-image ${EmptyImageClasses.emptyImage}`}></div>
-                    <div className={`bd-empty-image-header ${EmptyImageClasses.emptyHeader}`}>
+        return <div className={`bd-empty-image-container ${DiscordClasses.EmptyImage.emptyContainer}` + (this.props.className ? ` ${this.props.className}` : "")}>
+                    <div className={`bd-empty-image ${DiscordClasses.EmptyImage.emptyImage}`}></div>
+                    <div className={`bd-empty-image-header ${DiscordClasses.EmptyImage.emptyHeader}`}>
                         {this.props.title || "You don't have anything!"}
                     </div>
                     <div className={`bd-empty-image-message`}>

renderer/src/ui/settings/title.jsx

@@ -1,7 +1,7 @@
 import {React} from "modules";
 
-const className = "bd-settings-title h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi defaultColor-1_ajX0 defaultMarginh2-2LTaUL marginBottom20-32qID7";
-const className2 = "bd-settings-title bd-settings-group-title h5-18_1nd title-3sZWYQ size12-3R0845 height16-2Lv3qA weightSemiBold-NJexzi da-h5 da-title da-size12 da-height16 da-weightSemiBold marginBottom4-2qk4Hy da-marginBottom4 marginTop8-1DLZ1n da-marginTop8";
+const className = "bd-settings-title";
+const className2 = "bd-settings-title bd-settings-group-title";
 
 export default class SettingsTitle extends React.Component {
     render() {