Refactor alert component styles and add CSS loading

- Updated the alert component's Blade template to streamline class assignments and improve structure.
- Introduced Alpine.js data attributes for enhanced interactivity.
- Added a dedicated CSS file for the alert component to be loaded on request in the service provider.

Author: cklei-carly

package.json

@@ -3,12 +3,14 @@
     "type": "module",
     "scripts": {
         "dev:code-editor-css": "npx tailwindcss -c ./tailwind-code-editor.config.js -i ./resources/css/components/code-editor.css -o ./resources/dist/components/code-editor.css --watch",
+        "dev:alert-css": "npx tailwindcss -i ./resources/css/components/alert.css -o ./resources/dist/components/alert.css --watch",
         "dev:main-css": "npx tailwindcss -i ./resources/css/index.css -o ./resources/dist/inspirecms.css --postcss --watch",
-        "dev:styles": "npm run dev:main-css && npm run dev:code-editor-css",
+        "dev:styles": "npm run dev:main-css && npm run dev:code-editor-css && npm run dev:alert-css",
         "dev:scripts": "node ./bin/build.js --dev",
         "build:code-editor-css": "npx tailwindcss -c ./tailwind-code-editor.config.js -i ./resources/css/components/code-editor.css -o ./resources/dist/components/code-editor.css  --postcss --minify",
+        "build:alert-css": "npx tailwindcss -i ./resources/css/components/alert.css -o ./resources/dist/components/alert.css  --postcss --minify",
         "build:main-css": "npx tailwindcss -i ./resources/css/index.css -o ./resources/dist/inspirecms.css --postcss --minify",
-        "build:styles": "npm run build:main-css && npm run build:code-editor-css",
+        "build:styles": "npm run build:main-css && npm run build:code-editor-css && npm run build:alert-css",
         "build:scripts": "node ./bin/build.js",
         "purge": "filament-purge -i resources/dist/inspirecms.css -o resources/dist/inspirecms.css -v 3.x",
         "dev": "npm run dev:styles && npm run dev:scripts",

resources/css/alerts.css

@@ -1,17 +1,3 @@
-.alert-dialog {
-    @apply border-l-4 px-4;
-
-    .alert-dialog-icon {
-        @apply w-6 h-6;
-    }
-    .alert-dialog-content-ctn {
-        @apply ml-4;
-    }
-    .alert-dialog-content {
-        @apply text-sm;
-    }
-}
-
 .fi-body {
     .top-alert.alert-dialog {
         @apply sticky top-0 z-20;

resources/css/components/alert.css

@@ -0,0 +1,43 @@
+.alert-dialog {
+    @apply px-4;
+
+    background-color: rgb(var(--c-50));
+    &:is(.dark *) {
+        background-color: rgb(var(--c-900));
+    }
+
+    .alert-dialog-body {
+        @apply flex items-center h-full truncate;
+
+        .alert-dialog-icon-ctn {
+            @apply flex-shrink-0;
+
+            svg {
+                @apply w-6 h-6;
+                color: rgb(var(--c-400));
+                
+                &:is(.dark *) {
+                    color: rgb(var(--c-200));
+                }
+            }
+        }
+        .alert-dialog-content-ctn {
+            @apply ml-4 text-sm;
+            color: rgb(var(--c-700));
+            
+            &:is(.dark *) {
+                color: rgb(var(--c-400));
+            }
+        }
+    }
+}
+
+.alert-dialog-sm {
+    @apply py-2;
+}
+.alert-dialog-md {
+    @apply py-3;
+}
+.alert-dialog-lg {
+    @apply py-4;
+}

resources/dist/components/alert.css

@@ -1,33 +1,24 @@
 <div {{ 
     $attributes->class([
-        'alert-dialog',
-        'py-2' => $size == 'sm',
-        'py-3' => $size == 'md',
-        'py-4' => $size == 'lg',
-        'border-custom-400 bg-custom-50 dark:bg-custom-900/95' => $color != 'gray',
-        'border-gray-400 bg-gray-50 dark:bg-gray-900/95' => $color == 'gray',
+        'alert-dialog px-4 bg-custom-50 dark:bg-custom-900',
+        "alert-dialog-{$size}" => in_array($size, ['sm', 'md', 'lg']),
+        'py-2' => $size === 'sm',
+        'py-3' => $size === 'md',
+        'py-4' => $size === 'lg',
     ])->style(\Filament\Support\get_color_css_variables(
         $color,
         shades: [50, 200, 400, 700, 900],
     ))
-}}>
-    <div class="flex items-center h-full truncate">
-        <div class="flex-shrink-0">
-            <x-filament::icon 
-                :icon="$icon" 
-                @class([
-                    'alert-dialog-icon',
-                    'text-custom-400 dark:text-custom-200/80' => $color != 'gray',
-                    'text-gray-400 dark:text-gray-200/80' => $color == 'gray',
-                ])
-            />
+}}
+    x-data="{}"
+    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('filament-alert', package: 'solution-forest/inspirecms'))]"
+>
+    <div class="alert-dialog-body flex items-center h-full truncate">
+        <div class="alert-dialog-icon-ctn">
+            <x-filament::icon :icon="$icon" class="w-6 h-6 text-custom-400 text-custom-200" />
         </div>
-        <div class="alert-dialog-content-ctn">
-            <p @class([
-                'alert-dialog-content',
-                'text-custom-700 dark:text-custom-400' => $color != 'gray',
-                'text-gray-700 dark:text-gray-400' => $color == 'gray',
-            ])>
+        <div class="alert-dialog-content-ctn ml-4 text-sm text-custom-700 dark:text-custom-400">
+            <p>
                 {{ $message }}
             </p>
         </div>

resources/dist/inspirecms.css

@@ -202,6 +202,7 @@ protected function getAssets(): array
             Js::make('inspirecms', __DIR__ . '/../resources/dist/inspirecms.js'),
             Css::make('filament-code-editor', __DIR__ . '/../resources/dist/components/code-editor.css')->loadedOnRequest(),
             AlpineComponent::make('filament-code-editor', __DIR__ . '/../resources/dist/components/code-editor.js')->loadedOnRequest(),
+            Css::make('filament-alert', __DIR__ . '/../resources/dist/components/alert.css')->loadedOnRequest(),
         ];
     }