fix: match generic modal with theme

[amhsirak]

Summary by CodeRabbit

• Style
  • Updated modal background colors throughout the application, including sponsor and generic modals, for improved visual consistency and enhanced contrast. These changes deliver a more polished, cohesive appearance across the dashboard interface, creating a refined user experience with better visual clarity and hierarchy.

[coderabbitai]

Walkthrough

Two modal components' background colors were updated from the theme-based background.paper value to an explicit solid dark color (rgba(13, 13, 13, 1)) in the sponsor modal and generic modal components. No behavioral or logic changes were introduced.

Changes

Cohort / File(s)	Summary
Modal background styling src/components/dashboard/MainMenu.tsx, src/components/ui/GenericModal.tsx	Changed modal background colors from theme-dependent background.paper to explicit opaque dark rgba value rgba(13, 13, 13, 1) for visual consistency

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Both changes are isolated cosmetic updates with identical patterns (direct color value substitution)
• No logic, behavior, or control flow modifications
• Straightforward verification of the new color value

Possibly related PRs

• PR #717: Adds the Sponsor Us modal component to MainMenu.tsx, providing initial context for the modal being styled in this PR
• PR #830: Modifies Sponsor modal content and buttons, complementing this PR's styling updates to the same modal component
• PR #668: Updates background-related styling in MainMenu.tsx, demonstrating an ongoing pattern of styling refinements in the dashboard

Suggested labels

Type: Bug, Scope: UI/UX

Poem

🐰 Dark modals now shine with purpose true,
No more paper backgrounds in the UI view,
Rgba thirteen brings a steadfast tone,
Consistency spreads through the zone,
Simple tweaks, but the polish is shown!

Pre-merge checks and finishing touches

✅ 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 'fix: match generic modal with theme' accurately describes the main change: updating modal background colors to use explicit dark colors instead of theme-relative colors.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch ui-modals

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/dashboard/MainMenu.tsx (1)

129-129: Inconsistent modal background colors require alignment.

The verification confirms two different background colors are used for modals within the same component:

• Line 129 uses bgcolor: 'background.paper' (light/default)
• Line 168 uses bgcolor: 'rgba(13, 13, 13, 1)' (dark background)

Both modals should use the same background color for visual consistency. The codebase shows GenericModal defaults to dark (rgba(13, 13, 13, 1)), while NavBar.tsx uses light (background.paper). Choose one approach and apply it uniformly across MainMenu.tsx's modals.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 04c053c and 6016a61.

📒 Files selected for processing (2)

• src/components/dashboard/MainMenu.tsx (1 hunks)
• src/components/ui/GenericModal.tsx (1 hunks)

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Hardcoded color breaks theme consistency and creates modal inconsistency.

The sponsor modal now uses a hardcoded dark background while the documentation modal (Line 129) still uses 'background.paper'. This creates:

• Visual inconsistency between modals in the same component
• Theme support broken for this modal only
• Accessibility concerns in light mode

Apply this diff to maintain consistency with the doc modal and theme support:

-        <Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', bgcolor: 'rgba(13, 13, 13, 1)', borderRadius: 2, p: 4, width: 600 }}>
+        <Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', bgcolor: 'background.paper', borderRadius: 2, p: 4, width: 600 }}>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', bgcolor: 'rgba(13, 13, 13, 1)', borderRadius: 2, p: 4, width: 600 }}>
	<Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', bgcolor: 'background.paper', borderRadius: 2, p: 4, width: 600 }}>

🤖 Prompt for AI Agents

In src/components/dashboard/MainMenu.tsx around line 168, the sponsor modal Box
uses a hardcoded bgcolor 'rgba(13, 13, 13, 1)' which breaks theme consistency;
replace that hardcoded value with the theme background token (e.g.
'background.paper' or theme.palette.background.paper) so the modal uses the same
themed background as the documentation modal and respects light/dark modes and
accessibility.