From e5a47b34427c6f70b0ca14d8c4461b30e8720eeb Mon Sep 17 00:00:00 2001
From: Marwan Ansari <8071158+marwan@users.noreply.github.com>
Date: Thu, 28 Mar 2024 02:54:35 +0530
Subject: [PATCH] design changes

---
 public/global.css                     | 4 ++++
 src/components/ui/BottomNavbar.svelte | 8 ++++----
 src/views/Issues.svelte               | 2 +-
 src/views/Search.svelte               | 8 +++++---
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/public/global.css b/public/global.css
index 1dea8fa6..36a95a8b 100644
--- a/public/global.css
+++ b/public/global.css
@@ -76,6 +76,10 @@ input:disabled {
   color: #ccc;
 }
 
+input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 /* button {
 	color: #333;
 	background-color: #f4f4f4;
diff --git a/src/components/ui/BottomNavbar.svelte b/src/components/ui/BottomNavbar.svelte
index 56229f3c..f5942f05 100644
--- a/src/components/ui/BottomNavbar.svelte
+++ b/src/components/ui/BottomNavbar.svelte
@@ -37,13 +37,13 @@
   <div class="{$bottomNavbarVisibleStore === true ? 'block' : 'hidden'} fixed z-20 w-full h-16 max-w-xs md:max-w-lg shadow-md -translate-x-1/2 bg-white backdrop-filter backdrop-blur-lg bg-opacity-50 border border-gray-200 rounded-full bottom-4 left-1/2 grayscale">
     <div class="grid h-full max-w-lg grid-cols-5 mx-auto">
       <!-- Previous Chapter -->
-      <Link to="/{$chapterNumberStore - 1}" class="{$chapterNumberStore === 1 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group">
+      <Link to="/{$chapterNumberStore - 1}" class="{$chapterNumberStore === 1 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <ChevronLeft />
         <span class="sr-only">Previous Chapter</span>
       </Link>
 
       <!-- 2nd icon -->
-      <button type="button" on:click={() => updateSettings({ type: "displayType", value: $displayTypeStore === 5 ? 1 : $displayTypeStore + 1 })} class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
+      <button type="button" on:click={() => updateSettings({ type: "displayType", value: $displayTypeStore === 5 ? 1 : $displayTypeStore + 1 })} class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <Eye />
         <span class="sr-only">Display Type</span>
       </button>
@@ -58,13 +58,13 @@
       </div>
 
       <!-- 4th icon -->
-      <button type="button" data-drawer-target="settings-drawer" data-drawer-show="settings-drawer" data-drawer-placement="right" aria-controls="settings-drawer" class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
+      <button type="button" data-drawer-target="settings-drawer" data-drawer-show="settings-drawer" data-drawer-placement="right" aria-controls="settings-drawer" class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <Settings />
         <span class="sr-only">Settings</span>
       </button>
 
       <!-- Next Chapter -->
-      <Link to="/{$chapterNumberStore + 1}" class="{$chapterNumberStore === 114 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group">
+      <Link to="/{$chapterNumberStore + 1}" class="{$chapterNumberStore === 114 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <ChevronRight />
         <span class="sr-only">Next Chapter</span>
       </Link>
diff --git a/src/views/Issues.svelte b/src/views/Issues.svelte
index 93622d25..311e822e 100644
--- a/src/views/Issues.svelte
+++ b/src/views/Issues.svelte
@@ -47,7 +47,7 @@
               <!-- labels -->
               <div class="inline-flex ml-2 space-x-2">
                 {#each Object.entries(value.labels) as [id, label]}
-                  <span class="flex py-1 px-3 bg-[#ebebeb] rounded-lg text-xs items-center hover:bg-[#ebebeb] dark:hover:bg-slate-700">{label.name}</span>
+                  <span class="bg-gray-300 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full grayscale">{label.name}</span>
                 {/each}
               </div>
             </div>
diff --git a/src/views/Search.svelte b/src/views/Search.svelte
index e0f2f601..4a5166bd 100644
--- a/src/views/Search.svelte
+++ b/src/views/Search.svelte
@@ -61,9 +61,11 @@
       </select>
     </div>
 
-    <div class="relative w-full">
-      <input type="search" id="search-input" class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="Search Abraham, Mary, Noah, Paradise..." required />
-      <button on:click={(event) => (searchText = document.getElementById("search-input").value)} class="absolute top-0 end-0 p-2.5 px-6 text-sm font-medium h-full text-white bg-gray-600 rounded-e-lg border">
+    <div class="flex items-center w-full">
+      <div class="relative w-full">
+        <input type="search" id="search-input" class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="Search Abraham, Mary, Noah, Paradise..." required />
+      </div>
+      <button on:click={(event) => (searchText = document.getElementById("search-input").value)} class="p-2.5 ms-2 text-sm font-medium text-white bg-gray-500 rounded-lg border border-gray-500 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-80">
         <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
         </svg>