Skip to content

Console and masthead: last blue-slate residue out #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
epheo merged 1 commit into from
Sep 2, 2026
Merged

Console and masthead: last blue-slate residue out #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions web/src/lib/components/AppHeader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@
title="Issues — standing problems in the visible inventory"
class="relative rounded p-1.5 hover:bg-side-hover {open
? 'bg-side-hover text-white'
: 'text-slate-300'}"
: 'text-side-dim'}"
>
<TriangleAlert size={16} />
{#if issues.length > 0}
Expand Down Expand Up @@ -273,7 +273,7 @@
class="relative flex items-center gap-1.5 rounded border border-side-active px-2.5 py-1 text-xs font-medium hover:bg-side-hover {page
.url.pathname === '/changes'
? 'bg-side-hover text-white'
: 'text-slate-200'}"
: 'text-side-ink'}"
>
<ClipboardList size={13} /> Review changes
{#if inFlight > 0}
Expand All @@ -288,7 +288,7 @@
{#snippet trigger({ open, toggle })}
<button
onclick={toggle}
class="flex items-center gap-1.5 rounded px-2 py-1 text-xs text-slate-200 hover:bg-side-hover"
class="flex items-center gap-1.5 rounded px-2 py-1 text-xs text-side-ink hover:bg-side-hover"
>
<UserIcon size={14} />
{session.user?.username}
Expand Down
8 changes: 4 additions & 4 deletions web/src/lib/components/Console.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
detail = '';
const rfb = new RFB(screen, url, {});
rfb.scaleViewport = true;
rfb.background = '#0f172a';
rfb.background = '#151515';

rfb.addEventListener('connect', () => (status = 'connected'));
rfb.addEventListener('disconnect', (e: Event) => {
Expand Down Expand Up @@ -61,16 +61,16 @@
<span class="text-ink-muted capitalize">{status}{detail ? ` — ${detail}` : ''}</span>
</div>
<!-- The bezel behind the framebuffer stays dark in both themes (raw slate). -->
<div class="relative min-h-0 flex-1 overflow-hidden rounded bg-slate-900">
<div class="relative min-h-0 flex-1 overflow-hidden rounded bg-[#151515]">
<div bind:this={screen} class="h-full w-full"></div>
{#if status === 'disconnected'}
<div
class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-sm text-slate-300"
class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-sm text-side-dim"
>
<span>{detail || 'Disconnected'}</span>
<button
onclick={() => reconnectKey++}
class="rounded border border-slate-600 px-2 py-0.5 text-xs text-slate-300 hover:bg-slate-800"
class="rounded border border-side-active px-2 py-0.5 text-xs text-side-dim hover:bg-[#333638]"
>Reconnect</button
>
</div>
Expand Down
2 changes: 1 addition & 1 deletion web/src/lib/components/ConsolePreview.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
onclick={onopen}
title="Open the live console"
style:aspect-ratio={aspect}
class="group relative block w-full max-w-xl overflow-hidden rounded border border-line bg-slate-900 xl:w-auto xl:shrink-0"
class="group relative block w-full max-w-xl overflow-hidden rounded border border-line bg-[#151515] xl:w-auto xl:shrink-0"
class:hidden={failed}
>
<img
Expand Down
6 changes: 3 additions & 3 deletions web/src/lib/components/GlobalSearch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,17 +245,17 @@

<div class="relative mx-auto w-80">
<div class="flex items-center gap-2 rounded bg-side-hover px-2.5 py-1">
<Search size={13} class="shrink-0 text-slate-400" />
<Search size={13} class="shrink-0 text-side-dim" />
<input
bind:this={input}
bind:value={query}
onfocus={() => (open = true)}
{onkeydown}
placeholder="Search, or type a verb: migrate web…"
aria-label="Search inventory"
class="w-full bg-transparent text-xs text-white placeholder-slate-400 focus:outline-none"
class="w-full bg-transparent text-xs text-white placeholder-side-dim focus:outline-none"
/>
<kbd class="shrink-0 rounded border border-side-active px-1 text-[10px] text-slate-300"
<kbd class="shrink-0 rounded border border-side-active px-1 text-[10px] text-side-dim"
>Ctrl K</kbd
>
</div>
Expand Down
6 changes: 3 additions & 3 deletions web/src/lib/components/ToastHost.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
{#if t.kind === 'success'}<CircleCheck size={15} class="shrink-0 text-emerald-400" />
{:else if t.kind === 'error'}<CircleAlert size={15} class="shrink-0 text-red-400" />
{:else if t.kind === 'warning'}<TriangleAlert size={15} class="shrink-0 text-amber-400" />
{:else}<Info size={15} class="shrink-0 text-slate-400" />{/if}
{:else}<Info size={15} class="shrink-0 text-side-dim" />{/if}
{t.msg}
{#if t.action}
{@const action = t.action}
Expand All @@ -23,15 +23,15 @@
action.run();
ui.dismissToast(t.id);
}}
class="shrink-0 rounded border border-slate-500 px-2 py-0.5 text-xs font-medium hover:bg-slate-700"
class="shrink-0 rounded border border-side-active px-2 py-0.5 text-xs font-medium hover:bg-side-hover"
>
{action.label}
</button>
{/if}
<button
onclick={() => ui.dismissToast(t.id)}
aria-label="Dismiss"
class="shrink-0 text-slate-400 hover:text-white"><X size={14} /></button
class="shrink-0 text-side-dim hover:text-white"><X size={14} /></button
>
</div>
{/each}
Expand Down
Loading