[fdaniel02]

The reconnect dialog ("Rejoining the server…", "Failed to rejoin. Please retry or reload the page.") still had the
Blazor template's light styling: a white box, light blue buttons and a blue spinner on the dark app.

Changes

Only ReconnectModal.razor.css; the markup and ReconnectModal.razor.js are unchanged.

• Dialog: var(--card) background, var(--line) border, var(--text) text (without it the browser's default
  dialog text colour, which is dark, applies), 16px corners, darker shadow. The width shrinks on narrow phones
  (min(20rem, 100% - 32px)).
• "Trying again in N seconds" in var(--muted).
• Backdrop rgba(0,0,0,.6), as the app's .overlay.
• Retry / Resume: like .btn.primary (accent green, white text, 14px corners). Pressing dims the button instead of
  the template's blue hover colour, which sticks after a tap on a phone. The focus ring is the theme's text colour,
  so it shows on the dark background.
• Spinner in var(--accent).

Contrast: white on the accent green is about 3.4:1. The button text is 1.1rem bold (18.7px with the app's 17px
base), which counts as large text in WCAG, so 3:1 applies. This replaces the template's white on #6b9ed2, which
was accepted in SonarCloud as S7924.

Testing

CSS only; bUnit doesn't render styles. Checked with screenshots at phone size (390×844) in headless Edge, before
and after, for every state of the dialog (rejoining, retrying, failed, paused, resume failed), shown by setting the
dialog's state classes the way Blazor does. Still to check on a real phone.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud