fix: Small design details (#2010)

Co-authored-by: Zeh Fernandes <[email protected]>

Author: gabrielmfern

.changeset/itchy-coins-remain.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Improved classes, better borders on table, improved scollbar colors

packages/react-email/src/app/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  color-scheme: dark;
+}
+
 .popup-open iframe {
   pointer-events: none;
 }

packages/react-email/src/app/preview/[...slug]/preview.tsx

@@ -113,7 +113,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
       <div
         {...props}
         className={cn(
-          'h-[calc(100%-3.5rem-2.375rem)] will-change-height flex p-4 transition-all duration-300',
+          'h-[calc(100%-3.5rem-2.375rem)] will-change-[height] flex p-4 transition-[height] duration-300',
           activeView === 'preview' && 'bg-gray-200',
           toolbarToggled && 'h-[calc(100%-3.5rem-13rem)]',
           className,

packages/react-email/src/components/shell.tsx

@@ -78,7 +78,7 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
         </React.Suspense>
         <main
           className={cn(
-            'inline-block relative overflow-hidden will-change-width',
+            'inline-block relative overflow-hidden will-change-[width]',
             'w-full h-full',
             '[transition:width_0.2s_ease-in-out,_transform_0.2s_ease-in-out]',
             sidebarToggled && 'lg:w-[calc(100%-16rem)]',

packages/react-email/src/components/toolbar.tsx

@@ -123,7 +123,7 @@ const ToolbarInner = ({
       data-toggled={toggled}
       className={cn(
         'absolute bottom-0 left-0 right-0',
-        'bg-black group/toolbar text-xs text-slate-11 h-52 transition-transform',
+        'bg-black border-t border-slate-6 group/toolbar text-xs text-slate-11 h-52 transition-transform',
         'data-[toggled=false]:translate-y-[10.625rem]',
       )}
     >