Improve default tailwind theme (#1556)

* wip * New Layout * New Layout * build assets * fix phpstan
Power-Components · May 22, 2024 · 431d609 · 431d609
1 parent 211426d
commit 431d609
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 95 deletions.
diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
@@ -34,3 +34,6 @@
 .pg-enabled-filters-base {
     @apply flex items-center gap-2 mt-2 md:mt-0 flex-wrap
 }
+
+
+
diff --git a/resources/views/components/frameworks/tailwind/footer.blade.php b/resources/views/components/frameworks/tailwind/footer.blade.php
@@ -14,10 +14,10 @@
                 count(data_get($setUp, 'footer.perPageValues')) > 1 &&
                 blank(data_get($setUp, 'footer.pagination')))
             <div class="flex flex-row justify-center md:justify-start mb-2 md:mb-0">
-                <div class="relative h-10">
+                <div class="relative">
                     <select
                         wire:model.live="setUp.footer.perPage"
-                        class="pg-select block appearance-none bg-pg-primary-50 border border-pg-primary-300 text-pg-primary-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-pg-primary-500 dark:bg-pg-primary-700 dark:text-pg-primary-200 dark:placeholder-pg-primary-200 dark:border-pg-primary-600 {{ data_get($theme, 'footer.selectClass') }}"
+                        class="{{ data_get($theme, 'footer.selectClass') }}"
                         style="{{ data_get($theme, 'footer.selectStyle') }}"
                     >
                         @foreach (data_get($setUp, 'footer.perPageValues') as $value)
@@ -30,7 +30,6 @@ class="pg-select block appearance-none bg-pg-primary-50 border border-pg-primary
                             </option>
                         @endforeach
                     </select>
-
                     <div
                         class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-pg-primary-700 dark:text-pg-primary-300">
                         <x-livewire-powergrid::icons.down class="w-4 h-4" />

diff --git a/resources/views/components/frameworks/tailwind/header/enabled-filters.blade.php b/resources/views/components/frameworks/tailwind/header/enabled-filters.blade.php
@@ -1,3 +1,4 @@
+
 @if (count($enabledFilters))
     <div
         data-cy="enabled-filters"
@@ -7,11 +8,10 @@ class="pg-enabled-filters-base"
             <div class="flex group items-center gap-3 cursor-pointer">
                 <span
                     wire:click.prevent="clearAllFilters"
-                    class="rounded-full group-hover:text-pg-primary-800 group-hover:dark:text-pg-primary-300 outline-none inline-flex items-center border px-2 py-0.5 font-bold
-                     text-xs border-pg-primary-500 bg-pg-primary-200 dark:bg-pg-primary-600 dark:border-transparent dark:text-pg-primary-100 pg-enabled-filters-span-clear-all"
+                    class="select-none rounded-md outline-none inline-flex items-center border px-2 py-0.5 font-bold text-xs border-pg-primary-300 bg-white dark:border-2 dark:border-pg-primary-600 dark:bg-pg-primary-800 dark:text-pg-primary-300 dark:hover:text-pg-primary-400 text-pg-primary-600 hover:text-pg-primary-500"
                 >
                     {{ trans('livewire-powergrid::datatable.buttons.clear_all_filters') }}
-                    <x-livewire-powergrid::icons.x class="w-4 h-4" />
+                    <x-livewire-powergrid::icons.x class="w-4 h-4 ml-1" />
                 </span>
             </div>
         @endif
@@ -25,11 +25,10 @@ class="flex group items-center gap-3 cursor-pointer"
                     <span
                         data-cy="enabled-filters-clear-{{ $filter['field'] }}"
                         wire:click.prevent="clearFilter('{{ $filter['field'] }}')"
-                        class="rounded-full group-hover:text-pg-primary-600 group-hover:dark:text-pg-primary-300 outline-none inline-flex items-center border px-2 py-0.5 font-bold
-                        text-xs border-pg-primary-500 bg-pg-primary-100 dark:bg-pg-primary-700 dark:bg-opacity-80 dark:border-transparent dark:text-pg-primary-200 dark:text-pg-primary-50 pg-enabled-filters-span"
+                        class="select-none rounded-md outline-none inline-flex items-center border px-2 py-0.5 font-bold text-xs border-pg-primary-300 bg-white dark:border-2 dark:border-pg-primary-600 dark:bg-pg-primary-800 dark:text-pg-primary-300 dark:hover:text-pg-primary-400 text-pg-primary-600 hover:text-pg-primary-500"
                     >
                         {{ $filter['label'] }}
-                        <x-livewire-powergrid::icons.x class="w-4 h-4" />
+                        <x-livewire-powergrid::icons.x class="w-4 h-4 ml-1" />
                     </span>
                 </div>
             @endisset

diff --git a/resources/views/components/frameworks/tailwind/header/export.blade.php b/resources/views/components/frameworks/tailwind/header/export.blade.php
@@ -5,8 +5,7 @@
 >
     <button
         @click.prevent="open = true"
-        class="pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700
-    dark:ring-offset-pg-primary-800 dark:text-pg-primary-400 dark:bg-pg-primary-700"
+        class="focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 rounded-md border-0 bg-transparent py-2 px-3 ring-0 placeholder:text-gray-400 focus:outline-none focus:ring-transparent sm:text-sm sm:leading-6 w-auto"
     >
         <div class="flex">
             <x-livewire-powergrid::icons.download class="h-5 w-5 text-pg-primary-500 dark:text-pg-primary-300" />

diff --git a/resources/views/components/frameworks/tailwind/header/multi-sort.blade.php b/resources/views/components/frameworks/tailwind/header/multi-sort.blade.php
@@ -10,14 +10,14 @@
                     wire:key="{{ $tableName }}-multi-sort-{{ $field }}"
                     wire:click.prevent="sortBy('{{ $field }}')"
                     title="{{ __(':label :sort', ['label' => $label, 'sort' => $sort]) }}"
-                    class="group gap-2 cursor-pointer border border-pg-primary-200 inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-pg-primary-100 text-pg-primary-700 dark:bg-pg-primary-700 dark:text-pg-primary-300"
+                    class="group cursor-pointer select-none rounded-md outline-none inline-flex items-center border px-2 py-0.5 font-bold text-xs border-pg-primary-300 bg-white dark:border-2 dark:border-pg-primary-600 dark:bg-pg-primary-800 dark:text-pg-primary-300 dark:hover:text-pg-primary-400 text-pg-primary-600 hover:text-pg-primary-500"
                 >
                     {{ $label }}
                     @if ($sort == 'desc')
-                        <x-livewire-powergrid::icons.chevron-down class="w-4 h-4 group-hover:hidden" />
-                        <x-livewire-powergrid::icons.x class="w-4 h-4 hidden group-hover:block transition-all" />
+                        <x-livewire-powergrid::icons.chevron-down class="w-4 h-4 ml-1 group-hover:hidden" />
+                        <x-livewire-powergrid::icons.x class="w-4 h-4 ml-1 hidden group-hover:block transition-all" />
                     @else
-                        <x-livewire-powergrid::icons.chevron-up class="w-4 h-4" />
+                        <x-livewire-powergrid::icons.chevron-up class="w-4 h-4 ml-1" />
                     @endif
                 </span>
             @endforeach

diff --git a/resources/views/components/frameworks/tailwind/header/soft-deletes.blade.php b/resources/views/components/frameworks/tailwind/header/soft-deletes.blade.php
@@ -6,8 +6,7 @@ class="mr-0 sm:mr-2 mt-2 sm:mt-0"
     >
         <button
             @click.prevent="open = ! open"
-            class="pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700
-    dark:ring-offset-pg-primary-800 dark:text-pg-primary-400 dark:bg-pg-primary-800"
+            class="focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 rounded-md border-0 bg-transparent py-2 px-3 ring-0 placeholder:text-gray-400 focus:outline-none focus:ring-transparent sm:text-sm sm:leading-6 w-auto"
         >
             <div class="flex">
                 <x-livewire-powergrid::icons.trash class="text-pg-primary-500 dark:text-pg-primary-300" />

diff --git a/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php b/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php
@@ -6,8 +6,7 @@ class="mr-2 mt-2 sm:mt-0"
     >
         <button
             @click.prevent="open = ! open"
-            class="pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700
-    dark:ring-offset-pg-primary-800 dark:text-pg-primary-400 dark:bg-pg-primary-700"
+            class="focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 rounded-md border-0 bg-transparent py-2 px-3 ring-0 placeholder:text-gray-400 focus:outline-none focus:ring-transparent sm:text-sm sm:leading-6 w-auto"
         >
             <div class="flex">
                 <x-livewire-powergrid::icons.eye-off class="w-5 h-5 text-pg-primary-500 dark:text-pg-primary-300" />