From a7efe8356cde5b7073ba78e74f075b7bf043fe4d Mon Sep 17 00:00:00 2001
From: David Cooper <david@dtcooper.com>
Date: Wed, 9 Aug 2023 22:47:04 -0400
Subject: [PATCH] wip

---
 client/src/main/Header.svelte        |  2 +-
 client/src/main/SettingsModal.svelte | 41 ++++++++++++----------------
 client/src/main/player/List.svelte   |  5 ++--
 3 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/client/src/main/Header.svelte b/client/src/main/Header.svelte
index dfdaf9df..6767f5a9 100644
--- a/client/src/main/Header.svelte
+++ b/client/src/main/Header.svelte
@@ -22,7 +22,7 @@
     </div>
     <div class="flex items-center gap-3">
       {#if $config.UI_MODES.includes(0) && $userConfig.uiMode >= 1}
-        <button class="btn btn-secondary" on:click={() => ($userConfig.uiMode = 0)}>← Back to simple view</button>
+        <button class="btn btn-accent" on:click={() => ($userConfig.uiMode = 0)}>← Back to simple view</button>
       {/if}
       <button
         class="btn btn-circle btn-ghost flex items-center justify-center overflow-hidden"
diff --git a/client/src/main/SettingsModal.svelte b/client/src/main/SettingsModal.svelte
index b7f0179c..c435e507 100644
--- a/client/src/main/SettingsModal.svelte
+++ b/client/src/main/SettingsModal.svelte
@@ -51,23 +51,18 @@
   <svelte:fragment slot="content">
     <div class="grid grid-cols-[max-content_1fr] items-baseline gap-3">
       <div class="flex items-center justify-end text-lg font-bold">User Interface mode:</div>
-      <div class="join join-horizontal">
+      <div class="tabs-boxed tabs w-max">
         {#each ["Simple", "Standard", "Advanced"] as uiMode, index}
           {#if $config.UI_MODES.indexOf(index) !== -1}
-            <button class="btn btn-disabled join-item btn-active">{uiMode}</button>
+            <button
+              class="tab"
+              class:tab-active={index === $userConfig.uiMode}
+              on:click={() => ($userConfig.uiMode = index)}>{uiMode}</button
+            >
           {/if}
         {/each}
       </div>
 
-      <div class="flex items-center justify-end text-lg font-bold">User Interface mode:</div>
-      <select class="select select-bordered select-lg" on:change={(e) => ($userConfig.uiMode = +e.target.value)}>
-        {#each ["Simple", "Standard", "Advanced"] as uiMode, index}
-          {#if $config.UI_MODES.indexOf(index) !== -1}
-            <option value={index} selected={index === $userConfig.uiMode}>{uiMode}</option>
-          {/if}
-        {/each}
-      </select>
-
       <div class="flex justify-end text-lg font-bold">Audio Output Device:</div>
       <select class="select select-bordered select-lg" on:change={(e) => setSpeaker(e.target.value)}>
         {#each $playStatus.speakers as [id, name]}
@@ -78,26 +73,24 @@
       <!-- svelte-ignore missing-declaration -->
       {#if IS_DEV}
         <div class="flex justify-end text-lg font-bold">Autoplay (dev only):</div>
-        <div class="flex items-center justify-center gap-4 font-mono text-xl font-bold">
+        <div class="flex w-max items-center justify-center gap-4 font-mono text-xl font-bold">
           <span class:text-error={!$userConfig.autoplay}>OFF</span>
           <input type="checkbox" class="toggle toggle-success toggle-lg" bind:checked={$userConfig.autoplay} />
           <span class:text-success={$userConfig.autoplay}>ON</span>
         </div>
       {/if}
 
-      {#if $userConfig.uiMode > 0}
-        <div class="flex justify-end text-lg font-bold">Broadcast Compression:</div>
-        <div
-          class="text-lg"
-          class:text-error={!$config.BROADCAST_COMPRESSION}
-          class:text-success={$config.BROADCAST_COMPRESSION}
-        >
-          {$config.BROADCAST_COMPRESSION ? "Enabled" : "Disabled"}
-        </div>
+      <div class="flex justify-end text-lg font-bold">Broadcast Compression:</div>
+      <div
+        class="w-max text-lg"
+        class:text-error={!$config.BROADCAST_COMPRESSION}
+        class:text-success={$config.BROADCAST_COMPRESSION}
+      >
+        {$config.BROADCAST_COMPRESSION ? "Enabled" : "Disabled"}
+      </div>
 
-        <div class="flex justify-end text-lg font-bold">Station Admin:</div>
-        <a class="link-hover link-primary link text-lg" href={$db.host}>Open in your web browser</a>
-      {/if}
+      <div class="flex justify-end text-lg font-bold">Station Admin:</div>
+      <a class="link-hover link-primary link text-lg" href={$db.host}>Open in your web browser</a>
     </div>
 
     <div class="col-span-2">
diff --git a/client/src/main/player/List.svelte b/client/src/main/player/List.svelte
index e23c23a9..d45ebe8f 100644
--- a/client/src/main/player/List.svelte
+++ b/client/src/main/player/List.svelte
@@ -11,7 +11,7 @@
   <div class="flex flex-1 flex-col overflow-y-auto" id="playlist">
     {#each items as item, index (item.generatedId)}
       {@const isFirstItem = index === 0}
-      <div class="flex flex-col gap-2 px-2" out:fade={{ duration: 750 }}>
+      <div class="flex flex-col gap-2 px-2" out:fade={{ duration: 800 }}>
         <div
           class="divider mb-0 mt-2"
           class:text-secondary={item.type === "stopset"}
@@ -28,11 +28,12 @@
               class:border-base-content={!isFirstItem || (!asset.finished && !asset.active)}
             >
               <div
-                class="flex min-h-[5rem] items-center gap-3 overflow-hidden px-3 py-1 text-secondary-content"
+                class="flex min-h-[5rem] items-center gap-3 overflow-hidden px-3 py-1"
                 style={asset.finished
                   ? ""
                   : `background: linear-gradient(to right, hsl(var(--sf)) 0%, hsl(var(--sf)) ${asset.percentDone}%, hsl(var(--s)) ${asset.percentDone}%, hsl(var(--s)) 100%);`}
                 class:bg-neutral={asset.finished}
+                class:text-secondary-content={!asset.finished}
                 class:text-neutral-content={asset.finished}
               >
                 {#if $userConfig.uiMode > 0}