From 7c94ad964fd8d0daebf9f341cabe15b1258d8178 Mon Sep 17 00:00:00 2001
From: Boy132 <mail@boy132.de>
Date: Wed, 8 Jan 2025 10:25:35 +0100
Subject: [PATCH] update health page with tailwind classes

---
 .../views/filament/pages/health.blade.php     | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/resources/views/filament/pages/health.blade.php b/resources/views/filament/pages/health.blade.php
index 13cf00aec7..f81d2ef7a1 100644
--- a/resources/views/filament/pages/health.blade.php
+++ b/resources/views/filament/pages/health.blade.php
@@ -2,11 +2,11 @@
     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
+                Spatie\Health\Enums\Status::ok()->value => 'bg-success-100 dark:bg-success-200',
+                Spatie\Health\Enums\Status::warning()->value => 'bg-warning-100 dark:bg-warning-200',
+                Spatie\Health\Enums\Status::skipped()->value => 'bg-info-100 dark:bg-info-200',
+                Spatie\Health\Enums\Status::failed()->value, Spatie\Health\Enums\Status::crashed()->value => 'bg-danger-100 dark:bg-danger-200',
+                default => 'bg-gray-100 dark:bg-gray-200'
             };
         }
     }
@@ -15,11 +15,11 @@ function backgroundColor($status) {
         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
+                Spatie\Health\Enums\Status::ok()->value => 'text-success-500 dark:text-success-600',
+                Spatie\Health\Enums\Status::warning()->value => 'text-warning-500 dark:text-warning-600',
+                Spatie\Health\Enums\Status::skipped()->value => 'text-info-500 dark:text-info-600',
+                Spatie\Health\Enums\Status::failed()->value, Spatie\Health\Enums\Status::crashed()->value => 'text-danger-500 dark:text-danger-600',
+                default => 'text-gray-500 dark:text-gray-600'
             };
         }
     }
@@ -40,31 +40,31 @@ function icon($status)
 
 <x-filament-panels::page>
     @if (count($checkResults?->storedCheckResults ?? []))
-		<x-filament::grid default="1" sm="2" class="gap-6 mb-5">
-			@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 justify-center items-center rounded-full p-2" style="margin-right: 0.5rem; {{ backgroundColor($result->status) }}">
-                        <x-filament::icon icon="{{ icon($result->status) }}" class="h-6 w-6" style="{{ iconColor($result->status) }}" />
-					</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));">
-							{{ $result->label }}
-						</dd>
-						<dt class="mt-0 text-sm font-medium md:mt-1" style="color: light-dark(rgb(75 85 99), rgb(209 213 219));">
-							@if (!empty($result->notificationMessage))
-								{{ $result->notificationMessage }}
-							@else
-								{{ $result->shortSummary }}
-							@endif
-						</dt>
-					</div>
-				</div>
-			@endforeach
-		</x-filament::grid>
+        <x-filament::grid default="1" sm="2" class="gap-6 mb-5">
+            @foreach ($checkResults->storedCheckResults as $result)
+                <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 mr-2 {{ backgroundColor($result->status) }}">
+                        <x-filament::icon icon="{{ icon($result->status) }}" class="h-6 w-6 {{ iconColor($result->status) }}" />
+                    </div>
+                    <div>
+                        <dd class="-mt-1 font-bold md:mt-1 md:text-xl text-gray-900 dark:text-white">
+                            {{ $result->label }}
+                        </dd>
+                        <dt class="mt-0 text-sm font-medium md:mt-1 text-gray-600 dark:text-gray-300">
+                            @if (!empty($result->notificationMessage))
+                                {{ $result->notificationMessage }}
+                            @else
+                                {{ $result->shortSummary }}
+                            @endif
+                        </dt>
+                    </div>
+                </div>
+            @endforeach
+        </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