From 3a94be02128ca515fb9cfffb7b7fc2f6470cd567 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Tue, 26 Mar 2024 10:36:15 -0500
Subject: [PATCH] chore(web): style tab button group and search bar (#8292)

* chore(web): style tab button group and search bar

* responsive design
---
 .../lib/components/album-page/albums-controls.svelte  |  2 +-
 web/src/lib/components/album-page/albums-list.svelte  |  4 ++--
 web/src/lib/components/elements/group-tab.svelte      | 11 ++++++-----
 web/src/lib/components/elements/search-bar.svelte     |  6 +++---
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/album-page/albums-controls.svelte b/web/src/lib/components/album-page/albums-controls.svelte
index b391b061df..a5f2c92769 100644
--- a/web/src/lib/components/album-page/albums-controls.svelte
+++ b/web/src/lib/components/album-page/albums-controls.svelte
@@ -26,7 +26,7 @@
   };
 </script>
 
-<div class="hidden xl:block">
+<div class="hidden xl:block h-10">
   <GroupTab
     filters={Object.keys(AlbumFilter)}
     selected={$albumViewSettings.filter}
diff --git a/web/src/lib/components/album-page/albums-list.svelte b/web/src/lib/components/album-page/albums-list.svelte
index 1e308b463a..e42af1dbb6 100644
--- a/web/src/lib/components/album-page/albums-list.svelte
+++ b/web/src/lib/components/album-page/albums-list.svelte
@@ -263,8 +263,8 @@
 
 {#if albums.length > 0}
   <!-- Album Card -->
-  <div class=" block xl:hidden">
-    <div class="w-fit dark:text-immich-dark-fg py-2">
+  <div class="xl:hidden">
+    <div class="w-fit h-14 dark:text-immich-dark-fg py-2">
       <GroupTab
         filters={Object.keys(AlbumFilter)}
         selected={$albumViewSettings.filter}
diff --git a/web/src/lib/components/elements/group-tab.svelte b/web/src/lib/components/elements/group-tab.svelte
index 7cf4bc5e99..8ed38c8c6f 100644
--- a/web/src/lib/components/elements/group-tab.svelte
+++ b/web/src/lib/components/elements/group-tab.svelte
@@ -4,13 +4,14 @@
   export let onSelect: (selected: string) => void;
 </script>
 
-<div class=" flex bg-gray-100 dark:bg-gray-700 rounded-lg">
+<div class="flex bg-gray-200 dark:bg-immich-dark-gray rounded-2xl h-full">
   {#each filters as filter, index}
     <button
-      class="flex py-2 px-4 {filter === selected
-        ? 'dark:bg-gray-900 bg-gray-300'
-        : 'dark:hover:bg-gray-800 hover:bg-gray-200'}  {index === 0 ? 'rounded-l-lg' : ''} {index === filters.length - 1
-        ? 'rounded-r-lg'
+      class="text-sm px-4 {filter === selected
+        ? 'dark:bg-gray-700 bg-gray-300'
+        : 'dark:hover:bg-gray-800 hover:bg-gray-300'}  {index === 0 ? 'rounded-l-2xl' : ''} {index ===
+      filters.length - 1
+        ? 'rounded-r-2xl'
         : ''}"
       on:click={() => onSelect(filter)}
     >
diff --git a/web/src/lib/components/elements/search-bar.svelte b/web/src/lib/components/elements/search-bar.svelte
index 898601d0ad..21d36c4a27 100644
--- a/web/src/lib/components/elements/search-bar.svelte
+++ b/web/src/lib/components/elements/search-bar.svelte
@@ -20,8 +20,8 @@
 
 <div
   class="flex items-center text-sm {roundedBottom
-    ? 'rounded-lg'
-    : 'rounded-t-lg'} bg-gray-100 p-2 dark:bg-gray-700 gap-2 place-items-center h-full"
+    ? 'rounded-2xl'
+    : 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full"
 >
   <button on:click={() => dispatch('search', { force: true })}>
     <div class="w-fit">
@@ -31,7 +31,7 @@
   <!-- svelte-ignore a11y-autofocus -->
   <input
     autofocus
-    class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
+    class="w-full gap-2 bg-gray-200 dark:bg-immich-dark-gray dark:text-white"
     type="text"
     {placeholder}
     bind:value={name}