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.
This commit is contained in:
Andras Bacsai committed 2026-08-16 21:00:33 +02:00
1 parent 5b517f21be
commit 6ad9605734
7 files changed
+40 -15

No files matched your search

@@ -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);
});
+4 -5
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 () {
@@ -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'));