Skip to content

Give the remaining app pages a more polished layout - #26

Merged
Commanderx-code merged 1 commit into
mainfrom
claude/command-center-readme-style-5gd7fb
Sep 26, 2026
Merged

Commanderx-code merged 1 commit into
mainfrom
claude/command-center-readme-style-5gd7fb

Conversation

@Commanderx-code

Copy link
Copy Markdown
Owner

📝 Change

The last page restyle, covering every page not done in #22–#25 in one pass: System Sync, Backup & Restore, Configuration, System Health, Needs attention, Activity, Terminal, Services, System inventory, Workflows, and Change timeline. The change is CSS-only.

These pages share the same building blocks, so one shared block (scoped with :is(#sync-view, #backup-view, …)) styles them all:

  • Page header card: each page's heading becomes an accent-tinted card with an accent eyebrow, matching the Settings and Toolbox intros.
  • Readable, consistent text: these pages had many unstyled paragraphs, status lines, labels, and summaries at the browser's 16px default next to 11–13px styled text. The page base is now 13px (15px with the Larger text setting). Anything with an explicit size is unchanged.
  • Panels: consistent 15px panel titles, an accent border while a panel has focus, and centered empty-state messages.
  • Collapsible sections (Backup readiness, backup schedule, Service cleanup, and so on): the same rotating accent chevron as the Toolbox page, replacing the native triangle.
  • Inputs: accent focus ring on inputs, selects, and textareas, plus accent-colored checkboxes.
  • Empty output boxes (service properties/logs, configuration compare) show as dashed placeholders instead of solid empty bars.

Page-specific fixes:

  • Services and Change timeline: the search fields were unstyled native inputs; they now match the other inputs and fill the toolbar.
  • Configuration: the "Source configuration" label now matches its sibling panel titles (it was rendered as small bold label text).
  • Workflows: the "New workflow" and "Add weekly maintenance example" buttons no longer touch.

✅ Validation

  • npm run check
  • npm test: 78/78 pass.
  • npm run test:rust: not run; there are no Rust changes.
  • Checked in the browser preview: before and after screenshots of all 11 pages, in the dark and light themes.

🔎 Review notes

No new dependencies. The preview shows most of these pages in their "desktop app required" state, so they're worth a look in the desktop app with real data.

🤖 Generated with Claude Code

https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN


Generated by Claude Code

Apply one shared style block to System Sync, Backup & Restore,
Configuration, System Health, Needs attention, Activity, Terminal,
Services, System inventory, Workflows, and Change timeline: an
accent-tinted page header card, consistent 13px body text in place of
the browser's 16px default, matching panel titles, rotating chevrons on
collapsible sections, focus rings on inputs, accent checkboxes, centered
empty states, and dashed placeholders for empty output boxes. Also style
the Services and timeline search fields, size the Configuration source
label like its sibling headings, and space the Workflows buttons.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN
@Commanderx-code
Commanderx-code marked this pull request as ready for review September 26, 2026 04:21
@Commanderx-code
Commanderx-code merged commit 0679a91 into main Sep 26, 2026
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants