From 16ec32cf6529618415a5d4ad7d8ea8c9e9eb075c Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 8 Sep 2026 14:26:39 +0200
Subject: [PATCH] style(dashboard): apply surface treatment to analytics KPI
 cards

Add a light/dark ring around the dashboard analytics KPI group and use canvas-tinted dark card backgrounds instead of dark:bg-base so the cards match other dashboard surfaces.
---
 .../livewire/dashboard/traffic-analytics.blade.php    | 10 +++++-----
 .../DashboardTrafficAnalyticsTest.php                 | 11 +++++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/resources/views/livewire/dashboard/traffic-analytics.blade.php b/resources/views/livewire/dashboard/traffic-analytics.blade.php
index a87272008b..6c0bbcc451 100644
--- a/resources/views/livewire/dashboard/traffic-analytics.blade.php
+++ b/resources/views/livewire/dashboard/traffic-analytics.blade.php
@@ -65,9 +65,9 @@ $spark = 'refreshChartData-'.$chartId.'-status';
             icon-name="network" />
     @else
         {{-- Sparkline KPI cards. Each links through to the full analytics page. --}}
-        <div class="grid grid-cols-1 gap-px overflow-hidden rounded-xl bg-neutral-200 sm:grid-cols-2 lg:grid-cols-4 dark:bg-white/[0.07]">
+        <div class="grid grid-cols-1 gap-px overflow-hidden rounded-xl bg-neutral-200 ring-1 ring-neutral-200 sm:grid-cols-2 lg:grid-cols-4 dark:bg-white/[0.07] dark:ring-white/[0.08]">
             <a href="{{ route('analytics') }}" {{ wireNavigate() }}
-                class="group flex flex-col bg-white px-4 py-3 transition-colors hover:bg-neutral-50 dark:bg-base dark:hover:bg-white/[0.03]">
+                class="group flex flex-col bg-white px-4 py-3 transition-colors hover:bg-neutral-50 dark:bg-[color-mix(in_srgb,var(--coollabs-canvas)_97.5%,white)] dark:hover:bg-[color-mix(in_srgb,var(--coollabs-canvas)_96%,white)]">
                 <span class="text-[11px] font-medium tracking-wide text-neutral-500 uppercase dark:text-fg-dim">Requests</span>
                 <span class="mt-1 text-xl font-semibold text-black tabular-nums dark:text-fg">{{ number_format($overview['requests'] ?? 0) }}</span>
                 <div class="mt-auto pt-3">
@@ -81,7 +81,7 @@ $spark = 'refreshChartData-'.$chartId.'-status';
                 </div>
             </a>
             <a href="{{ route('analytics') }}" {{ wireNavigate() }}
-                class="group flex flex-col bg-white px-4 py-3 transition-colors hover:bg-neutral-50 dark:bg-base dark:hover:bg-white/[0.03]">
+                class="group flex flex-col bg-white px-4 py-3 transition-colors hover:bg-neutral-50 dark:bg-[color-mix(in_srgb,var(--coollabs-canvas)_97.5%,white)] dark:hover:bg-[color-mix(in_srgb,var(--coollabs-canvas)_96%,white)]">
                 <span class="flex items-center text-[11px] font-medium tracking-wide text-neutral-500 uppercase dark:text-fg-dim">
                     Unique visitors
                     @if ($uniquesApproximate)
@@ -100,7 +100,7 @@ $spark = 'refreshChartData-'.$chartId.'-status';
                 </div>
             </a>
             <a href="{{ route('analytics') }}" {{ wireNavigate() }}
-                class="group flex flex-col bg-white px-4 py-3 transition-colors hover:bg-neutral-50 dark:bg-base dark:hover:bg-white/[0.03]">
+                class="group flex flex-col bg-white px-4 py-3 transition-colors hover:bg-neutral-50 dark:bg-[color-mix(in_srgb,var(--coollabs-canvas)_97.5%,white)] dark:hover:bg-[color-mix(in_srgb,var(--coollabs-canvas)_96%,white)]">
                 <span class="text-[11px] font-medium tracking-wide text-neutral-500 uppercase dark:text-fg-dim">Bandwidth</span>
                 <span class="mt-1 text-xl font-semibold text-black tabular-nums dark:text-fg">{{ formatBytes($this->bandwidthBytes()) }}</span>
                 <div class="mt-auto pt-3">
@@ -114,7 +114,7 @@ $spark = 'refreshChartData-'.$chartId.'-status';
                 </div>
             </a>
             <a href="{{ route('analytics') }}" {{ wireNavigate() }}
-                class="group flex flex-col bg-white px-4 py-3 transition-colors hover:bg-neutral-50 dark:bg-base dark:hover:bg-white/[0.03]">
+                class="group flex flex-col bg-white px-4 py-3 transition-colors hover:bg-neutral-50 dark:bg-[color-mix(in_srgb,var(--coollabs-canvas)_97.5%,white)] dark:hover:bg-[color-mix(in_srgb,var(--coollabs-canvas)_96%,white)]">
                 <span class="text-[11px] font-medium tracking-wide text-neutral-500 uppercase dark:text-fg-dim">Error rate</span>
                 <span class="mt-1 text-xl font-semibold text-black tabular-nums dark:text-fg">{{ $this->errorRate() }}%</span>
                 <div class="mt-auto pt-3">
diff --git a/tests/Feature/TrafficAnalytics/DashboardTrafficAnalyticsTest.php b/tests/Feature/TrafficAnalytics/DashboardTrafficAnalyticsTest.php
index 15504376c2..76c06e2132 100644
--- a/tests/Feature/TrafficAnalytics/DashboardTrafficAnalyticsTest.php
+++ b/tests/Feature/TrafficAnalytics/DashboardTrafficAnalyticsTest.php
@@ -150,6 +150,17 @@ it('shows loading states while the dashboard range refreshes', function () {
         ->toContain('aria-label="Loading analytics"');
 });
 
+it('uses the dashboard surface treatment for the analytics KPI group', function () {
+    $view = file_get_contents(resource_path('views/livewire/dashboard/traffic-analytics.blade.php'));
+
+    expect($view)
+        ->toContain('rounded-xl bg-neutral-200 ring-1 ring-neutral-200')
+        ->toContain('dark:bg-white/[0.07] dark:ring-white/[0.08]')
+        ->toContain('dark:bg-[color-mix(in_srgb,var(--coollabs-canvas)_97.5%,white)]')
+        ->toContain('dark:hover:bg-[color-mix(in_srgb,var(--coollabs-canvas)_96%,white)]')
+        ->not->toContain('dark:bg-base dark:hover:bg-white/[0.03]');
+});
+
 it('shows a failure empty-state instead of an all-zero KPI panel when every server fetch fails', function () {
     $serverOne = Server::factory()->create([
         'team_id' => $this->team->id,