npm - react-email - Versions diffs - 3.0.7 → 4.0.0-alpha.1 - Mend

react-email 3.0.7 → 4.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/src/app/globals.css CHANGED Viewed

@@ -2,30 +2,6 @@
 @tailwind components;
 @tailwind utilities;
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
 .popup-open iframe {
   pointer-events: none;
 }

package/src/app/layout.tsx CHANGED Viewed

@@ -23,13 +23,17 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   }
   return (
-    <html lang="en">
-      <body className={inter.className}>
+    <html className={inter.className} lang="en">
+      <body className="relative flex h-screen flex-col overflow-x-hidden 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"
+        />
       </body>
     </html>
   );

package/src/app/page.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import path from 'node:path';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Heading, Text } from '../components';
+import CodeSnippet from '../components/code-snippet';
 import { Shell } from '../components/shell';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import logo from './logo.png';
@@ -11,8 +12,8 @@ const Home = () => {
   return (
     <Shell>
-      <div className="relative max-w-lg mx-auto p-8 flex items-center justify-center h-[inherit]">
-        <div className="relative z-10 flex flex-col text-center items-center">
+      <div className="relative mx-auto flex h-[inherit] max-w-lg items-center justify-center p-8">
+        <div className="-mt-10 relative flex flex-col items-center gap-3 text-center">
           <Image
             alt="React Email Icon"
             className="mb-8"
@@ -20,22 +21,20 @@ const Home = () => {
             src={logo}
             style={{
               borderRadius: 34,
-              boxShadow: '0px 10px 200px 20px #2B7CA080',
+              boxShadow: '0 .625rem 12.5rem 1.25rem #2B7CA080',
             }}
             width={141}
           />
           <Heading as="h2" size="6" weight="medium">
             Welcome to React Email
           </Heading>
-          <Text as="p" className="mt-2 mb-4">
+          <Text as="p">
             To start developing your emails, you can create a<br />
-            <code className="text-slate-12">.jsx</code> or{' '}
-            <code className="text-slate-12">.tsx</code> file under your{' '}
-            <code className="text-slate-12">{baseEmailsDirectoryName}</code>{' '}
+            <CodeSnippet>.jsx</CodeSnippet> or <CodeSnippet>.tsx</CodeSnippet>{' '}
+            file under your <CodeSnippet>{baseEmailsDirectoryName}</CodeSnippet>{' '}
             folder.
           </Text>
-          <Button asChild size="3">
+          <Button asChild className="mt-3" size="3">
             <Link href="https://react.email/docs">Check the docs</Link>
           </Button>
         </div>

package/src/app/preview/[...slug]/page.tsx CHANGED Viewed

@@ -80,6 +80,7 @@ export async function generateMetadata({
   params: Promise<PreviewParams>;
 }) {
   const { slug } = await params;
   return { title: `${path.basename(slug.join('/'))} — React Email` };
 }

package/src/app/preview/[...slug]/preview.tsx CHANGED Viewed

@@ -93,7 +93,7 @@ const Preview = ({
           <>
             {activeView === 'desktop' && (
               <iframe
-                className="w-full bg-white h-[calc(100vh_-_140px)] lg:h-[calc(100vh_-_70px)]"
+                className="h-full w-full bg-white"
                 srcDoc={renderedEmailMetadata.markup}
                 title={slug}
               />
@@ -101,14 +101,14 @@ const Preview = ({
             {activeView === 'mobile' && (
               <iframe
-                className="w-[360px] bg-white h-[calc(100vh_-_140px)] lg:h-[calc(100vh_-_70px)] mx-auto"
+                className="mx-auto h-full w-[360px] bg-white"
                 srcDoc={renderedEmailMetadata.markup}
                 title={slug}
               />
             )}
             {activeView === 'source' && (
-              <div className="flex gap-6 mx-auto p-6 max-w-3xl">
+              <div className="mx-auto flex max-w-3xl gap-6 p-6">
                 <Tooltip.Provider>
                   <CodeContainer
                     activeLang={activeLang}

package/src/app/preview/[...slug]/rendering-error.tsx CHANGED Viewed

@@ -5,11 +5,11 @@ export const RenderingError = (props: { error: ErrorObject }) => {
   return (
     <>
       <div className="absolute inset-0 z-50 bg-black/80" />
-      <div className="md:max-w-[568px] lg:max-w-[968px] absolute left-[50%] top-[50%] min-h-[50vh] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-t-4 bg-white text-black p-6 shadow-lg duration-200 sm:rounded-lg rounded-t-sm">
-        <div className="flex flex-col max-w-full min-w-0 space-y-1.5">
-          <h2 className="text-lg flex items-center flex-shrink gap-4 font-semibold pb-2 leading-none tracking-tight">
+      <div className="absolute left-[50%] top-[50%] z-50 grid min-h-[50vh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-t-sm border border-t-4 bg-white p-6 text-black shadow-lg duration-200 sm:rounded-lg md:max-w-[568px] lg:max-w-[968px]">
+        <div className="flex min-w-0 max-w-full flex-col space-y-1.5">
+          <h2 className="flex flex-shrink items-center gap-4 pb-2 text-lg font-semibold leading-none tracking-tight">
             <svg
-              className="h-6 w-6 text-red-600 font-extrabold"
+              className="h-6 w-6 font-extrabold text-red-600"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -27,8 +27,8 @@ export const RenderingError = (props: { error: ErrorObject }) => {
             {props.error.name}: {props.error.message}
           </h2>
           {props.error.stack ? (
-            <div className="text-sm p-2 flex-grow scroll-px-4 overflow-x-auto bg-red-500 rounded-lg text-gray-100">
-              <pre className="font-mono w-full min-w-0 leading-7">
+            <div className="flex-grow scroll-px-4 overflow-x-auto rounded-lg bg-red-500 p-2 text-sm text-gray-100">
+              <pre className="w-full min-w-0 font-mono leading-7">
                 {props.error.stack}
               </pre>
             </div>

package/src/components/button.tsx CHANGED Viewed

@@ -1,10 +1,12 @@
+'use client';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import * as SlotPrimitive from '@radix-ui/react-slot';
-import * as React from 'react';
+import type * as React from 'react';
+import animatedLoadIcon from '../animated-icons-data/load.json';
 import { cn } from '../utils/cn';
 import { unreachable } from '../utils/unreachable';
-type ButtonElement = React.ElementRef<'button'>;
-type RootProps = React.ComponentPropsWithoutRef<'button'>;
+type RootProps = React.ComponentProps<'button'>;
 type Appearance = 'white' | 'gradient';
 type Size = '1' | '2' | '3' | '4';
@@ -13,43 +15,51 @@ interface ButtonProps extends RootProps {
   asChild?: boolean;
   appearance?: Appearance;
   size?: Size;
+  loading?: boolean;
 }
-export const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(
-  (
-    {
-      asChild,
-      appearance = 'white',
-      className,
-      children,
-      size = '2',
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    const classNames = cn(
-      getSize(size),
-      getAppearance(appearance),
-      'inline-flex items-center justify-center border font-medium',
-      className,
-    );
+export const Button = ({
+  asChild,
+  appearance = 'white',
+  className,
+  children,
+  size = '2',
+  loading,
+  ref,
+  ...props
+}: ButtonProps) => {
+  const Root = asChild ? SlotPrimitive.Slot : 'button';
-    return asChild ? (
-      <SlotPrimitive.Slot ref={forwardedRef} {...props} className={classNames}>
-        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
-      </SlotPrimitive.Slot>
-    ) : (
-      <button
-        className={classNames}
-        ref={forwardedRef}
-        type="button"
-        {...props}
+  return (
+    <Root
+      ref={ref}
+      type="button"
+      {...props}
+      className={cn(
+        getSize(size),
+        getAppearance(appearance),
+        'inline-flex items-center justify-center gap-2 border font-medium',
+        className,
+      )}
+      aria-disabled={loading}
+    >
+      <span
+        className={cn(
+          '-ml-7 opacity-0 transition-opacity duration-200',
+          loading && 'opacity-100',
+        )}
       >
-        {children}
-      </button>
-    );
-  },
-);
+        <DotLottieReact
+          data={animatedLoadIcon}
+          autoplay={false}
+          className="h-5 w-5"
+          loop={true}
+        />
+      </span>
+      <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
+    </Root>
+  );
+};
 Button.displayName = 'Button';
@@ -58,15 +68,16 @@ const getAppearance = (appearance: Appearance | undefined) => {
     case undefined:
     case 'white':
       return [
-        'bg-white text-black',
+        'border-white bg-white text-black transition-colors duration-200 ease-in-out',
         'hover:bg-white/90',
-        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-white/90',
+        'focus:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white/20',
+        'mt-2 mb-4 aria-disabled:border-transparent aria-disabled:bg-slate-11',
       ];
     case 'gradient':
       return [
-        'bg-gradient backdrop-blur-[20px] border-[#34343A]',
+        'bg-gradient border-[#34343A] backdrop-blur-[1.25rem]',
         'hover:bg-gradientHover',
-        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-gradientHover',
+        'focus:bg-gradientHover focus:outline-none focus:ring-2 focus:ring-white/20',
       ];
     default:
       unreachable(appearance);
@@ -79,9 +90,9 @@ const getSize = (size: Size | undefined) => {
       return '';
     case undefined:
     case '2':
-      return 'text-[14px] h-8 px-3 rounded-md gap-2';
+      return 'text-[.875rem] h-8 px-3 rounded-md gap-2';
     case '3':
-      return 'text-[14px] h-10 px-4 rounded-md gap-2';
+      return 'text-[.875rem] h-10 px-4 rounded-md gap-2';
     case '4':
       return 'text-base h-11 px-4 rounded-md gap-2';
     default:

package/src/components/code-container.tsx CHANGED Viewed

@@ -37,7 +37,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
     return (
       <a
-        className="text-slate-11 transition ease-in-out duration-200 hover:text-slate-12"
+        className="text-slate-11 transition duration-200 ease-in-out hover:text-slate-12"
         download={file.name}
         href={url}
       >
@@ -72,7 +72,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
   return (
     <div
-      className="border-slate-6 relative w-full items-center whitespace-pre rounded-md border text-sm backdrop-blur-md"
+      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm backdrop-blur-md"
       style={{
         lineHeight: '130%',
         background:
@@ -87,7 +87,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
               const isCurrentLang = activeLang === language;
               return (
                 <motion.button
-                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 hover:text-slate-12 ${
+                  className={`relative px-4 py-[8px] font-sans text-sm font-medium transition duration-200 ease-in-out hover:text-slate-12 ${
                     activeLang !== language ? 'text-slate-11' : 'text-slate-12'
                   }`}
                   key={language}
@@ -98,7 +98,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
                   {isCurrentLang ? (
                     <motion.span
                       animate={{ opacity: 1 }}
-                      className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
+                      className="absolute bottom-0 left-0 right-0 top-0 bg-slate-4"
                       exit={{ opacity: 0 }}
                       initial={{ opacity: 0 }}
                       layoutId="code"
@@ -114,7 +114,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
         <Tooltip>
           <Tooltip.Trigger
             asChild
-            className="absolute top-2 right-2 hidden md:block"
+            className="absolute right-2 top-2 hidden md:block"
           >
             {renderClipboardIcon()}
           </Tooltip.Trigger>
@@ -123,7 +123,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
         <Tooltip>
           <Tooltip.Trigger
             asChild
-            className="text-gray-11 absolute top-2 right-8 hidden md:block"
+            className="text-gray-11 absolute right-8 top-2 hidden md:block"
           >
             {renderDownloadIcon()}
           </Tooltip.Trigger>

package/src/components/code-snippet.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+const CodeSnippet = ({ children }) => {
+  return (
+    <code className="m-0.5 inline-block rounded-md bg-white/10 p-1 font-mono leading-none text-slate-12">
+      {children}
+    </code>
+  );
+};
+export default CodeSnippet;

package/src/components/code.tsx CHANGED Viewed

@@ -60,7 +60,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
             }}
           />
-          <pre className="p-4 h-[650px] overflow-auto">
+          <pre className="h-[650px] overflow-auto p-4">
             {tokens.map((line, i) => {
               const lineProps = getLineProps({
                 line,
@@ -68,12 +68,12 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
               });
               return (
                 <div
-                  key={i}
                   {...lineProps}
                   className={cn('whitespace-pre', {
-                    "before:text-slate-11 before:mr-2 before:content-['$']":
+                    "before:mr-2 before:text-slate-11 before:content-['$']":
                       language === 'bash' && tokens.length === 1,
                   })}
+                  key={i}
                 >
                   {line.map((token, key) => {
                     const tokenProps = getTokenProps({
@@ -99,7 +99,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
             })}
           </pre>
           <div
-            className="absolute left-0 bottom-0 h-px w-[200px]"
+            className="absolute bottom-0 left-0 h-px w-[200px]"
             style={{
               background:
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',

package/src/components/icons/icon-button.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ export const IconButton = React.forwardRef<
     type="button"
     {...props}
     className={cn(
-      'rounded text-slate-11 focus:text-slate-12 ease-in-out transition duration-200 focus:outline-none focus:ring-2 focus:ring-gray-8 hover:text-slate-12',
+      'focus:ring-gray-8 rounded text-slate-11 transition duration-200 ease-in-out hover:text-slate-12 focus:text-slate-12 focus:outline-none focus:ring-2',
       className,
     )}
     ref={forwardedRef}

package/src/components/icons/icon-circle-check.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+export const IconCircleCheck = React.forwardRef<
+  IconElement,
+  Readonly<IconProps>
+>(({ ...props }, forwardedRef) => (
+  <IconBase ref={forwardedRef} {...props}>
+    <g fill="currentColor">
+      <path d="M10.243 16.314L6 12.07l1.414-1.414l2.829 2.828l5.656-5.657l1.415 1.415z" />
+      <path
+        clipRule="evenodd"
+        d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12m11 9a9 9 0 1 1 0-18a9 9 0 0 1 0 18"
+        fillRule="evenodd"
+      />
+    </g>
+  </IconBase>
+));
+IconCircleCheck.displayName = 'IconCircleCheck';

package/src/components/icons/icon-circle-close.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+export const IconCircleClose = React.forwardRef<
+  IconElement,
+  Readonly<IconProps>
+>(({ ...props }, forwardedRef) => (
+  <IconBase ref={forwardedRef} {...props}>
+    <path
+      d="M12 4a8 8 0 1 0 0 16a8 8 0 0 0 0-16M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m5.793-4.207a1 1 0 0 1 1.414 0L12 10.586l2.793-2.793a1 1 0 1 1 1.414 1.414L13.414 12l2.793 2.793a1 1 0 0 1-1.414 1.414L12 13.414l-2.793 2.793a1 1 0 0 1-1.414-1.414L10.586 12L7.793 9.207a1 1 0 0 1 0-1.414"
+      fill="currentColor"
+    />
+  </IconBase>
+));
+IconCircleClose.displayName = 'IconCircleClose';

package/src/components/icons/icon-circle-warning.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+export const IconCircleWarning = React.forwardRef<
+  IconElement,
+  Readonly<IconProps>
+>(({ ...props }, forwardedRef) => (
+  <IconBase ref={forwardedRef} {...props}>
+    <path
+      d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8"
+      fill="currentColor"
+    />
+  </IconBase>
+));
+IconCircleWarning.displayName = 'IconCircleWarning';

package/src/components/icons/icon-email.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+export const IconEmail = React.forwardRef<IconElement, Readonly<IconProps>>(
+  (props, forwardedRef) => {
+    return (
+      <IconBase {...props} ref={forwardedRef}>
+        <path
+          d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4.7l-8 5.334L4 8.7V6.297l8 5.333l8-5.333z"
+          fill="currentColor"
+        />
+      </IconBase>
+    );
+  },
+);
+IconEmail.displayName = 'IconEmail';

package/src/components/icons/icon-image.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+export const IconImage = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+      <circle cx="9" cy="9" r="2" />
+      <path d="m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+    </g>
+  </IconBase>
+));

package/src/components/icons/icon-link.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+export const IconLink = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <path
+      d="m10 17.55l-1.77 1.72a2.47 2.47 0 0 1-3.5-3.5l4.54-4.55a2.46 2.46 0 0 1 3.39-.09l.12.1a1 1 0 0 0 1.4-1.43a3 3 0 0 0-.18-.21a4.46 4.46 0 0 0-6.09.22l-4.6 4.55a4.48 4.48 0 0 0 6.33 6.33L11.37 19A1 1 0 0 0 10 17.55M20.69 3.31a4.49 4.49 0 0 0-6.33 0L12.63 5A1 1 0 0 0 14 6.45l1.73-1.72a2.47 2.47 0 0 1 3.5 3.5l-4.54 4.55a2.46 2.46 0 0 1-3.39.09l-.12-.1a1 1 0 0 0-1.4 1.43a3 3 0 0 0 .23.21a4.47 4.47 0 0 0 6.09-.22l4.55-4.55a4.49 4.49 0 0 0 .04-6.33"
+      fill="currentColor"
+    />
+  </IconBase>
+));
+IconLink.displayName = 'IconLink';

package/src/components/icons/icon-stamp.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+export const IconStamp = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <path
+      d="M9.122 4.388A2.25 2.25 0 0 1 11.368 2h1.31a2.25 2.25 0 0 1 2.247 2.388l-.604 9.862h4.202a2.25 2.25 0 0 1 2.25 2.25v3.25a.75.75 0 0 1-.75.75h-.5v.75a.75.75 0 0 1-.75.75h-13.5a.75.75 0 0 1-.75-.75v-.75h-.5a.75.75 0 0 1-.75-.75V16.5a2.25 2.25 0 0 1 2.25-2.25h4.203zM19.273 19v-2.5a.75.75 0 0 0-.75-.75h-13a.75.75 0 0 0-.75.75V19zM13.427 4.296a.75.75 0 0 0-.748-.796h-1.31a.75.75 0 0 0-.75.796l.61 9.954h1.589z"
+      fill="currentColor"
+    />
+  </IconBase>
+));
+IconStamp.displayName = 'IconStamp';

package/src/components/send.tsx CHANGED Viewed

@@ -54,7 +54,7 @@ export const Send = ({ markup }: { markup: string }) => {
     >
       <Popover.Trigger asChild>
         <button
-          className="box-border outline-none self-center w-20 h-5 flex items-center justify-center rounded-lg bg-slate-2 text-center transition duration-300  ease-in-out border border-slate-6 text-slate-11 text-sm px-4 py-4 hover:border-slate-10 hover:text-slate-12 font-sans"
+          className="box-border flex h-5 w-20 items-center justify-center self-center rounded-lg border border-slate-6 bg-slate-2 px-4 py-4 text-center font-sans text-sm text-slate-11 outline-none transition duration-300 ease-in-out hover:border-slate-10 hover:text-slate-12"
           type="submit"
         >
           Send
@@ -64,19 +64,19 @@ export const Send = ({ markup }: { markup: string }) => {
       <Popover.Portal>
         <Popover.Content
           align="end"
-          className={`w-80 -mt-10 p-3 bg-black/70 backdrop-blur-lg border border-slate-6 text-slate-11 rounded-lg shadow-md font-sans ${inter.variable}`}
+          className={`-mt-10 w-80 rounded-lg border border-slate-6 bg-black/70 p-3 font-sans text-slate-11 shadow-md backdrop-blur-lg ${inter.variable}`}
           sideOffset={48}
         >
           <form className="mt-1" onSubmit={(e) => void onFormSubmit(e)}>
             <label
-              className="text-slate-10 text-xs uppercase mb-2 block"
+              className="mb-2 block text-xs uppercase text-slate-10"
               htmlFor="to"
             >
               Recipient
             </label>
             <input
               autoFocus
-              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-10 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-10 transition duration-300 ease-in-out"
+              className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
               defaultValue={to}
               id="to"
               onChange={(e) => {
@@ -87,13 +87,13 @@ export const Send = ({ markup }: { markup: string }) => {
               type="email"
             />
             <label
-              className="text-slate-10 text-xs uppercase mb-2 mt-1 block"
+              className="mb-2 mt-1 block text-xs uppercase text-slate-10"
               htmlFor="subject"
             >
               Subject
             </label>
             <input
-              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-10 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-10 transition duration-300 ease-in-out"
+              className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
               defaultValue={subject}
               id="subject"
               onChange={(e) => {
@@ -107,11 +107,11 @@ export const Send = ({ markup }: { markup: string }) => {
               className="appearance-none checked:bg-blue-500"
               type="checkbox"
             />
-            <div className="flex items-center justify-between mt-3">
+            <div className="mt-3 flex items-center justify-between">
               <Text className="inline-block" size="1">
                 Powered by{' '}
                 <a
-                  className="text-white/85 hover:text-slate-12 transition ease-in-out duration-300"
+                  className="text-white/85 transition duration-300 ease-in-out hover:text-slate-12"
                   href="https://resend.com"
                   rel="noreferrer"
                   target="_blank"
@@ -120,7 +120,7 @@ export const Send = ({ markup }: { markup: string }) => {
                 </a>
               </Text>
               <Button
-                className="disabled:bg-slate-11 disabled:border-transparent"
+                className="disabled:border-transparent disabled:bg-slate-11"
                 disabled={subject.length === 0 || to.length === 0 || isSending}
                 type="submit"
               >