usage modal styling update

Author: AzGasim

packages/media/resources/views/components/usage-modal.blade.php

@@ -20,30 +20,30 @@
                 $url = $baseUrl . '/' . $type . '/' . $item->media_usable_id;
 
                 return "
-                            <div class=\"flex items-center gap-2 py-2 px-3 hover:bg-gray-100 rounded-md transition-colors\">
+                            <div class=\"flex items-center gap-2 py-2 px-3 dark:bg-gray-800 dark:hover:bg-gray-700/50 hover:bg-gray-100 rounded-md transition-colors\">
                                 <svg class=\"w-4 h-4 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">
                                     <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244\" />
                                 </svg>
-                                <a href=\"{$url}\" target=\"_blank\" class=\"text-primary-600 hover:text-primary-700 hover:underline break-all text-sm\">
+                                <a href=\"{$url}\" target=\"_blank\" class=\"text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-500 hover:underline break-all text-sm\">
                                     {$url}
                                 </a>
                             </div>
                             ";
             })->join("\n");
 
             return "
-                    <div class=\"mb-6\">
-                        <div class=\"flex items-center gap-2 mb-3\">
-                            <h3 class=\"text-lg font-medium text-gray-900\">{$typeName}</h3>
-                                <span class=\"px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 rounded-full\">
-                                    {$items->count()} " . trans_choice('media::fields.link|links', $items->count()) . "
-                                </span>
-                        </div>
-                        <div class=\"bg-white border border-gray-200 rounded-lg divide-y divide-gray-100\">
+                        <div class=\"mb-6\">
+                            <div class=\"flex items-center gap-2 mb-3\">
+                                <h3 class=\"text-lg font-medium text-gray-900\">{$typeName}</h3>
+                                    <span class=\"px-2 py-0.5 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full\">
+                                        {$items->count()} " . trans_choice('media::fields.link|links', $items->count()) . "
+                                    </span>
+                            </div>
+                        <div class=\"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-100 dark:divide-gray-700\">
                             {$links}
                         </div>
-                    </div>
-                    ";
+                        </div>
+                        ";
         })->join("\n");
 @endphp
 

packages/media/src/Resources/MediaResource.php

@@ -315,7 +315,7 @@ public static function form(Form $form): Form
                                 <button
                                     type=\"button\"
                                     x-on:click=\"\$dispatch('open-modal', { id: 'usage-modal-{$record->id}' })\"
-                                    class=\"filament-button filament-button-size-sm inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset min-h-[2rem] px-3 text-primary-600 bg-primary-50 border-primary-200 hover:bg-primary-100 focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600\"
+                                    class=\"filament-button filament-button-size-sm inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset min-h-[2rem] px-3 text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-500/10 border-primary-200 dark:border-primary-500/20 hover:bg-primary-100 dark:hover:bg-primary-500/20 focus:ring-primary-600 dark:focus:ring-primary-400 focus:text-primary-600 dark:focus:text-primary-400 focus:bg-primary-50 dark:focus:bg-primary-500/10 focus:border-primary-600 dark:focus:border-primary-400\"
                                 >
                                     <span class=\"flex items-center gap-1\">
                                         <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">