Refactor dropdowns to use components / cleanup.

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/filament.js": "/js/filament.js?id=575bb8a26dd76080eafa",
-    "/css/filament.css": "/css/filament.css?id=e6c622d51000290fcc6f"
+    "/css/filament.css": "/css/filament.css?id=ecd162b1ad9d5ed8507f"
 }

resources/css/components/filepond.css

@@ -2,7 +2,7 @@
   @apply font-sans;
 
   .filepond--panel-root {
-    @apply rounded bg-gray-100 border border-dashed border-gray-300;
+    @apply rounded bg-gray-50 border border-dashed border-gray-300;
   }
 
   .filepond--drop-label {

resources/css/components/lists.css

@@ -1,17 +0,0 @@
-.list-dropdown {
-  @apply bg-white shadow-sm rounded text-sm leading-tight text-left overflow-hidden;
-
-  > li {
-    @apply whitespace-nowrap;
-
-    & + * {
-      @apply border-t border-gray-300;
-    }
-  }
-
-  a,
-  button,
-  [role='menuitem'] {
-    @apply inline-block w-full py-2 px-4 transition-colors duration-200 text-gray-600 hover:bg-gray-200;
-  }
-}

resources/css/filament.css

@@ -8,7 +8,6 @@
 
 @layer components {
   @import './components/typography.css';
-  @import './components/lists.css';
   @import './components/buttons.css';
   @import './components/filepond.css';
 }

resources/views/components/app-header.blade.php

@@ -10,11 +10,9 @@
             <span class="flex-grow text-sm leading-tight font-semibold">{{ Auth::user()->name }}</span>
         </x-slot>
 
-        <ul class="list-dropdown" aria-label="{{ __('User actions') }}">
-            @if (Filament\Features::hasUserProfile())
-                <li><a href="{{ route('filament.profile') }}">{{ __('Edit Profile') }}</a></li>
-            @endif
-            <li><livewire:filament-logout /></li>
-        </ul>
+        @if (Filament\Features::hasUserProfile())
+            <x-filament::dropdown-link href="{{ route('filament.profile') }}">{{ __('Edit Profile') }}</x-filament::dropdown-link>
+        @endif
+        <livewire:filament-logout class="w-full py-2 px-4 transition-colors duration-200 text-gray-600 hover:bg-gray-200" />
     </x-filament::dropdown>
 </header>

resources/views/components/dropdown-link.blade.php

@@ -0,0 +1 @@
+<a {{ $attributes->merge(['class' => 'block py-2 px-4 transition-colors duration-200 text-gray-600 hover:bg-gray-200']) }}>{{ $slot }}</a>

resources/views/components/dropdown.blade.php

@@ -27,6 +27,7 @@
         role="menu"
         id="{{ $id }}"
         tabindex="-1"
+        class="bg-white shadow-sm rounded text-sm leading-tight text-left overflow-hidden divide-y divide-gray-200"
     >
         {{ $slot }}
     </div>

resources/views/fields/fieldset.blade.php

@@ -1,4 +1,4 @@
-<fieldset class="border rounded border-grey-50 p-4 md:px-6">
+<fieldset class="rounded border border-gray-200 p-4 md:px-6">
     <legend class="text-sm leading-tight font-semibold px-2">
         {{ __($field->legend) }}
     </legend>

resources/views/fields/file.blade.php

@@ -13,7 +13,7 @@
 @endpushonce
 
 @section('field')
-    <div class="p-4 rounded focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 border @error($field->error ?? $field->model) border-red-600 motion-safe:animate-shake @else border-gray-100 @enderror space-y-6">
+    <div class="p-4 rounded border @error($field->error ?? $field->model) border-red-600 motion-safe:animate-shake @else border-gray-200 @enderror space-y-6">
         <div 
             x-data 
             x-init="

resources/views/livewire/dashboard.blade.php

@@ -1,5 +1,5 @@
 <div class="p-4 md:p-6 bg-white shadow-sm rounded overflow-hidden">
-    <div class="p-4 border border-gray-300 border-dashed rounded-lg h-64 flex items-center justify-center">
-        <span class="text-xs text-gray-600 font-mono">{{ config('app.name') }} Dashboard</span>
+    <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg h-64 flex items-center justify-center">
+        <span class="text-sm font-mono">{{ config('app.name') }} Dashboard</span>
     </div>
 </div>