From 8f37488278debf986950f1013656ea479469d022 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 18 Sep 2023 19:40:56 +0300
Subject: [PATCH] Update components

---
 src/components/ChannelGrid.svelte          |   4 +-
 src/components/ChannelItem.svelte          | 110 +++++++++++----------
 src/components/ChannelPopup.svelte         |   8 +-
 src/components/Checkbox.svelte             |  84 ++++++++--------
 src/components/CreatePlaylistButton.svelte |  95 ++++++++++--------
 src/components/DownloadButton.svelte       |   6 +-
 src/components/SearchSyntaxPopup.svelte    |  27 ++---
 src/components/StreamsPopup.svelte         |  12 +--
 8 files changed, 184 insertions(+), 162 deletions(-)

diff --git a/src/components/ChannelGrid.svelte b/src/components/ChannelGrid.svelte
index 89d3aded5..2aa843639 100644
--- a/src/components/ChannelGrid.svelte
+++ b/src/components/ChannelGrid.svelte
@@ -12,7 +12,7 @@
           <div class="flex">
             <div class="w-36 sm:w-52 shrink-0"></div>
             <div
-              class="py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 w-52 sm:w-72 shrink-0"
+              class="py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 w-52 sm:w-80 shrink-0"
             >
               Name
             </div>
@@ -28,7 +28,7 @@
         </div>
         <div class="bg-white dark:bg-gray-800">
           {#each channels as channel (channel.id)}
-          <ChannelItem bind:channel="{channel}" />
+            <ChannelItem bind:channel />
           {/each}
         </div>
       </div>
diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 24ee0b551..590935ba7 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -62,12 +62,12 @@
 </script>
 
 {#if $downloadMode}
-<div
-  transition:fade="{{duration:200}}"
-  class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
->
-  <Checkbox selected="{isSelected}" on:change="{onCheckboxChange}" />
-</div>
+  <div
+    transition:fade={{ duration: 200 }}
+    class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
+  >
+    <Checkbox selected={isSelected} on:change={onCheckboxChange} />
+  </div>
 {/if}
 <div
   class="border-b last:border-b-0 border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-700 h-16 flex items-center relative"
@@ -75,50 +75,58 @@
   <div class="px-4 sm:pl-10 sm:pr-16 w-36 sm:w-52 flex shrink-0 items-center justify-center">
     <div class="inline-flex items-center justify-center whitespace-nowrap overflow-hidden">
       {#if channel.logo}
-      <img
-        class="block align-middle mx-auto max-w-[6rem] max-h-[2.75rem] text-sm text-gray-400 dark:text-gray-600 cursor-defaults"
-        loading="lazy"
-        referrerpolicy="no-referrer"
-        src="{channel.logo}"
-        alt="{channel.name}"
-      />
+        <img
+          class="block align-middle mx-auto max-w-[6rem] max-h-[2.75rem] text-sm text-gray-400 dark:text-gray-600 cursor-defaults"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src={channel.logo}
+          alt={channel.name}
+        />
       {/if}
     </div>
   </div>
-  <div class="w-52 px-2 sm:w-72 shrink-0">
+  <div class="w-52 px-2 sm:w-80 shrink-0">
     <div>
       <div class="text-left">
         <div class="flex space-x-2 items-center">
           <a
-            on:click|preventDefault="{showChannelData}"
+            on:click|preventDefault={showChannelData}
             href="/channel?id={channel.id}"
             tabindex="0"
             class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 line-clamp-1"
-            title="{channel.name}"
+            title={channel.name}
           >
             {channel.name}
           </a>
-          {#if channel.is === 'closed'}
-          <div
-            class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full"
-            title="closed: {channel.closed}"
-          >
-            Closed
-          </div>
+          {#if channel.is_closed}
+            <div
+              class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full"
+              title="closed: {channel.closed}"
+            >
+              Closed
+            </div>
+          {/if}
+          {#if channel.is_blocked}
+            <div
+              class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full"
+              title="The channel has been added to our blocklist due to the claim of the copyright holder"
+            >
+              Blocked
+            </div>
           {/if}
         </div>
         {#if channel.alt_names.length}
-        <div
-          class="text-sm text-gray-400 dark:text-gray-400 line-clamp-1"
-          title="{channel.alt_names.join(', ')}"
-        >
-          {channel.alt_names.join(', ')}
-        </div>
+          <div
+            class="text-sm text-gray-400 dark:text-gray-400 line-clamp-1"
+            title={channel.alt_names.join(', ')}
+          >
+            {channel.alt_names.join(', ')}
+          </div>
         {/if}
       </div>
     </div>
   </div>
-  <div class="w-52 px-2 sm:w-72">
+  <div class="w-52 px-2 sm:w-80">
     <div>
       <code
         class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono"
@@ -126,7 +134,7 @@
       >
     </div>
   </div>
-  <div class="w-52 px-4 sm:56">
+  <div class="w-40 px-6 sm:w-[150px]">
     <div class="text-right flex justify-end space-x-3 items-center">
       <!-- {#if guides.length}
       <button
@@ -154,28 +162,28 @@
       </button>
       {/if} -->
       {#if streams.length}
-      <button
-        on:click="{showStreams}"
-        class="text-sm text-gray-500 dark:text-gray-100 inline-flex space-x-1 flex items-center hover:text-blue-500 dark:hover:text-blue-400"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          stroke-width="2"
+        <button
+          on:click={showStreams}
+          class="text-sm text-gray-500 dark:text-gray-100 inline-flex space-x-1 flex items-center hover:text-blue-500 dark:hover:text-blue-400"
         >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"
-          />
-        </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"
+            />
+          </svg>
 
-        <div>{streams.length}</div>
-        <div>{pluralize(streams.length, 'stream')}</div>
-      </button>
+          <div>{streams.length}</div>
+          <div>{pluralize(streams.length, 'stream')}</div>
+        </button>
       {/if}
     </div>
   </div>
diff --git a/src/components/ChannelPopup.svelte b/src/components/ChannelPopup.svelte
index df2c7f4ff..9215eeff9 100644
--- a/src/components/ChannelPopup.svelte
+++ b/src/components/ChannelPopup.svelte
@@ -10,7 +10,7 @@
   }
 </script>
 
-<div class="relative px-2 py-24 flex justify-center" on:keypress on:click|self="{closePopup}">
+<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"
@@ -21,7 +21,7 @@
 
       <div class="inline-flex w-1/3 justify-end">
         <button
-          on:click="{closePopup}"
+          on:click={closePopup}
           type="button"
           class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
         >
@@ -40,9 +40,9 @@
         </button>
       </div>
     </div>
-    <div class="overflow-y-scroll overflow-x-hidden w-full">
+    <div class="overflow-y-auto overflow-x-hidden w-full">
       <div class="p-12 pt-10">
-        <HTMLPreview data="{channel}" close="{closePopup}" />
+        <HTMLPreview data={channel} close={closePopup} />
       </div>
     </div>
   </div>
diff --git a/src/components/Checkbox.svelte b/src/components/Checkbox.svelte
index 32273f9d7..b6fc00da7 100644
--- a/src/components/Checkbox.svelte
+++ b/src/components/Checkbox.svelte
@@ -12,47 +12,47 @@
 </script>
 
 {#if selected}
-<button
-  class="w-12 h-12 rounded-full text-accent-500 hover:text-accent-600 dark:hover:text-accent-400 transition-colors duration-200 flex items-center justify-center"
-  area-label="Unselect"
-  on:click="{() => toggle(false)}"
->
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-    <path
-      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"
-    />
-  </svg>
-</button>
-{:else if indeterminate}
-<button
-  class="w-12 h-12 rounded-full text-accent-500 hover:text-accent-600 dark:hover:text-accent-400 transition-colors duration-200 flex items-center justify-center"
-  area-label="Unselect"
-  on:click="{() => toggle(false)}"
->
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-    <path
-      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"
-    />
-  </svg>
-</button>
-{:else}
-<button
-  class="w-12 h-12 rounded-full text-gray-200 hover:text-gray-400 dark:text-gray-700 dark:hover:text-gray-600 transition-colors duration-200 flex items-center justify-center"
-  area-label="Select"
-  on:click="{() => toggle(true)}"
->
-  <svg
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    class="w-6 h-6"
-    stroke="currentColor"
-    stroke-width="1.5"
+  <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"
+    area-label="Unselect"
+    on:click={() => toggle(false)}
   >
-    <circle cx="12" cy="12" r="10" fill="none" />
-  </svg>
-</button>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+      <path
+        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"
+      />
+    </svg>
+  </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"
+    area-label="Unselect"
+    on:click={() => toggle(false)}
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+      <path
+        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"
+      />
+    </svg>
+  </button>
+{:else}
+  <button
+    class="w-12 h-12 rounded-full text-gray-200 hover:text-gray-400 dark:text-gray-700 dark:hover:text-gray-600 transition-colors duration-200 flex items-center justify-center"
+    area-label="Select"
+    on:click={() => toggle(true)}
+  >
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      class="w-6 h-6"
+      stroke="currentColor"
+      stroke-width="1.5"
+    >
+      <circle cx="12" cy="12" r="10" fill="none" />
+    </svg>
+  </button>
 {/if}
diff --git a/src/components/CreatePlaylistButton.svelte b/src/components/CreatePlaylistButton.svelte
index 1f8ef7630..81aab338f 100644
--- a/src/components/CreatePlaylistButton.svelte
+++ b/src/components/CreatePlaylistButton.svelte
@@ -8,50 +8,59 @@
 
 <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>
+    <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-accent-500 hover:bg-accent-600 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>
+    <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}
 </div>
diff --git a/src/components/DownloadButton.svelte b/src/components/DownloadButton.svelte
index c8dec5901..f2b9cd777 100644
--- a/src/components/DownloadButton.svelte
+++ b/src/components/DownloadButton.svelte
@@ -24,9 +24,9 @@
 
 <div class="w-14 sm:w-44">
   <button
-    class="rounded-md bg-accent-500 hover:bg-accent-600 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}"
+    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"
   >
     <span class="sm:hidden inline">
diff --git a/src/components/SearchSyntaxPopup.svelte b/src/components/SearchSyntaxPopup.svelte
index 8b485a2c0..beb476432 100644
--- a/src/components/SearchSyntaxPopup.svelte
+++ b/src/components/SearchSyntaxPopup.svelte
@@ -29,17 +29,22 @@
     { query: 'broadcast_area:c/CV', result: 'Finds channels that are broadcast in Cape Verde.' },
     { query: 'languages:fra', result: 'Find channels that are broadcast in French.' },
     { query: 'categories:news', result: 'Finds all the news channels.' },
-    { query: 'is_nsfw:true', result: 'Finds channels marked as NSFW.' },
     { query: 'website:.', result: 'Finds channels that have a link to the official website.' },
+    { query: 'is_nsfw:true', result: 'Finds channels marked as NSFW.' },
     {
-      query: 'is:closed',
+      query: 'is_closed:true',
       result: 'Finds channels that have been closed.'
     },
+    {
+      query: 'is_blocked:true',
+      result:
+        'Finds channels that have been added to our blocklist due to the claim of the copyright holder.'
+    },
     { query: 'streams:<2', result: 'Finds channels with less than 2 streams.' }
   ]
 </script>
 
-<div class="relative px-2 py-20 flex justify-center" on:keypress on:click|self="{close}">
+<div class="relative px-2 py-20 flex justify-center" on:keypress on:click|self={close}>
   <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
     <div
       class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
@@ -48,7 +53,7 @@
         {title}
       </h3>
       <button
-        on:click="{close}"
+        on:click={close}
         type="button"
         class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
       >
@@ -66,7 +71,7 @@
         </svg>
       </button>
     </div>
-    <div class="overflow-y-scroll overflow-x-hidden w-full">
+    <div class="overflow-y-auto overflow-x-hidden w-full">
       <div class="p-6 text-gray-800 dark:text-white">
         <table class="w-full">
           <thead>
@@ -77,12 +82,12 @@
           </thead>
           <tbody class="text-left">
             {#each examples as example}
-            <tr class="even:bg-gray-50 even:dark:bg-gray-700">
-              <td class="border dark:border-gray-700 px-4 py-3 whitespace-nowrap">
-                {example.query}
-              </td>
-              <td class="border dark:border-gray-700 px-4 py-3">{example.result}</td>
-            </tr>
+              <tr class="even:bg-gray-50 even:dark:bg-gray-700">
+                <td class="border dark:border-gray-700 px-4 py-3 whitespace-nowrap">
+                  {example.query}
+                </td>
+                <td class="border dark:border-gray-700 px-4 py-3">{example.result}</td>
+              </tr>
             {/each}
           </tbody>
         </table>
diff --git a/src/components/StreamsPopup.svelte b/src/components/StreamsPopup.svelte
index 4e971a828..6927314ae 100644
--- a/src/components/StreamsPopup.svelte
+++ b/src/components/StreamsPopup.svelte
@@ -7,7 +7,7 @@
   export let title = 'Streams'
 </script>
 
-<div class="relative px-2 py-32 flex justify-center" on:keypress on:click|self="{close}">
+<div class="relative px-2 py-32 flex justify-center" on:keypress on:click|self={close}>
   <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
     <div
       class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
@@ -29,11 +29,11 @@
               stroke-linejoin="round"
               d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"
             />
-          </svg> </span
-        >{title}
+          </svg>
+        </span>{title}
       </h3>
       <button
-        on:click="{close}"
+        on:click={close}
         type="button"
         class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
       >
@@ -51,10 +51,10 @@
         </svg>
       </button>
     </div>
-    <div class="overflow-y-scroll overflow-x-hidden w-full">
+    <div class="overflow-y-auto overflow-x-hidden w-full">
       <div class="p-6 space-y-2">
         {#each streams as stream}
-        <StreamItem stream="{stream}" />
+          <StreamItem {stream} />
         {/each}
       </div>
     </div>