make the background around the iframe look like a canvas

resend · Feb 7, 2025 · b291c2b · b291c2b
1 parent 136b2b0
commit b291c2b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/react-email/src/app/preview/[...slug]/preview.tsx b/packages/react-email/src/app/preview/[...slug]/preview.tsx
@@ -130,7 +130,7 @@ const Preview = ({
     >
       {/* This relative is so that when there is any error the user can still switch between emails */}
       <div
-        className="relative flex h-full pb-8"
+        className="relative flex h-full pb-8 bg-gray-200"
         ref={(element) => {
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;

diff --git a/packages/react-email/src/components/resizable-wrapper.tsx b/packages/react-email/src/components/resizable-wrapper.tsx
@@ -119,7 +119,7 @@ export const ResizableWarpper = ({
         role="slider"
         tabIndex={0}
       >
-        <div className="h-8 w-1 rounded-md bg-slate-8" />
+        <div className="h-8 w-1 rounded-md bg-black/30" />
       </div>
       <div
         aria-label="resize-east"
@@ -135,7 +135,7 @@ export const ResizableWarpper = ({
         role="slider"
         tabIndex={0}
       >
-        <div className="h-8 w-1 rounded-md bg-slate-8" />
+        <div className="h-8 w-1 rounded-md bg-black/30" />
       </div>
       <div
         aria-label="resize-north"
@@ -151,7 +151,7 @@ export const ResizableWarpper = ({
         role="slider"
         tabIndex={0}
       >
-        <div className="h-1 w-8 rounded-md bg-slate-8" />
+        <div className="h-1 w-8 rounded-md bg-black/30" />
       </div>
       <div
         aria-label="resize-south"
@@ -167,7 +167,7 @@ export const ResizableWarpper = ({
         role="slider"
         tabIndex={0}
       >
-        <div className="h-1 w-8 rounded-md bg-slate-8" />
+        <div className="h-1 w-8 rounded-md bg-black/30" />
       </div>
 
       <Slot ref={resizableRef}>{children}</Slot>