From e6af359db46056c2e288287fcc458f7337bebfa5 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Thu, 5 Oct 2023 07:36:07 +0300
Subject: [PATCH] Minor design update

---
 src/components/ActionButton.svelte         |  18 ++++
 src/components/BottomBar.svelte            |  26 ++++-
 src/components/ChannelPopup.svelte         |  15 ++-
 src/components/Checkbox.svelte             |   4 +-
 src/components/CreatePlaylistButton.svelte | 109 ++++++++++-----------
 src/components/DefaultButton.svelte        |   3 +-
 src/components/Divider.svelte              |   1 +
 src/components/DownloadButton.svelte       |  10 +-
 src/components/EditButton.svelte           |   3 +-
 src/components/NavBar.svelte               |  95 ++++++++++--------
 src/components/SelectAllButton.svelte      |  70 ++++++-------
 src/components/SquareButton.svelte         |   8 ++
 src/pages/channel/+page.svelte             |   4 +-
 tailwind.config.cjs                        |   7 +-
 14 files changed, 208 insertions(+), 165 deletions(-)
 create mode 100644 src/components/ActionButton.svelte
 create mode 100644 src/components/Divider.svelte
 create mode 100644 src/components/SquareButton.svelte

diff --git a/src/components/ActionButton.svelte b/src/components/ActionButton.svelte
new file mode 100644
index 000000000..d84186212
--- /dev/null
+++ b/src/components/ActionButton.svelte
@@ -0,0 +1,18 @@
+<script>
+  export let disabled = 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 w-full"
+  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:pointer-events-none={disabled}
+  on:click
+>
+  <slot />
+</button>
diff --git a/src/components/BottomBar.svelte b/src/components/BottomBar.svelte
index a72b5d13e..ee1adbbdd 100644
--- a/src/components/BottomBar.svelte
+++ b/src/components/BottomBar.svelte
@@ -2,20 +2,42 @@
   import { slide } from 'svelte/transition'
   import DownloadButton from '~/components/DownloadButton.svelte'
   import SelectAllButton from '~/components/SelectAllButton.svelte'
+  import Divider from '~/components/Divider.svelte'
+  import SquareButton from '~/components/SquareButton.svelte'
   import { selected } from '~/store'
+  import { downloadMode } from '~/store'
 </script>
 
 <div
-  transition:slide="{{duration:200}}"
+  transition:slide={{ duration: 200 }}
   class="h-16 bg-white dark:bg-gray-800 fixed bottom-0 left-0 right-0 py-2.5 border-t border-t-gray-100 dark:border-t-gray-800"
 >
   <div class="flex justify-between items-center max-w-5xl mx-auto px-3">
     <div class="text-sm text-gray-600 dark:text-gray-400 font-mono">
       Selected {$selected.length.toLocaleString()} channel(s)
     </div>
-    <div class="flex space-x-2">
+    <div class="flex space-x-2 items-center">
       <SelectAllButton />
       <DownloadButton />
+      <Divider />
+      <SquareButton
+        on:click={() => {
+          downloadMode.set(false)
+        }}
+      >
+        <svg
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </SquareButton>
     </div>
   </div>
 </div>
diff --git a/src/components/ChannelPopup.svelte b/src/components/ChannelPopup.svelte
index 1399f0166..74c1cf4b1 100644
--- a/src/components/ChannelPopup.svelte
+++ b/src/components/ChannelPopup.svelte
@@ -1,6 +1,8 @@
 <script>
   import HTMLPreview from '~/components/HTMLPreview.svelte'
   import EditButton from '~/components/EditButton.svelte'
+  import Divider from '~/components/Divider.svelte'
+  import SquareButton from '~/components/SquareButton.svelte'
   import { getContext } from 'svelte'
   const { close } = getContext('simple-modal')
 
@@ -14,19 +16,16 @@
 <div class="relative px-2 py-24 flex justify-center" on:keypress on:click|self={closePopup}>
   <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-[820px]">
     <div
-      class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
+      class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
     >
       <div class="w-2/3 overflow-hidden">
         <h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h3>
       </div>
 
-      <div class="inline-flex w-1/3 justify-end space-x-3">
+      <div class="inline-flex w-1/3 justify-end space-x-3 items-center">
         <EditButton {channel} />
-        <button
-          on:click={closePopup}
-          type="button"
-          class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm w-[32px] h-[32px] justify-center ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-        >
+        <Divider />
+        <SquareButton on:click={closePopup}>
           <svg
             class="w-5 h-5"
             fill="currentColor"
@@ -39,7 +38,7 @@
               clip-rule="evenodd"
             ></path>
           </svg>
-        </button>
+        </SquareButton>
       </div>
     </div>
     <div class="overflow-y-auto overflow-x-hidden w-full">
diff --git a/src/components/Checkbox.svelte b/src/components/Checkbox.svelte
index b6fc00da7..0d53ec3ef 100644
--- a/src/components/Checkbox.svelte
+++ b/src/components/Checkbox.svelte
@@ -13,7 +13,7 @@
 
 {#if selected}
   <button
-    class="w-12 h-12 rounded-full text-primary-light hover:text-primary-default dark:hover:text-primary-light transition-colors duration-200 flex items-center justify-center"
+    class="w-12 h-12 rounded-full text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 flex items-center justify-center"
     area-label="Unselect"
     on:click={() => toggle(false)}
   >
@@ -27,7 +27,7 @@
   </button>
 {:else if indeterminate}
   <button
-    class="w-12 h-12 rounded-full text-primary-default hover:text-primary-dark dark:hover:text-primary-light transition-colors duration-200 flex items-center justify-center"
+    class="w-12 h-12 rounded-full text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 flex items-center justify-center"
     area-label="Unselect"
     on:click={() => toggle(false)}
   >
diff --git a/src/components/CreatePlaylistButton.svelte b/src/components/CreatePlaylistButton.svelte
index 81aab338f..318473cef 100644
--- a/src/components/CreatePlaylistButton.svelte
+++ b/src/components/CreatePlaylistButton.svelte
@@ -1,66 +1,63 @@
 <script>
   import { downloadMode } from '~/store'
   import DefaultButton from '~/components/DefaultButton.svelte'
+  import ActionButton from '~/components/ActionButton.svelte'
   import { createEventDispatcher } from 'svelte'
 
   const dispatch = createEventDispatcher()
 </script>
 
 <div class="w-14 sm:w-36">
-  {#if $downloadMode}
-    <DefaultButton
-      on:click={() => {
-        downloadMode.set(false)
-        dispatch('click')
-      }}
-      area-label="Done"
-    >
-      <span class="sm:hidden inline">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-5 h-5"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M9 1.5H5.625c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5zm6.61 10.936a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 14.47a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
-            clip-rule="evenodd"
-          />
-          <path
-            d="M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z"
-          />
-        </svg>
-      </span>
-
-      <span class="hidden sm:inline">Done</span>
-    </DefaultButton>
-  {:else}
-    <button
-      class="rounded-md bg-primary-default hover:bg-primary-dark hover:dark:bg-primary-light transition-colors duration-200 text-sm text-white font-semibold text-center px-4 h-10 flex items-center w-full justify-center"
-      on:click={() => {
-        downloadMode.set(true)
-        dispatch('click')
-      }}
-      area-label="Create Playlist"
-    >
-      <span class="sm:hidden inline">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-5 h-5"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M5.625 1.5H9a3.75 3.75 0 013.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 013.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 01-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875zM12.75 12a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V18a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V12z"
-            clip-rule="evenodd"
-          />
-          <path
-            d="M14.25 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0016.5 7.5h-1.875a.375.375 0 01-.375-.375V5.25z"
-          /></svg
-        ></span
-      ><span class="hidden sm:inline">Create Playlist</span>
-    </button>
-  {/if}
+  <ActionButton
+    disabled={$downloadMode}
+    on:click={() => {
+      downloadMode.set(true)
+      dispatch('click')
+    }}
+    area-label="Create Playlist"
+  >
+    <span class="sm:hidden inline">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 512 512"
+        ><path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="48"
+          d="M160 144h288M160 256h288M160 368h288"
+        /><circle
+          cx="80"
+          cy="144"
+          r="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="32"
+        /><circle
+          cx="80"
+          cy="256"
+          r="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="32"
+        /><circle
+          cx="80"
+          cy="368"
+          r="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="32"
+        /></svg
+      >
+    </span><span class="hidden sm:inline">Create Playlist</span>
+  </ActionButton>
 </div>
diff --git a/src/components/DefaultButton.svelte b/src/components/DefaultButton.svelte
index c03d195ad..cab96b385 100644
--- a/src/components/DefaultButton.svelte
+++ b/src/components/DefaultButton.svelte
@@ -1,5 +1,6 @@
 <button
-  class="rounded-md bg-white hover:bg-gray-200 transition-colors duration-200 border border-gray-200 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-semibold text-center px-4 h-10 flex items-center justify-center w-full"
+  {...$$restProps}
+  class="rounded-md bg-transparent transition-colors duration-200 border border-gray-200 hover:border-gray-400 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-full"
   on:click
 >
   <slot />
diff --git a/src/components/Divider.svelte b/src/components/Divider.svelte
new file mode 100644
index 000000000..ab97c1504
--- /dev/null
+++ b/src/components/Divider.svelte
@@ -0,0 +1 @@
+<span class="w-[1px] h-[22px] bg-gray-200 dark:bg-gray-700"></span>
diff --git a/src/components/DownloadButton.svelte b/src/components/DownloadButton.svelte
index f2b9cd777..ef4040f02 100644
--- a/src/components/DownloadButton.svelte
+++ b/src/components/DownloadButton.svelte
@@ -1,4 +1,5 @@
 <script>
+  import ActionButton from './ActionButton.svelte'
   import { selected, createPlaylist } from '~/store'
 
   function onClick() {
@@ -23,12 +24,7 @@
 </script>
 
 <div class="w-14 sm:w-44">
-  <button
-    class="rounded-md bg-primary-default hover:bg-primary-dark hover:dark:bg-primary-light transition-colors duration-200 text-sm text-white font-semibold px-5 h-10 flex items-center disabled:bg-gray-200 dark:disabled:text-gray-500 dark:disabled:bg-gray-700 w-full justify-center"
-    on:click={onClick}
-    disabled={!$selected.length}
-    area-label="Download Playlist"
-  >
+  <ActionButton on:click={onClick} disabled={!$selected.length} area-label="Download Playlist">
     <span class="sm:hidden inline">
       <svg
         fill="currentColor"
@@ -50,5 +46,5 @@
     </span>
 
     <span class="hidden sm:inline">Download Playlist</span>
-  </button>
+  </ActionButton>
 </div>
diff --git a/src/components/EditButton.svelte b/src/components/EditButton.svelte
index abf22b07c..6b2ffb951 100644
--- a/src/components/EditButton.svelte
+++ b/src/components/EditButton.svelte
@@ -18,11 +18,12 @@
 <button
   on:click={goToEdit}
   type="button"
-  class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white min-w-[32px] h-[32px] justify-center"
+  class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white h-10 justify-center space-x-3 px-3"
 >
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
     <path
       d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z"
     />
   </svg>
+  <span>Edit</span>
 </button>
diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index 359cac584..331042dea 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -2,7 +2,9 @@
   import { query, hasQuery, search } from '~/store'
   import { onMount } from 'svelte'
   import SearchFieldMini from './SearchFieldMini.svelte'
+  import Divider from './Divider.svelte'
   import CreatePlaylistButton from './CreatePlaylistButton.svelte'
+  import SquareButton from './SquareButton.svelte'
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
 
@@ -44,7 +46,13 @@
 >
   <div class="flex justify-between items-center mx-auto px-3 w-full max-w-6xl">
     <div class="flex flex-start items-center sm:basis-88 shrink">
-      <a href="/" on:click="{() => {reset()}}" class="flex mr-6">
+      <a
+        href="/"
+        on:click={() => {
+          reset()
+        }}
+        class="flex mr-6"
+      >
         <span
           class="text-[1.15rem] text-[#24292f] self-center font-semibold whitespace-nowrap dark:text-white font-mono"
           >/iptv-org</span
@@ -52,18 +60,54 @@
       </a>
       <div class="hidden sm:block w-full">
         {#if withSearch}
-        <SearchFieldMini />
+          <SearchFieldMini />
         {/if}
       </div>
     </div>
 
     <div class="flex flex-end items-center space-x-4">
       <div>
-        <a
-          href="https://github.com/iptv-org/"
-          class="inline-flex text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full text-sm p-2.5 ml-1"
-          target="_blank"
-          rel="noreferrer"
+        <CreatePlaylistButton
+          on:click={() => {
+            if ($page.url.pathname !== '/') {
+              goto('/')
+            }
+          }}
+        />
+      </div>
+      <Divider />
+      <div class="inline-flex space-x-2">
+        <SquareButton type="button" on:click={toggleDarkMode} aria-label="Toggle Dark Mode">
+          <svg
+            class="w-5 h-5"
+            class:hidden={dark}
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+          >
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+          </svg>
+          <svg
+            class="w-5 h-5"
+            class:hidden={!dark}
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </SquareButton>
+        <SquareButton
+          on:click={() => {
+            window.open('https://github.com/iptv-org/', '_blank', 'noreferrer')
+          }}
           aria-label="GitHub"
         >
           <svg
@@ -79,42 +123,7 @@
               d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
             ></path>
           </svg>
-        </a>
-        <button
-          type="button"
-          on:click="{toggleDarkMode}"
-          class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full text-sm p-2.5"
-          aria-label="Toggle Dark Mode"
-        >
-          <svg
-            class="w-5 h-5"
-            class:hidden="{dark}"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-          >
-            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-          </svg>
-          <svg
-            class="w-5 h-5"
-            class:hidden="{!dark}"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-        </button>
-      </div>
-      <div>
-        <CreatePlaylistButton on:click="{() => {if($page.url.pathname !== '/') {goto('/')}}}" />
+        </SquareButton>
       </div>
     </div>
   </div>
diff --git a/src/components/SelectAllButton.svelte b/src/components/SelectAllButton.svelte
index c2305fa33..c41627f1e 100644
--- a/src/components/SelectAllButton.svelte
+++ b/src/components/SelectAllButton.svelte
@@ -15,51 +15,41 @@
 
 <div class="w-14 sm:w-44">
   {#if isAllSelected}
-  <DefaultButton on:click="{deselectAll}" area-label="Deselect All ({$selected.length})">
-    <span class="sm:hidden inline">
-      <svg
-        fill="currentColor"
-        class="w-5 h-5"
-        viewBox="0 0 538 412"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g clip-path="url(#clip0_3_43)">
+    <DefaultButton on:click={deselectAll} area-label="Deselect All ({$selected.length})">
+      <span class="sm:hidden inline">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="w-5 h-5"
+        >
           <path
-            d="M18.6667 74.6747H416.947C427.254 74.6747 435.613 66.3153 435.613 56.008V18.6747C435.613 8.36213 427.254 0.00799561 416.947 0.00799561H18.6667C8.35933 0.00799561 0 8.36213 0 18.6747V56.008C0.0937507 66.2788 8.39587 74.5813 18.6667 74.6747ZM18.6667 211.448H166.48C174.688 211.495 182.568 208.255 188.371 202.453L233.34 158.161C237.043 154.656 238.22 149.245 236.309 144.521C234.397 139.798 229.783 136.724 224.689 136.782H18.6757C13.6705 136.776 8.86841 138.792 5.35801 142.365C1.84761 145.943 -0.0794594 150.776 0.00907389 155.786V193.12C0.00907389 203.427 8.36841 211.786 18.6757 211.786L18.6667 211.448ZM252 274.573H18.6667C8.35933 274.573 0 282.933 0 293.24V330.573C0 340.881 8.35933 349.24 18.6667 349.24H194.133C202.409 349.214 210.336 345.917 216.196 340.079L260.316 295.787C263.884 292.219 264.899 286.828 262.863 282.208C260.951 277.609 256.472 274.604 251.493 274.572L252 274.573ZM18.6667 74.6667H416.947C427.254 74.6667 435.613 66.3073 435.613 56V18.6667C435.613 8.35413 427.254 0 416.947 0H18.6667C8.35933 0 0 8.35413 0 18.6667V56C0.0937507 66.2708 8.39587 74.5733 18.6667 74.6667ZM532.68 352.8C536.05 356.003 537.961 360.451 537.961 365.102C537.961 369.758 536.05 374.206 532.68 377.409L504.508 406.087C501.305 409.462 496.857 411.368 492.206 411.368C487.555 411.368 483.107 409.462 479.904 406.087L408.633 334.816L337.362 406.087H337.357C334.154 409.462 329.706 411.368 325.055 411.368C320.404 411.368 315.956 409.462 312.753 406.087L284.581 377.915C281.211 374.712 279.3 370.264 279.3 365.613C279.3 360.962 281.211 356.514 284.581 353.311L355.852 281.696L284.581 210.425C281.211 207.222 279.3 202.774 279.3 198.123C279.3 193.472 281.211 189.024 284.581 185.821L312.753 157.144V157.138C315.956 153.769 320.404 151.857 325.055 151.857C329.706 151.857 334.154 153.769 337.357 157.138L408.461 228.409L479.904 157.138C483.107 153.769 487.555 151.857 492.206 151.857C496.857 151.857 501.305 153.769 504.508 157.138L532.68 185.31C536.05 188.513 537.961 192.961 537.961 197.613C537.961 202.264 536.05 206.711 532.68 209.915L461.41 281.696L532.68 352.8Z"
+            fill-rule="evenodd"
+            d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm3 10.5a.75.75 0 000-1.5H9a.75.75 0 000 1.5h6z"
+            clip-rule="evenodd"
           />
-        </g>
-        <defs>
-          <clipPath id="clip0_3_43">
-            <rect width="537.961" height="411.368" />
-          </clipPath>
-        </defs>
-      </svg>
-    </span>
-    <span class="hidden sm:inline">Deselect All ({$selected.length})</span>
-  </DefaultButton>
+        </svg>
+      </span>
+      <span class="hidden sm:inline">Deselect All ({$selected.length})</span>
+    </DefaultButton>
   {:else}
-  <DefaultButton on:click="{selectAll}" area-label="Select All ({$filteredChannels.length})">
-    <span class="sm:hidden inline">
-      <svg
-        fill="currentColor"
-        class="w-5 h-5"
-        viewBox="0 0 543 411"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g clip-path="url(#clip0_1_4)">
+    <DefaultButton on:click={selectAll} area-label="Select All ({$filteredChannels.length})">
+      <span class="sm:hidden inline">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="w-5 h-5"
+        >
           <path
-            d="M160.199 329.208C151.017 316.344 146.141 300.896 146.281 285.088C146.349 281.833 145.058 278.697 142.719 276.432C140.469 274.052 137.339 272.697 134.063 272.703H18.6667C13.6927 272.744 8.93227 274.76 5.43227 278.302C1.96867 281.838 0.0208 286.588 0 291.536V328.869C0 339.182 8.35933 347.536 18.6667 347.536H149.672C162.063 347.536 166.813 337.692 160.199 329.208ZM18.6788 74.6615L416.959 74.6667C427.266 74.6667 435.626 66.3073 435.626 56V18.6667C435.626 8.35413 427.266 0 416.959 0H18.6788C8.37148 0 0.012146 8.35413 0.012146 18.6667V56C0.553813 65.9375 8.73095 73.74 18.6788 73.8173V74.6615ZM18.6788 211.435H177.852L177.847 211.44C183.988 212.075 190.118 210.174 194.816 206.18C207.04 193.341 223.254 185.029 240.806 182.592C264.046 179.55 287.39 187.373 304.103 203.8C308.176 208.044 309.535 211.268 322.598 211.268H334.988C343.228 211.326 351.139 208.018 356.879 202.107L401.682 156.967C405.223 153.394 406.291 148.05 404.395 143.388C402.416 138.669 397.801 135.597 392.687 135.581H19.3536C14.3744 135.628 9.61399 137.638 6.11399 141.185C2.60879 144.763 0.66093 149.581 0.68693 154.592V191.925C0.681722 201.972 8.62961 210.222 18.6709 210.592L18.6788 211.435ZM537.439 209.404L370.119 376.55L342.291 405.228C339.093 408.545 334.681 410.42 330.072 410.42C325.463 410.42 321.051 408.545 317.853 405.228L210.437 297.812C207.119 294.614 205.245 290.202 205.245 285.593C205.245 280.983 207.119 276.572 210.437 273.374L238.776 245.035C241.969 241.77 246.344 239.926 250.911 239.926C255.474 239.926 259.849 241.77 263.042 245.035L329.391 311.895L485.004 156.282C488.202 152.964 492.614 151.089 497.223 151.089C501.833 151.089 506.244 152.964 509.442 156.282L537.442 184.626C540.812 187.923 542.656 192.47 542.536 197.183C542.562 201.777 540.723 206.183 537.442 209.402L537.439 209.404Z"
+            fill-rule="evenodd"
+            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
+            clip-rule="evenodd"
           />
-        </g>
-        <defs>
-          <clipPath id="clip0_1_4">
-            <rect width="542.541" height="410.42" />
-          </clipPath>
-        </defs>
-      </svg>
-    </span>
+        </svg>
+      </span>
 
-    <span class="hidden sm:inline">Select All ({$filteredChannels.length})</span>
-  </DefaultButton>
+      <span class="hidden sm:inline">Select All ({$filteredChannels.length})</span>
+    </DefaultButton>
   {/if}
 </div>
diff --git a/src/components/SquareButton.svelte b/src/components/SquareButton.svelte
new file mode 100644
index 000000000..f1169695d
--- /dev/null
+++ b/src/components/SquareButton.svelte
@@ -0,0 +1,8 @@
+<button
+  {...$$restProps}
+  type="button"
+  on:click
+  class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-sm h-10 w-10 flex items-center justify-center"
+>
+  <slot />
+</button>
diff --git a/src/pages/channel/+page.svelte b/src/pages/channel/+page.svelte
index ccd807bc6..537412f9c 100644
--- a/src/pages/channel/+page.svelte
+++ b/src/pages/channel/+page.svelte
@@ -47,7 +47,7 @@
     {#if channel}
       <div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
         <div
-          class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
+          class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
         >
           <div class="w-1/3 overflow-hidden">
             <h1 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h1>
@@ -64,7 +64,7 @@
     {#if streams.length}
       <div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
         <div
-          class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
+          class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
         >
           <div class="w-1/3 overflow-hidden">
             <h3 class="text-l font-medium text-gray-900 dark:text-white">Streams</h3>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index e15c51d98..f753fbe6f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -11,9 +11,10 @@ module.exports = {
       },
       colors: {
         primary: {
-          light: '#2f4368',
-          default: '#293b5b',
-          dark: '#253552'
+          400: '#61a5fa',
+          500: '#3b82f6',
+          600: '#2664ec',
+          700: '#1d4ed8'
         }
       }
     }