Message styles: mention rows, code and quotes, system lines, the NEW divider #302

Closed
opened 2026-10-07 20:43:13 -04:00 by Salastil · 1 comment
Owner
  • Mention rows use an 8% blue tint (app.css:1347-1350) - the same blue as the jump highlight and your own reaction pill - and hover doesn't show on them (specificity). Discord uses an amber tint.
  • Two code-block styles (.code-block app.css:2673-2684 vs .message-body pre 3317-3324); inline code hard-codes its font list (3327) and has no background. Two quote styles (3px --outline-strong vs 2px --outline-medium).
  • System lines skip the avatar column in Comfy (MessageRow.tsx:694) and are marked only by italics.
  • The "New" divider label sits at the left in pale pink --error (app.css:1683-1685); Discord puts a red "NEW" pill at the right.

Fix: amber mention rows; one code style with an inline-code pill; one quote style; system lines in the text column with a gutter icon; red NEW pill on the right.

Part of the v1.0 UI pass.

- Mention rows use an 8% blue tint (app.css:1347-1350) - the same blue as the jump highlight and your own reaction pill - and hover doesn't show on them (specificity). Discord uses an amber tint. - Two code-block styles (`.code-block` app.css:2673-2684 vs `.message-body pre` 3317-3324); inline code hard-codes its font list (3327) and has no background. Two quote styles (3px `--outline-strong` vs 2px `--outline-medium`). - System lines skip the avatar column in Comfy (MessageRow.tsx:694) and are marked only by italics. - The "New" divider label sits at the left in pale pink `--error` (app.css:1683-1685); Discord puts a red "NEW" pill at the right. **Fix:** amber mention rows; one code style with an inline-code pill; one quote style; system lines in the text column with a gutter icon; red NEW pill on the right. _Part of the v1.0 UI pass._
Salastil added this to the v1.0 milestone 2026-10-07 20:43:13 -04:00
Salastil added the feature label 2026-10-07 20:43:13 -04:00
Author
Owner

Finished: 3a7677e.

Done, and visible in the Comfy picture on #295:

  • A message that names you is amber (--mention-row with an amber edge) instead of the blue that is also selection and the jump highlight, and it now shows a hover state (the old rule lost to the hover rule on specificity).
  • One quote, one code block, one inline code whichever way the markup reached the line: the second set was lighter, in a different font, and inline code had no background.
  • System lines (join, part, nick, topic, mode) get a small mark in the picture's column in Comfy, so their text starts where every other line's does instead of at the edge - see "frank left the room" in the IRC picture.
  • The New divider is a red rule with a red NEW pill at the right end, as Discord draws it (was a pale-pink rule with the word at the left).

Not photographed: the NEW divider and the code/quote blocks - the test copy has no unread backlog or formatted code to show; they are CSS-only changes.

Finished: [3a7677e](https://git.salastil.com/Salastil/moho/commit/3a7677ef16e5f6285cbb9fd3b63f6a650e66dc57). Done, and visible in the Comfy picture on #295: - **A message that names you is amber** (`--mention-row` with an amber edge) instead of the blue that is also selection and the jump highlight, and it now shows a hover state (the old rule lost to the hover rule on specificity). - **One quote, one code block, one inline code** whichever way the markup reached the line: the second set was lighter, in a different font, and inline code had no background. - **System lines** (join, part, nick, topic, mode) get a small mark in the picture's column in Comfy, so their text starts where every other line's does instead of at the edge - see "frank left the room" in the IRC picture. - **The New divider is a red rule with a red NEW pill at the right end**, as Discord draws it (was a pale-pink rule with the word at the left). Not photographed: the NEW divider and the code/quote blocks - the test copy has no unread backlog or formatted code to show; they are CSS-only changes.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Salastil/moho#302