add limited css apis, do some work on UI

src/api/css.js

@@ -0,0 +1,16 @@
+function injectCSS(str) {
+    const style = document.createElement('style')
+    style.className = "demon-element-css"
+    style.innerHTML = str
+    document.head.appendChild(style)
+}
+
+function createClass(name, style) {
+    const stylestr = Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';')
+    injectCSS(`.${name} {${stylestr}}`)
+}
+
+export default {
+    injectCSS,
+    createClass
+}

src/api/ui/settings/plugincard.jsx

@@ -3,19 +3,22 @@ import webpack from "../../webpack"
 
 const Header = webpack.findByProps("Sizes", "Tags")
 const Card = webpack.findByDisplayName("Card");
+const Flex = webpack.findByDisplayName("Flex");
 const FormText = webpack.findByDisplayName("FormText");
 const Button = webpack.findByProps("BorderColors", "Colors");
+const FormDivider = webpack.findByDisplayName("FormDivider");
 
 export default (props) => {
+    console.log(props)
     return (<>
         <Card type="cardPrimary" outline={false} editable={false}>
-            <Header size={Header.Sizes.SIZE_5}>
+            <Header className="demon-settings-card-header" size={Header.Sizes.SIZE_20}>
                 {props.name}
             </Header>
-            <Button color={Button.Colors.RED} onClick={()=>{
-                Start/Stop
-            }}>
-            </Button>
+            <hr className="demon-settings-card-divider" />
+            <FormText className="demon-settings-card-desc">
+                {props.desc}
+            </FormText>
         </Card>
     </>)
 }

src/api/ui/settings/plugins.jsx

@@ -11,11 +11,12 @@ export default () => {
     const extNest = demon.require("internal/nest")
     const pluginList = extNest.ghost.pluginsList
     return (<>
-        <Header size={Header.Sizes.SIZE_20}>Plugins</Header>
+        <Header size="demon-settings-header-size30">Plugins</Header>
+        <FormDivider className="demon-settings-divider" />
         {Object.keys(pluginList).map((k) => {
-            return (
-                <PlugCard name={pluginList[k].meta.name}></PlugCard>
-            )
+            return (<>
+                <PlugCard name={pluginList[k].meta.name} desc={"temporary description because plugin metadata doesn't have it yet"}></PlugCard>
+            </>)
         })}
     </>)
 }

src/api/ui/settings/settings.js

@@ -1,11 +1,41 @@
 import webpack from "../../webpack"
 import { after } from "../../patcher"
 import plugins from "./plugins.jsx"
+import css from "../../css"
 
 const SettingsView = webpack.findByDisplayName("SettingsView")
 
 function init() {
-    after("getPredicateSections", SettingsView.default.prototype, (args, sections) => {
+    css.createClass("demon-settings-divider", {
+        "margin-top": "10px",
+        "margin-bottom": "10px",
+        "height": "1px"
+    })
+    css.createClass("demon-settings-card-divider", {
+        "margin-top": "5px",
+        "margin-bottom": "5px",
+        "margin-left": "10px",
+        "margin-right": "10px",
+        "height": "1px",
+        "border": "thin solid var(--background-modifier-accent)"
+    })
+    css.createClass("demon-settings-card-header", {
+        "margin-left": "10px"
+    })
+    css.createClass("demon-settings-card-desc", {
+        "color": "var(--header-secondary)",
+        "display": "inline-block",
+        "font-size": "15px",
+        "line-height": "15px",
+        "margin-left": "10px",
+        "margin-top": "5px",
+        "margin-bottom": "5px"
+    })
+    css.createClass("demon-settings-header-size30", {
+        "font-size": "30px",
+        "line-height": "34px"
+    })
+    after("getPredicateSections", SettingsView.prototype, (args, sections) => {
         sections.unshift(
         {
             section: "HEADER", 

src/api/webpack.js

@@ -43,7 +43,7 @@ let webpack = {
         );
     },
     findByDisplayName: (prop) => {
-        return webpack.find((m) => m?.default?.displayName === prop);
+        return webpack.find((m) => m?.displayName === prop);
     },
 	findByStrings: (...props) => {
 		return webpack.find((module) => 

src/index.js

@@ -3,6 +3,7 @@ import common   from "./api/common.js"
 import utils    from "./api/utils/index.js"
 import plugins  from "./api/plugin.js"
 import settings from "./api/ui/settings/settings.js"
+import css      from "./api/css.js"
 
 if (!window.DiscordNative) {
     throw new Error("Sorry, Demoncord cannot be used on web!")
@@ -17,7 +18,8 @@ const demon = {
     plugins,
     internal: {
         nest: common.nests.make()
-    }
+    },
+    css
 }
 
 function isAllowed(mod) {