starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-09-24 07:25:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

style(dashboard): apply surface treatment to analytics KPI cards

Browse Source 
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.
This commit is contained in:
Andras Bacsai
2026-09-08 14:26:39 +02:00
parent f17cdc1c74
commit 16ec32cf65
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/dashboard/traffic-analytics.blade.php
+5 -5
View File
@@ -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">
tests/Feature/TrafficAnalytics/DashboardTrafficAnalyticsTest.php
+11
View File
@@ -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,