← back to Exo
fix: improve text contrast on downloads page (#1601)
644c5573ce5e038a6fc736ada8133b7e90b27fd4 · 2026-02-24 02:42:49 -0800 · Alex Cheema
## Summary
- Bumps opacity on dark-grey text/icons on the downloads page that were
nearly invisible against the dark background
- Informational text (GB sizes, speeds, disk free, model IDs) → full
`text-exo-light-gray`
- Interactive icons (delete, resume, retry) → `/70` at rest
- Hover-only elements (download button) → `/60`
## Test plan
- [ ] Open http://localhost:52415/downloads with models downloaded
- [ ] Verify GB downloaded amounts are clearly visible
- [ ] Verify delete trash icons are visible (not just on hover)
- [ ] Verify download speed text is readable
- [ ] Verify "paused" labels and resume buttons are visible
- [ ] Verify "X GB free" disk labels in column headers are readable
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Files touched
M dashboard/src/routes/downloads/+page.svelte
Diff
commit 644c5573ce5e038a6fc736ada8133b7e90b27fd4
Author: Alex Cheema <41707476+AlexCheema@users.noreply.github.com>
Date: Tue Feb 24 02:42:49 2026 -0800
fix: improve text contrast on downloads page (#1601)
## Summary
- Bumps opacity on dark-grey text/icons on the downloads page that were
nearly invisible against the dark background
- Informational text (GB sizes, speeds, disk free, model IDs) → full
`text-exo-light-gray`
- Interactive icons (delete, resume, retry) → `/70` at rest
- Hover-only elements (download button) → `/60`
## Test plan
- [ ] Open http://localhost:52415/downloads with models downloaded
- [ ] Verify GB downloaded amounts are clearly visible
- [ ] Verify delete trash icons are visible (not just on hover)
- [ ] Verify download speed text is readable
- [ ] Verify "paused" labels and resume buttons are visible
- [ ] Verify "X GB free" disk labels in column headers are readable
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
dashboard/src/routes/downloads/+page.svelte | 28 +++++++++++++---------------
1 file changed, 13 insertions(+), 15 deletions(-)
diff --git a/dashboard/src/routes/downloads/+page.svelte b/dashboard/src/routes/downloads/+page.svelte
index c69c7635..e3420005 100644
--- a/dashboard/src/routes/downloads/+page.svelte
+++ b/dashboard/src/routes/downloads/+page.svelte
@@ -412,7 +412,7 @@
<div>{col.label}</div>
{#if col.diskAvailable != null}
<div
- class="text-[9px] text-exo-light-gray/60 normal-case tracking-normal mt-0.5"
+ class="text-[9px] text-white/70 normal-case tracking-normal mt-0.5"
>
{formatBytes(col.diskAvailable)} free
</div>
@@ -436,7 +436,7 @@
</div>
{#if row.prettyName}
<div
- class="text-[10px] text-exo-light-gray/60"
+ class="text-[10px] text-white/60"
title={row.modelId}
>
{row.modelId}
@@ -450,7 +450,7 @@
title="View model details"
>
<svg
- class="w-4 h-4 text-white/30 hover:text-white/60"
+ class="w-4 h-4 text-white/60 hover:text-white/80"
viewBox="0 0 24 24"
fill="currentColor"
>
@@ -483,12 +483,12 @@
clip-rule="evenodd"
></path>
</svg>
- <span class="text-xs text-exo-light-gray/70"
+ <span class="text-xs text-white/70"
>{formatBytes(cell.totalBytes)}</span
>
<button
type="button"
- class="text-exo-light-gray/40 hover:text-red-400 transition-colors mt-0.5 cursor-pointer"
+ class="text-white/50 hover:text-red-400 transition-colors mt-0.5 cursor-pointer"
onclick={() =>
deleteDownload(col.nodeId, row.modelId)}
title="Delete from this node"
@@ -530,7 +530,7 @@
).toFixed(1)}%"
></div>
</div>
- <span class="text-[10px] text-exo-light-gray/60"
+ <span class="text-[10px] text-white/70"
>{formatSpeed(cell.speed)}</span
>
</div>
@@ -542,7 +542,7 @@
: "Download pending"}
>
{#if cell.downloaded > 0 && cell.total > 0}
- <span class="text-exo-light-gray/70 text-xs"
+ <span class="text-white/70 text-xs"
>{formatBytes(cell.downloaded)} / {formatBytes(
cell.total,
)}</span
@@ -561,7 +561,7 @@
{#if row.shardMetadata}
<button
type="button"
- class="text-exo-light-gray/50 hover:text-exo-yellow transition-colors cursor-pointer"
+ class="text-white/50 hover:text-exo-yellow transition-colors cursor-pointer"
onclick={() =>
startDownload(col.nodeId, row.shardMetadata!)}
title="Resume download on this node"
@@ -581,14 +581,13 @@
</svg>
</button>
{:else}
- <span class="text-exo-light-gray/40 text-[10px]"
- >paused</span
+ <span class="text-white/50 text-[10px]">paused</span
>
{/if}
{:else if row.shardMetadata}
<button
type="button"
- class="text-exo-light-gray/30 hover:text-exo-yellow transition-colors cursor-pointer"
+ class="text-white/50 hover:text-exo-yellow transition-colors cursor-pointer"
onclick={() =>
startDownload(col.nodeId, row.shardMetadata!)}
title="Start download on this node"
@@ -608,8 +607,7 @@
</svg>
</button>
{:else}
- <span class="text-exo-light-gray/50 text-sm">...</span
- >
+ <span class="text-white/40 text-sm">...</span>
{/if}
</div>
{:else if cell.kind === "failed"}
@@ -631,7 +629,7 @@
{#if row.shardMetadata}
<button
type="button"
- class="text-exo-light-gray/40 hover:text-exo-yellow transition-colors cursor-pointer"
+ class="text-white/50 hover:text-exo-yellow transition-colors cursor-pointer"
onclick={() =>
startDownload(col.nodeId, row.shardMetadata!)}
title="Retry download on this node"
@@ -663,7 +661,7 @@
{#if row.shardMetadata}
<button
type="button"
- class="text-exo-light-gray/30 hover:text-exo-yellow transition-colors mt-0.5 opacity-0 group-hover:opacity-100 cursor-pointer"
+ class="text-white/50 hover:text-exo-yellow transition-colors mt-0.5 opacity-0 group-hover:opacity-100 cursor-pointer"
onclick={() =>
startDownload(col.nodeId, row.shardMetadata!)}
title="Download to this node"
← 12c3015f fix qwen moe tensor sharding (#1604)
·
back to Exo
·
download .model files in exo bench (#1607) 2fe68931 →