Fix brand mobile nav contrast

[baseergroot]

Update: Improve dark-mode contrast for submenu items

Thanks for the review!

This update applies dark-mode text styles to the submenu rows as well, ensuring that the expanded navigation items maintain proper contrast within the dark mobile navigation overlay.

Changes

• Added dark:text-white/90 to submenu titles
• Added dark:text-white/70 to submenu descriptions

Result

• Submenu items such as Product and Resources now have improved readability in dark mode.
• Light mode behavior remains unchanged.
• The change is limited to styling and does not affect layout or navigation behavior.

Testing

• Ran the app locally
• Verified behavior on /brand with a mobile viewport
• Confirmed improved readability in dark mode
• Confirmed light mode remains unchanged

Summary by CodeRabbit

• Style
  • Improved dark mode appearance in mobile navigation with enhanced text visibility and contrast for better readability.

[vercel]

@baseergroot is attempting to deploy a commit to the Dub Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds dark mode text color variants to the mobile navigation component. The ChildItem title and description now include dark mode–specific color classes to improve text visibility in dark theme mode.

Changes

Cohort / File(s)	Summary
Mobile Navigation Styling packages/ui/src/nav/nav-mobile.tsx	Added dark mode color variants: title changed from text-neutral-900 to text-neutral-900 dark:text-white/90; description changed from text-neutral-500 to text-neutral-500 dark:text-white/70.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related issues

• Mobile dark mode issue: Navigation menu items have low contrast on /brand page #3551: The dark mode text color variants added to the mobile navigation ChildItem directly address the low-contrast menu items reported for dark theme mode.

Suggested reviewers

• steven-tey

Poem

🌙✨ In darkest night, the nav takes flight,
With colors bright and text so right,
White whispers float where shadows play,
The mobile menu finds its way. 🐰

🚥 Pre-merge checks | ✅ 3

✅ 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 brand mobile nav contrast' directly and accurately describes the main change: adding dark mode contrast fixes to the mobile navigation component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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]

🧹 Nitpick comments (1)

packages/ui/src/nav/nav-mobile.tsx (1)

263-267: Consider adding dark mode styling to the icon container.

The icon container uses light-mode-only colors (border-neutral-200, bg-gradient-to-t from-neutral-100). In dark mode, this light background may clash with the dark overlay, reducing the visual polish of the submenu items.

♻️ Suggested enhancement for dark mode consistency

       <div
         className={cn(
-          "flex size-10 items-center justify-center rounded-lg border border-neutral-200 bg-gradient-to-t from-neutral-100",
+          "flex size-10 items-center justify-center rounded-lg border border-neutral-200 bg-gradient-to-t from-neutral-100 dark:border-white/10 dark:from-white/5",
           size === "small" && "size-8",
         )}
       >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/nav/nav-mobile.tsx` around lines 263 - 267, The icon
container div in nav-mobile.tsx uses light-only utility classes (className on
the div rendering the icon container) and needs dark-mode counterparts; update
the className for that div (the element building the icon container in the
nav-mobile component) to include appropriate dark: utilities for border and
background (e.g., dark:border-..., dark:from-... or dark:from-.../opacity) so
the border-neutral-200 and bg-gradient-to-t from-neutral-100 have matching
dark-mode styles that keep contrast and polish in dark themes.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/ui/src/nav/nav-mobile.tsx`:
- Around line 263-267: The icon container div in nav-mobile.tsx uses light-only
utility classes (className on the div rendering the icon container) and needs
dark-mode counterparts; update the className for that div (the element building
the icon container in the nav-mobile component) to include appropriate dark:
utilities for border and background (e.g., dark:border-..., dark:from-... or
dark:from-.../opacity) so the border-neutral-200 and bg-gradient-to-t
from-neutral-100 have matching dark-mode styles that keep contrast and polish in
dark themes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4313e4e4-7518-4dc7-9e53-ebc14da4a94e

📥 Commits

Reviewing files that changed from the base of the PR and between f9b9e50 and c7b6f00.

📒 Files selected for processing (1)

• packages/ui/src/nav/nav-mobile.tsx

[CLAassistant]

All committers have signed the CLA.