improve settings styling

uwu · Nov 6, 2024 · a2561e6 · a2561e6
1 parent 2ac0e1c
commit a2561e6
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 58 deletions.
diff --git a/packages/shelter/src/components/DevUI.tsx b/packages/shelter/src/components/DevUI.tsx
@@ -1,23 +1,16 @@
-import { injectCss, LinkButton, showToast, Space, SwitchItem } from "@uwu/shelter-ui";
+import { Divider, Header, HeaderTags, LinkButton, showToast, Space, SwitchItem } from "@uwu/shelter-ui";
 import { dbStore } from "../storage";
 import { PluginCard } from "./Plugins";
 import { devModeReservedId, enableDevmode, stopDevmode } from "../devmode";
 import { installedPlugins } from "../plugins";
-import { css, classes } from "./DevUI.tsx.scss";
 import { createMemo, Show } from "solid-js";
 
-let injectedCss = false;
-
 export default () => {
-  if (!injectedCss) {
-    injectCss(css);
-    injectedCss = true;
-  }
-
   const devModeOn = createMemo(() => devModeReservedId in installedPlugins());
 
   return (
-    <div class={classes.open}>
+    <div>
+      <Header tag={HeaderTags.EYEBROW}>Developer Tools</Header>
       <SwitchItem value={dbStore.logDispatch} onChange={(v) => (dbStore.logDispatch = v)}>
         Log FluxDispatcher events to the console
       </SwitchItem>
@@ -43,7 +36,9 @@ export default () => {
               <Space />
               <LinkButton href="https://github.com/uwu/shelter/tree/main/packages/lune#readme">Lune</LinkButton>
               <Space />
-              via dev mode. To disable dev mode, close Lune. The following dev plugin is loaded:
+              via dev mode. To disable dev mode, close Lune.
+              <br />
+              The following dev plugin is loaded:
             </>
           ) : (
             <>
@@ -62,6 +57,8 @@ export default () => {
       <Show when={installedPlugins()[devModeReservedId]} keyed>
         {(plugin) => <PluginCard id={devModeReservedId} plugin={plugin} />}
       </Show>
+
+      <Divider mt />
     </div>
   );
 };
diff --git a/packages/shelter/src/components/DevUI.tsx.scss b/packages/shelter/src/components/DevUI.tsx.scss
diff --git a/packages/shelter/src/components/PluginEditModal.tsx b/packages/shelter/src/components/PluginEditModal.tsx
@@ -131,7 +131,7 @@ const PluginEditModal = (props: {
 
         <Switch>
           <Match when={!local()} keyed={false}>
-            <Header tag={HeaderTags.H4}>URL</Header>
+            <Header tag={HeaderTags.EYEBROW}>URL</Header>
             <TextBox placeholder="https://example.com/my-plugin" value={rSrc()} onInput={setRSrc} />
             <Space />
             <SwitchItem checked={rUpdate()} onChange={setRUpdate} hideBorder>
@@ -140,13 +140,16 @@ const PluginEditModal = (props: {
           </Match>
 
           <Match when={local()} keyed={false}>
-            <Header tag={HeaderTags.H4}>Name</Header>
+            <Header tag={HeaderTags.EYEBROW}>Name</Header>
             <TextBox placeholder="My Cool Plugin" value={lName()} onInput={setLName} />
-            <Header tag={HeaderTags.H4}>Author</Header>
+            <Space />
+            <Header tag={HeaderTags.EYEBROW}>Author</Header>
             <TextBox placeholder="Rin" value={lAuthor()} onInput={setLAuthor} />
-            <Header tag={HeaderTags.H4}>Description</Header>
+            <Space />
+            <Header tag={HeaderTags.EYEBROW}>Description</Header>
             <TextBox placeholder="The plugin is very cool and helpful" value={lDesc()} onInput={setLDesc} />
-            <Header tag={HeaderTags.H4}>Code</Header>
+            <Space />
+            <Header tag={HeaderTags.EYEBROW}>Code</Header>
 
             <div class={classes.tawrap}>
               <JsUploader setCode={setLCode} />
@@ -166,6 +169,7 @@ const PluginEditModal = (props: {
 }`}
                 value={lCode()}
                 onInput={setLCode}
+                spellcheck={false}
               />
             </div>
           </Match>

diff --git a/packages/shelter/src/components/Plugins.tsx b/packages/shelter/src/components/Plugins.tsx
@@ -14,7 +14,6 @@ import { css, classes } from "./Plugins.tsx.scss";
 import {
   Header,
   HeaderTags,
-  IconAdd,
   IconBin,
   IconCog,
   injectCss,
@@ -27,6 +26,10 @@ import {
   IconEdit,
   IconUpdate,
   showToast,
+  Button,
+  ButtonLooks,
+  ButtonSizes,
+  ButtonColors,
 } from "@uwu/shelter-ui";
 import { addPluginModal, editPluginModal } from "./PluginEditModal";
 import Fuse from "fuse.js";
@@ -40,6 +43,11 @@ export const PluginCard: Component<{
   id: string;
   plugin: StoredPlugin;
 }> = (props) => {
+  if (!cssInjected) {
+    injectCss(css);
+    cssInjected = true;
+  }
+
   const [on, setOn] = createSignal(props.plugin.on);
 
   const isDev = () => props.id === devModeReservedId;
@@ -166,20 +174,19 @@ export default (): JSX.Element => {
 
   return (
     <div class={classes.list}>
-      <Header tag={HeaderTags.H3}>
-        Plugins
-        <button
-          use:tooltip="Add a plugin"
-          aria-label="add a plugin"
-          use:focusring
-          class={classes.btn}
-          onclick={addPluginModal}
+      <Header tag={HeaderTags.EYEBROW}>{`Plugins (${Object.keys(installedPlugins()).length})`}</Header>
+      <div class={classes.bar}>
+        <TextBox value={searchTerm()} onInput={setSearchTerm} placeholder="Search plugins..." />
+        <Button
+          grow
+          look={ButtonLooks.FILLED}
+          color={ButtonColors.BRAND}
+          size={ButtonSizes.MEDIUM}
+          onClick={addPluginModal}
         >
-          <IconAdd />
-        </button>
-      </Header>
-
-      <TextBox value={searchTerm()} onInput={setSearchTerm} placeholder="Search plugins..." />
+          Add Plugin
+        </Button>
+      </div>
 
       {/* IIRC not using a <For> here was very intentional due to keying -- sink
        * the only way to do what we need cleanly in solid looks *like this*!:

diff --git a/packages/shelter/src/components/Plugins.tsx.scss b/packages/shelter/src/components/Plugins.tsx.scss
@@ -4,6 +4,13 @@ $DIM: hsl(216, calc(var(--saturation-factor, 1) * 3.7%), 73.5%);
   color: var(--text-normal);
 }
 
+.bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
 .plugin {
   margin-top: .5rem;
   padding: .5rem;

diff --git a/packages/shelter/src/components/Settings.tsx b/packages/shelter/src/components/Settings.tsx
@@ -1,4 +1,4 @@
-import { injectCss, Header, HeaderTags, Divider } from "@uwu/shelter-ui";
+import { injectCss, Header, HeaderTags } from "@uwu/shelter-ui";
 import { classes, css } from "./Settings.tsx.scss";
 import ShelterLogo from "./ShelterLogo";
 import Plugins from "./Plugins";
@@ -14,18 +14,11 @@ export default () => {
 
   return (
     <>
-      <Header tag={HeaderTags.H1} class={`${classes.row} ${classes.slogan}`}>
-        <ShelterLogo />- an attempt to prepare for the worst
-      </Header>
-
-      <Divider mt mb />
-
-      <div class={classes.column} style="padding: 0.25rem">
-        <Header tag={HeaderTags.H3} class={classes.head}>
-          Developer Tools
+      <div class={classes.wrapper}>
+        <Header tag={HeaderTags.H1} class={classes.header}>
+          <ShelterLogo />- an attempt to prepare for the worst
         </Header>
         <DevUi />
-
         <Plugins />
       </div>
     </>

diff --git a/packages/shelter/src/components/Settings.tsx.scss b/packages/shelter/src/components/Settings.tsx.scss
@@ -1,17 +1,12 @@
-.row {
+.header {
   display: flex;
   align-items: center;
-  // default
-  //flex-direction: row;
   gap: .5rem;
+  font-style: oblique;
 }
 
-.column {
+.wrapper {
   display: flex;
+  row-gap: 48px;
   flex-direction: column;
-  gap: .5rem;
-}
-
-.slogan {
-  font-style: oblique;
 }