Update health page with tailwind classes (#893)

* update health page with tailwind classes

* Move php from Blade to Page

---------

Co-authored-by: RMartinOscar <40749467+RMartinOscar@users.noreply.github.com>

app/Filament/Admin/Pages/Health.php

@@ -8,6 +8,7 @@ use Filament\Notifications\Notification;
 use Filament\Pages\Page;
 use Illuminate\Support\Facades\Artisan;
 use Spatie\Health\Commands\RunHealthChecksCommand;
+use Spatie\Health\Enums\Status;
 use Spatie\Health\ResultStores\ResultStore;
 
 class Health extends Page
@@ -122,4 +123,37 @@ class Health extends Page
 
         return $results->containsFailingCheck() ? 'tabler-heart-exclamation' : 'tabler-heart-check';
     }
+
+    public function backgroundColor(string $str): string
+    {
+        return match ($str) {
+            Status::ok()->value => 'bg-success-100 dark:bg-success-200',
+            Status::warning()->value => 'bg-warning-100 dark:bg-warning-200',
+            Status::skipped()->value => 'bg-info-100 dark:bg-info-200',
+            Status::failed()->value, Status::crashed()->value => 'bg-danger-100 dark:bg-danger-200',
+            default => 'bg-gray-100 dark:bg-gray-200'
+        };
+    }
+
+    public function iconColor(string $str): string
+    {
+        return match ($str) {
+            Status::ok()->value => 'text-success-500 dark:text-success-600',
+            Status::warning()->value => 'text-warning-500 dark:text-warning-600',
+            Status::skipped()->value => 'text-info-500 dark:text-info-600',
+            Status::failed()->value, Status::crashed()->value => 'text-danger-500 dark:text-danger-600',
+            default => 'text-gray-500 dark:text-gray-600'
+        };
+    }
+
+    public function icon(string $str): string
+    {
+        return match ($str) {
+            Status::ok()->value => 'tabler-circle-check',
+            Status::warning()->value => 'tabler-exclamation-circle',
+            Status::skipped()->value => 'tabler-circle-chevron-right',
+            Status::failed()->value, Status::crashed()->value => 'tabler-circle-x',
+            default => 'tabler-help-circle'
+        };
+    }
 }

resources/views/filament/pages/health.blade.php

@@ -1,70 +1,30 @@
-@php
-    if(! function_exists('backgroundColor')) {
-        function backgroundColor($status) {
-            return match ($status) {
-                Spatie\Health\Enums\Status::ok()->value => 'background-color: rgb(209 250 229);', // bg-emerald-100
-                Spatie\Health\Enums\Status::warning()->value => 'background-color: rgb(254 249 195);', // bg-yellow-100
-                Spatie\Health\Enums\Status::skipped()->value => 'background-color: rgb(219 234 254);', // bg-blue-100
-                Spatie\Health\Enums\Status::failed()->value, Spatie\Health\Enums\Status::crashed()->value => 'background-color: rgb(254 226 226);', // bg-red-100
-                default => 'background-color: rgb(243 244 246);' // bg-gray-100
-            };
-        }
-    }
-
-    if(! function_exists('iconColor')) {
-        function iconColor($status)
-        {
-            return match ($status) {
-                Spatie\Health\Enums\Status::ok()->value => 'color: rgb(16 185 129);', // text-emerald-500
-                Spatie\Health\Enums\Status::warning()->value => 'color: rgb(234 179 8);', // text-yellow-500
-                Spatie\Health\Enums\Status::skipped()->value => 'color: rgb(59 130 246);', // text-blue-500
-                Spatie\Health\Enums\Status::failed()->value, Spatie\Health\Enums\Status::crashed()->value => 'color: rgb(239 68 68);', // text-red-500
-                default => 'color: rgb(107 114 128);' // text-gray-500
-            };
-        }
-    }
-
-    if(! function_exists('icon')) {
-        function icon($status)
-        {
-            return match ($status) {
-                Spatie\Health\Enums\Status::ok()->value => 'tabler-circle-check',
-                Spatie\Health\Enums\Status::warning()->value => 'tabler-exclamation-circle',
-                Spatie\Health\Enums\Status::skipped()->value => 'tabler-circle-chevron-right',
-                Spatie\Health\Enums\Status::failed()->value, Spatie\Health\Enums\Status::crashed()->value => 'tabler-circle-x',
-                default => 'tabler-help-circle'
-            };
-        }
-    }
-@endphp
-
 <x-filament-panels::page>
     @if (count($checkResults?->storedCheckResults ?? []))
-		<x-filament::grid default="1" sm="2" class="gap-6 mb-5">
+        <x-filament::grid default="1" sm="2" class="gap-6 mb-5">
-			@foreach ($checkResults->storedCheckResults as $result)
+            @foreach ($checkResults->storedCheckResults as $result)
-				<div class="flex items-start px-4 space-x-2 overflow-hidden py-5 text-opacity-0 transition transform bg-white shadow-md shadow-gray-200 dark:shadow-black/25 dark:shadow-md dark:bg-gray-800 rounded-xl sm:p-6 md:space-x-3 md:min-h-[130px] dark:border-t dark:border-gray-700">
+                <div class="flex items-start px-4 py-5 space-x-2 md:space-x-3 overflow-hidden shadow-lg rounded-xl bg-white dark:bg-gray-900 ring-1 ring-gray-950/5 dark:ring-white/10 sm:p-6">
-					<div class="flex justify-center items-center rounded-full p-2" style="margin-right: 0.5rem; {{ backgroundColor($result->status) }}">
+                    <div class="flex justify-center items-center rounded-full p-2 mr-2 {{ $this->backgroundColor($result->status) }}">
-                        <x-filament::icon icon="{{ icon($result->status) }}" class="h-6 w-6" style="{{ iconColor($result->status) }}" />
+                        <x-filament::icon icon="{{ $this->icon($result->status) }}" class="h-6 w-6 {{ $this->iconColor($result->status) }}" />
-					</div>
+                    </div>
-					<div>
+                    <div>
-						<dd class="-mt-1 font-bold md:mt-1 md:text-xl" style="color: light-dark(rgb(17 24 39), rgb(255 255 255));">
+                        <dd class="-mt-1 font-bold md:mt-1 md:text-xl text-gray-900 dark:text-white">
-							{{ $result->label }}
+                            {{ $result->label }}
-						</dd>
+                        </dd>
-						<dt class="mt-0 text-sm font-medium md:mt-1" style="color: light-dark(rgb(75 85 99), rgb(209 213 219));">
+                        <dt class="mt-0 text-sm font-medium md:mt-1 text-gray-600 dark:text-gray-300">
-							@if (!empty($result->notificationMessage))
+                            @if (!empty($result->notificationMessage))
-								{{ $result->notificationMessage }}
+                                {{ $result->notificationMessage }}
-							@else
+                            @else
-								{{ $result->shortSummary }}
+                                {{ $result->shortSummary }}
-							@endif
+                            @endif
-						</dt>
+                        </dt>
-					</div>
+                    </div>
-				</div>
+                </div>
-			@endforeach
+            @endforeach
-		</x-filament::grid>
+        </x-filament::grid>
     @endif
 
     @if ($lastRanAt)
-        <div class="text-md text-center font-medium" style="{{ $lastRanAt->diffInMinutes() > 5 ? 'color: rgb(239 68 68);' : 'color: light-dark(rgb(156 163 175), rgb(229 231 235));' }}">
+        <div class="text-md text-center font-medium {{ $lastRanAt->diffInMinutes() > 5 ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-200' }}">
             Check results from {{ $lastRanAt->diffForHumans() }}
         </div>
     @endif