fixed the authentication theme-toggle icon on both Sign In and Sign Up pages

[insanekrishnna]

Addressed Issues

Fixes #542

Changes

Improved the theme-toggle visibility and consistency on the Sign In and Sign Up pages.

• Increased the authentication theme icon from 16px to 20px.
• Prevented the active theme icon from shrinking inside the toggle.
• Prevented the dropdown arrow from shrinking.
• Increased the authentication toggle width so the “High Contrast” label fits without collapsing the icon.
• Reused the existing theme-aware foreground color for sufficient contrast.
• Ensured the icon remains clearly visible against the High Contrast black background.
• Added configurable icon sizing to the existing shared ThemeToggle component.
• Preserved the sidebar toggle’s existing 16px icon size.
• Applied the same authentication-specific styling to both Sign In and Sign Up pages.
• Preserved all existing theme-switching behavior.

The original issue was caused by the authentication toggle’s constrained width. Its 16px icon flex-shrank to approximately 6px in Light and Dark themes and 0px in High Contrast Theme.

Testing

• Verified the theme toggle on the Sign In page.
• Switched to and verified the Sign Up page.
• Verified the icon in Light Theme.
• Verified the icon in Dark Theme.
• Verified the icon in High Contrast Theme.
• Confirmed the authentication icon remains exactly 20×20 in every theme.
• Confirmed the toggle remains 36px high in every theme.
• Confirmed the High Contrast icon uses the existing white foreground color.
• Confirmed the “High Contrast” label no longer wraps or collapses the icon.
• Confirmed the sidebar retains its existing default icon size.
• Ran focused ESLint checks successfully.
• Ran git diff --check successfully.
• Confirmed no theme-switching functionality was changed.

Screenshots/Recordings

Before

The authentication theme icon appeared extremely small in Light and Dark themes and collapsed completely in High Contrast Theme.

theme_toggler_issue.mp4

After

The icon remains prominent, correctly sized, and clearly visible across Light, Dark, and High Contrast themes on both authentication pages.

sol-theme-toggle.mp4

Summary by CodeRabbit

• Bug Fixes

  • Improved room joining so existing participant details are updated without creating duplicates.
  • Password reset errors are handled cleanly, preventing forms from becoming stuck.
  • Login and password-reset failures now surface more reliably.
  • Improved error messaging when password reset confirmation fails.

• Accessibility & Theming

  • Improved dark-mode and high-contrast styling across authentication, team building, profiles, comments, and anonymous questions.
  • Theme toggle icons can scale appropriately and remain visually aligned.
  • Chart colors now follow the selected primary theme color.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: c211fbd7-d5fd-4335-8e32-03153d6c32a6

📥 Commits

Reviewing files that changed from the base of the PR and between 9f90f9b and 76e927c.

📒 Files selected for processing (10)

• backend/routes/rooms.go
• frontend/src/Pages/Authentication.tsx
• frontend/src/Pages/Authentication/forms.tsx
• frontend/src/Pages/Profile.tsx
• frontend/src/Pages/TeamBuilder.tsx
• frontend/src/components/AnonymousQA.tsx
• frontend/src/components/CommentTree.tsx
• frontend/src/components/ThemeToggle.tsx
• frontend/src/context/authContext.tsx
• frontend/src/index.css

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The pull request updates atomic room participant joins, authentication error handling, theme toggle sizing, and theme-aware frontend styling across light, dark, and contrast modes.

Changes

Room participant updates

Layer / File(s)	Summary
Atomic participant update backend/routes/rooms.go	JoinRoomHandler replaces an existing participant entry or appends a new entry through a MongoDB update pipeline.

Authentication error handling

Layer / File(s)	Summary
Password reset error flow frontend/src/Pages/Authentication/forms.tsx, frontend/src/context/authContext.tsx	Password reset submission catches errors. login and confirmForgotPassword rethrow errors after invoking handleError. confirmForgotPassword also uses data.error before data.message.

Theme and accessibility styling

Layer / File(s)	Summary
Theme toggle sizing and visibility frontend/src/components/ThemeToggle.tsx, frontend/src/Pages/Authentication.tsx	ThemeToggle accepts configurable icon sizes and adds theme-aware, non-shrinking icon styles. Authentication pages use 20px icons.
Theme-aware component styles frontend/src/components/AnonymousQA.tsx, frontend/src/Pages/Profile.tsx, frontend/src/Pages/TeamBuilder.tsx, frontend/src/components/CommentTree.tsx	Components use semantic theme tokens and contrast-mode text or border styles.
Dark-mode chart token frontend/src/index.css	Dark-mode --chart-1 now references --primary.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 76e92

The room update, password-reset flow, theme toggle, and styling changes have no identified actionable regression. The PR is ready to merge.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The pull request includes changes with no demonstrated connection to issue #542. backend/routes/rooms.go changes atomic room participant updates. Authentication/forms.tsx and `context/authContext.…	Remove the unrelated room-update, authentication error-handling, unrelated page/component styling, and chart-color changes from this pull request, or move them to separate pull requests. Keep the ThemeToggle and authentication-page change…
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 9 files. (1 skipped: 1…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: fixing the authentication theme-toggle icon on both Sign In and Sign Up pages.
Linked Issues check	✅ Passed	Issue #542 requires a visible, appropriately sized theme icon on both Sign In and Sign Up pages for Light, Dark, and High Contrast themes. Authentication.tsx uses the shared ThemeToggle in both au…

Full details: Out of Scope Changes check

Explanation

The pull request includes changes with no demonstrated connection to issue #542. backend/routes/rooms.go changes atomic room participant updates. Authentication/forms.tsx and context/authContext.tsx change password-reset and login error handling. Profile.tsx, TeamBuilder.tsx, AnonymousQA.tsx, CommentTree.tsx, and index.css change styling or chart colors outside the Sign In and Sign Up theme toggle. These changes are separate from the linked issue's theme-toggle requirements.

Resolution

Remove the unrelated room-update, authentication error-handling, unrelated page/component styling, and chart-color changes from this pull request, or move them to separate pull requests. Keep the ThemeToggle and authentication-page changes that implement issue #542.

Full details: Docstring Coverage

Explanation

Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 9 files. (1 skipped: 1 unsupported.)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}