Modernise the status page design

public/build/manifest.json

@@ -1,11 +1,11 @@
 {
   "resources/css/cachet.css": {
-    "file": "assets/cachet-BnOPqX-_.css",
+    "file": "assets/cachet-DYcyGgHu.css",
     "src": "resources/css/cachet.css",
     "isEntry": true
   },
   "resources/css/dashboard/theme.css": {
-    "file": "assets/theme-L8vbfsbw.css",
+    "file": "assets/theme-B0Gd_N3A.css",
     "src": "resources/css/dashboard/theme.css",
     "isEntry": true
   },

resources/views/components/about.blade.php

@@ -1,12 +1,17 @@
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_ABOUT_BEFORE) }}
 
 @if ($about !== '')
-<div>
-    <h1 class="text-3xl font-semibold">{{ $title }}</h1>
-    <div class="prose-sm md:prose prose-zinc mt-1 dark:prose-invert prose-a:text-accent-content prose-a:underline">
-        {!! $about !!}
+    <div class="flex flex-col gap-3">
+        <h1 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-3xl lg:text-4xl">{{ $title }}</h1>
+        <div class="prose prose-zinc max-w-none dark:prose-invert
+                    prose-headings:tracking-tight prose-headings:text-zinc-900 dark:prose-headings:text-zinc-100
+                    prose-p:leading-relaxed prose-p:text-zinc-600 dark:prose-p:text-zinc-300
+                    prose-a:font-medium prose-a:text-accent-content prose-a:underline prose-a:underline-offset-2
+                    prose-strong:text-zinc-900 dark:prose-strong:text-zinc-100
+                    prose-code:rounded prose-code:bg-zinc-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[0.85em] prose-code:font-medium prose-code:text-zinc-800 prose-code:before:content-[''] prose-code:after:content-[''] dark:prose-code:bg-zinc-800 dark:prose-code:text-zinc-200">
+            {!! $about !!}
+        </div>
     </div>
-</div>
 @endif
 
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_ABOUT_AFTER) }}

resources/views/components/component-group.blade.php

@@ -8,25 +8,28 @@
                 'default-open' => $componentGroup->isExpanded(),
             ]),
         )
-        ->class(['overflow-hidden rounded-lg border dark:border-zinc-700'])
+        ->class(['group relative overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-zinc-900/10 dark:bg-zinc-900 dark:ring-white/15'])
 }}>
-    <div class="flex items-center justify-between bg-white p-4 dark:border-zinc-700 dark:bg-white/5">
-        <button x-disclosure:button class="flex items-center gap-2 text-zinc-500 dark:text-zinc-300">
-            <h3 class="text-lg font-semibold">
+    <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-accent/40 to-transparent" aria-hidden="true"></div>
+
+    <button x-disclosure:button class="flex w-full items-center justify-between gap-3 bg-zinc-50 px-4 py-3 text-left text-zinc-700 transition hover:bg-zinc-100 hover:text-zinc-900 dark:bg-zinc-800/50 dark:text-zinc-200 dark:hover:bg-zinc-800 dark:hover:text-white sm:px-6 sm:py-4">
+        <div class="flex items-center gap-3 min-w-0">
+            <h3 class="truncate text-lg font-semibold tracking-tight">
                 {{ $componentGroup->name }}
             </h3>
-            <x-heroicon-o-chevron-up ::class="!$disclosure.isOpen && 'rotate-180'" class="size-4 transition" />
-        </button>
 
-        @if (($incidentCount = $componentGroup->components->sum('incidents_count')) > 0)
-            <span class="rounded-sm border border-zinc-800 px-2 py-1 text-xs font-semibold text-zinc-800 dark:border-zinc-600 dark:text-zinc-400">
-                {{ trans_choice('cachet::component_group.incident_count', $incidentCount) }}
-            </span>
-        @endif
-    </div>
+            @if (($incidentCount = $componentGroup->components->sum('incidents_count')) > 0)
+                <span class="shrink-0 rounded-md bg-zinc-100 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-zinc-700 ring-1 ring-zinc-900/10 dark:bg-zinc-800 dark:text-zinc-300 dark:ring-white/15">
+                    {{ trans_choice('cachet::component_group.incident_count', $incidentCount) }}
+                </span>
+            @endif
+        </div>
+
+        <x-heroicon-m-chevron-up ::class="!$disclosure.isOpen && 'rotate-180'" class="size-6 shrink-0 text-zinc-400 transition dark:text-zinc-500" />
+    </button>
 
-    <div x-disclosure:panel x-collapse class="flex flex-col divide-y bg-white dark:bg-white/5">
-        <ul class="divide-y dark:divide-zinc-700">
+    <div x-disclosure:panel x-collapse class="border-t border-zinc-900/10 dark:border-white/15">
+        <ul class="divide-y divide-zinc-900/10 dark:divide-white/15">
             @foreach ($componentGroup->components as $component)
                 <x-cachet::component :component="$component" />
             @endforeach

resources/views/components/component-ungrouped.blade.php

@@ -1,9 +1,9 @@
 @props(['component' => null])
 
-<div class="overflow-hidden rounded-lg border dark:border-zinc-700">
-    <div class="flex flex-col divide-y bg-white dark:bg-white/5">
-        <ul class="divide-y dark:divide-zinc-700">
-            <x-cachet::component :component="$component" />
-        </ul>
-    </div>
+<div class="group relative overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-zinc-900/10 dark:bg-zinc-900 dark:ring-white/15">
+    <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-accent/40 to-transparent" aria-hidden="true"></div>
+
+    <ul>
+        <x-cachet::component :component="$component" />
+    </ul>
 </div>

resources/views/components/component.blade.php

@@ -1,40 +1,51 @@
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_COMPONENTS_BEFORE) }}
-<li class="px-4 py-3">
-    <div class="flex items-center justify-between">
-        <div class="flex flex-col grow gap-y-1">
-            <div class="flex justify-between items-center gap-1.5">
-                <div class="flex gap-x-1">
-                    <div class="font-semibold leading-6">{{ $component->name }}</div>
+<li class="relative px-4 py-3 transition hover:bg-zinc-50/60 dark:hover:bg-white/[0.02] sm:px-6 sm:py-4">
+    <div class="flex items-center justify-between gap-3">
+        <div class="flex min-w-0 items-center gap-1.5">
+            <h4 class="truncate font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
+                @if($component->link)
+                    <a href="{{ $component->link }}" target="_blank" rel="nofollow noopener" class="before:absolute before:inset-0 before:content-['']">{{ $component->name }}</a>
+                @else
+                    {{ $component->name }}
+                @endif
+            </h4>
 
-                    <div x-data x-popover class="flex items-center">
-                        <button x-ref="anchor" x-popover:button>
-                            <x-heroicon-o-question-mark-circle class="size-4 text-zinc-500 dark:text-zinc-300" />
-                        </button>
-                        <div x-popover:panel x-cloak x-transition.opacity x-anchor.right.offset.8="$refs.anchor" class="rounded-sm bg-zinc-900 dark:bg-zinc-200 px-2 py-1 text-xs font-medium text-zinc-100 drop-shadow-sm dark:text-zinc-800">
-                            <span class="pointer-events-none absolute -left-1.5 size-4 rotate-45 bg-zinc-900 dark:bg-zinc-200"></span>
-                            <p class="relative">{{ __('cachet::component.last_updated', ['timestamp' => $component->updated_at]) }}</p>
-                        </div>
+            @if($component->description)
+                <div x-data x-popover class="relative flex shrink-0 items-center">
+                    <button type="button" x-ref="anchor" x-popover:button class="flex items-center justify-center text-zinc-400 transition hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-200">
+                        <x-heroicon-o-information-circle class="size-4" />
+                    </button>
+                    <div x-popover:panel x-cloak x-transition.opacity x-anchor.right.offset.8="$refs.anchor" class="z-10 w-max max-w-sm rounded-md bg-zinc-900 px-3 py-2 text-xs font-medium text-white shadow-lg dark:bg-zinc-100 dark:text-zinc-900">
+                        <span class="pointer-events-none absolute -left-1 top-2 size-2 rotate-45 bg-zinc-900 dark:bg-zinc-100" aria-hidden="true"></span>
+                        <p class="relative">{!! $component->description !!}</p>
                     </div>
                 </div>
-                <div>
-                    @if ($component->incidents_count > 0)
-                        <a href="{{ route('cachet.status-page.incident', [$component->incidents->first()]) }}">
-                            <x-cachet::badge :status="$component->latest_status" />
-                        </a>
-                    @else
-                        <x-cachet::badge :status="$status" />
-                    @endif
-                </div>
-            </div>
+            @endif
+        </div>
 
-            <div class="flex flex-col gap-y-1 text-xs text-zinc-500 dark:text-zinc-300">
-                @if($component->description)
-                <p class="">{!! $component->description !!}</p>
-                @endif
-                @if($component->link)
-                <a href="{{ $component->link }}" class="text-zinc-700 underline dark:text-zinc-300" target="_blank" rel="nofollow noopener">{{ __('cachet::component.view_details') }}</a>
+        <div x-data="{ tooltipOpen: false }"
+             @mouseenter="tooltipOpen = true"
+             @mouseleave="tooltipOpen = false"
+             @focusin="tooltipOpen = true"
+             @focusout="tooltipOpen = false"
+             class="relative shrink-0">
+            <div x-ref="badgeAnchor">
+                @if ($component->incidents_count > 0)
+                    <a href="{{ route('cachet.status-page.incident', [$component->incidents->first()]) }}" class="inline-flex">
+                        <x-cachet::badge :status="$component->latest_status" />
+                    </a>
+                @else
+                    <x-cachet::badge :status="$status" />
                 @endif
             </div>
+
+            <div x-show="tooltipOpen"
+                 x-cloak
+                 x-transition.opacity
+                 x-anchor.left.offset.8="$refs.badgeAnchor"
+                 class="pointer-events-none z-10 w-max max-w-sm rounded-md bg-zinc-900 px-3 py-2 text-xs font-medium text-white shadow-lg dark:bg-zinc-100 dark:text-zinc-900">
+                {{ __('cachet::component.last_updated', ['timestamp' => $component->updated_at]) }}
+            </div>
         </div>
     </div>
 </li>

resources/views/components/footer.blade.php

@@ -1,31 +1,33 @@
 @if ($showSupport || $showTimezone)
-<footer class="flex flex-col items-center justify-center gap-2 border-t px-8 py-6 text-center text-sm tracking-tight text-zinc-500 dark:text-zinc-400 dark:border-zinc-700">
-    @if($showSupport)
-    <div class="flex items-center justify-center gap-2">
-        {{ __('cachet::cachet.powered_by') }}
-        <a href="https://cachethq.io" title="{{ __('cachet::cachet.open_source_status_page') }}" rel="noopener" class="inline-flex items-center font-semibold transition hover:opacity-80">
-            <x-cachet::logo class="hidden h-5 w-auto sm:block" />
-            <x-cachet::logomark class="h-5 w-auto sm:hidden" />
-            <span class="ml-2">{{ $cachetVersion }}</span>
-        </a>
-    </div>
-    @endif
-    @if($showTimezone)
-    <div id="cachet-footer-timezone" data-timezone="{{ $timezone }}" data-label=""></div>
-    <script defer async>
-        document.addEventListener('DOMContentLoaded', function () {
-            const timeZoneLabel = '{!! preg_replace(
-            '/\*(.*?)\*/',
-            '<span class="font-semibold">$1</span>',
-            __('cachet::cachet.all_times_shown_in', ['timezone' => ':timezone:'])
-        ) !!}'
-            let footerTimeZone = document.getElementById('cachet-footer-timezone').dataset.timezone;
-            if (footerTimeZone === '-') {
-                footerTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-            }
-            document.getElementById('cachet-footer-timezone').innerHTML = timeZoneLabel.replace(':timezone:', footerTimeZone);
-        });
-    </script>
-    @endif
-</footer>
+    <footer class="mt-auto border-t border-zinc-900/10 dark:border-white/15">
+        <div class="container mx-auto flex max-w-5xl flex-col items-center justify-center gap-3 px-4 py-8 text-center text-xs text-zinc-500 dark:text-zinc-400 sm:px-6 lg:px-8">
+            @if($showSupport)
+                <div class="inline-flex items-center gap-2 tracking-tight">
+                    <span>{{ __('cachet::cachet.powered_by') }}</span>
+                    <a href="https://cachethq.io" title="{{ __('cachet::cachet.open_source_status_page') }}" rel="noopener" class="inline-flex items-center gap-2 font-semibold text-zinc-700 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100">
+                        <x-cachet::logo class="hidden h-4 w-auto sm:block" />
+                        <x-cachet::logomark class="h-4 w-auto sm:hidden" />
+                        <span class="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-[10px] font-medium text-zinc-600 ring-1 ring-zinc-900/10 dark:bg-zinc-800 dark:text-zinc-400 dark:ring-white/15">{{ $cachetVersion }}</span>
+                    </a>
+                </div>
+            @endif
+            @if($showTimezone)
+                <div id="cachet-footer-timezone" data-timezone="{{ $timezone }}" data-label="" class="text-[11px] tracking-tight text-zinc-400 dark:text-zinc-500"></div>
+                <script defer async>
+                    document.addEventListener('DOMContentLoaded', function () {
+                        const timeZoneLabel = '{!! preg_replace(
+                            '/\*(.*?)\*/',
+                            '<span class="font-semibold text-zinc-600 dark:text-zinc-300">$1</span>',
+                            __('cachet::cachet.all_times_shown_in', ['timezone' => ':timezone:'])
+                        ) !!}'
+                        let footerTimeZone = document.getElementById('cachet-footer-timezone').dataset.timezone;
+                        if (footerTimeZone === '-') {
+                            footerTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+                        }
+                        document.getElementById('cachet-footer-timezone').innerHTML = timeZoneLabel.replace(':timezone:', footerTimeZone);
+                    });
+                </script>
+            @endif
+        </div>
+    </footer>
 @endif

resources/views/components/header.blade.php

@@ -1,31 +1,30 @@
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_NAVIGATION_BEFORE) }}
-<div class="flex items-center justify-between border-b border-zinc-200 px-4 sm:px-6 lg:px-8 py-4 dark:border-zinc-700">
-    <div>
-        <a href="{{ route('cachet.status-page') }}" class="transition hover:opacity-80">
+<header class="border-b border-zinc-900/10 bg-white/70 backdrop-blur dark:border-white/15 dark:bg-zinc-900/50">
+    <div class="container mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
+        <a href="{{ route('cachet.status-page') }}" class="inline-flex items-center transition hover:opacity-80">
             @if($appBanner)
-            <img src="{{ Storage::url($appBanner) }}" alt="{{ $siteName }}" class="h-8 w-auto" />
+                <img src="{{ Storage::url($appBanner) }}" alt="{{ $siteName }}" class="h-8 w-auto" />
             @else
-            <x-cachet::logo class="hidden h-8 w-auto sm:block" />
-            <x-cachet::logomark class="h-8 w-auto sm:hidden" />
+                <x-cachet::logo class="hidden h-8 w-auto sm:block" />
+                <x-cachet::logomark class="h-8 w-auto sm:hidden" />
             @endif
         </a>
-    </div>
 
-    @if ($dashboardLoginLink)
-    <div class="flex items-center gap-2.5 sm:gap-5">
-        <a href="{{ Cachet\Cachet::dashboardPath() }}" class="rounded-sm bg-accent px-3 py-2 text-sm font-semibold text-accent-foreground">
-            {{ __('filament-panels::pages/dashboard.title') }}
-        </a>
-        @auth
-        {{-- TODO: This form sucks... --}}
-        <form action="{{ \Cachet\Cachet::dashboardPath() }}/logout" method="POST">
-            @csrf
-            <button class="text-sm font-medium text-zinc-800 transition hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300 sm:text-base">
-                {{ __('filament-panels::layout.actions.logout.label') }}
-            </button>
-        </form>
-        @endauth
+        @if ($dashboardLoginLink)
+            <div class="flex items-center gap-3 sm:gap-4">
+                <a href="{{ Cachet\Cachet::dashboardPath() }}" class="inline-flex items-center rounded-md bg-accent px-3 py-1.5 text-sm font-semibold text-accent-foreground shadow-sm ring-1 ring-accent/30 transition hover:opacity-90">
+                    {{ __('filament-panels::pages/dashboard.title') }}
+                </a>
+                @auth
+                    <form action="{{ \Cachet\Cachet::dashboardPath() }}/logout" method="POST">
+                        @csrf
+                        <button class="text-sm font-medium text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100">
+                            {{ __('filament-panels::layout.actions.logout.label') }}
+                        </button>
+                    </form>
+                @endauth
+            </div>
+        @endif
     </div>
-    @endif
-</div>
+</header>
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_NAVIGATION_AFTER) }}