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

* chore(web): style tab button group and search bar * responsive design
immich-app · Mar 26, 2024 · 3a94be0 · 3a94be0
1 parent 6295edc
commit 3a94be0
Show file tree

Hide file tree

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