update dropdown and buttons style

tomatophp · Dec 28, 2023 · 96932de · 96932de
1 parent 44da3bf
commit 96932de
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 32 deletions.
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
@@ -1,25 +1,36 @@
-@if($type === 'link')
+@if($type === 'link' && !isset($icon))
 <x-splade-link  {{ $attributes->class([
-        'filament-button inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors',
+        'filament-button inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border',
         'focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2.25rem] px-4',
         'text-sm shadow-sm focus:ring-white filament-page-button-action',
         'bg-danger-600 hover:bg-danger-500 focus:bg-danger-700 focus:ring-offset-danger-700 text-white border-transparent' => $danger,
         'bg-warning-600 hover:bg-warning-500 focus:bg-warning-700 focus:ring-offset-warning-700 text-white border-transparent' => $warning,
         'bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700 text-white border-transparent' => $primary,
         'bg-success-600 hover:bg-success-500 focus:bg-success-700 focus:ring-offset-success-700 text-white border-transparent' => $success,
         'bg-white hover:bg-gray-50 focus:bg-gray-100 focus:ring-offset-gray-95 text-gray-950 ring-gray-950/10 dark:bg-gray-800 dark:text-gray-200' => $secondary,
+        'cursor-pointer transition-colors ease-in-out duration-20'
     ]) }} :method="$method">
     {{$label ?: $slot}}
 </x-splade-link>
-@elseif($type === 'icon')
+@elseif($type === 'icon' || isset($icon))
     <x-splade-link  {{ $attributes->class([
-            'px-2',
-            'text-danger-500' => $danger,
-            'text-warning-500' => $warning,
-            'text-primary-500' => $primary,
-            'text-success-500' => $success
+            'px-2 cursor-pointer transition-colors ease-in-out duration-20',
+            'text-danger-500  hover:text-danger-400' => $danger,
+            'text-warning-500 hover:text-warning-400' => $warning,
+            'text-primary-500 hover:text-primary-400' => $primary,
+            'text-success-500 hover:text-success-400' => $success
         ]) }} title="{{$label}}" :method="$method">
-        {{$slot}}
+        @if($label)
+            <x-tomato-admin-tooltip :text="$label">
+                @if(isset($icon))
+                    <i class="{{$icon}} text-2xl"></i>
+                @else
+                    {{$label}}
+                @endif
+            </x-tomato-admin-tooltip>
+        @else
+            {{$slot}}
+        @endif
     </x-splade-link>
 @else
     <button  {{ $attributes->class([

diff --git a/resources/views/components/dropdown-item.blade.php b/resources/views/components/dropdown-item.blade.php
@@ -1,55 +1,55 @@
 @if($type === 'button')
-    <li class="whitespace-nowrap py-2 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 px-4">
-        <button {{ $attributes }} {{ $attributes->class([
+    <button {{ $attributes }} {{ $attributes->class([
             'text-gray-600 dark:text-gray-200 hover:text-black' => $black,
             'text-gray-600 dark:text-gray-200 hover:text-danger-500' => $danger,
             'text-gray-600 dark:text-gray-200 hover:text-warning-500' => $warning,
             'text-gray-600 dark:text-gray-200 hover:text-primary-500' => $primary,
             'text-gray-600 dark:text-gray-200 hover:text-success-500' => $success,
             'text-gray-600 dark:text-gray-200 hover:text-gray-500' => $secondary,
-        ]) }} class="relative flex justify-center gap-2 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ">
+        ]) }} class="whitespace-nowrap py-2 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 px-4 w-full cursor-pointer transition-colors ease-in-out duration-200 ">
+        <div  class="relative flex justify-center gap-2 ">
             <div class="flex flex-col items-center justify-center">
                 <i class="{{$icon}} text-sm"></i>
             </div>
             <div class="text-sm ">
                 {{$label}}
             </div>
-        </button>
-    </li>
+        </div>
+    </button>
 @elseif($type === 'link')
-    <li class="whitespace-nowrap py-2 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 px-4">
         <x-splade-link {{ $attributes }} {{ $attributes->class([
             'text-gray-600 dark:text-gray-200 hover:text-black' => $black,
             'text-gray-600 dark:text-gray-200 hover:text-danger-500' => $danger,
             'text-gray-600 dark:text-gray-200 hover:text-warning-500' => $warning,
             'text-gray-600 dark:text-gray-200 hover:text-primary-500' => $primary,
             'text-gray-600 dark:text-gray-200 hover:text-success-500' => $success,
             'text-gray-600 dark:text-gray-200 hover:text-gray-500' => $secondary,
-        ]) }} class="relative flex justify-center gap-2 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ">
-            <div class="flex flex-col items-center justify-center">
-                <i class="{{$icon}} text-sm"></i>
-            </div>
-            <div class="text-sm ">
-                {{$label}}
+        ]) }} class="whitespace-nowrap py-2 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 px-4 w-full cursor-pointer transition-colors ease-in-out duration-200 ">
+            <div class="relative flex justify-center gap-2">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="{{$icon}} text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{$label}}
+                </div>
             </div>
         </x-splade-link>
-    </li>
 @elseif($type === 'copy')
-    <li class="whitespace-nowrap py-2 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 px-4">
         <x-tomato-admin-copy {{ $attributes }} {{ $attributes->class([
             'text-gray-600 dark:text-gray-200 hover:text-black' => $black,
             'text-gray-600 dark:text-gray-200 hover:text-danger-500' => $danger,
             'text-gray-600 dark:text-gray-200 hover:text-warning-500' => $warning,
             'text-gray-600 dark:text-gray-200 hover:text-primary-500' => $primary,
             'text-gray-600 dark:text-gray-200 hover:text-success-500' => $success,
             'text-gray-600 dark:text-gray-200 hover:text-gray-500' => $secondary,
-        ]) }} class="relative flex justify-center gap-2 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ">
-            <div class="flex flex-col items-center justify-center">
-                <i class="{{$icon}} text-sm"></i>
-            </div>
-            <div class="text-sm ">
-                {{$label}}
+        ]) }} class="whitespace-nowrap py-2 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 px-4 w-full cursor-pointer transition-colors ease-in-out duration-200 ">
+            <div class="relative flex justify-center gap-2">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="{{$icon}} text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{$label}}
+                </div>
             </div>
         </x-tomato-admin-copy>
-    </li>
 @endif
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
@@ -11,8 +11,8 @@
         </div>
     </x-slot:trigger>
     <div class="mt-2 min-w-max rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-gray-800 shadow-lg bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
-        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
+        <div class="divide-y divide-gray-200 dark:divide-gray-700">
             {{ $slot }}
-        </ul>
+        </div>
     </div>
 </x-splade-component>