Skip to content

Commit 3b181ac

Browse files
committed
release: v6.14.2 — UX polish (7 S-items from cross-release audit)
Post-v6.14.0 UX audit surfaced 11 inconsistencies accumulated across v6.11.x–v6.14.0. Shipping the 7 trivial ones; the 4 M+L items (form-control migration, platform-pill helper, pill-tag class, unified pill component) deferred pending a design-system pass with DESIGN.md as prerequisite. Fixed — two latent CSS bugs: - var(--bg-dim) was referenced 8 times but never declared (working-by-accident, falling to transparent). Translate progress container, missing-keys table header, Review table header, egress table header + detail row were rendering without their intended dark-row shading since v6.11.0 / v6.7. Declared as alias of var(--surface2) in both dark and light theme blocks. - var(--text-muted) was referenced 37 times across 7 pages but never declared. Worked by accident via CSS inheritance — would have broken visibly on any theme swap. Declared as alias of var(--text-dim) in both theme blocks. Changed — token hygiene: - 18 Tailwind-style hexes (#ef4444, #f59e0b) in system.js replaced with var(--red) / var(--yellow). Fixes visible "two reds / two yellows" drift between Translations tab and Multi-Host card. - 4 #334155 slate fallbacks in multihost.js platform/cloud pills replaced with var(--text-dim). Theme-aware. - "Latest" pill in What's New now uses .badge-running class instead of inline style="background:var(--green);color:#fff". - Google + DeepL brand colours extracted to a named constant (kept as hex — brand identity, not theme token). Added: .empty-msg.is-error class replacing 8 inline reds in system.js error states. Tests: 740/4 (unchanged — pure frontend).
1 parent e917ed1 commit 3b181ac

8 files changed

Lines changed: 100 additions & 34 deletions

File tree

CHANGELOG.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,51 @@
22

33
All notable changes to Docker Dash are documented here.
44

5+
## [6.14.2] - 2026-04-22 — "UX polish — token hygiene + two latent CSS bugs fixed"
6+
7+
Post-v6.14.0 cross-release UX audit surfaced 11 inconsistencies accumulated across v6.11.x–v6.14.0. This release ships the 7 trivial ones (all S-class per the audit); the 3 medium and 1 large items need a design-system decision first and are deferred.
8+
9+
### Fixed — Two latent CSS bugs
10+
11+
**Neither was "cosmetic preference" — both were working-by-accident or visibly broken.**
12+
13+
- **`var(--bg-dim)` was referenced 8 times but never declared** ([public/css/app.css:15-54](public/css/app.css#L15-L54) before this release). Fell back to transparent. The Translate progress container, missing-keys table header, Review table header, egress table header, and egress detail row were all rendering **without their intended dark-row shading** since v6.11.0 / v6.7. Declared as alias: `--bg-dim: var(--surface2)`. 8 call sites immediately restore correct rendering.
14+
- **`var(--text-muted)` was referenced 37 times but never declared.** Worked by accident — CSS inheritance happened to pick up a dim-grey from the parent `color`. Would have broken visibly on any theme swap (e.g. enterprise mode or light theme). Declared as alias: `--text-muted: var(--text-dim)`. Both dark and light theme blocks updated.
15+
16+
### Changed — Token hygiene
17+
18+
- **Tailwind-style reds and yellows replaced with design tokens** ([public/js/pages/system.js](public/js/pages/system.js)). The Translations tab + older Egress panel used `#ef4444` (14 occurrences) and `#f59e0b` (4 occurrences) in inline styles. Replaced all 18 with `var(--red)` / `var(--yellow)`. Side-by-side the Multi-Host host-offline card (which uses `--red` = `#f85149`) and the Translations Usage progress bar were showing visibly different shades of red. Now they match.
19+
- **`#334155` slate-700 fallback replaced with `var(--text-dim)`** ([public/js/pages/multihost.js](public/js/pages/multihost.js) — 4 occurrences). Only surfaced when the backend omits a `color` field on a platform / cloud badge, but when it did it wouldn't match the theme. Now theme-aware.
20+
- **"Latest" pill in What's New uses `.badge-running`** instead of inline `style="background:var(--green);color:#fff"` ([public/js/pages/whatsnew.js:1227](public/js/pages/whatsnew.js#L1227)). Same visual result, but now participates in the same class-based styling as every other green badge.
21+
- **Google + DeepL brand colours extracted to a named constant** ([public/js/pages/system.js](public/js/pages/system.js) — in `_renderTranslationsProviders`). Was inline in a template literal (`#4285f4` / `#0f2b46`). Now `BRAND_COLOR = { google, deepl }` — still hex because brand colours are vendor identity, not theme tokens (explicitly kept out of `:root` to not confuse a future dark/light swap).
22+
23+
### Added — `.empty-msg.is-error` modifier
24+
25+
- New class in [public/css/app.css:717](public/css/app.css#L717): `.empty-msg.is-error { color: var(--red); }`. Replaces the 8 inline `style="color:var(--red)"` repetitions in the `.empty-msg` elements ([public/js/pages/system.js](public/js/pages/system.js)). Behaves identically; now uniform.
26+
27+
### Deferred (explicit)
28+
29+
The 4 non-S items from the audit are **intentionally not in this release**:
30+
- **Provider-card inputs → `.form-control`** (M, 30-60 min): 8 inline-styled inputs in Translations panels. Inputs look identical today; migration is hygiene.
31+
- **`_platformPill(data)` helper in multihost.js** (M, 30 min): platform + cloud pills are hand-copied templates ~90 chars each. Pure refactor, no user-visible effect. Defer until next multi-host feature touches the same code.
32+
- **`.pill-tag` shared class** (M, 30 min): NAS/CLOUD/VM mini-tags have their own style (`padding:1px 5px;…`). Low-value standalone; couple with the helper above.
33+
- **Unified pill component** (L, half-day): four different pill heights/radii/fonts coexist on the Multi-Host card. Needs a design decision ("which of the four is canonical?") before refactoring. Prerequisite: author `DESIGN.md` (which doesn't exist — the `:root` block is the only source of truth).
34+
35+
These are tracked as post-audit items — noted in the audit artifact, not BACKLOG (they're not "known issues" users trigger, they're drift to clean up on the next design-system pass).
36+
37+
### Tests
38+
39+
- **740 passing + 4 skipped / 50 suites** (unchanged — pure frontend changes, test suite doesn't exercise CSS).
40+
41+
### Files touched
42+
43+
- `public/css/app.css` — declared `--bg-dim` and `--text-muted` in both theme blocks; added `.empty-msg.is-error` class.
44+
- `public/js/pages/system.js` — 18 Tailwind hex → tokens, `.is-error` class adoption, brand-colour constant.
45+
- `public/js/pages/multihost.js` — slate fallback → token (4x).
46+
- `public/js/pages/whatsnew.js``.badge-running` class on "Latest" pill.
47+
48+
---
49+
550
## [6.14.1] - 2026-04-22 — "asyncHandler refactor (+ accidental info-leak fix)"
651

752
Post-v6.14.0 cleanup promised in the previous release notes: consolidate the try/catch + `res.status(500).json({ error: err.message })` boilerplate into a single `asyncHandler(fn)` wrapper. 175 handlers migrated across 21 route files. **Net diff: −521 LOC.**

docker-compose.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ services:
44
context: .
55
dockerfile: Dockerfile
66
args:
7-
APP_VERSION: "${APP_VERSION:-6.14.1}"
8-
image: docker-dash:${APP_VERSION:-6.14.1}
7+
APP_VERSION: "${APP_VERSION:-6.14.2}"
8+
image: docker-dash:${APP_VERSION:-6.14.2}
99
container_name: docker-dash
1010
restart: unless-stopped
1111
env_file:
@@ -54,7 +54,7 @@ services:
5454
dd-egress-filter:
5555
build:
5656
context: ./docker/egress-filter
57-
image: docker-dash-egress-filter:${APP_VERSION:-6.14.1}
57+
image: docker-dash-egress-filter:${APP_VERSION:-6.14.2}
5858
container_name: dd-egress-filter
5959
restart: unless-stopped
6060
# Uses the default bridge so target containers on the default bridge can

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "docker-dash",
3-
"version": "6.14.1",
3+
"version": "6.14.2",
44
"description": "Full-featured Docker management dashboard",
55
"main": "src/server.js",
66
"scripts": {

public/css/app.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@
1818
--surface: #0d1117;
1919
--surface2: #161b22;
2020
--surface3: #1c2333;
21+
--bg-dim: var(--surface2); /* alias: table-header + subtle-row bg */
2122
--border: rgba(48, 54, 61, 0.6);
2223
--border-bright: rgba(56, 68, 84, 0.8);
2324
--text: #b1bac4;
2425
--text-dim: #6e7681;
26+
--text-muted: var(--text-dim); /* alias used in inline styles across pages */
2527
--text-bright: #e6edf3;
2628
--text-white: #f0f6fc;
2729
--accent: #388bfd;
@@ -712,6 +714,7 @@ tr.clickable:hover td { color: var(--text-bright); }
712714
.data-table.compact td { padding: 6px 10px; font-size: 12px; }
713715
.env-table-wrap { max-height: 300px; overflow-y: auto; }
714716
.empty-msg { text-align: center; color: var(--text-dim); padding: 48px 24px; font-size: 14px; }
717+
.empty-msg.is-error { color: var(--red); }
715718
.empty-msg i { display: block; font-size: 32px; margin-bottom: 14px; opacity: 0.3; }
716719
.page-loading { text-align: center; color: var(--text-dim); padding: 72px; font-size: 14px; }
717720
.page-loading i { margin-right: 10px; }
@@ -1240,8 +1243,10 @@ input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px;
12401243
[data-theme="light"] {
12411244
--bg: #f5f6fa; --bg-gradient: linear-gradient(135deg, #f5f6fa 0%, #eef0f5 50%, #f0f1f5 100%);
12421245
--surface: #ffffff; --surface2: #f8f9fb; --surface3: #eef0f5;
1246+
--bg-dim: var(--surface2);
12431247
--border: rgba(200, 210, 220, 0.6); --border-bright: rgba(180, 190, 200, 0.8);
1244-
--text: #3d4852; --text-dim: #64748b; --text-bright: #1a202c; --text-white: #0d1117;
1248+
--text: #3d4852; --text-dim: #64748b; --text-muted: var(--text-dim);
1249+
--text-bright: #1a202c; --text-white: #0d1117;
12451250
--accent: #2563eb; --accent-hover: #3b82f6; --accent-dim: rgba(37, 99, 235, 0.08);
12461251
--green: #16a34a; --green-dim: rgba(22, 163, 74, 0.08);
12471252
--red: #dc2626; --red-dim: rgba(220, 38, 38, 0.08);

public/js/pages/multihost.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -422,14 +422,14 @@ const MultiHostPage = {
422422
${(host.info.platform && host.info.platform.platform !== 'linux') || host.info.cloud ? `
423423
<div style="margin-bottom:8px;display:flex;flex-wrap:wrap;gap:6px">
424424
${host.info.platform && host.info.platform.platform !== 'linux' ? `
425-
<span style="display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;background:${host.info.platform.color || '#334155'}22;border:1px solid ${host.info.platform.color || '#334155'}66;font-size:11px;font-weight:600" title="${Utils.escapeHtml(host.info.platform.notes || '')}">
426-
<i class="${Utils.escapeHtml(host.info.platform.iconClass || 'fab fa-linux')}" style="color:${host.info.platform.color || '#334155'}"></i>
425+
<span style="display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;background:${host.info.platform.color || 'var(--text-dim)'}22;border:1px solid ${host.info.platform.color || 'var(--text-dim)'}66;font-size:11px;font-weight:600" title="${Utils.escapeHtml(host.info.platform.notes || '')}">
426+
<i class="${Utils.escapeHtml(host.info.platform.iconClass || 'fab fa-linux')}" style="color:${host.info.platform.color || 'var(--text-dim)'}"></i>
427427
${Utils.escapeHtml(host.info.platform.label)}${host.info.platform.version ? ` <span style="color:var(--text-dim);font-weight:400">${Utils.escapeHtml(host.info.platform.version)}</span>` : ''}
428428
${host.info.platform.category === 'nas' ? '<span style="padding:1px 5px;background:rgba(0,0,0,0.2);border-radius:3px;font-size:9px;margin-left:2px">NAS</span>' : ''}
429429
</span>` : ''}
430430
${host.info.cloud ? `
431-
<span style="display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;background:${host.info.cloud.color || '#334155'}22;border:1px solid ${host.info.cloud.color || '#334155'}66;font-size:11px;font-weight:600" title="${Utils.escapeHtml((host.info.cloud.raw && host.info.cloud.raw.sys_vendor ? 'DMI sys_vendor: ' + host.info.cloud.raw.sys_vendor : ''))}">
432-
<i class="${Utils.escapeHtml(host.info.cloud.iconClass || 'fas fa-cloud')}" style="color:${host.info.cloud.color || '#334155'}"></i>
431+
<span style="display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;background:${host.info.cloud.color || 'var(--text-dim)'}22;border:1px solid ${host.info.cloud.color || 'var(--text-dim)'}66;font-size:11px;font-weight:600" title="${Utils.escapeHtml((host.info.cloud.raw && host.info.cloud.raw.sys_vendor ? 'DMI sys_vendor: ' + host.info.cloud.raw.sys_vendor : ''))}">
432+
<i class="${Utils.escapeHtml(host.info.cloud.iconClass || 'fas fa-cloud')}" style="color:${host.info.cloud.color || 'var(--text-dim)'}"></i>
433433
${Utils.escapeHtml(host.info.cloud.label)}
434434
${host.info.cloud.vendor !== 'baremetal' ? '<span style="padding:1px 5px;background:rgba(0,0,0,0.2);border-radius:3px;font-size:9px;margin-left:2px">' + (['vmware','virtualbox','kvm','xen','parallels'].includes(host.info.cloud.vendor) ? 'VM' : 'CLOUD') + '</span>' : ''}
435435
</span>` : ''}

0 commit comments

Comments
 (0)