correct dark mode color styling #1872
Conversation
|
@AshishViradiya153 is attempting to deploy a commit to the mftsio Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughUI-only className updates across FAQ modals, conversation sidebar inputs, and FAQ section labels. Colors and tokens switched to design-system variables (e.g., text-muted-foreground, text-foreground, bg-background). No logic, state, data flow, or exports changed. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
ee/features/conversations/components/dashboard/edit-faq-modal.tsx (2)
173-176: Sweep remaining gray- text utilities to tokens for dark mode*Several labels/descriptions still use text-gray-700/500. Prefer text-foreground or text-muted-foreground for theme consistency.
Apply this minimal patch:
- <label className="text-sm font-medium text-gray-700"> + <label className="text-sm font-medium text-foreground"> ... - <p className="mt-1 text-xs text-gray-500"> + <p className="mt-1 text-xs text-muted-foreground"> ... - <label className="text-sm font-medium text-gray-700"> + <label className="text-sm font-medium text-foreground"> ... - <p className="mt-1 text-xs text-gray-500"> + <p className="mt-1 text-xs text-muted-foreground"> ... - <div className="text-xs text-gray-500"> + <div className="text-xs text-muted-foreground">Also applies to: 185-188, 192-195, 203-206, 267-269
176-188: Optional: replace blue/green panels with theme tokens or add dark variantsThe “Original Question/Answer” panels use bg-blue-50/50, border-blue-200, bg-green-50/50, border-green-200. These wash out in dark mode. Options:
- Neutral tokens: bg-muted border, keep icon color accents.
- Or add dark: overrides (e.g., dark:bg-blue-950/40 dark:border-blue-400/30 and equivalents for green).
Your call based on design intent.
Also applies to: 195-207
ee/features/conversations/components/dashboard/publish-faq-modal.tsx (3)
243-246: Unify remaining gray- text classes to tokens*Same sweep here for consistency with the PR goal.
- <label className="text-sm font-medium text-gray-700"> + <label className="text-sm font-medium text-foreground"> ... - <p className="mt-1 text-xs text-gray-500"> + <p className="mt-1 text-xs text-muted-foreground"> ... - <label className="text-sm font-medium text-gray-700"> + <label className="text-sm font-medium text-foreground"> ... - <p className="mt-1 text-xs text-gray-500"> + <p className="mt-1 text-xs text-muted-foreground"> ... - <div className="text-xs text-gray-500"> + <div className="text-xs text-muted-foreground">Also applies to: 253-260, 264-267, 274-281, 343-345
246-261: Optional: accent panels in fixed blue/green scalesConsider bg-muted/border tokens, or add dark: equivalents to current blue/green backgrounds/borders to avoid low contrast in dark mode.
Also applies to: 267-281
1-376: Convert remaining hard-coded Tailwind color classes to design tokensOccurrences found — replace these Tailwind color utility classes with the appropriate design tokens/component token classes:
- ee/features/conversations/components/viewer/faq-section.tsx
- line 123: className="bg-gray-50 p-4 dark:bg-gray-900"
- line 135: className="rounded-md border border-gray-200 bg-white"
- line 155: className="bg-gray-50 p-4 dark:bg-gray-900"
- line 176: className="flex-shrink-0 bg-gray-50 dark:bg-gray-900"
- line 204: className="rounded-md border border-gray-200 bg-white"
- ee/features/conversations/components/dashboard/publish-faq-modal.tsx
- line 243: className="text-sm font-medium text-gray-700"
- line 246: className="mt-2 rounded-lg border border-blue-200 bg-blue-50/50 p-3"
- line 253: className="mt-1 text-xs text-gray-500"
- line 264: className="text-sm font-medium text-gray-700"
- line 267: className="mt-2 rounded-lg border border-green-200 bg-green-50/50 p-3"
- line 274: className="mt-1 text-xs text-gray-500"
- line 343: className="text-xs text-gray-500"
- ee/features/conversations/components/dashboard/edit-faq-modal.tsx
- line 173: className="text-sm font-medium text-gray-700"
- line 176: className="mt-2 rounded-lg border border-blue-200 bg-blue-50/50 p-3"
- line 185: className="mt-1 text-xs text-gray-500"
- line 192: className="text-sm font-medium text-gray-700"
- line 195: className="mt-2 rounded-lg border border-green-200 bg-green-50/50 p-3"
- line 203: className="mt-1 text-xs text-gray-500"
- line 267: className="text-xs text-gray-500"
- ee/features/conversations/components/dashboard/conversations-not-enabled-banner.tsx
- line 132: className="mb-6 border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
- line 167: className="mb-6 border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
- line 264: className="rounded-b-lg border-t bg-gray-200 px-6 py-4 dark:bg-gray-700"
ee/features/conversations/components/viewer/conversation-view-sidebar.tsx (1)
300-305: Nit: verify icon color in default vs ghost statesBellIcon uses text-background for the “enabled/default” button. Ensure sufficient contrast across themes; text-primary-foreground may be safer inside a default button.
- {activeConversation.receiveNotifications ? ( - <BellIcon className="h-5 w-5 text-background" /> + {activeConversation.receiveNotifications ? ( + <BellIcon className="h-5 w-5 text-primary-foreground" /> ) : ( <BellOffIcon className="h-5 w-5 text-muted-foreground" /> )}ee/features/conversations/components/viewer/faq-section.tsx (1)
120-171: Broaden tokenization: container, cards, and scroll blur
- Containers/cards still use bg-gray-50/dark:bg-gray-900, bg-white, border-gray-200. Prefer tokens for theme parity.
Examples:
- <div className="bg-gray-50 p-4 dark:bg-gray-900"> + <div className="bg-muted p-4"> ... - className="rounded-md border border-gray-200 bg-white" + className="rounded-md border bg-card text-card-foreground"
- Scroll gradients use gray scales. Consider background tokens:
- from-gray-50 via-gray-50/80 ... dark:from-gray-900 dark:via-gray-900/80 + from-background via-background/80 ... /* (same for dark via CSS vars) */Also applies to: 204-206, 236-241
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
ee/features/conversations/components/dashboard/edit-faq-modal.tsx(1 hunks)ee/features/conversations/components/dashboard/publish-faq-modal.tsx(1 hunks)ee/features/conversations/components/viewer/conversation-view-sidebar.tsx(2 hunks)ee/features/conversations/components/viewer/faq-section.tsx(2 hunks)
🔇 Additional comments (4)
ee/features/conversations/components/dashboard/edit-faq-modal.tsx (1)
223-225: LGTM: token swap to text-muted-foregroundThis aligns with the design tokens and fixes dark‑mode contrast for the helper text.
ee/features/conversations/components/dashboard/publish-faq-modal.tsx (1)
298-301: LGTM: helper text moved to text-muted-foregroundMatches design tokens and improves dark‑mode readability.
ee/features/conversations/components/viewer/conversation-view-sidebar.tsx (1)
345-347: LGTM: bg-background/text-foreground on inputs/textareaGood dark‑mode defaults with placeholder:text-muted-foreground and ring tokens.
Also applies to: 386-388
ee/features/conversations/components/viewer/faq-section.tsx (1)
211-213: LGTM: tokenized Q/A text colors
- Q label text → text-foreground
- A text → text-muted-foreground
Both are theme-safe.
Also applies to: 223-225
1 participant
Summary by CodeRabbit