From 5db8d14b331b4b26723f6443c0b6ba1c0262c629 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Tue, 10 Oct 2023 18:10:35 +0300
Subject: [PATCH] Update buttons

---
 src/components/ActionButton.svelte         | 16 +++++++++-------
 src/components/CreatePlaylistButton.svelte |  6 +++---
 src/components/DefaultButton.svelte        |  2 +-
 src/components/DownloadButton.svelte       |  2 +-
 src/components/OutlineButton.svelte        |  2 +-
 src/components/SelectAllButton.svelte      |  4 ++--
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/ActionButton.svelte b/src/components/ActionButton.svelte
index 012297c4a..9d0261e8d 100644
--- a/src/components/ActionButton.svelte
+++ b/src/components/ActionButton.svelte
@@ -1,16 +1,18 @@
 <script>
   export let disabled = false
+  export let active = false
 </script>
 
 <button
   {...$$restProps}
-  class="rounded-md transition-colors duration-200 border border-transparent text-white text-sm font-semibold text-center px-4 h-10 flex items-center justify-center space-x-3 shrink-0 min-w-14 w-auto"
-  class:bg-gray-200={disabled}
-  class:bg-primary-600={!disabled}
-  class:dark:bg-gray-700={disabled}
-  class:dark:hover:bg-primary-500={!disabled}
-  class:hover:bg-gray-200={disabled}
-  class:hover:bg-primary-700={!disabled}
+  class="rounded-md transition-colors duration-200 border border-transparent text-white text-sm font-semibold text-center h-10 flex items-center justify-center space-x-3 px-4"
+  class:bg-gray-200={disabled || active}
+  class:bg-primary-600={!disabled && !active}
+  class:dark:bg-gray-700={disabled || active}
+  class:dark:hover:bg-primary-500={!disabled && !active}
+  class:dark:hover:bg-gray-700={active}
+  class:hover:bg-gray-200={disabled || active}
+  class:hover:bg-primary-700={!disabled && !active}
   class:pointer-events-none={disabled}
   on:click
 >
diff --git a/src/components/CreatePlaylistButton.svelte b/src/components/CreatePlaylistButton.svelte
index 5e22aa135..cd6c4adce 100644
--- a/src/components/CreatePlaylistButton.svelte
+++ b/src/components/CreatePlaylistButton.svelte
@@ -8,9 +8,9 @@
 </script>
 
 <ActionButton
-  disabled={$downloadMode}
+  active={$downloadMode}
   on:click={() => {
-    downloadMode.set(true)
+    downloadMode.set(!$downloadMode)
     dispatch('click')
   }}
   aria-label="Create Playlist"
@@ -57,5 +57,5 @@
         stroke-width="32"
       /></svg
     >
-  </span><span class="hidden sm:inline">Create Playlist</span>
+  </span><span class="hidden md:inline">Create Playlist</span>
 </ActionButton>
diff --git a/src/components/DefaultButton.svelte b/src/components/DefaultButton.svelte
index e9ea2b37a..25aa761db 100644
--- a/src/components/DefaultButton.svelte
+++ b/src/components/DefaultButton.svelte
@@ -2,7 +2,7 @@
   {...$$restProps}
   type="button"
   on:click
-  class="rounded-lg text-sm h-10 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 space-x-3 px-3"
+  class="rounded-lg text-sm h-10 flex items-center justify-center text-gray-500 dark:text-gray-400 font-normal hover:bg-gray-100 dark:hover:bg-gray-700 space-x-3 px-4 border border-transparent"
 >
   <slot />
 </button>
diff --git a/src/components/DownloadButton.svelte b/src/components/DownloadButton.svelte
index a91e39c77..d6864dc5e 100644
--- a/src/components/DownloadButton.svelte
+++ b/src/components/DownloadButton.svelte
@@ -44,5 +44,5 @@
     </svg>
   </span>
 
-  <span class="hidden sm:inline">Download Playlist</span>
+  <span class="hidden md:inline">Download Playlist</span>
 </ActionButton>
diff --git a/src/components/OutlineButton.svelte b/src/components/OutlineButton.svelte
index bff4912c0..9ca6f3043 100644
--- a/src/components/OutlineButton.svelte
+++ b/src/components/OutlineButton.svelte
@@ -1,6 +1,6 @@
 <button
   {...$$restProps}
-  class="rounded-md bg-transparent transition-colors duration-200 border border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-700 text-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:border-gray-600 text-sm font-normal text-center px-4 h-10 flex items-center justify-center w-auto space-x-3 shrink-0 min-w-14"
+  class="rounded-md bg-transparent transition-colors duration-200 border border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-700 text-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:border-gray-600 text-sm font-normal text-center px-4 h-10 flex items-center justify-center space-x-3"
   on:click
 >
   <slot />
diff --git a/src/components/SelectAllButton.svelte b/src/components/SelectAllButton.svelte
index 42314f365..32837e4db 100644
--- a/src/components/SelectAllButton.svelte
+++ b/src/components/SelectAllButton.svelte
@@ -29,7 +29,7 @@
         />
       </svg>
     </span>
-    <span class="hidden sm:inline">Deselect All ({$selected.length})</span>
+    <span class="hidden md:inline">Deselect All ({$selected.length})</span>
   </OutlineButton>
 {:else}
   <OutlineButton on:click={selectAll} aria-label="Select All ({$filteredChannels.length})">
@@ -48,6 +48,6 @@
       </svg>
     </span>
 
-    <span class="hidden sm:inline">Select All ({$filteredChannels.length})</span>
+    <span class="hidden md:inline">Select All ({$filteredChannels.length})</span>
   </OutlineButton>
 {/if}