spatie · freekmurze · Dec 13, 2021 · Dec 12, 2021 · Dec 12, 2021 · abenerd
diff --git a/config/health.php b/config/health.php
@@ -102,4 +102,12 @@
          */
         'url' => '/oh-dear-health-check-results',
     ],
+
+    /*
+     * You can set a theme for the local results page
+     *
+     * - light: light mode
+     * - dark: dark mode
+     */
+    'theme' => 'light',
 ];
diff --git a/docs/images/list-web-dark.png b/docs/images/list-web-dark.png
diff --git a/docs/images/list-web.png b/docs/images/list-web.png
diff --git a/docs/installation-setup.md b/docs/installation-setup.md
@@ -122,6 +122,14 @@ return [
          */
         'url' => '/oh-dear-health-check-results',
     ],
+
+    /*
+     * You can set a theme for the local status page
+     *
+     * - light: light mode
+     * - dark: dark mode
+     */
+    'theme' => 'light',
 ];
 ```
 
@@ -152,4 +160,3 @@ protected function schedule(Schedule $schedule)
 ## Running the checks by sending HTTP requests
 
 If you don't want let your application send notification, but let a service like Oh Dear monitor the health of your app, you can trigger a run of all health checks by visiting the [HTTP endpoint](docs/laravel-health/v1/viewing-results/on-a-webpage) or [JSON endpoint](https://spatie.be/docs/laravel-health/v1/viewing-results/as-json-via-an-api) and use the `?fresh` parameter in the URL.
-
diff --git a/docs/viewing-results/on-a-webpage.md b/docs/viewing-results/on-a-webpage.md
@@ -3,7 +3,7 @@ title: On a webpage
 weight: 2
 ---
 
-The package contains a controller`Spatie\Health\Http\Controllers\HealthCheckResultsController` that can be used the render the latest results of all checks.  Simply use that controller in your routes on any URL you desire. 
+The package contains a controller `Spatie\Health\Http\Controllers\HealthCheckResultsController` that can be used the render the latest results of all checks. Simply use that controller in your routes on any URL you desire.
 
 ```php
 use Spatie\Health\Http\Controllers\HealthCheckResultsController
@@ -15,6 +15,12 @@ Here's how that page will look like:
 
 ![image](/docs/laravel-health/v1/images/list-web.png)
 
+There is also a dark mode available:
+
+![image](/docs/laravel-health/v1/images/list-web-dark.png)
+
+You can enable dark mode by changing the `theme` key from `light` to `dark` in the config file.
+
 If you don't want these results to be public, be sure to take care of authorization yourself.
 
 ## Running the checks before rendering the page

diff --git a/package.json b/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "scripts": {
+    "watch": "npx tailwindcss -i ./resources/css/health.css -o ./resources/dist/health.min.css --watch",
+    "build": "npx tailwindcss -i ./resources/css/health.css -o ./resources/dist/health.min.css --minify"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.0.1"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/resources/css/health.css b/resources/css/health.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/resources/dist/health.min.css b/resources/dist/health.min.css
diff --git a/resources/views/list.blade.php b/resources/views/list.blade.php
@@ -1,48 +1,47 @@
-<html lang="en">
+<html lang="en" class="{{$theme == 'dark' ? 'dark' : ''}}">
 <head>
     <title>Health results</title>
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+    {{$assets}}
 </head>
 
-<body class="bg-gray-100 pt-8">
-    <div class="relative flex items-top justify-center bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
-        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white rounded-md px-8 pb-8 pt-4 shadow mb-4">
-                <div class="flex justify-between items-center">
-                    <h4 class="text-center text-3xl font-semibold text-gray-700 mb-4">Laravel Health</h4>
-                    @if ($lastRanAt)
-                        <div class="{{ $lastRanAt->diffInMinutes() > 5 ? 'text-red-400' : 'text-gray-400' }} text-sm text-center">
-                            Check results from {{ $lastRanAt->diffForHumans() }}
-                        </div>
-                    @endif
-                </div>
-                <div class="pt-8">
-                    @if (count($checkResults?->storedCheckResults ?? []))
-                        <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-                            @foreach ($checkResults->storedCheckResults as $result)
-                                @ray($result)
-                                <div
-                                    class="text-opacity-0 px-4 py-5 {{ $backgroundColor($result->status) }} hover:shadow transition transform rounded overflow-hidden sm:p-6">
-                                    <dd class="mt-1 text-xl mb-1 font-semibold {{ $textColor($result->status) }}">
-                                        {{ $result->label }}
-                                    </dd>
-                                    <dt class="text-sm font-medium {{ $textColor($result->status) }} opacity-50">
-                                        @if (!empty($result->notificationMessage))
-                                            {{ $result->notificationMessage }}
-                                        @else
-                                            {{ $result->shortSummary }}
-                                        @endif
-
-                                    </dt>
-                                </div>
-                            @endforeach
-                        </dl>
-                    @endif
-                </div>
+<body class="antialiased bg-gray-100 mt-7 md:mt-12 dark:bg-gray-900">
+    <div class="mx-auto max-w-7xl lg:px-8 sm:px-6">
+        <div class="flex flex-wrap justify-center space-y-3">
+            <h4 class="w-full text-2xl font-bold text-center text-gray-900 dark:text-white">Laravel Health</h4>
+            <div class="flex justify-center w-full">
+                <x-health-logo/>
             </div>
+            @if ($lastRanAt)
+                <div class="{{ $lastRanAt->diffInMinutes() > 5 ? 'text-red-400' : 'text-gray-400 dark:text-gray-500' }} text-sm text-center font-medium">
+                    Check results from {{ $lastRanAt->diffForHumans() }}
+                </div>
+            @endif
+        </div>
+        <div class="px-2 mt-6 md:mt-8 md:px-0">
+            @if (count($checkResults?->storedCheckResults ?? []))
+                <dl class=" grid grid-cols-1 gap-2.5 sm:gap-3 md:gap-5 md:grid-cols-2 lg:grid-cols-3">
+                    @foreach ($checkResults->storedCheckResults as $result)
+                        @ray($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">
+                            <x-health-status-indicator :result="$result" />
+                            <div>
+                                <dd class="-mt-1 font-bold text-gray-900 dark:text-white md:mt-1 md:text-xl">
+                                    {{ $result->label }}
+                                </dd>
+                                <dt class="mt-0 text-sm font-medium text-gray-600 dark:text-gray-300 md:mt-1">
+                                    @if (!empty($result->notificationMessage))
+                                        {{ $result->notificationMessage }}
+                                    @else
+                                        {{ $result->shortSummary }}
+                                    @endif
+                                </dt>
+                            </div>
+                        </div>
+                    @endforeach
+                </dl>
+            @endif
         </div>
     </div>
-
 </body>
 </html>
diff --git a/resources/views/logo.blade.php b/resources/views/logo.blade.php
@@ -0,0 +1,9 @@
+<svg class="text-red-500" width="48" height="22" viewBox="0 0 48 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.9017 0.0162889C25.6126 0.121325 26.1577 0.7148 26.215 1.4461L27.1259 13.0672L28.7859 8.37114C28.9697 7.85105 29.4077 7.46792 29.939 7.3623C30.4704 7.25668 31.0171 7.44411 31.3784 7.85583L32.7588 9.42859H38.4615C39.3112 9.42859 40 10.1321 40 11C40 11.8679 39.3112 12.5714 38.4615 12.5714H32.0719C31.6347 12.5714 31.2182 12.3814 30.9264 12.049L30.8058 11.9115L27.6066 20.9621C27.3606 21.6579 26.6729 22.0843 25.9551 21.986C25.2372 21.8877 24.6838 21.2913 24.626 20.5539L23.6879 8.58653L21.3829 14.707C21.1766 15.2548 20.6886 15.6395 20.1175 15.7046C19.5464 15.7696 18.9874 15.5042 18.6681 15.0162L17.0678 12.5714H1.53847C0.688794 12.5714 0 11.8679 0 11C0 10.1321 0.688794 9.42859 1.53847 9.42859H17.8898C18.4035 9.42859 18.8833 9.69044 19.1688 10.1266L19.5766 10.7496L23.2455 1.00734C23.5034 0.322609 24.1908 -0.0887475 24.9017 0.0162889Z" fill="url(#paint0_linear_24_229)"/>
+    <defs>
+        <linearGradient id="paint0_linear_24_229" x1="36.9187" y1="10.4762" x2="0.431636" y2="10.4972" gradientUnits="userSpaceOnUse">
+        <stop stop-color="currentColor"/>
+        <stop offset="1" stop-color="currentColor" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>