design changes

marwan · Mar 27, 2024 · e5a47b3 · e5a47b3
1 parent 88e36eb
commit e5a47b3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>