Conversation
|
@danteissaias is attempting to deploy a commit to the Zero Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update standardizes and unifies color and theme handling across the mail app by replacing hardcoded and dark mode-specific color values with semantic CSS variables and utility classes. It updates Tailwind and global CSS configurations, refactors component styles, and introduces theme-driven background handling for email rendering. Rate limiting middleware is also disabled. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MailApp
participant ThemeProvider
participant EmailTemplate
participant Iframe
User->>MailApp: Opens mail or compose view
MailApp->>ThemeProvider: Requests current theme/background color
ThemeProvider-->>MailApp: Returns CSS variable for background
MailApp->>EmailTemplate: Passes HTML content + background color
EmailTemplate-->>MailApp: Returns themed HTML document
MailApp->>Iframe: Sets src to themed HTML document
Iframe-->>User: Renders email with correct theme background
Suggested labels
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
it this a leftover you forgot to uncomment?
There was a problem hiding this comment.
Ah yeah, my bad. Will uncomment.
There was a problem hiding this comment.
Would probably make sense to disable this in development though, wdyt?
There was a problem hiding this comment.
we never had issues with it in dev mode, what issues did you face? the rate limits are pretty generous
There was a problem hiding this comment.
I ran into the rate limit a couple times, maybe I was reloading too aggressively.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🔭 Outside diff range comments (2)
apps/mail/components/create/ai-chat.tsx (1)
227-233: 🛠️ Refactor suggestionRemaining hardcoded colors in message bubbles
There are still hardcoded colors in the message bubble styling that should be replaced with semantic tokens for consistency with the rest of the UI.
<div className={cn( 'flex w-fit flex-col gap-2 rounded-xl text-sm shadow', message.role === 'user' - ? 'overflow-wrap-anywhere text-subtleWhite dark:text-offsetDark ml-auto break-words bg-[#313131] p-2 dark:bg-[#f0f0f0]' - : 'overflow-wrap-anywhere mr-auto break-words bg-[#f0f0f0] p-2 dark:bg-[#313131]', + ? 'overflow-wrap-anywhere text-primary-foreground ml-auto break-words bg-primary p-2' + : 'overflow-wrap-anywhere mr-auto break-words bg-muted p-2', )} >apps/mail/components/mail/mail-iframe.tsx (1)
107-116: 🛠️ Refactor suggestionInconsistent background handling
There's an inconsistency between the new theme-based approach and this effect that still sets background colors based on
resolvedThemewith hardcoded RGB values. This should be updated to use the CSS variables for consistency.useEffect(() => { if (iframeRef.current?.contentWindow?.document.body) { const body = iframeRef.current.contentWindow.document.body; - body.style.backgroundColor = - resolvedTheme === 'dark' ? 'rgb(10, 10, 10)' : 'rgb(245, 245, 245)'; + const styles = getComputedStyle(document.documentElement); + body.style.backgroundColor = `hsl(${styles.getPropertyValue('--panel').trim()})`; requestAnimationFrame(() => { fixNonReadableColors(body); }); } -}, [resolvedTheme]); +}, [theme]);
🧹 Nitpick comments (9)
apps/mail/components/mail/search-bar.tsx (1)
211-211: Input border color: apply semantic tokenThe
Inputcomponent now usesbg-backgroundbut retains the genericborderutility, which falls back to the default Tailwind border color. For full theming consistency, consider replacing:- border + border border-panelBorderso the border color leverages your
--panel-borderCSS variable.apps/mail/components/ui/toast.tsx (1)
34-34: Toast container border: consider semantic border tokenThe default toast container now uses
bg-popoverbut lacks a defined border color. To maintain visual separation and follow your theming approach, consider adding:- bg-popover + border border-panelBorder bg-popoverand retain
dark:border-transparentas needed.apps/mail/components/ui/settings-content.tsx (1)
13-13: Nitpick: Remove redundant dark variantSince
border-panelBorderapplies in both light and dark, thedark:border-panelBorderoverride is redundant and can be removed to simplify the class string.apps/mail/components/create/create-email.tsx (2)
20-20: Consider standardizing React import style across the codebaseYou're importing React as a namespace here while using destructured imports elsewhere in the file (line 8). For consistency, consider standardizing the import style across the codebase.
-import { useEffect, useMemo, useState } from 'react'; -import * as React from 'react'; +import React, { useMemo, useState } from 'react';
136-155: Good hotkey scope management implementationAdding the compose scope and global escape key handler improves keyboard navigation. This is a good accessibility enhancement.
One suggestion: Consider using the
useHotkeyshook fromreact-hotkeys-hookfor the Escape key instead of a manual event listener, which would be more consistent with your hotkey management approach.React.useEffect(() => { // Enable the compose scope for hotkeys enableScope('compose'); - // Register a hotkey for ESC to close the dialog - const handleEsc = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - setDialogOpen(false); - } - }; - - // Add event listener - window.addEventListener('keydown', handleEsc); // Clean up return () => { - window.removeEventListener('keydown', handleEsc); disableScope('compose'); }; }, [enableScope, disableScope]);And add a useHotkeys hook:
useHotkeys('esc', () => setDialogOpen(false), { scopes: ['compose'], enableOnFormTags: true });apps/mail/app/globals.css (1)
25-27: Remove empty layer blockThe empty CSS layer block should be removed as it serves no purpose.
-@layer base { -}🧰 Tools
🪛 Biome (1.9.4)
[error] 26-27: An empty block isn't allowed.
Consider removing the empty block or adding styles inside it.
(lint/suspicious/noEmptyBlock)
apps/mail/components/mail/mail-display.tsx (3)
813-818: Refactor dark-mode prefixes to semantic background token
Instead ofdark:bg-muted, prefer usingbg-mutedso it applies in both light/dark. Similarly, replacedark:border-nonewith a semantic border variable or helper.
827-831: Consistent reply-all button theming
Same recommendation: dropdark:bg-mutedin favor ofbg-muted, and unify border styling via CSS variables.
843-848: Consistent forward button theming
Replacedark:bg-mutedwithbg-mutedand removedark:border-none, using semantic tokens to handle both modes.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (34)
apps/mail/app/(routes)/mail/compose/page.tsx(3 hunks)apps/mail/app/(routes)/mail/layout.tsx(1 hunks)apps/mail/app/globals.css(4 hunks)apps/mail/components/connection/add.tsx(1 hunks)apps/mail/components/context/label-sidebar-context.tsx(1 hunks)apps/mail/components/create/ai-chat.tsx(7 hunks)apps/mail/components/create/create-email.tsx(3 hunks)apps/mail/components/create/email-composer.tsx(18 hunks)apps/mail/components/icons/icons.tsx(0 hunks)apps/mail/components/mail/mail-display.tsx(20 hunks)apps/mail/components/mail/mail-iframe.tsx(1 hunks)apps/mail/components/mail/mail-list.tsx(10 hunks)apps/mail/components/mail/mail.tsx(8 hunks)apps/mail/components/mail/note-panel.tsx(15 hunks)apps/mail/components/mail/render-labels.tsx(3 hunks)apps/mail/components/mail/reply-composer.tsx(1 hunks)apps/mail/components/mail/search-bar.tsx(1 hunks)apps/mail/components/mail/thread-display.tsx(12 hunks)apps/mail/components/settings/settings-card.tsx(1 hunks)apps/mail/components/ui/ai-sidebar.tsx(5 hunks)apps/mail/components/ui/app-sidebar.tsx(1 hunks)apps/mail/components/ui/avatar.tsx(1 hunks)apps/mail/components/ui/dialog.tsx(1 hunks)apps/mail/components/ui/dropdown-menu.tsx(1 hunks)apps/mail/components/ui/nav-main.tsx(6 hunks)apps/mail/components/ui/nav-user.tsx(6 hunks)apps/mail/components/ui/settings-content.tsx(1 hunks)apps/mail/components/ui/sidebar-toggle.tsx(1 hunks)apps/mail/components/ui/sidebar.tsx(3 hunks)apps/mail/components/ui/toast.tsx(2 hunks)apps/mail/lib/email-utils.client.tsx(7 hunks)apps/mail/providers/client-providers.tsx(1 hunks)apps/mail/tailwind.config.ts(1 hunks)apps/mail/trpc/trpc.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/mail/components/icons/icons.tsx
🧰 Additional context used
🧬 Code Graph Analysis (10)
apps/mail/components/settings/settings-card.tsx (1)
apps/mail/lib/utils.ts (1)
cn(53-53)
apps/mail/components/mail/reply-composer.tsx (1)
apps/mail/components/create/email-composer.tsx (1)
EmailComposer(78-910)
apps/mail/app/(routes)/mail/compose/page.tsx (2)
packages/db/src/schema.ts (1)
session(28-39)apps/mail/components/ui/dialog.tsx (5)
Dialog(106-106)DialogTitle(114-114)DialogDescription(115-115)DialogTrigger(110-110)DialogContent(111-111)
apps/mail/components/ui/settings-content.tsx (1)
apps/mail/components/ui/app-sidebar.tsx (1)
AppSidebar(37-126)
apps/mail/components/create/ai-chat.tsx (1)
apps/mail/components/ui/avatar.tsx (2)
AvatarFallback(47-47)Avatar(47-47)
apps/mail/components/ui/ai-sidebar.tsx (2)
apps/mail/lib/utils.ts (1)
cn(53-53)apps/mail/components/icons/icons.tsx (2)
X(604-615)Paper(1330-1342)
apps/mail/components/ui/nav-main.tsx (3)
apps/mail/components/ui/dialog.tsx (2)
Dialog(106-106)DialogTrigger(110-110)apps/mail/components/ui/command.tsx (1)
Command(139-139)apps/mail/components/icons/icons.tsx (1)
CurvedArrow(83-94)
apps/mail/components/ui/sidebar-toggle.tsx (3)
apps/mail/components/ui/sidebar.tsx (2)
SidebarTrigger(616-616)useSidebar(617-617)apps/mail/lib/utils.ts (1)
cn(53-53)apps/mail/components/icons/icons.tsx (1)
PanelLeftOpen(114-129)
apps/mail/components/mail/note-panel.tsx (5)
packages/db/src/schema.ts (1)
note(119-131)apps/mail/components/ui/tooltip.tsx (3)
Tooltip(74-74)TooltipTrigger(74-74)TooltipContent(74-74)apps/mail/lib/notes-utils.ts (2)
formatRelativeTime(86-112)NOTE_COLORS(4-55)apps/mail/components/ui/dropdown-menu.tsx (8)
DropdownMenuContent(173-173)DropdownMenuItem(174-174)DropdownMenuSubTrigger(184-184)DropdownMenuPortal(181-181)DropdownMenuSubContent(183-183)DropdownMenuRadioGroup(185-185)DropdownMenuRadioItem(176-176)DropdownMenuSeparator(178-178)apps/mail/lib/utils.ts (1)
cn(53-53)
apps/mail/components/mail/mail-iframe.tsx (2)
apps/mail/lib/email-utils.client.tsx (1)
template(245-267)apps/mail/lib/email-utils.ts (1)
fixNonReadableColors(5-35)
🪛 Biome (1.9.4)
apps/mail/app/globals.css
[error] 26-27: An empty block isn't allowed.
Consider removing the empty block or adding styles inside it.
(lint/suspicious/noEmptyBlock)
🔇 Additional comments (138)
apps/mail/components/context/label-sidebar-context.tsx (1)
61-61: LGTM: Background styling extracted to theme variablesThe removal of explicit background colors in favor of inherited theme styles aligns with the PR's goal of using CSS variables for theming. This change allows the ContextMenuContent to consistently follow the application's theme without hardcoded color values.
apps/mail/trpc/trpc.ts (1)
66-85:Details
❓ Verification inconclusive
Rate limiting has been completely disabled
This change entirely disables the rate limiting functionality by commenting out the implementation code. While the PR is focused on theming changes, this is a functional change that could have security and performance implications.
Please clarify if disabling rate limiting was intentional as part of this PR, as it seems unrelated to the theming changes described in the PR objectives. If not intentional, the rate limiting code should be restored.
🏁 Script executed:
#!/bin/bash # Check if this rate limiting functionality is used elsewhere or has a replacement echo "Checking for other rate limiting implementations..." rg "Ratelimit|rate limit|ratelimit" --type ts --type tsx -C 2Length of output: 204
🏁 Script executed:
#!/bin/bash # Broad search for any use of rate limiting utilities or mentions across all files rg -i "ratelimit" -C2Length of output: 8387
Rate limiting implementation disabled in TRPC middleware
The
createRateLimiterMiddlewareinapps/mail/trpc/trpc.tshas its Upstash Ratelimit logic fully commented out, effectively turning off rate limiting for every route that uses this middleware. This impacts all of the following routes (and any others usingcreateRateLimiterMiddleware):
apps/mail/trpc/routes/settings.tsapps/mail/trpc/routes/mail.tsapps/mail/trpc/routes/label.tsapps/mail/trpc/routes/connections.tsPlease confirm whether disabling rate limiting was intentional. If not, restore the instantiation and enforcement logic in
createRateLimiterMiddlewareso that each route’slimiterandgeneratePrefixconfigurations are applied as before.apps/mail/components/ui/dropdown-menu.tsx (1)
83-83: Improved dropdown menu text themingAdding
text-popover-foregroundto the dropdown menu item ensures text color is controlled by the theme system rather than using hardcoded colors. This change is consistent with the PR's goal of using CSS variables for theming.apps/mail/components/ui/avatar.tsx (1)
39-39: Enhanced avatar fallback text stylingAdding
text-muted-foregroundto the avatar fallback ensures text color is controlled by the theme system rather than using hardcoded colors. This improves consistency across the UI when theme changes are applied.apps/mail/components/mail/reply-composer.tsx (2)
204-204: Good refactoring: Removed hardcoded background colorThe removal of explicit background classes (
bg-white dark:bg-[#141414]) from the container div helps standardize the theming approach by letting the element inherit its background from CSS variables.
206-207: Improved theming consistencyRemoving the dark mode background class (
dark:bg-[#141414]) from the EmailComposer components is consistent with the theme standardization across the app. The component will now use CSS variables for theming.apps/mail/app/(routes)/mail/layout.tsx (1)
8-8: Good semantic class refactoringReplacing conditional light/dark background classes (
bg-lightBackground dark:bg-darkBackground) with a unified semantic class (bg-background) improves maintainability and follows the new theming approach using CSS variables.apps/mail/components/ui/sidebar.tsx (3)
44-45: Improved semantic stylingConverting from explicit light/dark background classes to the semantic
bg-backgroundclass aligns with the CSS variables approach and improves theming consistency.
61-61: Consistent theming for mobile viewGood implementation of the
bg-backgroundclass in the mobile sheet content, maintaining theme consistency between desktop and mobile views.
115-115: Unified background styling in nested elementsThe desktop sidebar inner container now correctly uses
bg-backgroundclass, ensuring consistent styling throughout nested sidebar components.apps/mail/components/ui/sidebar-toggle.tsx (2)
8-8: Trivial import reorderingImport reordering doesn't affect functionality but maintains consistent import ordering across files.
15-15: Improved icon theming with semantic classReplacing conditional fill colors (
dark:fill-iconDark fill-iconLight) with the semantic class (fill-muted-foreground) enhances theme consistency and follows the CSS variables approach.apps/mail/components/ui/app-sidebar.tsx (1)
166-166: Enhanced dialog background with semi-transparencyReplacing explicit colors (
bg-[#FAFAFA] dark:bg-[#141414]) with a semantic semi-transparent background class (bg-background/50) not only aligns with the CSS variables approach but also adds a subtle UI enhancement with transparency.apps/mail/app/(routes)/mail/compose/page.tsx (2)
10-11: Clean import reordering.The reordering of imports doesn't affect functionality and improves organization.
49-49: Good replacement of hardcoded colors with CSS variables.Changing from hardcoded background colors to the semantic
bg-background/50class improves theming consistency and enables easier theme customization. The 50% opacity also creates a nice semi-transparent effect.apps/mail/providers/client-providers.tsx (1)
27-27: Verify the impact of hardcoding theme to 'custom'.Changing from a dynamic user-selected theme (
themevariable) to a hardcoded'custom'value removes user theme preference control. Ensure this is intentional and aligns with the PR's goal of enabling CSS variable-based theming.The previous implementation used:
const theme = data?.settings.colorTheme || 'system';This change means users won't be able to switch between system/light/dark modes in settings. Verify that the new CSS variable approach properly handles theming without this setting.
apps/mail/components/settings/settings-card.tsx (1)
22-22: Good replacement of conditional styling with unified class.Replacing light/dark conditional classes with the semantic
bg-panelclass simplifies the component and aligns with the CSS variables approach for theming. This improves maintainability by centralizing color definitions.apps/mail/components/ui/dialog.tsx (1)
57-57: Good replacement of conditional styling with unified class.Replacing light/dark conditional background classes with the semantic
bg-panelclass simplifies the component styling. This change aligns with the CSS variables approach for theming and improves maintainability.apps/mail/components/mail/search-bar.tsx (1)
204-204: Styling: Migrated icon color to semantic tokenReplacing explicit color classes with
text-muted-foregroundfor the search icon aligns perfectly with the new CSS variable theming and ensures consistency across light/dark modes.apps/mail/components/ui/toast.tsx (1)
24-24: Styling: Unified toast title colorUpdating the toast title’s text color to
text-foregroundreplaces hardcoded black/white values and leverages the theme’s foreground token.apps/mail/components/connection/add.tsx (2)
74-74: Styling: Semantic destructive colors appliedYour update replaces raw red shades with
border-destructive-foreground/40andbg-destructive/40, aligning the warning container with the new CSS variable theming.
83-83: Styling: Semantic text color for pricing detailGood use of
text-foreground/80for the/monthspan, ensuring the price detail adheres to the theme’s foreground opacity token.apps/mail/components/ui/settings-content.tsx (2)
9-9: Layout styling: Simplified wrapper classesThe outer wrapper now uses a minimal set of layout utilities (
flex,h-full,w-full,md:py-1), removing old mode-specific overrides. This keeps the layout clean and consistent.
12-12: Styling: Panel container uses semantic tokensReplacing hardcoded background and border colors with
bg-panelandborder-panelBordercorrectly applies your design tokens for the settings panel container.apps/mail/components/mail/mail.tsx (11)
156-156: Responsive border: confirm border width scopeThe panel wrapper applies
border-panelBorderbut relies onmd:borderfor width (via another class). This may leave mobile viewports borderless. Please verify that hiding the border on smaller screens is intentional.
159-159: Sticky header styling: semantic border token usedThe header now uses
border-panelBorderfor its bottom border, removing explicit hex values. This ensures the header aligns with the theme’s border token.
236-236: ResizablePanel styling: consistent semantic tokensGreat use of
bg-panel,border, andborder-panelBorderon theResizablePanel—this maintains the visual divider and matches the design system tokens.
254-254: Mobile drawer styling: semantic panel token appliedUpdating the mobile drawer’s background to
bg-panelunifies it with the new panel theming—nice consistency for mobile views.
520-520: Category icon styling: unified muted foregroundSwitching the
Lightningicon tofill-muted-foregroundand toggling tofill-whiteon selection aligns well with the new theming tokens.
529-529: Category icon styling: unified muted foregroundGood replacement for the
fill-muted-foreground, enabling consistent icon theming.
539-539: Category icon styling: unified muted foregroundUpdated
Usericon styling matches the theme’s muted icon pattern.
547-547: Category icon styling: unified muted foregroundThe
Bellicon now correctly usesfill-muted-foregroundfor unselected state.
555-555: Category icon styling: unified muted foregroundNice use of
fill-muted-foregroundfor theTagicon to ensure consistency.
564-564: Category icon styling: unified muted foregroundApplying
fill-muted-foregroundand adjusting sizing forScanEyefits the new icon theming guidelines.
631-632: Category button styling: semantic unselected and selected statesLeveraging
bg-popoverfor unselected tabs and dynamic background tokens (bgColor) for the selected state provides a clean, theme-driven approach. The conditionalcnuse keeps the layout responsive.apps/mail/tailwind.config.ts (2)
18-20: Excellent introduction of semantic color variablesThe addition of these CSS variables is a great approach for consistent theming. Using HSL values with CSS variables provides flexibility for creating derived colors with opacity variations.
25-26: Good use of common semantic tokens for layout elementsUsing
backgroundandforegroundas base variables follows design system best practices and helps maintain visual consistency throughout the application.apps/mail/components/create/create-email.tsx (1)
185-188: Clean UI update using semantic tokensGood update of the escape key UI to use semantic color tokens. This makes the UI more consistent with design system changes and supports theming.
apps/mail/components/create/ai-chat.tsx (5)
33-33: Good semantic class substitution for hover states and avatarNice replacement of hardcoded colors with semantic tokens. The muted background with opacity for hover and consistent avatar styling improves consistency with the design system.
Also applies to: 42-44
48-57: Consistent text styling with semantic tokensGood use of semantic color tokens for text elements. The consistent application of
text-foregroundfor primary content andtext-muted-foregroundfor secondary content improves the visual hierarchy.
91-92: Consistent button styling with semantic tokensGood replacement of hardcoded button colors with semantic tokens. Using
bg-mutedwithtext-muted-foregroundensures buttons have consistent styling across themes.Also applies to: 110-111
98-100: Gradient styling with semantic panel colorGood update to use the semantic panel color as the base for gradients. This ensures the gradients blend seamlessly with the surrounding UI in all themes.
Also applies to: 117-120
191-196: Semantic text styling for empty stateGood use of semantic text classes for the empty state. The differentiation between primary and secondary text using
text-foregroundandtext-muted-foregroundimproves readability.apps/mail/components/mail/mail-iframe.tsx (3)
75-75: Good use of theme context for component stylingAdding theme access is important for consistent styling across the component.
80-100: Excellent theming integration for email contentGreat improvement on passing the theme-based background color to the email template. This ensures consistent styling between the app UI and embedded email content.
Using
requestAnimationFrameis a good practice for DOM operations that might affect layout.
105-105: Added theme dependency to effectGood addition of
themeto the dependency array to ensure the effect runs when the theme changes.apps/mail/components/ui/nav-user.tsx (6)
170-174: Semantic CSS variable usage for dropdown content.
TheDropdownMenuContentnow utilizesml-3,w-[--radix-dropdown-menu-trigger-width], andmin-w-56 font-mediumwith semantic tokens, removing explicit light/dark overrides. This aligns perfectly with the new theming approach.
334-336: Consistent background for active account checkmark.
TheCircleCheckicon now leveragesbg-backgroundandfill-mainBlue, replacing prior dual-mode classes and ensuring it adapts correctly to both themes.
431-433: Themed styling for add-connection button.
Switched totext-muted-foregroundand retained the dashed border on the add-connection control, bringing it in line with other muted interactive elements.
441-443: Unified icon fill for overflow menu button.
TheThreeDotsicon now usesfill-muted-foregroundinside the ghostButton, ensuring consistent icon coloration under the new theme tokens.
445-448: Dropdown panel sizing update.
Removed explicit light/dark classes from the secondary menu’sDropdownMenuContentand standardized onmin-w-56 font-medium, matching other dropdowns.
541-546: Themed text classes for user info display.
Replaced concrete color utilities withtext-foregroundandtext-muted-foregroundfor the user’s name and email, ensuring semantic consistency.apps/mail/components/mail/thread-display.tsx (8)
141-141: Icon fill default for action buttons.
TheThreadActionButtoncomponent now uniformly appliesfill-muted-foregroundto its icons, consolidating default icon styling.
345-349: Root container background token.
Switched the thread container to usebg-panel, aligning the background with the global panel token instead of fixed values.
408-410: Header border and background tokens.
Updated the sticky header to useborder-panelBorderand conditionallybg-panel, removing old dark/light overrides.
418-421: Mobile toolbar button theming.
All mobile-only toolbar buttons (Close,Previous,Next) now adopthover:bg-mutedandfill-muted-foreground, replacing mixed-mode classes.Also applies to: 438-446, 458-466
486-490: Star toggle icon state styling.
The star icon’s on/off states now usefill-yellow-400/stroke-yellow-400andstroke-muted-foreground fill-transparent, leveraging semantic tokens for clarity.
508-509: Archive and delete action styling.
Archive,Trash, and their button wrappers now employfill-muted-foregroundorfill-destructive-foregroundalongsideborder-destructive-foreground/30 bg-destructive, matching the destructive palette.Also applies to: 523-526
535-537: Overflow menu icon and panel sizing.
The secondary menu’s trigger (ThreeDots) and itsDropdownMenuContentnow consistently usefill-muted-foregroundand default menu sizing (min-w-56 font-medium).Also applies to: 539-540
583-586: List item separator styling.
Replaced hardcoded borders withborder-panelBorderon thread dividers, ensuring consistent separation lines across themes.apps/mail/components/mail/mail-list.tsx (6)
147-148: Draft preview text theming.
The draft subject line now usestext-muted-foregroundfor secondary text, aligning with other muted elements in the list.
905-911: Empty state message color token.
Updated the empty-inbox helper text totext-foreground/70, matching the muted-foreground style for non-critical information.
362-371: Demo thread avatar container theming.
GroupPeopleand avatar fallback containers in demo mode now usebg-mutedwithtext-muted-foreground, simplifying mixed-mode styling.
470-471: Quick action row and icon buttons.
The inline quick-action toolbar now relies onbg-panel,fill-muted-foreground, andfill-destructive-foreground, removing explicit hex and dark/light toggle classes.Also applies to: 486-490, 504-505, 517-520
557-557: Mail avatar image and fallback styling.
Standardized torounded-fullwith no explicit light/dark overrides on bothAvatarImageandAvatarFallback.Also applies to: 561-561
617-620: Date and subject text tokens.
Both the received date and the subject line now usetext-muted-foregroundfor consistency in the message list.Also applies to: 637-639
apps/mail/components/mail/render-labels.tsx (2)
44-46: Visible label button styling consolidation.
Buttons now usebg-muted/40 border-muted text-primarywithborder-foregroundwhen active, streamlining light/dark handling.
65-67: Hidden label tooltip item styling.
Tooltip labels updated tobg-muted border-muted-foreground/50withborder-primaryon active state, improving consistency.apps/mail/components/ui/ai-sidebar.tsx (4)
99-100: Panel group background token.
ResizablePanelGroupnow usesbg-background p-0, replacing fixed background classes with the theme variable.
108-109: Sidebar panel container theming.
The AI sidebar panel now appliesbg-panelandborder-panelBorder, ensuring it’s styled by the global panel token.
112-116: Sidebar header section tokens.
Header section updated to useborder-panelBorderand theme-agnostic paddings, removing explicit light/dark overrides.
121-122: Icon fill color updates.
X,Paper, andPlusicons all now usefill-muted-foreground(ortext-muted-foreground), unifying the monochrome icon style across the sidebar.Also applies to: 136-137, 195-196
apps/mail/components/ui/nav-main.tsx (8)
268-270: Nicely done replacing hardcoded colors with semantic variablesGreat improvement changing the text color from a hardcoded hex value to the semantic variable
text-sidebar-foreground/70, which makes this component properly respect the theming system.
294-294: Good use of semantic color variablesReplacing hardcoded color with the semantic class
text-sidebar-foreground/70ensures consistent styling across themes.
302-302: Excellent icon color standardizationChanging the icon color to use
text-sidebar-foreground/70ensures it will properly adapt to theme changes.
419-421: Great icon styling cleanupGood job replacing hardcoded icon colors with semantic variables that follow the theme system. Both
text-foregroundandfill-foregroundensure consistent styling.
480-481: Excellent label styling enhancementUsing
bg-accent/40 border-accentprovides better theme consistency for labels compared to the previous hardcoded colors, making them properly respond to theme changes.
511-513: Nice styling for selected vs unselected statesGood implementation of different styling for selected vs unselected states using semantic tokens:
- Selected:
border-accent/40 bg-accent- Unselected:
bg-accent/40 border-accent/40This provides proper visual feedback while respecting the theming system.
576-578: Well-implemented button state stylingGood job replacing the hardcoded hover and active state styles with semantic classes:
hover:bg-sidebar-accentfor hover statebg-sidebar-accentfor active statetext-sidebar-accent-foregroundfor active text colorThis creates a consistent interaction pattern that responds to theme changes.
581-581: Good icon color standardizationEffectively replaced hardcoded icon color with the semantic token
text-muted-foreground/60, ensuring proper theme integration.apps/mail/app/globals.css (4)
33-34: Excellent addition of panel CSS variablesAdding the
--paneland--panel-borderCSS variables is a great improvement that enables consistent styling of panel elements across the app. These will be key in achieving the theming goals of this PR.
47-48: Well-chosen destructive color valuesThe new HSL values for destructive states are well-calibrated, using a lighter pink shade for the background and maintaining the same foreground color, which improves the visibility of destructive actions.
69-72: Good dark theme panel definitionsWell-considered values for the dark mode background and panel colors:
--background: 0 0% 8%- a dark but not pure black background--panel: 0 0% 10%- slightly lighter than the background--panel-border: 0 0% 15%- subtle border that's visible but not harshThese provide good contrast without being too harsh on the eyes.
75-75: Well-balanced dark theme color adjustmentsThe updates to these dark theme colors show thoughtful consideration of contrast and readability:
- Popover background at 19% brightness provides good separation
- Muted background at 25.9% brightness works well for secondary elements
- Destructive colors correctly adjusted for dark mode visibility
- Input field background at 19% brightness maintains consistency with popover
These adjustments will provide a cohesive dark theme experience.
Also applies to: 81-81, 85-86, 88-88
apps/mail/lib/email-utils.client.tsx (5)
7-9: Good imports for theme supportImporting the necessary React hooks and the theme provider is a good preparation for the theme-aware changes to follow.
92-92: Well-structured prop extensionAdding the
backgroundColorproperty to theEmailTemplatePropsinterface is a clean way to extend the component's capabilities for theming.
159-159: Good component signature updateProperly updated the component signature to accept the new
backgroundColorparameter, maintaining the existing parameters while adding the new functionality.
197-208: Excellent email theming implementationThe CSS updates to use the dynamic
backgroundColorvalue are well implemented:
- Setting the background color on both the container elements and all children
- Using the HSL syntax
hsl(${backgroundColor})to correctly apply the theme color- Preserving other important styling like font sizes and families
This effectively brings theme consistency to email content which was previously difficult to style.
245-249: Well-structured function signature updateThe
templatefunction is properly updated to:
- Accept the new
backgroundColorparameter- Maintain backward compatibility with the default for
imagesEnabled- Pass the parameter to the
EmailTemplatecomponentThis provides a clean API for the theme integration.
apps/mail/components/create/email-composer.tsx (13)
377-377: Good container background themingProperly replaced the hardcoded background color with the semantic
bg-panelclass, ensuring the composer background adapts to theme changes.
381-381: Nice border styling updateUsing
border-panelBorderfor the border color ensures consistent styling with the rest of the application's panels while maintaining visual separation.
384-384: Good text color standardizationReplacing hardcoded text colors with semantic
text-muted-foregroundclass provides proper theming for secondary text elements.Also applies to: 394-394, 409-409
415-416: Well-implemented input field stylingGood use of both foreground and placeholder colors:
text-foregroundfor the input textplaceholder:text-muted-foreground/70for placeholder textThis provides appropriate visual hierarchy and ensures both are readable in all themes.
Also applies to: 524-524, 603-603
389-390: Good avatar fallback themingProperly updated avatar fallbacks to use:
bg-accentfor the backgroundtext-muted-foregroundfor the textThis ensures consistent styling across all user avatars in the application.
Also applies to: 393-393, 503-503, 582-582
409-409: Consistent icon stylingGood job using
fill-muted-foregroundconsistently for the close (X) icons throughout the component, ensuring they maintain the proper visual weight across themes.Also applies to: 519-519, 598-598
666-666: Nice message container stylingThe update to
bg-popover/30with border-t creates a subtle visual separation for the message content area while maintaining theme consistency.
676-677: Well-executed primary button stylingExcellent implementation of the Send button styling:
bg-primaryfor the button backgroundtext-primary-foregroundfor the textbg-primary-foreground/10for the shortcut badgetext-primary-foregroundfor the shortcut iconsThis ensures the button stands out appropriately while respecting the theme.
Also applies to: 681-684, 686-689
729-730: Good popover content stylingThe update to use z-index and proper rounding ensures that the attachment popover appears correctly above other content while maintaining visual consistency.
734-736: Nice attachment popover header stylingGood job updating the attachment popover header to use:
border-mutedfor the bordertext-foregroundfor the headingtext-muted-foregroundfor the secondary textThis creates a clear visual hierarchy while respecting the theme.
754-754: Well-styled attachment itemsGood updates to the attachment item styling:
hover:bg-primary/10for the hover statetext-foregroundfor the primary texttext-muted-foregroundfor secondary text and file extensionThis provides a consistent experience that properly adapts to theme changes.
Also applies to: 781-781, 786-786, 791-791
810-810: Good remove button stylingThe styling for the attachment remove button is well-implemented:
- Background transitions from transparent to
bg-black/5on hover- Icon color changes from
text-muted-foregroundtotext-primary-foregroundon hoverThis provides good visual feedback while maintaining theme consistency.
Also applies to: 813-813
851-851: Well-executed AI button stylingGood updates to the AI generation button:
border-panelBorderfor the borderfill-muted-foregroundfor the loading iconfill-foregroundfor the sparkles icontext-foregroundfor the textThis maintains the proper visual hierarchy and theme consistency.
Also applies to: 865-865, 867-867, 870-870
apps/mail/components/mail/mail-display.tsx (13)
212-212: Consistent badge styling with semantic tokens
TheBadgenow usesborder-paneland semantic spacing utilities, ensuring consistent theming.
388-388: Approve unified person avatar container styling
The transition toborder-muted-foreground/30 bg-muted/40aligns with the new CSS variables.
392-396: Avatar fallback and name text use semantic tokens
Both the fallback and name container correctly usetext-muted-foregroundand related utility classes.
441-441: Subject header usestext-foregroundtoken
Switching totext-foregroundensures the subject respects theming.
457-457: Participants grouping styled with semantic muted text
Usingtext-muted-foregroundfor participant names maintains consistency.
531-531: Approve details link styling
The<p>usestext-muted-foreground text-xs underlineappropriately for the “Details” trigger.
545-545: Consistent popover info label styling
All metadata labels now usetext-muted-foreground/60 w-24 text-end, ensuring uniform appearance.Also applies to: 569-569, 581-581, 592-592, 601-601, 608-608, 618-618
631-631: Time stamp uses theming token
Switching totext-muted-foreground+ semantic font utilities is correct.
636-636: Recipient “To” label styling
text-muted-foreground text-sm font-mediumis consistent with new design tokens.
671-671: Recipient “Bcc” label styling
text-muted-foreground text-sm font-mediumworks well for Bcc recipients.
769-769: Attachment button styling with semantic tokens
Usingbg-muted/50 hover:bg-mutedaligns with our CSS variable approach.
796-796: Filename span usestext-foreground
Good choice to ensure the file name text adapts to theme.
799-799: Attachment size uses muted semantic text
text-muted-foreground/60ensures subtle display of file sizes.apps/mail/components/mail/note-panel.tsx (23)
120-120: Approve standardized note container styling
Replacing hardcoded borders withborder-mutedaligns with CSS variable refactor.
134-134: Approve note content styling
Usingwhitespace-pre-wrap break-words text-smis ideal for rich note content.
138-143: Tooltip styling uses semantic tokens
text-muted-foregroundandtext-xsmaintain consistency, and the popover content layout is unchanged.
179-180: DropdownMenuContent and first item align with new theming
The dropdown now consistently uses semantic styling for all menu items.
184-184: Copy action item styling
<DropdownMenuItem>integration is correct with no regressions.
188-188: Pin/unpin action item styling
Using existing CSS variables for destructive and accent states is fine here.
202-203: Color picker submenu retains semantic tokens
<DropdownMenuSub>and<DropdownMenuSubTrigger>are updated correctly.
207-207: Color picker portal content
The submenu portal remains unaffected; styling is consistent.
211-211: Radio items for colors use semantic border->background mapping
borderToBackgroundColorClassintegration is correct.
230-231: Delete action item styling
text-destructive-foregroundis used appropriately for the delete action.
533-533: Approve tooltip for notes panel button
TheTooltipContentremains consistent with the new CSS variable approach.
540-540: Panel open container usesbg-paneltoken
Good use ofbg-panelto drive the note panel’s background color.
543-544: Header border usesborder-muted
Consistent theming for the sticky header is maintained.
567-567: Search icon uses muted-foreground
Appropriate use oftext-muted-foregroundfor search input icons.
573-573: Input usesring-offset-panelfor focus state
This ensures the ring blends with the panel background token.
588-588: Empty state icon styling
text-muted-foregroundfor the sticky note icon is correct.
590-590: No-match state icon styling
text-muted-foregroundis appropriate for the alert icon.
678-678: New note container still usesborder+ semantic l-color
This matches the existing pattern forSortableNote; no change needed.
697-697: Textarea for new note remains unstyled by color variables
bg-transparentis fine here; new note entry uses parent styling.
723-723: Save-selection ring usesring-primary
Correct use of the primary accent for selected note color.
776-777: Add note button usesvariant="secondary"
Consistent with other “add” buttons; no issues.
791-793: Drag overlay styling withbg-popover+text-popover-foreground
The drag preview now correctly respects panel and text tokens.Also applies to: 797-797
803-803: Editing footer uses semantic border and text tokens
The edit note footer matches the theming of the rest of the panel.Also applies to: 806-806, 813-813
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
| }; | ||
| iframeRef.current.onload = handler; | ||
|
|
||
| requestAnimationFrame(() => { |
There was a problem hiding this comment.
Note: this new logic is required to grab the background color from the theme's css variables. When you change theme, this effect re-runs.
|
@danteissaias i'm sorry we didn't merge but there's lots of conflicts now |
|
Gonna close this as too many conflicts - will potentially revisit in the future. |
3 participants
Description
This PR removes hardcoded colors from the app and adds CSS variables that can be used to configure the colors.
Although I have taken care to avoid regressing the default theme, let's review this PR thoroughly for any regressions.
Here is a custom dark theme you can use to test; the goal is that everything should be themed, and there shouldn't be any colors left over from the default theme.
Let me know if you find any regressions or inconsistencies!
Type of Change
Please delete options that are not relevant.
Areas Affected
Please check all that apply:
Testing Done
Describe the tests you've done:
Security Considerations
For changes involving data or authentication:
Checklist
Additional Notes
N/A
Screenshots/Recordings
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by CodeRabbit
Style
New Features
Bug Fixes
Chores