fix(ui): correct dark-mode heading/paragraph colours and add PageHeadingComponent by mpaulosky · Pull Request #295 · mpaulosky/MyBlog

mpaulosky · 2026-05-11T17:30:31Z

Summary

Fixes two visual regressions introduced on this branch and completes the input.css fine-tuning work.

Changes

input.css — corrected dark-mode text colours for h1/h2/h3 (dark:text-primary-950 → dark:text-primary-50) and p (dark:text-primary-950 → dark:text-primary-200). Near-black text on near-black background was invisible. Also centralises button variants (primary/secondary/warning/destructive) and nav styles; removes duplicate inline Tailwind from components.
PageHeadingComponent.razor — new shared heading component; registered via _Imports.razor.
Feature components — Index, Create, Edit, ManageRoles, Profile, MainLayout, NavMenu — adopt PageHeadingComponent, centralised CSS classes, and tab-indented formatting.

Review Arbitration

Legolas flagged two blockers (dark-mode heading and paragraph colours). Gimli confirmed the full test gate was green. Both findings are correct and compatible — bUnit tests verify rendered class names, not computed colour values; visual regressions pass automated tests. The CSS bugs are confirmed regressions (diff shows reversion from correct dark:text-primary-200 to broken dark:text-primary-950). Fixed by Aragorn before push.

Test Gate

✅ Build: 0 warnings, 0 errors (Release)
✅ Architecture.Tests: 16 passed
✅ Domain.Tests: 42 passed
✅ Web.Tests.Bunit: 74 passed
✅ Web.Tests: 153 passed
✅ Web.Tests.Integration: 12 passed

Closes #291
Closes #292

- Extracted shared base styles (inline-flex, cursor-pointer, focus-visible ring, disabled:opacity-50, active:scale) into a grouped selector for all four button variants. - .btn-primary: added cursor-pointer, focus ring, disabled & active states. - .btn-secondary: normalised to rounded-md, border-primary-400/500, bg-transparent, same interactive states as primary. - .btn-warning (NEW): amber-400/500 fixed palette, amber-950 text for contrast (Bootstrap btn-warning style — caution / non-destructive). - .btn-destructive (NEW): red-600/500 fixed palette, white text (Bootstrap btn-danger feel — irreversible delete actions). - ConfirmDeleteDialog: migrated hardcoded red/grey inline Tailwind to .btn-destructive / .btn-secondary. - ProfileTests: updated 3 badge-colour assertions to match pre-existing Profile.razor solid-colour badge refactor on this branch. Closes #292 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

The Delete button in Index.razor was using hardcoded Tailwind utilities (bg-red-600, hover:bg-red-700, etc.) while ConfirmDeleteDialog already used the shared .btn-destructive utility class from input.css. This inconsistency meant the two delete surfaces had different hover, focus, dark-mode, and spacing behaviour. - Replace raw Tailwind classes on the inline Delete button with btn-destructive - Add bUnit test BlogIndexUsesBtnDestructiveForInlineDeleteButton to RazorSmokeTests to prevent regression Architecture.Tests: 16/16 Web.Tests.Bunit: 74/74 Closes #292 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…ingComponent - Fix h1/h2/h3 dark-mode text: dark:text-primary-950 → dark:text-primary-50 (near-black text on near-black background was invisible in dark mode) - Fix p dark-mode text: dark:text-primary-950 → dark:text-primary-200 - Centralise button variants (primary/secondary/warning/destructive) and nav styling into input.css; remove duplicate inline Tailwind classes from NavMenu, MainLayout, and feature components - Add shared PageHeadingComponent.razor; wire via _Imports.razor - Adopt tab-indented formatting across all modified Razor files Closes #291 Closes #292 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions · 2026-05-11T17:30:42Z

🏗️ PR Added to Squad Triage Queue

This PR has been labeled with squad and added to the triage queue.

Next steps:

The squad Lead will review and assign to an appropriate team member
A squad:member label will be added after triage

If you know which squad member should handle this, you can add the appropriate squad:member label yourself.

Copilot

Pull request overview

Fixes dark-mode typography regressions and continues the UI style consolidation by centralizing common Tailwind component classes and introducing a reusable page heading component across feature pages.

Changes:

Corrects base dark-mode heading/paragraph colors and expands shared component styles in input.css (nav, buttons, cards/tables/forms).
Adds PageHeadingComponent and replaces per-page <PageTitle>/<h1> usage with the shared component.
Updates and expands bUnit coverage to lock in the new shared button-variant class usage and updated badge classes.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
tests/Web.Tests.Bunit/Features/ProfileTests.cs	Updates badge class assertions to match new solid badge styling in Profile.
tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs	Adds bUnit assertions for shared button variant classes across key pages/components.
src/Web/Styles/input.css	Adjusts base typography colors and centralizes nav/button/card/table/form styling via Tailwind `@apply`.
src/Web/Features/UserManagement/Profile.razor	Adopts `PageHeadingComponent`, centralizes card/table styling, updates role badge styling.
src/Web/Features/UserManagement/ManageRoles.razor	Adopts `PageHeadingComponent` and simplifies markup styling to rely on shared CSS.
src/Web/Features/BlogPosts/List/Index.razor	Adopts `PageHeadingComponent` and replaces inline delete styling with `btn-destructive`.
src/Web/Features/BlogPosts/Edit/Edit.razor	Adopts `PageHeadingComponent` and shared button variants.
src/Web/Features/BlogPosts/Delete/ConfirmDeleteDialog.razor	Replaces inline delete/cancel button classes with shared `btn-destructive` / `btn-secondary`.
src/Web/Features/BlogPosts/Create/Create.razor	Adopts `PageHeadingComponent` and shared form/button variants.
src/Web/Features/_Imports.razor	Imports shared components namespace for feature pages.
src/Web/Components/Shared/PageHeadingComponent.razor	Introduces reusable heading + PageTitle wrapper component.
src/Web/Components/Layout/NavMenu.razor	Moves nav styling to centralized CSS (removes inline Tailwind block).
src/Web/Components/Layout/MainLayout.razor	Adjusts layout background and formatting.
.squad/agents/legolas/history.md	Adds UI learnings notes for button variants / destructive consistency.

github-actions · 2026-05-11T17:35:18Z

Test Results Summary

356 tests +15 355 ✅ +15 19s ⏱️ ±0s
6 suites ± 0 1 💤 ± 0
6 files ± 0 0 ❌ ± 0

Results for commit 0d3d284. ± Comparison against base commit 97a3221.

♻️ This comment has been updated with latest results.

codecov · 2026-05-11T17:43:59Z

Codecov Report

❌ Patch coverage is 86.36364% with 15 lines in your changes missing coverage. Please review.
✅ Project coverage is 87.20%. Comparing base (97a3221) to head (0d3d284).

Files with missing lines	Patch %	Lines
...c/Web/Components/Shared/PageHeadingComponent.razor	57.14%	1 Missing and 5 partials ⚠️
src/Web/Features/BlogPosts/List/Index.razor	85.29%	3 Missing and 2 partials ⚠️
src/Web/Features/UserManagement/ManageRoles.razor	90.47%	0 Missing and 4 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##              dev     #295      +/-   ##
==========================================
+ Coverage   86.21%   87.20%   +0.98%     
==========================================
  Files          44       45       +1     
  Lines        1103     1118      +15     
  Branches      132      137       +5     
==========================================
+ Hits          951      975      +24     
+ Misses        100       93       -7     
+ Partials       52       50       -2

Files with missing lines	Coverage Δ
src/Web/Components/Layout/MainLayout.razor	`100.00% <ø> (ø)`
src/Web/Components/Layout/NavMenu.razor	`75.00% <ø> (ø)`
src/Web/Features/BlogPosts/Create/Create.razor	`100.00% <100.00%> (+41.66%)`	⬆️
...eatures/BlogPosts/Delete/ConfirmDeleteDialog.razor	`100.00% <ø> (ø)`
src/Web/Features/BlogPosts/Edit/Edit.razor	`72.00% <ø> (ø)`
src/Web/Features/UserManagement/Profile.razor	`81.81% <100.00%> (ø)`
src/Web/Features/UserManagement/ManageRoles.razor	`90.69% <90.47%> (+14.50%)`	⬆️
src/Web/Features/BlogPosts/List/Index.razor	`86.84% <85.29%> (+10.52%)`	⬆️
...c/Web/Components/Shared/PageHeadingComponent.razor	`57.14% <57.14%> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@using

…NavMenu Thread 1 (input.css): Fix misleading .btn-secondary comment; it is a solid blue button, not outline. Update comment to match implementation. Thread 2 (input.css): Add mx-auto px-4 to .container-card so it provides proper centering and padding as a shared layout container. Thread 3 (PageHeadingComponent): Add default switch arm that falls back to h1 so unexpected Level values render predictably instead of silently. Thread 4 (Profile.razor): Remove redundant @using MyBlog.Web.Components.Shared already covered by _Imports.razor. Thread 5 (NavMenu.razor): Remove unused class=nav from nav element; CSS styles nav via element selector, not class selector. Thread 6 (history.md): Correct the learning note that falsely claimed btn-primary / btn-secondary use var(--primary-*) tokens. All four variants use fixed Tailwind palette classes (green / blue / amber / red). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Add focused PageHeading component coverage and finalize the PR #295 bUnit handoff for issue #291. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

mpaulosky · 2026-05-11T18:36:12Z

✅ Gate Decision: APPROVED for squash merge

CI green (all 19 checks), Codecov passing, all 6 Copilot inline threads resolved. PageHeadingComponent centralises heading markup correctly; btn-* utilities properly consolidated in input.css; dark-mode palette fix (text-primary-50) is correct.

- Aragorn: PR #297 merge review, PR #295 merge patterns, ADR #296 - Legolas: Create.razor auth auto-fill patterns Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Boromir and others added 3 commits May 11, 2026 06:37

Copilot AI review requested due to automatic review settings May 11, 2026 17:30

github-actions Bot added the squad Squad triage inbox — Lead will assign to a member label May 11, 2026

Copilot started reviewing on behalf of mpaulosky May 11, 2026 17:31 View session

Copilot AI reviewed May 11, 2026

View reviewed changes

Boromir and others added 2 commits May 11, 2026 11:17

test(bunit): finalize PR #295 handoff for #291

0d3d284

Add focused PageHeading component coverage and finalize the PR #295 bUnit handoff for issue #291. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

mpaulosky merged commit 2ba0886 into dev May 11, 2026
19 checks passed

mpaulosky deleted the squad/291-input-css-fine-tuning branch May 11, 2026 18:36

Copilot AI mentioned this pull request May 11, 2026

feat(app): add L1+L2 caching to UserManagement (Auth0 API) (#293) #297

Merged

mpaulosky mentioned this pull request May 11, 2026

[Sprint 19] fix(theme): fine-tune input.css CSS after PR #277 merge #291

Closed

Copilot AI mentioned this pull request May 11, 2026

fix(process): align worktree pre-push gate with required tests #303

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ui): correct dark-mode heading/paragraph colours and add PageHeadingComponent#295

fix(ui): correct dark-mode heading/paragraph colours and add PageHeadingComponent#295
mpaulosky merged 5 commits into
devfrom
squad/291-input-css-fine-tuning

mpaulosky commented May 11, 2026

Uh oh!

github-actions Bot commented May 11, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 11, 2026 •

edited

Loading

Uh oh!

codecov Bot commented May 11, 2026 •

edited

Loading

Uh oh!

mpaulosky commented May 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

mpaulosky commented May 11, 2026

Summary

Changes

Review Arbitration

Test Gate

Uh oh!

github-actions Bot commented May 11, 2026

🏗️ PR Added to Squad Triage Queue

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

codecov Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mpaulosky commented May 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented May 11, 2026 •

edited

Loading

codecov Bot commented May 11, 2026 •

edited

Loading