UI updates

Author: mihaisolomon

app/Providers/Filament/AdminPanelProvider.php

@@ -36,7 +36,7 @@ public function panel(Panel $panel): Panel
             ->sidebarCollapsibleOnDesktop()
             ->maxContentWidth(\Filament\Support\Enums\Width::Full)
             ->favicon(config('app.logo'))
-            ->viteTheme('resources/css/filament.scss')
+            ->viteTheme('resources/css/filament.css')
             ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
             ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
             ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')

package.json

@@ -6,18 +6,17 @@
         "build": "vite build"
     },
     "devDependencies": {
-        "@tailwindcss/forms": "^0.5.9",
-        "@tailwindcss/typography": "^0.5.15",
-        "autoprefixer": "^10.4.20",
+        "@tailwindcss/forms": "^0.5.11",
+        "@tailwindcss/typography": "^0.5.19",
         "axios": "^1.7",
         "laravel-vite-plugin": "^1.2",
         "postcss": "^8.4",
-        "sass": "^1.80",
-        "tailwindcss": "^3.4",
+        "tailwindcss": "^4.2.2",
         "tippy.js": "^6.3.7",
         "vite": "^6.0"
     },
     "dependencies": {
+        "@tailwindcss/vite": "^4.2.2",
         "flowbite": "^2.5"
     }
 }

postcss.config.cjs

@@ -1,9 +1,9 @@
 .dialog-container {
-    @apply fixed top-0 left-0 right-0 bottom-0 w-full h-full bg-gray-500 bg-opacity-50 z-50 flex flex-col justify-center items-center overflow-auto p-5;
+    @apply fixed top-0 left-0 right-0 bottom-0 w-full h-full bg-gray-500/50 z-50 flex flex-col justify-center items-center overflow-auto p-5;
 
     margin-top: 0 !important;
 
-    .dialog {
+    & .dialog {
         @apply bg-white rounded-lg shadow border border-gray-200 p-5 max-w-full;
 
         width: 400px;
@@ -16,19 +16,19 @@
             width: 1000px;
         }
 
-        .dialog-header {
+        & .dialog-header {
             @apply w-full pb-3 mb-3 border-b border-gray-200 text-lg text-gray-500 font-medium;
         }
 
-        .dialog-content {
+        & .dialog-content {
             @apply w-full flex flex-col gap-3;
         }
     }
 
-    .dialog-buttons {
+    & .dialog-buttons {
         @apply w-full pt-3 mt-3 border-t border-gray-200 flex items-center gap-3;
 
-        button {
+        & button {
             @apply px-5 py-3 rounded bg-gray-500 hover:bg-gray-600 text-white hover:shadow hover:cursor-pointer font-medium;
 
             min-width: 100px;

resources/css/dialogs.scss resources/css/dialogs.cssresources/css/dialogs.scss renamed to resources/css/dialogs.css

@@ -0,0 +1,46 @@
+@import 'tailwindcss' source(none);
+@import '../../vendor/filament/filament/resources/css/index.css';
+
+@source '../views';
+@source '../../app/Filament';
+@source '../../app/Livewire';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@import './kanban.css';
+@import './dialogs.css';
+@import './loading.io.css';
+
+.filament-header-heading {
+    display: block;
+}
+
+.ticket-comment {
+    & .actions {
+        @apply opacity-0 transition;
+    }
+    &:hover {
+        & .actions {
+            @apply opacity-100;
+        }
+    }
+}
+
+.filament-forms-repeater-component {
+    & > .relative.flex.justify-center {
+        @apply justify-start;
+    }
+}
+
+.social-icon {
+    @apply w-6 h-6 rounded-full p-1 bg-gray-100 text-white;
+    &.google { background-color: #ea4335; }
+    &.facebook { background-color: #3b5998; }
+    &.github { background-color: #000000; }
+    &.twitter { background-color: #55acee; }
+}
+
+label:has(.sprint-checkboxes) > span {
+    width: 100%;
+}

resources/css/filament.css

@@ -1,84 +1,84 @@
 .kanban-container {
     @apply w-full flex gap-2 overflow-x-auto;
 
-    .kanban-statuses {
+    & .kanban-statuses {
         @apply w-full flex flex-col gap-2;
 
         min-width: 250px;
 
-        .status-header {
+        & .status-header {
             @apply w-full flex gap-1 items-center bg-white p-3 mb-3 text-xs font-medium text-gray-400 uppercase rounded-t border-b-4;
         }
 
-        .status-container {
+        & .status-container {
             @apply relative w-full flex flex-col gap-2 bg-white p-2 rounded overflow-y-auto overflow-x-hidden border-b-4;
 
             height: calc(100vh);
 
-            .create-record {
+            & .create-record {
                 @apply flex items-center gap-1 mt-auto text-xs text-gray-500 p-3 bg-transparent hover:text-gray-600 hover:bg-gray-100 rounded;
             }
 
-            .kanban-record {
+            & .kanban-record {
                 @apply w-full flex flex-col gap-4 rounded bg-gray-50 border border-gray-200 p-3 hover:shadow hover:bg-gray-100 relative;
 
-                .handle {
+                & .handle {
                     @apply absolute top-0 right-0 text-gray-500 opacity-0 hover:cursor-pointer bg-gray-100 hover:bg-gray-200 rounded-bl p-2 transition;
                 }
 
                 &:hover {
-                    .handle {
+                    & .handle {
                         @apply opacity-100;
                     }
                 }
 
-                .record-info {
+                & .record-info {
                     @apply w-full flex flex-col gap-0;
 
-                    .record-subtitle {
+                    & .record-subtitle {
                         @apply text-xs text-gray-400;
                     }
 
-                    .record-title {
+                    & .record-title {
                         @apply text-base text-gray-600 hover:cursor-pointer;
 
-                        .code {
+                        & .code {
                             @apply text-xs font-medium text-gray-400;
                         }
 
                         &:hover {
-                            .title {
+                            & .title {
                                 @apply underline;
                             }
                         }
                     }
                 }
 
-                .record-footer {
+                & .record-footer {
                     @apply w-full flex justify-between items-center;
 
-                    .record-type-code {
+                    & .record-type-code {
                         @apply flex items-center gap-2;
                     }
 
-                    .avatar {
+                    & .avatar {
                         @apply w-6 h-6 rounded-full bg-gray-200 bg-cover bg-center;
                     }
                 }
 
-                .record-relations {
+                & .record-relations {
                     @apply w-full flex flex-col gap-1;
 
                     & > div {
                         @apply flex items-center gap-1 text-sm text-gray-600;
 
-                        a {
+                        & a {
                             @apply font-medium hover:underline;
                         }
                     }
                 }
 
-                .record-logged-hours {
+                & .record-logged-hours {
                     @apply flex items-center gap-1 text-gray-500 text-xs;
                 }
             }

resources/css/filament.scss

@@ -1,21 +1,16 @@
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
     plugins: [
         laravel({
             input: [
-                'resources/css/filament.scss',
+                'resources/css/filament.css',
                 'resources/js/filament.js'
             ],
             refresh: true,
         }),
+        tailwindcss(),
     ],
-    css: {
-        preprocessorOptions: {
-            scss: {
-                silenceDeprecations: ['import'],
-            },
-        },
-    },
 });