fix(react-email): Preview server's background gradient inteferring with the user's colors (#2251)

gabrielmfern · web-flow · commit 812c55196234 · 2025-05-19T12:25:59.000-03:00
diff --git a/.changeset/spotty-items-teach.md b/.changeset/spotty-items-teach.md
@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+fix preview server's background gradient interferring with the user's colors
diff --git a/packages/react-email/src/app/layout.tsx b/packages/react-email/src/app/layout.tsx
@@ -28,15 +28,13 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       lang="en"
     >
       <body className="relative flex h-screen flex-col bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
-        <EmailsProvider
-          initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
-        >
-          {children}
-        </EmailsProvider>
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-3"
-        />
+        <div className="bg-gradient-to-t from-slate-3 flex">
+          <EmailsProvider
+            initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
+          >
+            {children}
+          </EmailsProvider>
+        </div>
       </body>
     </html>
   );
diff --git a/packages/react-email/src/components/sidebar/sidebar.tsx b/packages/react-email/src/components/sidebar/sidebar.tsx
@@ -16,7 +16,7 @@ export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
   return (
     <aside
       className={cn(
-        'overflow-hidden bg-black',
+        'overflow-hidden',
         'lg:static lg:z-auto lg:max-h-screen lg:w-[16rem]',
         className,
       )}
diff --git a/packages/react-email/src/components/toolbar.tsx b/packages/react-email/src/components/toolbar.tsx
@@ -124,7 +124,7 @@ const ToolbarInner = ({
       data-toggled={toggled}
       className={cn(
         'absolute bottom-0 left-0 right-0',
-        'bg-black border-t border-slate-6 group/toolbar text-xs text-slate-11 h-52 transition-transform',
+        'border-t border-slate-6 group/toolbar text-xs text-slate-11 h-52 transition-transform',
         'data-[toggled=false]:translate-y-[10.625rem]',
       )}
     >
diff --git a/packages/react-email/src/components/toolbar/spam-assassin.tsx b/packages/react-email/src/components/toolbar/spam-assassin.tsx
@@ -83,7 +83,7 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
     <>
       {result ? (
         <Results>
-          <Results.Row className="sticky border-b top-0 bg-black">
+          <Results.Row className="sticky border-b top-0">
             <Results.Column className="uppercase">
               <span className="flex gap-2 items-center">
                 <IconWarning

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-email": patch
 +---
++
 +fix preview server's background gradient interferring with the user's colors
Original file line number	Diff line number	Diff line change
`@@ -124,7 +124,7 @@ const ToolbarInner = ({`
`124`	`124`	`data-toggled={toggled}`
`125`	`125`	`className={cn(`
`126`	`126`	`'absolute bottom-0 left-0 right-0',`
`127`		`- 'bg-black border-t border-slate-6 group/toolbar text-xs text-slate-11 h-52 transition-transform',`
	`127`	`+ 'border-t border-slate-6 group/toolbar text-xs text-slate-11 h-52 transition-transform',`
`128`	`128`	`'data-[toggled=false]:translate-y-[10.625rem]',`
`129`	`129`	`)}`
`130`	`130`	`>`