looks decent now

dist/build.js

@@ -818,31 +818,42 @@ font-size: 0.9em;
     const _jsxFileName = "/home/ruthenic/Coding/Javascript/demoncord/demoncord-rewrite/src/api/ui/settings/hummus.jsx";
     const Checkbox = webpack.findByDisplayName("Checkbox");
 
-    var hummus = () => {
-        const extNest = demon.summon("internal/nest");
-        return (React.createElement('div', { className: "control-group demon-settings-card-header" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 9}}
-            , React.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 10}}, "Plugins")
-            , Object.keys(extNest.ghost.pluginsList).map((k) => {
-                return (React.createElement('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 12}}
-                , k
-                , React.createElement(Checkbox, {
-                    className: `demon-stub-plugin-checkbox-${k}`,
-                    checked: extNest.ghost.pluginsStatus[k].running,
-                    onChange: async () => {
-                        toggle(k);
-                        const ele = document.getElementsByClassName(`demon-stub-plugin-checkbox-${k}`)[0];
-                        //ele.value = extNest.ghost.pluginsStatus[k].running
-                        if (extNest.ghost.pluginsStatus[k].running) {
-                            ele.value = "on";
-                        } else {
-                            ele.value = "off";
-                        }
-                    }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 14}}
-                )
-                ))
-            })
-        ))
-    };
+    class HummusUI extends React.Component {
+        constructor(props) {
+            super(props);
+            this.state = {
+                tg: 0
+            };
+        }
+
+        render() {
+            const extNest = demon.summon("internal/nest");
+            return (React.createElement('div', { className: "control-group demon-settings-card-header" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 17}}
+                , React.createElement('label', { className: "demon-settings-header-size30 " , __self: this, __source: {fileName: _jsxFileName, lineNumber: 18}}, "Plugins")
+                , Object.keys(extNest.ghost.pluginsList).map((k) => {
+                    return (React.createElement('div', { className: "demon-settings-card-base", __self: this, __source: {fileName: _jsxFileName, lineNumber: 20}}, React.createElement('span', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 20}}
+                    , React.createElement(Checkbox, {
+                        className: `demon-stub-plugin-checkbox-${k}`,
+                        checked: extNest.ghost.pluginsStatus[k].running,
+                        onChange: async () => {
+                            toggle(k);
+                            const ele = document.getElementsByClassName(`demon-stub-plugin-checkbox-${k}`)[0];
+                            //ele.value = extNest.ghost.pluginsStatus[k].running
+                            if (!extNest.ghost.pluginsStatus[k].running) {
+                                ele.value = "on";
+                            } else {
+                                ele.value = "off";
+                            }
+                            this.setState({tg: !this.state.tg});
+                        }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 21}}
+                    
+                        , k
+                    )
+                    )))
+                })
+            ))
+        }
+    }
 
     function injectCSS(str) {
         const style = document.createElement('style');
@@ -878,7 +889,7 @@ font-size: 0.9em;
             "border": "thin solid var(--background-modifier-accent)"
         });
         css.createClass("demon-settings-card-base", {
-            "margin-button": "10px"
+            "margin-bottom": "10px"
         });
         css.createClass("demon-settings-card-header", {
             "margin-left": "10px",
@@ -943,7 +954,7 @@ font-size: 0.9em;
                     ele.innerHTML = `<div>
                     <h1>Hello, world!</h1>
                     </div>` */
-                    ret.props.children[1].props.children[0].props.children = React.createElement(hummus, {}, "");
+                    ret.props.children[1].props.children[0].props.children = React.createElement(HummusUI, {}, "");
                 }
             });
         }

src/api/ui/settings/hummus.jsx

@@ -4,28 +4,39 @@ import webpack from "../../webpack"
 
 const Checkbox = webpack.findByDisplayName("Checkbox")
 
-export default () => {
-    const extNest = demon.summon("internal/nest")
-    return (<div className="control-group demon-settings-card-header">
-        <label>Plugins</label>
-        {Object.keys(extNest.ghost.pluginsList).map((k) => {
-            return (<div>
-            {k}
-            <Checkbox
-                className={`demon-stub-plugin-checkbox-${k}`}
-                checked={extNest.ghost.pluginsStatus[k].running}
-                onChange={async () => {
-                    toggle(k)
-                    const ele = document.getElementsByClassName(`demon-stub-plugin-checkbox-${k}`)[0]
-                    //ele.value = extNest.ghost.pluginsStatus[k].running
-                    if (extNest.ghost.pluginsStatus[k].running) {
-                        ele.value = "on"
-                    } else {
-                        ele.value = "off"
-                    }
-                }}
-            />
-            </div>)
-        })}
-    </div>)
+export default class HummusUI extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            tg: 0
+        }
+    }
+
+    render() {
+        const extNest = demon.summon("internal/nest")
+        return (<div className="control-group demon-settings-card-header">
+            <label className="demon-settings-header-size30 ">Plugins</label>
+            {Object.keys(extNest.ghost.pluginsList).map((k) => {
+                return (<div className="demon-settings-card-base"><span>
+                <Checkbox
+                    className={`demon-stub-plugin-checkbox-${k}`}
+                    checked={extNest.ghost.pluginsStatus[k].running}
+                    onChange={async () => {
+                        toggle(k)
+                        const ele = document.getElementsByClassName(`demon-stub-plugin-checkbox-${k}`)[0]
+                        //ele.value = extNest.ghost.pluginsStatus[k].running
+                        if (!extNest.ghost.pluginsStatus[k].running) {
+                            ele.value = "on"
+                        } else {
+                            ele.value = "off"
+                        }
+                        this.setState({tg: !this.state.tg})
+                    }}
+                >
+                    {k}
+                </Checkbox>
+                </span></div>)
+            })}
+        </div>)
+    }
 }

src/api/ui/settings/settings.js

@@ -22,7 +22,7 @@ function init() {
         "border": "thin solid var(--background-modifier-accent)"
     })
     css.createClass("demon-settings-card-base", {
-        "margin-button": "10px"
+        "margin-bottom": "10px"
     })
     css.createClass("demon-settings-card-header", {
         "margin-left": "10px",