Skip to content

fix(meshcore): darken message scope/path/time metadata for readability (#3769)#3778

Merged
Yeraze merged 1 commit into
mainfrom
feat/3769-meshcore-scope-colors
Jun 26, 2026
Merged

fix(meshcore): darken message scope/path/time metadata for readability (#3769)#3778
Yeraze merged 1 commit into
mainfrom
feat/3769-meshcore-scope-colors

Conversation

@Yeraze

@Yeraze Yeraze commented Jun 26, 2026

Copy link
Copy Markdown
Owner

Closes #3769

Problem

For MeshCore channel messages, the metadata line that shows the message scope/region and the relay path rendered too bright/light against the message background, making it hard to read. The timestamp on the same kind of line was easier to read.

Fix

All three metadata classes — .mc-message-time, .mc-message-route (hop count + path), and .mc-message-scope — were using var(--ctp-overlay0). This bumps them one step down the Catppuccin gray scale to var(--ctp-overlay1).

overlay1 is darker / higher-contrast than overlay0 in every theme:

  • Dark themes (Frappé/Macchiato/Mocha): overlay1 is a darker gray than overlay0.
  • Light theme (Latte): overlay1 (#8c8fa1) is darker than overlay0 (#9ca0b0) against the light background.

Per the issue, this darkens the whole metadata group together (time included), so scope/path are now at least as dark as — and in fact equal to — the timestamp, while everything reads more clearly.

Before / After

Element Before After
.mc-message-time --ctp-overlay0 --ctp-overlay1
.mc-message-route (path) --ctp-overlay0 --ctp-overlay1
.mc-message-scope --ctp-overlay0 --ctp-overlay1

Testing

CSS-only change. MeshCoreMessageStream tests pass (3/3). No new TypeScript errors introduced (the repo's pre-existing tsc --noEmit warnings are unchanged).

🤖 Generated with Claude Code

#3769)

The MeshCore channel-message metadata line — scope/region, relay path, and
timestamp — rendered in --ctp-overlay0, which is too light/low-contrast to read
comfortably against the message background.

Step all three (.mc-message-time, .mc-message-route, .mc-message-scope) down to
--ctp-overlay1, which is one shade darker/higher-contrast in every Catppuccin
theme (darker than overlay0 on dark themes, and darker than overlay0 on the
light Latte theme too). This satisfies the request that scope/path be at least
as dark as the timestamp by darkening the whole metadata group together.

CSS-only change; MeshCoreMessageStream tests pass (3/3).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VBLhGGNh35oMwTL53va1Y5
@github-actions

github-actions Bot commented Jun 26, 2026

Copy link
Copy Markdown

Claude finished @Yeraze's task —— View job


PR Review

  • Gather context
  • Read changed files
  • Provide review feedback

Summary

This is a minimal, well-scoped CSS fix. The change is straightforward and correct. Here's my assessment across the requested dimensions:


Code Quality & Best Practices ✅

The change at src/components/MeshCore/MeshCorePage.css:723-727 is clean and well-executed:

/* Before */
.mc-message-time { color: var(--ctp-overlay0); }
.mc-message-route { color: var(--ctp-overlay0); ... }
.mc-message-scope { color: var(--ctp-overlay0); ... }

/* After */
.mc-message-time { color: var(--ctp-overlay1); }
.mc-message-route { color: var(--ctp-overlay1); ... }
.mc-message-scope { color: var(--ctp-overlay1); ... }

The added comment at line 721–722 clearly documents the intent and references the issue number:

/* Message metadata (time/route/scope) uses overlay1 — one step darker than
   overlay0 for better readability in both light and dark themes (#3769). */

Good: all three related classes are updated atomically so they remain visually consistent with each other.


Potential Issues ⚠️ Minor

Inconsistency with adjacent classes: A few nearby classes still use --ctp-overlay0 for similar "secondary/muted" UI text:

  • .mc-node-row-key (line 639) — monospace public key display, arguably intentionally faint
  • .mc-delivery-sent / .mc-delivery-sending (lines 743, 746) — delivery status indicators
  • .mc-heard-by-snr (line 777) — SNR values in heard-by list

None of these are bugs introduced by this PR, and they may be intentionally dimmer than metadata. But if the readability concern is systemic, those could be candidates for a follow-up.


Performance Considerations ✅

No performance concerns. CSS variable substitution is trivially cheap.


Security Concerns ✅

None. Pure cosmetic CSS change.


Test Coverage ✅

The PR description notes 3/3 MeshCoreMessageStream tests pass. For a CSS-only color variable change, automated tests can't meaningfully verify visual contrast — the existing snapshot/unit tests are sufficient coverage here.


Overall

Approve. This is a correct, minimal fix with a clear rationale and good inline documentation. The Catppuccin palette semantics (overlay1 > overlay0 contrast-wise in both light and dark modes) are applied correctly, and all affected classes are updated in one commit.

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.

[FEAT] MeshCore: Colors for scope and path display in messages not well readable

1 participant