mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-19 14:15:37 +00:00
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:
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);
|
||||
});
|
||||
@@ -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'));
|
||||
|
||||
|
||||
Reference in new issue
Block a user