Update styling and color handling in card and column components for improved UI consistency

Author: ManukMinasyan

resources/views/livewire/card.blade.php

@@ -10,9 +10,9 @@
 
 <div
     @class([
-        'mb-3 bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-200 hover:shadow-md',
+        'mb-3 bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden transition-all duration-200 hover:shadow-md',
         'cursor-pointer' => $hasActions || $hasCardAction,
-        'cursor-pointer transition-all duration-100 ease-in-out hover:shadow-lg hover:border-neutral-400 active:shadow-md' => $hasCardAction,
+        'cursor-pointer transition-all duration-100 ease-in-out hover:shadow-lg hover:border-gray-400 active:shadow-md' => $hasCardAction,
         'cursor-grab hover:cursor-grabbing' => $hasPositionIdentifier,
         'cursor-default' => !$hasActions && !$hasCardAction && !$hasPositionIdentifier,
     ])

resources/views/livewire/column.blade.php

@@ -1,14 +1,15 @@
 @props(['columnId', 'column', 'config'])
 
 @php
-    use Filament\Support\Colors\Color;
-    $colors = Color::all();
+    use Filament\Support\Colors\Color;use Filament\Support\Facades\FilamentColor;
 
-    if(filled($column['color'])) {
-        $color = $colors[$column['color']] ?? Color::generateV3Palette($column['color']);
-    }
-    else {
-        $color = $colors['neutral'];
+    $filamentColors = FilamentColor::getColors();
+    $nativeColor = null;
+
+    if(filled($column['color']) && isset($filamentColors[$column['color']])) {
+        $nativeColor = $column['color'];
+    }else{
+        $color = Color::hex($column['color']);
     }
 @endphp
 
@@ -20,13 +21,31 @@ class="w-[300px] min-w-[300px] flex-shrink-0 border border-gray-200 dark:border-
             <h3 class="text-sm font-medium text-gray-700 dark:text-gray-200">
                 {{ $column['label'] }}
             </h3>
-            <div
-                    style="background-color: {{ $color[500] }};  color: {{ $color[50] }};"
-                    @class([
-                    'ms-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
-                ])>
-                {{ $column['total'] ?? (isset($column['items']) ? count($column['items']) : 0) }}
-            </div>
+            @if($nativeColor)
+                <x-filament::badge
+                        tag="div"
+                        :color="$nativeColor"
+                        class="ms-2"
+                >
+                    {{ $column['total'] ?? (isset($column['items']) ? count($column['items']) : 0) }}
+                </x-filament::badge>
+            @else
+                <div
+                        @style([
+                            "--light-bg-color: $color[50]",
+                            "--light-text-color: $color[700]",
+                            "--dark-bg-color: $color[600]",
+                            "--dark-text-color: $color[300]",
+                        ])
+                        @class([
+                        'ms-2 items-center border px-2 py-0.5 rounded-md text-xs font-semibold',
+                        "bg-[var(--light-bg-color)] dark:bg-[var(--dark-bg-color)]/20",
+                        "text-[var(--light-text-color)] dark:text-[var(--dark-text-color)]",
+                        'border-[var(--light-text-color)]/30 dark:border-[var(--dark-text-color)]/30',
+                    ])>
+                    {{ $column['total'] ?? (isset($column['items']) ? count($column['items']) : 0) }}
+                </div>
+            @endif
         </div>
 
 

resources/views/livewire/empty-column.blade.php

@@ -1,6 +1,6 @@
 @props(['pluralCardLabel'])
 
-<div class="p-3 flex flex-col items-center justify-center h-full min-h-[150px] rounded-lg border-2 border-dashed border-gray-200 dark:border-gray-800">
+<div class="p-3 flex flex-col items-center justify-center h-full min-h-[150px] rounded-lg border-2 border-dashed border-gray-200 dark:border-gray-700">
     <x-filament::icon 
         icon="heroicon-o-archive-box" 
         class="w-10 h-10 text-gray-400 dark:text-gray-600 mb-2"