improved settings layout and UX, added bake button, fixed icons, added icon colours, improved BoolBox appearance, added snowflake icon, removed unused BeatLikeLoopSettings, added disabled buttons

src/ui/Widgets/Icon/IconView.ts

@@ -3,24 +3,29 @@ import "./Icon.css";
 import List from "./svgs/list.svg";
 import ArrowClockwise from "./svgs/arrow-clockwise.svg";
 import Trash from "./svgs/trash.svg";
+import Snowflake from "./svgs/snowflake.svg";
 
 const IconUrlMap = {
     arrowClockwise: ArrowClockwise,
     list: List,
     trash: Trash,
+    snowflake: Snowflake,
 } as const;
 
 export type IconName = keyof typeof IconUrlMap;
 
 export type IconViewOptions = UINodeOptions & {
     iconName: IconName,
+    color?: string,
 };
 
 export default class IconView extends UINode {
     private iconUrl: string;
+    private color: string | null;
 
     constructor(options: IconViewOptions) {
         super(options);
+        this.color = options.color ?? null;
         this.iconUrl = IconUrlMap[options.iconName];
     }
 
@@ -28,7 +33,8 @@ export default class IconView extends UINode {
         const icon = UINode.make("div", {
             classes: ["icon-view"],
         });
-        icon.style.cssText = `-webkit-mask-image: url(${this.iconUrl}); mask-image: url(${this.iconUrl});`;
+        const colorString = this.color ? `--icon-bg:${this.color}` : "";
+        icon.style.cssText = `-webkit-mask-image: url(${this.iconUrl}); mask-image: url(${this.iconUrl});${colorString}`;
         return icon;
     }
 }