Switch all other buttons to component

renderer/src/styles/buttons.css

@@ -96,6 +96,9 @@
 .bd-button .bd-button-content {
     --button--underline-color: transparent;
     background-image: linear-gradient(0deg, transparent, transparent 1px, var(--button--underline-color) 0, var(--button--underline-color) 2px, transparent 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .bd-button:disabled .bd-button-content {
@@ -176,7 +179,7 @@
     background: transparent;
     color: currentColor;
     border: 0;
-    padding: 0;
+    /* padding: 0; */
     margin: 0
 }
 

renderer/src/styles/ui/keybind.css

@@ -35,9 +35,15 @@
     top: 3px;
     display: flex;
     align-items: center;
+    gap: 5px;
+}
+
+.bd-keybind-controls .bd-keybind-record {
+    padding: 4px 8px;
 }
 
 .bd-keybind-clear {
+    margin-left: 5px;
     background: none!important;
     opacity: 0.5;
     padding-right: 4px!important;

renderer/src/ui/customcss/editor.jsx

@@ -2,6 +2,7 @@ import React from "@modules/react";
 import DiscordModules from "@modules/discordmodules";
 import Settings from "@modules/settingsmanager";
 
+import Button from "../base/button";
 import Checkbox from "./checkbox";
 
 const {useState, useCallback, useEffect, forwardRef, useMemo, useImperativeHandle} = React;
@@ -13,7 +14,7 @@ const languages = ["abap", "abc", "actionscript", "ada", "apache_conf", "asciido
 function makeButton(button, value) {
     return <DiscordModules.Tooltip color="primary" position="top" text={button.tooltip}>
                 {props => {
-                    return <button {...props} className="btn btn-primary" onClick={(event) => {button.onClick(event, value?.());}}>{button.label}</button>;
+                    return <Button {...props} size={Button.Sizes.ICON} look={Button.Looks.BLANK} onClick={(event) => {button.onClick(event, value?.());}}>{button.label}</Button>;
                 }}
             </DiscordModules.Tooltip>;
 }

renderer/src/ui/modals.js

@@ -8,7 +8,7 @@ import ReactDOM from "@modules/reactdom";
 import Strings from "@modules/strings";
 import Settings from "@modules/settingsmanager";
 import Events from "@modules/emitter";
-import DiscordModules from "@modules/discordmodules";
+// import DiscordModules from "@modules/discordmodules";
 import WebpackModules from "@modules/webpackmodules";
 import DOMManager from "@modules/dommanager";
 
@@ -16,12 +16,12 @@ import AddonErrorModal from "./modals/addonerrormodal";
 import ErrorBoundary from "./errorboundary";
 import TextElement from "./base/text";
 import ModalRoot from "./modals/root";
-import ModalHeader from "./modals/header";
-import ModalContent from "./modals/content";
-import ModalFooter from "./modals/footer";
+// import ModalHeader from "./modals/header";
+// import ModalContent from "./modals/content";
+// import ModalFooter from "./modals/footer";
 
 import ConfirmationModal from "./modals/confirmation";
-import Button from "./base/button";
+// import Button from "./base/button";
 import CustomMarkdown from "./base/markdown";
 import ChangelogModal from "./modals/changelog";
 import ModalStack, {generateKey} from "./modals/stack";
@@ -270,7 +270,7 @@ export default class Modals {
             confirmText: Strings.Modals.done
         };
 
-        return this.ModalActions.openModal(props => {
+        return this.openModal(props => {
             return React.createElement(ErrorBoundary, null, React.createElement(ConfirmationModal, Object.assign(options, props), child));
         });
     }
@@ -285,6 +285,7 @@ export default class Modals {
     }
     
     static openModal(render, options = {}) {
+        if (typeof(this.ModalActions.openModal) === "function") return this.ModalActions.openModal(render);
         if (!this.hasInitialized) this.makeStack();
         options.modalKey = generateKey(options.modalKey);
         Events.emit("open-modal", render, options);

renderer/src/ui/settings/addonlist.jsx

@@ -4,6 +4,7 @@ import Events from "@modules/emitter";
 import DataStore from "@modules/datastore";
 import DiscordModules from "@modules/discordmodules";
 
+import Button from "../base/button";
 import SettingsTitle from "./title";
 import AddonCard from "./addoncard";
 import Dropdown from "./components/dropdown";
@@ -45,14 +46,14 @@ function openFolder(folder) {
 function blankslate(type, onClick) {
     const message = Strings.Addons.blankSlateMessage.format({link: `https://betterdiscord.app/${type}s`, type}).toString();
     return <EmptyImage title={Strings.Addons.blankSlateHeader.format({type})} message={message}>
-        <button className="bd-button" onClick={onClick}>{Strings.Addons.openFolder.format({type})}</button>
+        <Button size={Button.Sizes.LARGE} onClick={onClick}>{Strings.Addons.openFolder.format({type})}</Button>
     </EmptyImage>;
 }
 
 function makeControlButton(title, children, action, selected = false) {
     return <DiscordModules.Tooltip color="primary" position="top" text={title}>
                 {(props) => {
-                    return <button {...props} className={"bd-button bd-view-button" + (selected ? " selected" : "")} onClick={action}>{children}</button>;
+                    return <Button {...props} size={Button.Sizes.NONE} look={Button.Looks.BLANK} className={"bd-button bd-view-button" + (selected ? " selected" : "")} onClick={action}>{children}</Button>;
                 }}
             </DiscordModules.Tooltip>;
 }

renderer/src/ui/settings/components/keybind.jsx

@@ -1,5 +1,6 @@
 import React from "@modules/react";
 
+import Button from "../../base/button";
 import Keyboard from "@ui/icons/keyboard";
 import Close from "@ui/icons/close";
 
@@ -45,8 +46,8 @@ export default function Keybind({value: initialValue, onChange, max = 2, clearab
     return <div className={"bd-keybind-wrap" + (state.isRecording ? " recording" : "")} onClick={onClick}>
             <input readOnly={true} type="text" className="bd-keybind-input" value={displayValue} />
             <div className="bd-keybind-controls">
-                <button className={"bd-button bd-keybind-record" + (state.isRecording ? " bd-button-danger" : "")}><Keyboard size="24px" /></button>
-                {clearable && <button onClick={clearKeybind} className="bd-button bd-keybind-clear"><Close size="24px" /></button>}
+                <Button size={Button.Sizes.ICON} look={Button.Looks.FILLED} color={state.isRecording ? Button.Colors.RED : Button.Colors.BRAND} className="bd-keybind-record" onClick={onClick}><Keyboard size="24px" /></Button>
+                {clearable && <Button size={Button.Sizes.ICON} look={Button.Looks.BLANK} onClick={clearKeybind} className="bd-keybind-clear"><Close size="24px" /></Button>}
             </div>
         </div>;
 }

renderer/src/ui/updater.jsx

@@ -4,6 +4,7 @@ import React from "@modules/react";
 import Strings from "@modules/strings";
 import Events from "@modules/emitter";
 
+import Button from "./base/button";
 import Drawer from "./settings/drawer";
 import SettingItem from "./settings/components/item";
 import SettingsTitle from "./settings/title";
@@ -17,7 +18,7 @@ function CoreUpdaterPanel({hasUpdate, remoteVersion, update}) {
     return <Drawer name="BetterDiscord" collapsible={true}>
         <SettingItem name={`Core v${Config.version}`} note={hasUpdate ? Strings.Updater.versionAvailable.format({version: remoteVersion}) : Strings.Updater.noUpdatesAvailable} inline={true} id={"core-updater"}>
             {!hasUpdate && <div className="bd-filled-checkmark"><Checkmark /></div>}
-            {hasUpdate && <button className="bd-button" onClick={update}>{Strings.Updater.updateButton}</button>}
+            {hasUpdate && <Button size={Button.Sizes.SMALL} onClick={update}>{Strings.Updater.updateButton}</Button>}
         </SettingItem>
     </Drawer>;
 }
@@ -37,7 +38,7 @@ function AddonUpdaterPanel({pending, type, updater, update, updateAll}) {
             const info = updater.cache[f];
             const addon = updater.manager.addonList.find(a => a.filename === f);
             return <SettingItem name={`${addon.name} v${addon.version}`} note={Strings.Updater.versionAvailable.format({version: info.version})} inline={true} id={addon.name}>
-                    <button className="bd-button" onClick={() => update(type, f)}>{Strings.Updater.updateButton}</button>
+                    <Button size={Button.Sizes.SMALL} onClick={() => update(type, f)}>{Strings.Updater.updateButton}</Button>
                 </SettingItem>;
     })}
     </Drawer>;