style: change searchbar design

blumilksoftware · Dec 2, 2024 · e7c9aa4 · e7c9aa4
1 parent ba33db2
commit e7c9aa4
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 18 deletions.
diff --git 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
@@ -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,15 +105,15 @@ function startFetching() {
     creatable
   >
     <template #actions>
-      <Expand />
+      <Expand class="hidden sm:block" />
 
       <Button
         :disabled="!status"
         class="rounded-xl"
         :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
@@ -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
@@ -5,16 +5,16 @@ 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>
 
     <div class="text-nowrap text-center min-w-20">
       {{ 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
@@ -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
@@ -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>