fix style

Author: cklei-carly

package.json

@@ -3,12 +3,12 @@
     "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:alert-css": "npx tailwindcss -c ./tailwind-alert.config.js -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 && 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:alert-css": "npx tailwindcss  -c ./tailwind-alert.config.js -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 && npm run build:alert-css",
         "build:scripts": "node ./bin/build.js",

resources/css/components/alert.css

@@ -1,13 +1,13 @@
 .alert-dialog {
-    @apply px-4;
+    @apply px-4 overflow-x-auto;
 
     background-color: rgb(var(--c-50));
     &:is(.dark *) {
         background-color: rgb(var(--c-900));
     }
 
     .alert-dialog-body {
-        @apply flex items-center h-full truncate;
+        @apply flex items-center gap-x-1;
 
         .alert-dialog-icon-ctn {
             @apply flex-shrink-0;
@@ -21,10 +21,11 @@
                 }
             }
         }
-        .alert-dialog-content-ctn {
-            @apply ml-4 text-sm;
+
+        .alert-dialog-content {
+            @apply text-sm inline-block whitespace-nowrap;
+
             color: rgb(var(--c-700));
-            
             &:is(.dark *) {
                 color: rgb(var(--c-400));
             }

resources/css/forms.css

@@ -1,4 +1,3 @@
-
 .filament-icon-picker {
     svg {
         @apply w-6 h-6;

resources/css/icons.css

@@ -1,16 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
-@import "../../vendor/filament/filament/resources/css/theme.css";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import 'tailwindcss/variants';
 
-@import "icons.css";
-@import "widgets.css";
-@import "forms.css";
-@import "tables.css";
-@import "modals.css";
-@import "navigation.css";
-@import "tree.css";
+@import "../../vendor/filament/filament/resources/css/base.css";
+
+@import "./widgets.css";
+@import "./forms.css";
+@import "./tree.css";
 
 /* Login */
 .split-image-layout {
@@ -19,29 +17,44 @@
 
 /* Media Library */
 .fi-body:has(.top-alert) {
-    
     .fi-page :not(.media-library-browser-modal) .media-library__header {
         @apply top-24 !important;
     }
 }
 
 /* Top Alert */
-.fi-body {
-    .top-alert.alert-dialog {
-        @apply sticky top-0 z-20;
+.fi-body .top-alert.alert-dialog {
+    @apply sticky top-0 z-20;
 
-        ~ .fi-layout .fi-topbar, ~ .fi-simple-layout > .absolute {
-            @apply top-10 !important;
-        }
+    ~ .fi-layout .fi-topbar, ~ .fi-simple-layout > .absolute {
+        @apply top-10 !important;
+    }
 
-        ~ .fi-layout .content-sidebar .icon-btn, ~ .fi-layout .content-sidebar .content-sidebar_desktop {
-            @apply top-[6.5rem] !important;
-        }
+    ~ .fi-layout .content-sidebar .icon-btn, ~ .fi-layout .content-sidebar .content-sidebar_desktop {
+        @apply top-[6.5rem] !important;
     }
 }
 
 /* Actions */
 /* Header actions on page */
 .fi-main .fi-header > div:nth-child(2) {
     @apply flex-row-reverse;
+}
+/* Modals footer actions */
+.fi-modal-footer-actions {
+    @apply flex flex-row-reverse flex-wrap items-center;
+}
+/* Table actions */
+.fi-ta-content-grid .fi-ta-actions {
+    @apply justify-end;
+}
+
+/* Navigation */
+.fi-page-sub-navigation-sidebar-ctn {
+    width: 13rem !important;
+}
+
+/* Icon */
+.fi-icon > svg.custom-icon {
+    stroke: currentColor;
 }