From 8b15cd1c64dad6759ce645a2ef40cd740d3253b2 Mon Sep 17 00:00:00 2001
From: averrin <averrin@gmail.com>
Date: Thu, 30 Jun 2022 10:27:57 +0200
Subject: [PATCH] fix style leakage; close #1

---
 src/styles/main.scss                      |   2 +-
 src/view/MainUI.svelte                    |   6 +-
 src/view/components/ActionItem.svelte     | 105 ++++----
 src/view/components/ActionsTab.svelte     |   2 +-
 src/view/components/ArgInput.svelte       |  16 +-
 src/view/components/SelectionTab.svelte   | 296 +++++++++++-----------
 src/view/components/SequenceEditor.svelte |  28 +-
 src/view/components/SequencerTab.svelte   |  10 +-
 src/view/components/TagManager.svelte     |   2 -
 src/view/components/TagsBar.svelte        |  39 ++-
 src/view/components/Variable.svelte       |  10 +-
 tailwind.config.cjs                       |   5 +-
 12 files changed, 266 insertions(+), 255 deletions(-)
 delete mode 100644 src/view/components/TagManager.svelte

diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2317b3b..4c401c5 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -26,7 +26,7 @@
         height: 40px !important;
     }
 
-    .text-base {
+    .ui-text-base {
         font-size: 1rem !important;
     }
 
diff --git a/src/view/MainUI.svelte b/src/view/MainUI.svelte
index cd1ac6b..698cbbd 100644
--- a/src/view/MainUI.svelte
+++ b/src/view/MainUI.svelte
@@ -66,7 +66,7 @@
       tabs.push({
          mode: "sequencer",
          title: "Sequencer",
-         badge: "<span class='ui-badge mx-1' style='background-color: indianred'>beta</span>",
+         badge: "<span class='ui-badge ui-mx-1' style='background-color: indianred'>beta</span>",
       });
    }
    let mode = tabs.find((t) => t.default).mode;
@@ -75,8 +75,8 @@
 </script>
 
 <input type="checkbox" id="color-modal" class="ui-modal-toggle" bind:checked={pickerOpen} />
-<label for="color-modal" class="ui-modal cursor-pointer">
-   <label class="ui-modal-box relative w-fit" for="">
+<label for="color-modal" class="ui-modal ui-cursor-pointer">
+   <label class="ui-modal-box ui-relative ui-w-fit" for="">
       <HsvPicker on:colorChange={changeColor} {startColor} />
    </label>
 </label>
diff --git a/src/view/components/ActionItem.svelte b/src/view/components/ActionItem.svelte
index e8a5f17..dc655b5 100644
--- a/src/view/components/ActionItem.svelte
+++ b/src/view/components/ActionItem.svelte
@@ -1,58 +1,63 @@
 <script>
-    import Tags from '../components/Tags.svelte'
-    import Select from 'svelte-select';
-    import { XIcon } from "@rgossiaux/svelte-heroicons/solid";
-    import { actionTypes } from '../../constants.js';
-    import { tagColors }          from '../../modules/stores.js';
+   import Tags from "../components/Tags.svelte";
+   import Select from "svelte-select";
+   import { XIcon } from "@rgossiaux/svelte-heroicons/solid";
+   import { actionTypes } from "../../constants.js";
+   import { tagColors } from "../../modules/stores.js";
 
-    export let item;
+   export let item;
 
-    export let selectAction;
-    export let handleSelect;
-    export let handleClear;
-    export let deleteAction;
-    export let execAction;
-    export let onTagClick;
-    export let actionTags;
-    export let autoComplete;
+   export let selectAction;
+   export let handleSelect;
+   export let handleClear;
+   export let deleteAction;
+   export let execAction;
+   export let onTagClick;
+   export let actionTags;
+   export let autoComplete;
 
-    const groupBy = (i) => i.group;
+   const groupBy = (i) => i.group;
 
-    let types = actionTypes;
-    if (!globalThis.game.MonksActiveTiles) {
-        types = actionTypes.filter(a => a.require != 'matt');
-    }
+   let types = actionTypes;
+   if (!globalThis.game.MonksActiveTiles) {
+      types = actionTypes.filter((a) => a.require != "matt");
+   }
 </script>
 
-<div class="flex flex-row bg-white rounded-xl shadow-lg p-2 items-center space-x-2 cursor-move">
-    <button class="ui-btn ui-btn-outline ui-btn-error ui-btn-square" on:click={e => deleteAction(e, item.id)}>
-        <XIcon class="h-8 w-8"/>
-    </button>
-    <div class="min-w-[300px]">
-        <Tags
-            allowPaste={true}
-	        allowDrop={true}
-	        onlyUnique={true}
-            splitWith={","}
-            placeholder="Tag"
-            {autoComplete}
-            minChars=1
-            colors={$tagColors}
-            onTagClick={onTagClick}
-            on:tags={e => actionTags(e, item.id)}
-            tags={item.tags}
-	    />
-	</div>
-    <div class="min-w-fit">
-	    <Select items={types} {groupBy}
-	        value={item.type}
-	        on:select={e => handleSelect(e, item.id)}
-	        on:clear={e => handleClear(e, item.id)}/>
-	</div>
-	<button class="ui-btn ui-btn-square ui-btn-outline" on:click={e => selectAction(e, item.id)}>
-        <i class="fas fa-expand text-base"></i>
-	</button>
-	<button class="ui-btn ui-btn-square" on:click={e => execAction(e, item.id)}>
-        <i class="fas fa-play text-base"></i>
-	</button>
+<div
+   class="ui-flex ui-flex-row ui-bg-white ui-rounded-xl ui-shadow-lg ui-p-2 ui-items-center ui-space-x-2 ui-cursor-move"
+>
+   <button class="ui-btn ui-btn-outline ui-btn-error ui-btn-square" on:click={(e) => deleteAction(e, item.id)}>
+      <XIcon class="ui-h-8 ui-w-8" />
+   </button>
+   <div class="ui-min-w-[300px]">
+      <Tags
+         allowPaste={true}
+         allowDrop={true}
+         onlyUnique={true}
+         splitWith={","}
+         placeholder="Tag"
+         {autoComplete}
+         minChars="1"
+         colors={$tagColors}
+         {onTagClick}
+         on:tags={(e) => actionTags(e, item.id)}
+         tags={item.tags}
+      />
+   </div>
+   <div class="ui-min-w-fit">
+      <Select
+         items={types}
+         {groupBy}
+         value={item.type}
+         on:select={(e) => handleSelect(e, item.id)}
+         on:clear={(e) => handleClear(e, item.id)}
+      />
+   </div>
+   <button class="ui-btn ui-btn-square ui-btn-outline" on:click={(e) => selectAction(e, item.id)}>
+      <i class="fas fa-expand ui-text-base" />
+   </button>
+   <button class="ui-btn ui-btn-square" on:click={(e) => execAction(e, item.id)}>
+      <i class="fas fa-play ui-text-base" />
+   </button>
 </div>
diff --git a/src/view/components/ActionsTab.svelte b/src/view/components/ActionsTab.svelte
index aa06739..6e7d1b7 100644
--- a/src/view/components/ActionsTab.svelte
+++ b/src/view/components/ActionsTab.svelte
@@ -108,7 +108,7 @@
    }
 </script>
 
-<div class="flex flex-col p-1">
+<div class="flex ui-flex-col ui-p-1">
    <div>
       <button class="ui-btn ui-btn-outline ui-btn-primary" on:click={(e) => addAction()}>Add action</button>
    </div>
diff --git a/src/view/components/ArgInput.svelte b/src/view/components/ArgInput.svelte
index af3151f..caea0b6 100644
--- a/src/view/components/ArgInput.svelte
+++ b/src/view/components/ArgInput.svelte
@@ -66,13 +66,13 @@
    {#if mode == "direct"}
       {#if variables && vars.length > 0}
          <button
-            class="ui-btn ui-btn-square m-0"
+            class="ui-btn ui-btn-square ui-m-0"
             style="background-color: darkcyan;"
             on:click={(e) => setMode(e, "variable")}
          >
             <svg
                xmlns="http://www.w3.org/2000/svg"
-               class="h-6 w-6"
+               class="ui-h-6 ui-w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
@@ -89,7 +89,7 @@
             type="number"
             bind:value
             placeholder="0"
-            class="ui-input ui-input-lg text-base"
+            class="ui-input ui-input-lg ui-text-base"
          />
       {:else if type == "float"}
          <input
@@ -98,7 +98,7 @@
             bind:value
             placeholder="0.00"
             step="0.01"
-            class="ui-input ui-input-lg text-base"
+            class="ui-input ui-input-lg ui-text-base"
          />
       {:else if type == "effect_file"}
          <label class="ui-input-group">
@@ -114,7 +114,7 @@
             <button class="ui-btn ui-btn-square" on:click={selectFile}>
                <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="h-6 w-6"
+                  class="ui-h-6 ui-w-6"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -143,18 +143,18 @@
             type="text"
             bind:value
             placeholder="0"
-            class="ui-input ui-input-lg text-base"
+            class="ui-input ui-input-lg ui-text-base"
          />
       {/if}
    {:else}
       <button
-         class="ui-btn ui-btn-square m-0"
+         class="ui-btn ui-btn-square ui-m-0"
          style="background-color: #aa66cc;"
          on:click={(e) => setMode(e, "direct")}
       >
          <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6"
+            class="ui-h-6 ui-w-6"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
diff --git a/src/view/components/SelectionTab.svelte b/src/view/components/SelectionTab.svelte
index 4501901..7d1d6d9 100644
--- a/src/view/components/SelectionTab.svelte
+++ b/src/view/components/SelectionTab.svelte
@@ -1,165 +1,171 @@
 <script>
-    import {tilesStore, tokensStore, globalTags, tagColors}          from '../../modules/stores.js';
-    import { onDestroy } from 'svelte';
-    import Tags from './Tags.svelte'
+   import { tilesStore, tokensStore, globalTags, tagColors } from "../../modules/stores.js";
+   import { onDestroy } from "svelte";
+   import Tags from "./Tags.svelte";
 
-    import { PlusIcon } from "@rgossiaux/svelte-heroicons/solid";
-    import {setting} from '../../modules/settings.js';
-    import {moduleId, SETTINGS} from '../../constants.js';
+   import { PlusIcon } from "@rgossiaux/svelte-heroicons/solid";
+   import { setting } from "../../modules/settings.js";
+   import { moduleId, SETTINGS } from "../../constants.js";
 
-    export let onTagClick;
+   export let onTagClick;
 
-    function editObject(_, object) {
-        object.document.sheet.render(true);
-    }
+   function editObject(_, object) {
+      object.document.sheet.render(true);
+   }
 
-    export let createAction;
+   export let createAction;
 
-    let tagsSelected;
-    let tagsMutual;
-    let tagsMutualOld;
-    let selection;
-    let tiles = [];
-    let tokens = [];
-    let thumbs = {};
+   let tagsSelected;
+   let tagsMutual;
+   let tagsMutualOld;
+   let selection;
+   let tiles = [];
+   let tokens = [];
+   let thumbs = {};
 
-    function onTagsSelected(event, i) {
-        const tags = event.detail.tags.filter(t => t.trim() != "");
-        if (i != -1) {
-            Tagger.setTags(selection[i], tags);
-        } else {
-            const add = tags.filter(t => !tagsMutualOld.includes(t));
-            const remove = tagsMutualOld.filter(t => !tags.includes(t));
-            if(add.length > 0) selection.forEach(tile => Tagger.addTags(tile, add));
-            if(remove.length > 0) selection.forEach(tile => Tagger.removeTags(tile, remove));
-            tagsMutualOld = [...tagsMutual];
-        }
-    }
+   function onTagsSelected(event, i) {
+      const tags = event.detail.tags.filter((t) => t.trim() != "");
+      if (i != -1) {
+         Tagger.setTags(selection[i], tags);
+      } else {
+         const add = tags.filter((t) => !tagsMutualOld.includes(t));
+         const remove = tagsMutualOld.filter((t) => !tags.includes(t));
+         if (add.length > 0) selection.forEach((tile) => Tagger.addTags(tile, add));
+         if (remove.length > 0) selection.forEach((tile) => Tagger.removeTags(tile, remove));
+         tagsMutualOld = [...tagsMutual];
+      }
+   }
 
-    async function updateThumbs() {
-        for (const obj of selection) {
-            if (!(obj.data.img in thumbs)) {
-                const thumb = await ImageHelper.createThumbnail(obj.data.img, { width: setting(SETTINGS.RESOLUTION), height: setting(SETTINGS.RESOLUTION) })
-                thumbs[obj.data.img] = thumb.thumb;
-            }
-        }
-    }
+   async function updateThumbs() {
+      for (const obj of selection) {
+         if (!(obj.data.img in thumbs)) {
+            const thumb = await ImageHelper.createThumbnail(obj.data.img, {
+               width: setting(SETTINGS.RESOLUTION),
+               height: setting(SETTINGS.RESOLUTION),
+            });
+            thumbs[obj.data.img] = thumb.thumb;
+         }
+      }
+   }
 
-    function updateMutual() {
-        tagsSelected = selection.map(t => Tagger.getTags(t).filter(t => t.trim() != ""));
-        tagsMutual = [];
-        for (let a of tagsSelected) {
-            for (let t of a) {
-                if (!tagsMutual.includes(t) && tagsSelected.every(tags => tags.includes(t)))
-                    tagsMutual.push(t);
-            }
-        }
-        tagsMutualOld = [...tagsMutual];
-    }
+   function updateMutual() {
+      tagsSelected = selection.map((t) => Tagger.getTags(t).filter((t) => t.trim() != ""));
+      tagsMutual = [];
+      for (let a of tagsSelected) {
+         for (let t of a) {
+            if (!tagsMutual.includes(t) && tagsSelected.every((tags) => tags.includes(t))) tagsMutual.push(t);
+         }
+      }
+      tagsMutualOld = [...tagsMutual];
+   }
 
-    const unsubscribe = tilesStore.subscribe(async (value) => {
-        tiles = value;
-        selection = [...tiles, ...tokens];
-        updateMutual();
-        await updateThumbs();
-    });
-    onDestroy(unsubscribe);
+   const unsubscribe = tilesStore.subscribe(async (value) => {
+      tiles = value;
+      selection = [...tiles, ...tokens];
+      updateMutual();
+      await updateThumbs();
+   });
+   onDestroy(unsubscribe);
 
-    const unsubscribe2 = tokensStore.subscribe(async (value) => {
-        tokens = value;
-        selection = [...tiles, ...tokens];
-        updateMutual();
-        await updateThumbs()
-    });
-    onDestroy(unsubscribe2);
+   const unsubscribe2 = tokensStore.subscribe(async (value) => {
+      tokens = value;
+      selection = [...tiles, ...tokens];
+      updateMutual();
+      await updateThumbs();
+   });
+   onDestroy(unsubscribe2);
 </script>
 
 {#if selection.length > 1}
-<div class="ui-navbar bg-base-100 space-4">
-    <div class="flex-1 space-4 mr-1">
-        <a class="ui-btn ui-btn-ghost normal-case text-xl no-animation">Mutual tags</a>
-        <div class="w-full">
+   <div class="ui-navbar bg-base-100 ui-space-4">
+      <div class="ui-flex-1 ui-space-4 ui-mr-1">
+         <a class="ui-btn ui-btn-ghost ui-normal-case ui-text-xl ui-no-animation">Mutual tags</a>
+         <div class="ui-w-full">
             <Tags
-                allowPaste={true}
-	            allowDrop={true}
-	            onlyUnique={true}
-                splitWith={","}
-                placeholder="Tag"
-                autoComplete={$globalTags}
-                minChars=1
-                on:tags={(e) => globalThis.debounce(onTagsSelected(e, -1), 100)}
-                tags={tagsMutual}
-                colors={$tagColors}
-                {onTagClick}
-	        />
-	    </div>
-	</div>
-    <div class="flex-none">
-	    <button class="ui-btn-square ui-btn ui-btn-primary" on:click={e => createAction(e, tagsMutual)}>
-	        <PlusIcon/>
-	    </button>
-	</div>
-</div>
+               allowPaste={true}
+               allowDrop={true}
+               onlyUnique={true}
+               splitWith={","}
+               placeholder="Tag"
+               autoComplete={$globalTags}
+               minChars="1"
+               on:tags={(e) => globalThis.debounce(onTagsSelected(e, -1), 100)}
+               tags={tagsMutual}
+               colors={$tagColors}
+               {onTagClick}
+            />
+         </div>
+      </div>
+      <div class="ui-flex-none">
+         <button class="ui-btn-square ui-btn ui-btn-primary" on:click={(e) => createAction(e, tagsMutual)}>
+            <PlusIcon />
+         </button>
+      </div>
+   </div>
 {/if}
 
-<div class="overflow-auto max-h-[600px]">
-    <div class="flex flex-col p-3 space-y-3 justify-stretch">
-        {#if selection.length == 0}
-            <div class="justify-self-center p-2">
-                <h3>Selection is empty</h3>
-            </div>
-        {/if}
-        {#each selection as tile, i}
-                <div class="ui-card ui-card-side bg-base-100 shadow-xl">
-                  <figure>
-                      <img class="h-[170px]" style="border: none;" src="{thumbs[tile.data.img]}" alt="Selected image">
+<div class="ui-overflow-auto ui-max-h-[600px]">
+   <div class="ui-flex ui-flex-col ui-p-3 ui-space-y-3 ui-justify-stretch">
+      {#if selection.length == 0}
+         <div class="ui-justify-self-center ui-p-2">
+            <h3>Selection is empty</h3>
+         </div>
+      {/if}
+      {#each selection as tile, i}
+         <div class="ui-card ui-card-side ui-bg-base-100 ui-shadow-xl">
+            <figure>
+               <img class="ui-h-[170px]" style="border: none;" src={thumbs[tile.data.img]} alt="Selected image" />
+            </figure>
+            <div class="ui-card-body">
+               <h2 class="ui-card-title">
+                  {#if !tile.data.name}
+                     Tile: {tile.id}
+                     {#if tile.data.flags["monks-active-tiles"]?.actions?.length > 0}
+                        <span class="ui-badge ui-badge-primary">MATT</span>
+                     {/if}
+                  {:else}
+                     Token: {tile.data.name}
+                  {/if}
+                  {#if true}
+                     <span class="ui-badge">{tile.data.width}x{tile.data.height}</span>
+                  {/if}
+                  <span
+                     class="ui-badge"
+                     class:ui-badge-ghost={tile.data.hidden}
+                     class:ui-badge-success={!tile.data.hidden}
+                     on:click={() => tile.document.update({ hidden: !tile.data.hidden })}
+                  >
+                     {tile.data.hidden ? "hidden" : "visible"}
+                  </span>
+               </h2>
 
-                      </figure>
-                  <div class="ui-card-body">
-                    <h2 class="ui-card-title">
-                        {#if !tile.data.name}
-                            Tile: {tile.id}
-                            {#if tile.data.flags['monks-active-tiles']?.actions?.length > 0}
-                                <span class="ui-badge badge-primary">MATT</span>
-                            {/if}
-                        {:else}
-                            Token: {tile.data.name}
-                        {/if}
-                    {#if true}
-                        <span class="ui-badge">{tile.data.width}x{tile.data.height}</span>
-                    {/if}
-                    <span class="ui-badge"
-                        class:ui-badge-ghost={tile.data.hidden}
-                        class:ui-badge-success={!tile.data.hidden}
-                        on:click={() => tile.document.update({hidden: !tile.data.hidden})}
-                    >
-                        {tile.data.hidden ? 'hidden' : 'visible'}
-                    </span>
-                    </h2>
+               <p>
+                  <Tags
+                     allowPaste={true}
+                     allowDrop={true}
+                     onlyUnique={true}
+                     splitWith={","}
+                     placeholder="Tag"
+                     autoComplete={$globalTags}
+                     minChars="1"
+                     on:tags={(e) => onTagsSelected(e, i)}
+                     tags={tagsSelected[i]}
+                     colors={$tagColors}
+                     {onTagClick}
+                  />
+               </p>
 
-                    <p>
-                        <Tags
-                            allowPaste={true}
-	                        allowDrop={true}
-	                        onlyUnique={true}
-                            splitWith={","}
-                            placeholder="Tag"
-                            autoComplete={$globalTags}
-                            minChars=1
-                            on:tags={(e) => onTagsSelected(e, i)}
-                            tags={tagsSelected[i]}
-                            colors={$tagColors}
-                            {onTagClick}
-	                    />
-	                </p>
-                    
-                    <div class="ui-card-actions justify-end flex-row">
-	                    <button class="w-32 ui-btn" on:click={e => editObject(e, tile)}>Edit</button>
-	                    <button class="w-32 ui-btn ui-btn-outline ui-btn-warning" on:click={e => tile.release()}>Deselect</button>
-	                    <button class="w-32 ui-btn ui-btn-primary" on:click={e => createAction(e, tagsSelected[i])}>Create action</button>
-                    </div>
-                  </div>
-                </div>
-	    {/each}
-    </div>
+               <div class="ui-card-actions ui-justify-end ui-flex-row">
+                  <button class="ui-w-32 ui-btn" on:click={(e) => editObject(e, tile)}>Edit</button>
+                  <button class="ui-w-32 ui-btn ui-btn-outline ui-btn-warning" on:click={(e) => tile.release()}
+                     >Deselect</button
+                  >
+                  <button class="ui-w-32 ui-btn ui-btn-primary" on:click={(e) => createAction(e, tagsSelected[i])}
+                     >Create action</button
+                  >
+               </div>
+            </div>
+         </div>
+      {/each}
+   </div>
 </div>
diff --git a/src/view/components/SequenceEditor.svelte b/src/view/components/SequenceEditor.svelte
index 781c079..af76b66 100644
--- a/src/view/components/SequenceEditor.svelte
+++ b/src/view/components/SequenceEditor.svelte
@@ -132,16 +132,16 @@
       <VariableComponent {variable} on:remove={deleteVariable} on:change={updateVariable} />
    {/each}
    <div>
-      <button class="my-2 ui-btn ui-btn-outline ui-btn-primary" on:click={(e) => addVariable()}>Add variable</button>
+      <button class="ui-my-2 ui-btn ui-btn-outline ui-btn-primary" on:click={(e) => addVariable()}>Add variable</button>
    </div>
 
-   <div class="overflow-auto max-h-[600px]" id="sequencer-content">
+   <div class="ui-overflow-auto ui-max-h-[600px]" id="sequencer-content">
       <Sortable items={seq.steps} let:item let:index on:change={sortSteps} options={{ handle: ".handle" }}>
-         <div class="flex flex-col bg-white rounded-xl shadow-lg p-2 space-x-4 my-1">
-            <div class="flex flex-row justify-start space-x-2">
-               <div class="flex-1 flex flex-row justify-start space-x-2">
+         <div class="ui-flex ui-flex-col ui-bg-white ui-rounded-xl ui-shadow-lg ui-p-2 ui-space-x-4 ui-my-1">
+            <div class="ui-flex ui-flex-row ui-justify-start ui-space-x-2">
+               <div class="ui-flex-1 ui-flex ui-flex-row ui-justify-start ui-space-x-2">
                   <button
-                     class="ui-btn ui-btn-square ui-btn-ghost handle justify-self-start cursor-move"
+                     class="ui-btn ui-btn-square ui-btn-ghost handle ui-justify-self-start ui-cursor-move"
                      style="color: #46525d; padding: 6px"
                   >
                      <FaArrowsAlt />
@@ -166,18 +166,18 @@
                      {/each}
                   {/if}
                </div>
-               <div class="flex-none">
+               <div class="ui-flex-none">
                   <button
-                     class="ui-btn ui-btn-outline ui-btn-error ui-btn-square justify-self-end"
+                     class="ui-btn ui-btn-outline ui-btn-error ui-btn-square ui-justify-self-end"
                      on:click={(e) => deleteStep(item)}
                   >
-                     <XIcon class="h-8 w-8" />
+                     <XIcon class="ui-h-8 ui-w-8" />
                   </button>
                </div>
             </div>
 
             {#each item.modifiers as mod (mod.id)}
-               <div class="flex flex-row bg-white rounded-xl shadow-lg py-2 px-4 gap-2 my-1">
+               <div class="ui-flex ui-flex-row ui-bg-white ui-rounded-xl ui-shadow-lg ui-py-2 ui-px-4 ui-gap-2 ui-my-1">
                   <Select
                      items={modifierSpecs.filter((m) => item.type == m.group)}
                      {groupByCat}
@@ -200,15 +200,15 @@
                   {/if}
 
                   <button
-                     class="ui-btn ui-btn-outline ui-btn-error ui-btn-square justify-self-end"
+                     class="ui-btn ui-btn-outline ui-btn-error ui-btn-square ui-justify-self-end"
                      on:click={(e) => deleteModifier(item, mod)}
                   >
-                     <XIcon class="h-8 w-8" />
+                     <XIcon class="ui-h-8 ui-w-8" />
                   </button>
                </div>
             {/each}
             {#if modifierSpecs.filter((m) => item.type == m.group).length > 0}
-               <div class="p-1">
+               <div class="ui-p-1">
                   <button class="ui-btn ui-btn-outline ui-btn-primary" on:click={(e) => addModifier(item)}
                      >Add modifier</button
                   >
@@ -219,7 +219,7 @@
    </div>
 
    <div>
-      <button class="my-2 ui-btn ui-btn-outline ui-btn-primary" on:click={(e) => addStep()}>Add section</button>
+      <button class="ui-my-2 ui-btn ui-btn-outline ui-btn-primary" on:click={(e) => addStep()}>Add section</button>
    </div>
 
    <button class="ui-btn" on:click={play}>play</button>
diff --git a/src/view/components/SequencerTab.svelte b/src/view/components/SequencerTab.svelte
index dc353fb..e78ec19 100644
--- a/src/view/components/SequencerTab.svelte
+++ b/src/view/components/SequencerTab.svelte
@@ -58,7 +58,7 @@
 <input type="checkbox" id="seq-modal" class="ui-modal-toggle" />
 <div class="ui-modal">
    <div class="ui-modal-box">
-      <h3 class="py-4 font-bold text-lg">Edit sequence</h3>
+      <h3 class="ui-py-4 ui-font-bold ui-text-lg">Edit sequence</h3>
 
       <div class="ui-form-control">
          <label class="ui-label" for="">
@@ -76,11 +76,13 @@
    </div>
 </div>
 
-<div class="p-2">
-   <div class="flex flex-row bg-white rounded-xl shadow-lg p-2 space-x-4 my-1 items-center">
+<div class="ui-p-2">
+   <div class="ui-flex ui-flex-row ui-bg-white ui-rounded-xl ui-shadow-lg ui-p-2 ui-space-x-4 ui-my-1 ui-items-center">
       <Select items={$sequences} optionIdentifier="id" labelIdentifier="title" isClearable={false} bind:value={seq} />
       <label for="seq-modal" class="ui-btn ui-modal-button">Edit</label>
-      <button class="m-2 ui-btn ui-btn-outline ui-btn-primary w-36" on:click={(_) => addSeq()}>Add Sequence</button>
+      <button class="ui-m-2 ui-btn ui-btn-outline ui-btn-primary ui-w-36" on:click={(_) => addSeq()}
+         >Add Sequence</button
+      >
    </div>
 
    <SequenceEditor {seq} />
diff --git a/src/view/components/TagManager.svelte b/src/view/components/TagManager.svelte
deleted file mode 100644
index 49f5fcd..0000000
--- a/src/view/components/TagManager.svelte
+++ /dev/null
@@ -1,2 +0,0 @@
-<script>
-</script>
diff --git a/src/view/components/TagsBar.svelte b/src/view/components/TagsBar.svelte
index a6ef6e6..11efcc4 100644
--- a/src/view/components/TagsBar.svelte
+++ b/src/view/components/TagsBar.svelte
@@ -1,26 +1,25 @@
 <script>
-    import Tags from './Tags.svelte'
-    import { globalTags, tagColors }          from '../../modules/stores.js';
+   import Tags from "./Tags.svelte";
+   import { globalTags, tagColors } from "../../modules/stores.js";
 
-    export let onTagClick;
+   export let onTagClick;
 
-    function onTags(event) {
-        const tags = event.detail.tags.filter(t => t.trim() != "");
-        globalTags.set(tags);
-    }
+   function onTags(event) {
+      const tags = event.detail.tags.filter((t) => t.trim() != "");
+      globalTags.set(tags);
+   }
 </script>
 
-<div class="ui-navbar bg-base-100">
-    <Tags
-        allowPaste={true}
-	    allowDrop={true}
-	    onlyUnique={true}
-        splitWith={","}
-        placeholder="Tag"
-
-        on:tags={onTags}
-        tags={$globalTags}
-        colors={$tagColors}
-        {onTagClick}
-	/>
+<div class="ui-navbar ui-bg-base-100">
+   <Tags
+      allowPaste={true}
+      allowDrop={true}
+      onlyUnique={true}
+      splitWith={","}
+      placeholder="Tag"
+      on:tags={onTags}
+      tags={$globalTags}
+      colors={$tagColors}
+      {onTagClick}
+   />
 </div>
diff --git a/src/view/components/Variable.svelte b/src/view/components/Variable.svelte
index fccb157..50f8eee 100644
--- a/src/view/components/Variable.svelte
+++ b/src/view/components/Variable.svelte
@@ -22,15 +22,15 @@
    }
 </script>
 
-<div class="flex flex-row bg-white rounded-xl shadow-lg p-2 gap-2 my-1 items-center">
-   <label class="ui-input-group mx-1">
+<div class="ui-flex ui-flex-row ui-bg-white ui-rounded-xl ui-shadow-lg ui-p-2 ui-gap-2 ui-my-1 ui-items-center">
+   <label class="ui-input-group ui-mx-1">
       <span class="">@</span>
-      <input type="text" class="ui-input ui-input-lg text-base" bind:value={variable.name} isClearable={false} />
+      <input type="text" class="ui-input ui-input-lg ui-text-base" bind:value={variable.name} isClearable={false} />
    </label>
 
    <Select items={argSpecs} optionIdentifier="id" labelIdentifier="id" value={variable.type} on:select={updateType} />
    <ArgInput type={variable.type} bind:value={variable.value} on:change={emitChange} />
-   <button class="ui-btn ui-btn-outline ui-btn-error ui-btn-square justify-self-end" on:click={remove}>
-      <XIcon class="h-8 w-8" />
+   <button class="ui-btn ui-btn-outline ui-btn-error ui-btn-square ui-justify-self-end" on:click={remove}>
+      <XIcon class="ui-h-8 ui-w-8" />
    </button>
 </div>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 4458636..c305754 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,14 +1,15 @@
 const config = {
   content: ["./src/**/*.{html,js,svelte,ts}"],
 
+  prefix: "ui-",
   theme: {
     extend: {},
   },
 
   plugins: [require("daisyui")],
   daisyui: {
-        prefix: "ui-"
-    }
+    prefix: ""
+  }
 };
 
 module.exports = config;