From 6ad9605734234b2f74f8f1fcfd70a54c80802c76 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sun, 16 Aug 2026 21:00:33 +0200
Subject: [PATCH] fix(ui): improve dark-mode loading contrast and remove header
 borders

Use the warning accent for dark-mode loading indicators and simplify desktop navigation chrome by removing sidebar and top-bar separator borders. Add regression coverage for loading contrast and checkpoint spinner markup.
---
 resources/css/app.css                         | 14 +++++++-------
 resources/css/utilities.css                   |  2 +-
 resources/views/components/navbar.blade.php   |  2 +-
 resources/views/layouts/app.blade.php         |  2 +-
 tests/Feature/CheckpointItemContrastTest.php  | 10 ++++++++++
 tests/Feature/LivewireLoadingColorTest.php    |  9 ++++-----
 tests/Feature/SidebarNavigationMarkupTest.php | 16 ++++++++++++++++
 7 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 tests/Feature/CheckpointItemContrastTest.php

diff --git a/resources/css/app.css b/resources/css/app.css
index fcb97b814..49862f646 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -373,24 +373,24 @@ tr td:first-child {
     animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-/* Loading feedback uses the Coolify brand accent consistently in dark mode. */
+/* Loading feedback uses the higher-contrast warning accent in dark mode. */
 .dark .animate-spin {
-    color: var(--color-coollabs) !important;
+    color: var(--color-warning) !important;
 }
 
 .dark #nprogress .bar {
-    background: var(--color-coollabs) !important;
+    background: var(--color-warning) !important;
 }
 
 .dark #nprogress .peg {
     box-shadow:
-        0 0 10px var(--color-coollabs),
-        0 0 5px var(--color-coollabs) !important;
+        0 0 10px var(--color-warning),
+        0 0 5px var(--color-warning) !important;
 }
 
 .dark #nprogress .spinner-icon {
-    border-top-color: var(--color-coollabs) !important;
-    border-left-color: var(--color-coollabs) !important;
+    border-top-color: var(--color-warning) !important;
+    border-left-color: var(--color-warning) !important;
 }
 
 html[data-theme="custom"] .loading-indicator,
diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index 0dcd16e64..44218b0f3 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -139,7 +139,7 @@
 }
 
 @utility loading-indicator {
-    @apply text-coollabs dark:text-coollabs;
+    @apply text-coollabs dark:text-warning;
 }
 
 /* Compact icon-only control (gear, chevrons, etc.) */
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 0be0fd0aa..b06235221 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -218,7 +218,7 @@
         @endif
     </ul>
     {{-- Sticky sidebar collapser (desktop only; mobile uses a temporary slide-over) --}}
-    <div class="sticky bottom-0 mt-auto -mx-2 hidden items-center gap-1 border-t border-neutral-200 bg-white px-2 py-2 dark:border-white/[0.06] dark:bg-panel lg:-mx-3 lg:flex lg:px-3"
+    <div class="sticky bottom-0 mt-auto -mx-2 hidden items-center gap-1 bg-white px-2 py-2 dark:bg-panel lg:-mx-3 lg:flex lg:px-3"
         :class="collapsed ? 'flex-col-reverse justify-center' : 'justify-between'">
         <x-top-user-menu sidebar />
         <button type="button" @click="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar"
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index bbb87ec8c..9933f7cbc 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -32,7 +32,7 @@
                 x-data="{ resourceActionsOpen: false }"
                 @resource-actions-toggled.window="resourceActionsOpen = $event.detail.open"
                 :class="{ 'z-[1000]': resourceActionsOpen }"
-                class="hidden lg:flex fixed top-0 inset-x-0 z-50 h-12 items-center bg-white/95 dark:bg-panel/95 backdrop-blur border-b border-neutral-200 dark:border-white/[0.06]">
+                class="hidden lg:flex fixed top-0 inset-x-0 z-50 h-12 items-center bg-white/95 dark:bg-panel/95 backdrop-blur">
                 {{-- Brand (width tracks sidebar) --}}
                 <div class="flex items-center gap-2 h-full shrink-0 border-r border-neutral-200 dark:border-white/[0.06] transition-[width] duration-200"
                     :class="collapsed ? 'w-16 justify-center px-0' : 'w-56 px-4'">
diff --git a/tests/Feature/CheckpointItemContrastTest.php b/tests/Feature/CheckpointItemContrastTest.php
new file mode 100644
index 000000000..b66765526
--- /dev/null
+++ b/tests/Feature/CheckpointItemContrastTest.php
@@ -0,0 +1,10 @@
+<?php
+
+it('uses the high contrast accent for a running checkpoint spinner', function () {
+    $view = $this->blade('<x-checkpoint-item title="Server is reachable" status="running" />');
+
+    $view
+        ->assertSee('dark:text-warning', false)
+        ->assertSee('animate-spin', false)
+        ->assertDontSee('spinner-current', false);
+});
diff --git a/tests/Feature/LivewireLoadingColorTest.php b/tests/Feature/LivewireLoadingColorTest.php
index cafe96a92..c524463c9 100644
--- a/tests/Feature/LivewireLoadingColorTest.php
+++ b/tests/Feature/LivewireLoadingColorTest.php
@@ -1,20 +1,19 @@
 <?php
 
-test('loading indicators use coollabs purple throughout dark mode', function () {
+test('loading indicators use warning yellow throughout dark mode', function () {
     $utilities = file_get_contents(resource_path('css/utilities.css'));
     $appCss = file_get_contents(resource_path('css/app.css'));
     $loading = file_get_contents(resource_path('views/components/loading.blade.php'));
     $pageLoading = file_get_contents(resource_path('views/components/page-loading.blade.php'));
     expect($utilities)
         ->toContain('@utility loading-indicator')
-        ->toContain('@apply text-coollabs dark:text-coollabs;')
+        ->toContain('@apply text-coollabs dark:text-warning;')
         ->and($loading)->toContain('loading-indicator')
         ->and($pageLoading)->toContain('loading-indicator')
         ->and($appCss)->toContain('.dark .animate-spin')
-        ->toContain('color: var(--color-coollabs) !important;')
+        ->toContain('color: var(--color-warning) !important;')
         ->toContain('.dark #nprogress .bar')
-        ->toContain('background: var(--color-coollabs) !important;')
-        ->not->toContain('color: var(--color-warning) !important;');
+        ->toContain('background: var(--color-warning) !important;');
 });
 
 test('livewire navigation progress bar uses coollabs purple', function () {
diff --git a/tests/Feature/SidebarNavigationMarkupTest.php b/tests/Feature/SidebarNavigationMarkupTest.php
index ad5f37fc7..787e1ef15 100644
--- a/tests/Feature/SidebarNavigationMarkupTest.php
+++ b/tests/Feature/SidebarNavigationMarkupTest.php
@@ -57,6 +57,22 @@ it('draws a single border between the desktop sidebar and main content', functio
         ->and($layout)->not->toContain('lg:border-l border-neutral-200');
 });
 
+it('does not separate the desktop sidebar controls with a top border', function () {
+    $navbar = file_get_contents(resource_path('views/components/navbar.blade.php'));
+
+    expect($navbar)
+        ->toContain('sticky bottom-0 mt-auto -mx-2 hidden items-center gap-1 bg-white')
+        ->not->toContain('sticky bottom-0 mt-auto -mx-2 hidden items-center gap-1 border-t');
+});
+
+it('does not draw a bottom border below the desktop top bar', function () {
+    $layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
+
+    expect($layout)
+        ->toContain('fixed top-0 inset-x-0 z-50 h-12 items-center bg-white/95 dark:bg-panel/95 backdrop-blur')
+        ->not->toContain('backdrop-blur border-b border-neutral-200 dark:border-white/[0.06]');
+});
+
 it('separates the mobile sidebar from the page with a visible border', function () {
     $layout = file_get_contents(resource_path('views/layouts/app.blade.php'));