rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): improve dark-mode loading contrast and remove header borders

Browse source 
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.
This commit is contained in:
Andras Bacsai 2026-08-16 21:00:33 +02:00
parent 5b517f21be
commit 6ad9605734
7 changed files with 40 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
resources/css/app.css
View file

@ -373,24 +373,24 @@ .lds-heart {
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,

2
resources/css/utilities.css
View file

@ -139,7 +139,7 @@ @utility control-selected {
}
@utility loading-indicator {
@apply text-coollabs dark:text-coollabs;
@apply text-coollabs dark:text-warning;
}
/* Compact icon-only control (gear, chevrons, etc.) */

2
resources/views/components/navbar.blade.php
View file

@ -218,7 +218,7 @@ class="{{ request()->is('subscription*') ? 'menu-item-active menu-item' : 'menu-
@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"

2
resources/views/layouts/app.blade.php
View file

@ -32,7 +32,7 @@ class="dark:text-inherit text-black">
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'">

10
tests/Feature/CheckpointItemContrastTest.php Normal file
View file

@ -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);
});

9
tests/Feature/LivewireLoadingColorTest.php
View file

@ -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 () {

16
tests/Feature/SidebarNavigationMarkupTest.php
View file

@ -57,6 +57,22 @@
->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'));