From e7c9aa44f9f317c509e7f59de9d956e7b3f0062d Mon Sep 17 00:00:00 2001
From: Mykyta Mykulskyi <my.garbage813@gmail.com>
Date: Mon, 2 Dec 2024 18:53:46 +0100
Subject: [PATCH] style: change searchbar design

---
 resources/js/Pages/Admin/Quizzes.vue          | 2 +-
 resources/js/Pages/Admin/SchoolsPanel.vue     | 6 +++---
 resources/js/components/Common/NoContent.vue  | 5 ++---
 resources/js/components/Common/Pagination.vue | 6 +++---
 resources/js/components/Crud/CrudPage.vue     | 8 ++++----
 resources/js/components/Crud/SearchBar.vue    | 8 ++++----
 6 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/resources/js/Pages/Admin/Quizzes.vue b/resources/js/Pages/Admin/Quizzes.vue
index 9d3e89f1..c1a2b875 100644
--- a/resources/js/Pages/Admin/Quizzes.vue
+++ b/resources/js/Pages/Admin/Quizzes.vue
@@ -57,7 +57,7 @@ function customQueries(): string[] {
     <template #actions>
       <button
         :title="`${hideArchivedQuizzes ? 'Wyświetl' : 'Schowaj'} zarchiwizowane testy`"
-        class="flex gap-2 hover:bg-primary/5 hover:text-primary duration-200 p-2 rounded-lg"
+        class="flex gap-2 hover:bg-primary/5 hover:text-primary duration-200 p-2 rounded-lg h-fit"
         @click="hideArchivedQuizzes = !hideArchivedQuizzes"
       >
         <ArchiveDynamicIcon :active="hideArchivedQuizzes" />
diff --git a/resources/js/Pages/Admin/SchoolsPanel.vue b/resources/js/Pages/Admin/SchoolsPanel.vue
index 2e566d80..8dcf87fb 100644
--- a/resources/js/Pages/Admin/SchoolsPanel.vue
+++ b/resources/js/Pages/Admin/SchoolsPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {Head, router} from '@inertiajs/vue3'
-import { ArrowUpCircleIcon } from '@heroicons/vue/20/solid'
+import { ArrowDownCircleIcon } from '@heroicons/vue/20/solid'
 import AddressInput from '@/components/Common/AddressInput.vue'
 import CrudPage from '@/components/Crud/CrudPage.vue'
 import Expand from '@/components/Common/Expand.vue'
@@ -105,7 +105,7 @@ function startFetching() {
     creatable
   >
     <template #actions>
-      <Expand />
+      <Expand class="hidden sm:block" />
 
       <Button
         :disabled="!status"
@@ -113,7 +113,7 @@ function startFetching() {
         :class="{'cursor-pointer': status}"
         @click="startFetching()"
       >
-        <ArrowUpCircleIcon class="size-6 text-white" /> Importuj szkoły
+        <ArrowDownCircleIcon class="size-6 text-white" /> Importuj szkoły
       </Button>
     </template>
 
diff --git a/resources/js/components/Common/NoContent.vue b/resources/js/components/Common/NoContent.vue
index 78164267..13a10752 100644
--- a/resources/js/components/Common/NoContent.vue
+++ b/resources/js/components/Common/NoContent.vue
@@ -7,9 +7,8 @@ withDefaults(defineProps<{ title?: string, description?: string }>(), {
 
 <template>
   <div class="flex flex-col gap-1 p-5 bg-white/70 border-2 rounded-xl shadow-sm">
-    <h1 class="text-2xl mb-4 text-primary font-bold">{{ title }}</h1>
-    <p class="mb-8 text-gray-500">{{ description }}</p>
-
+    <h1 class="text-xl text-primary font-bold">{{ title }}</h1>
+    <p class="mb-1 text-gray-500">{{ description }}</p>
     <slot />
   </div>
 </template>
diff --git a/resources/js/components/Common/Pagination.vue b/resources/js/components/Common/Pagination.vue
index 6dab43f0..d372f2d5 100644
--- a/resources/js/components/Common/Pagination.vue
+++ b/resources/js/components/Common/Pagination.vue
@@ -5,8 +5,8 @@ defineProps<{ data: Pagination<T>, query: string }>()
 </script>
 
 <template>
-  <div class="flex items-center gap-1 justify-between">
-    <LinkButton :disabled="!data.links.prev" :href="data.links.prev + query ?? ''" icon>
+  <div class="p-2 flex items-center gap-1 justify-between">
+    <LinkButton :disabled="!data.links.prev" :href="data.links.prev + (query ?? '')" icon>
       {{ '<' }}
     </LinkButton>
 
@@ -14,7 +14,7 @@ defineProps<{ data: Pagination<T>, query: string }>()
       {{ data.meta.from ?? 0 }} - {{ data.meta.to ?? 0 }}
     </div>
 
-    <LinkButton :disabled="!data.links.next" :href="data.links.next + query ?? ''" icon>
+    <LinkButton :disabled="!data.links.next" :href="data.links.next + (query ?? '')" icon>
       {{ '>' }}
     </LinkButton>
   </div>
diff --git a/resources/js/components/Crud/CrudPage.vue b/resources/js/components/Crud/CrudPage.vue
index 25854322..83d22cdd 100644
--- a/resources/js/components/Crud/CrudPage.vue
+++ b/resources/js/components/Crud/CrudPage.vue
@@ -64,16 +64,16 @@ const [query, options] = useSorter(props.options, searchValue, props.customQueri
 
 <template>
   <div class="flex flex-col w-full pb-3">
-    <div data-name="toolbar" class="flex xs:flex-row px-4 gap-1 sm:gap-2" :class="{ 'flex-col': mobileNav }">
+    <div data-name="toolbar" class="flex xs:flex-row px-4 gap-2" :class="{ 'flex-col': mobileNav }">
       <Dropdown pointer-position="left" class-btn="rounded-lg" class="mr-auto" :options="options" title="Sortuj">
-        <div class="flex gap-2 hover:bg-primary/5 hover:text-primary duration-200 p-2 rounded-lg">
+        <div class="flex gap-2 hover:bg-primary/5 hover:text-primary duration-200 p-2 rounded-lg h-fit">
           <ArrowsUpDownIcon class="size-6" />
           <span class="hidden sm:block">Sortuj</span>
         </div>
       </Dropdown>
 
       <slot name="actions">
-        <Expand />
+        <Expand class="hidden" />
       </slot>
 
       <Button
@@ -89,7 +89,7 @@ const [query, options] = useSorter(props.options, searchValue, props.customQueri
     </div>
 
     <div class="flex w-full px-4 mt-2 justify-between gap-2">
-      <SearchBar class="w-full max-w-96" :default-value="displaySearchInLowerCase ? params.search?.toLowerCase() : params.search" @search="handleSearch" />
+      <SearchBar class="w-full" :default-value="displaySearchInLowerCase ? params.search?.toLowerCase() : params.search" @search="handleSearch" />
       <Pagination :data="pagination" :query="query" />
     </div>
 
diff --git a/resources/js/components/Crud/SearchBar.vue b/resources/js/components/Crud/SearchBar.vue
index 38afbf54..9f68628d 100644
--- a/resources/js/components/Crud/SearchBar.vue
+++ b/resources/js/components/Crud/SearchBar.vue
@@ -20,20 +20,20 @@ const handleInput = useDebounceFn(() => {
 </script>
 
 <template>
-  <div class="flex items-center text-gray-400 gap-1 rounded-xl h-10 bg-gray-100">
+  <div class="flex gap-1 bg-white/70 text-primary duration-200 p-1 rounded-xl w-full border border-primary/5">
     <input
       ref="input"
       v-model="text"
       type="text"
       autocomplete="off"
       placeholder="Szukaj"
-      class="pl-2 transition-none size-full outline-none text-primary text-left rounded-xl bg-transparent"
+      class="pl-2 transition-none size-full outline-none text-primary placeholder:text-primary/60 text-left rounded-lg bg-transparent"
       @keyup="handleKeyUp"
       @input="handleInput"
     >
 
-    <div title="Szukaj" class="flex gap-2 hover:bg-primary/5 hover:text-primary duration-200 p-2 rounded-xl" @click="emit('search', text);">
-      <MagnifyingGlassIcon class="size-5" />
+    <div title="Szukaj" class="flex gap-2 hover:bg-primary/5 hover:text-primary duration-200 p-2 rounded-lg cursor-pointer" @click="emit('search', text);">
+      <MagnifyingGlassIcon class="size-5 stroke-2" />
     </div>
   </div>
 </template>