creation ui is better

ui/frontend/build_src/.eslintrc.cjs

@@ -9,6 +9,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
+    tsconfigRootDir: __dirname,
   },
   plugins: ["react"],
   extends: [
@@ -21,6 +22,7 @@ module.exports = {
     // general things turned off for now
     "prefer-const": "off",
     "no-debugger": "warn",
+    "eol-last": "off",
 
     "comma-dangle": ["off", "always-multiline"],
     "no-void": ["off"],

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts

@@ -13,7 +13,6 @@ export const AdvancedSettingsList = style({
 
 export const AdvancedSettingGrouping = style({
   marginTop: vars.spacing.medium,
-  marginBottom: vars.spacing.medium,
 });
 
 export const MenuButton = style({

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts

@@ -0,0 +1,48 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+// @ts-ignore
+import { vars } from "../../../../styles/theme/index.css.ts";
+
+export const ImagerModifierGroups = style({
+  // marginBottom: vars.spacing.small,
+  paddingLeft: 0,
+  listStyleType: "none",
+});
+
+globalStyle(`${ImagerModifierGroups} li`, {
+  marginTop: vars.spacing.medium,
+});
+
+export const ImageModifierGrouping = style({
+  marginTop: vars.spacing.medium,
+});
+
+export const MenuButton = style({
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  backgroundColor: "transparent",
+  color: vars.colors.text.normal,
+  border: "0 none",
+  cursor: "pointer",
+  padding: "0",
+  marginBottom: vars.spacing.medium,
+});
+
+
+globalStyle(`${MenuButton}> h4`, {
+  color: "#e7ba71",
+});
+
+
+export const ModifierListStyle = style({
+  // marginBottom: vars.spacing.small,
+  paddingLeft: 0,
+  listStyleType: "none",
+  display: "flex",
+  flexWrap: "wrap",
+
+});
+
+globalStyle(`${ModifierListStyle} li`, {
+  margin: 0,
+});

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx

@@ -6,6 +6,15 @@ import { loadModifications } from "../../../../api";
 // @ts-expect-error
 import { PanelBox } from "../../../../styles/shared.css.ts";
 
+import {
+  ImagerModifierGroups,
+  ImageModifierGrouping,
+  MenuButton,
+  ModifierListStyle
+} from //@ts-expect-error
+  "./imageModifiers.css.ts";
+
+
 import { useImageCreate } from "../../../../stores/imageCreateStore";
 import { useCreateUI } from "../creationPanelUIStore";
 
@@ -17,7 +26,7 @@ interface ModifierListProps {
 
 function ModifierList({ tags }: ModifierListProps) {
   return (
-    <ul className="modifier-list">
+    <ul className={ModifierListStyle}>
       {tags.map((tag) => (
         <li key={tag}>
           <ModifierTag name={tag} />
@@ -42,29 +51,18 @@ function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
   };
 
   return (
-    <div className="modifier-grouping">
-      <div className="modifier-grouping-header" onClick={_toggleExpand}>
-        <h5>{title}</h5>
-      </div>
+    <div className={ImageModifierGrouping}>
+      <button type="button" className={MenuButton} onClick={_toggleExpand}>
+        <h4>{title}</h4>
+      </button>
       {isExpanded && <ModifierList tags={tags} />}
     </div>
   );
 }
 
 export default function ImageModifers() {
-  // const { status, data } = useQuery(["modifications"], loadModifications);
-
-  // const imageModifierIsOpen = useImageCreate(
-  //   (state) => state.uiOptions.imageModifierIsOpen
-  // );
-  // const toggleImageModifiersIsOpen = useImageCreate(
-  //   (state) => state.toggleImageModifiersIsOpen
-  // );
-
   const allModifiers = useImageCreate((state) => state.allModifiers);
 
-  console.log("allModifiers", allModifiers);
-
   const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);
   const toggleImageModifiersIsOpen = useCreateUI(
     (state) => state.toggleImageModifier
@@ -82,18 +80,21 @@ export default function ImageModifers() {
         className="panel-box-toggle-btn"
       >
         {/* TODO: swap this manual collapse stuff out for some UI component? */}
-        <h4>Image Modifiers (art styles, tags, ect)</h4>
+        <h3>Image Modifiers (art styles, tags, ect)</h3>
       </button>
 
       {/* @ts-ignore */}
-      {imageModifierIsOpen &&
-        // @ts-ignore
-        allModifiers.map((item, index) => {
-          return (
-            // @ts-ignore
-            <ModifierGrouping key={item[0]} title={item[0]} tags={item[1]} />
-          );
-        })}
+      {imageModifierIsOpen && (
+        <ul className={ImagerModifierGroups}>
+          {allModifiers.map((item, index) => {
+            return (
+              <li key={item[0]}>
+                <ModifierGrouping title={item[0]} tags={item[1]} />
+              </li>
+            );
+          })}
+        </ul>
+      )}
     </div>
   );
 }

ui/frontend/build_src/src/styles/shared.css.ts

@@ -8,6 +8,7 @@ export const PanelBox = style({
   padding: vars.spacing.medium,
   borderRadius: vars.trim.smallBorderRadius,
   marginBottom: vars.spacing.medium,
+  // TODO move this to the theme
   boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
 });
 
@@ -22,7 +23,6 @@ globalStyle(`${PanelBox} .panel-box-toggle-btn`, {
   border: "0 none",
   cursor: "pointer",
   padding: "0",
-  marginBottom: vars.spacing.small,
 });
 
 export const SettingItem = style({

ui/frontend/build_src/src/styles/theme/index.css.ts

@@ -12,7 +12,6 @@ import {
  * Lots of these arent used yet, but once they are defined and useable then they can be set.
  */
 
-// Link color 0, 102, 204
 
 const colors = createThemeContract({
   brand: null,