refactor(demo): use tailwind

bukinoshita · gabrielmfern · commit 36433e395054 · 2025-10-01T11:15:34.000-03:00
diff --git a/apps/demo/emails/magic-links/notion-magic-link.tsx b/apps/demo/emails/magic-links/notion-magic-link.tsx
@@ -9,6 +9,7 @@ import {
   Preview,
   Text,
 } from '@react-email/components';
+import { Tailwind } from '@react-email/tailwind';
 
 interface NotionMagicLinkEmailProps {
   loginCode?: string;
@@ -23,65 +24,54 @@ export const NotionMagicLinkEmail = ({
 }: NotionMagicLinkEmailProps) => (
   <Html>
     <Head />
-    <Body style={main}>
-      <Preview>Log in with this magic link</Preview>
-      <Container style={container}>
-        <Heading style={h1}>Login</Heading>
-        <Link
-          href="https://notion.so"
-          target="_blank"
-          style={{
-            ...link,
-            display: 'block',
-            marginBottom: '16px',
-          }}
-        >
-          Click here to log in with this magic link
-        </Link>
-        <Text style={{ ...text, marginBottom: '14px' }}>
-          Or, copy and paste this temporary login code:
-        </Text>
-        <code style={code}>{loginCode}</code>
-        <Text
-          style={{
-            ...text,
-            color: '#ababab',
-            marginTop: '14px',
-            marginBottom: '16px',
-          }}
-        >
-          If you didn&apos;t try to login, you can safely ignore this email.
-        </Text>
-        <Text
-          style={{
-            ...text,
-            color: '#ababab',
-            marginTop: '12px',
-            marginBottom: '38px',
-          }}
-        >
-          Hint: You can set a permanent password in Settings & members → My
-          account.
-        </Text>
-        <Img
-          src={`${baseUrl}/static/notion-logo.png`}
-          width="32"
-          height="32"
-          alt="Notion's Logo"
-        />
-        <Text style={footer}>
+    <Body className="bg-white">
+      <Tailwind>
+        <Preview>Log in with this magic link</Preview>
+        <Container className="px-3 mx-auto">
+          <Heading className="font-sans text-2xl font-bold text-[#333] my-10 p-0">
+            Login
+          </Heading>
           <Link
             href="https://notion.so"
             target="_blank"
-            style={{ ...link, color: '#898989' }}
+            className="text-[#2754C5] font-sans text-sm underline block mb-4"
           >
-            Notion.so
+            Click here to log in with this magic link
           </Link>
-          , the all-in-one-workspace
-          <br />
-          for your notes, tasks, wikis, and databases.
-        </Text>
-      </Container>
+          <Text className="text-[#333] font-sans text-sm my-6 mb-3.5">
+            Or, copy and paste this temporary login code:
+          </Text>
+          <code className="inline-block py-4 px-[4.5%] w-[90.5%] bg-[#f4f4f4] rounded-md border border-[#eee] text-[#333]">
+            {loginCode}
+          </code>
+
+          <Text className="text-[#ababab] mt-3.5 mb-4 font-sans text-sm">
+            If you didn&apos;t try to login, you can safely ignore this email.
+          </Text>
+          <Text className="text-[#ababab] mt-3 mb-[38px] font-sans text-sm">
+            Hint: You can set a permanent password in Settings & members → My
+            account.
+          </Text>
+          <Img
+            src={`${baseUrl}/static/notion-logo.png`}
+            width="32"
+            height="32"
+            alt="Notion's Logo"
+          />
+          <Text className="text-[#898989] mt-3 mb-[22px] font-sans text-sm">
+            <Link
+              className="text-[#898989] underline font-sans text-sm"
+              href="https://notion.so"
+              target="_blank"
+            >
+              Notion.so
+            </Link>
+            , the all-in-one-workspace
+            <br />
+            for your notes, tasks, wikis, and databases.
+          </Text>
+        </Container>
+      </Tailwind>
     </Body>
   </Html>
 );
@@ -91,59 +81,3 @@ NotionMagicLinkEmail.PreviewProps = {
 } as NotionMagicLinkEmailProps;
 
 export default NotionMagicLinkEmail;
-
-const main = {
-  backgroundColor: '#ffffff',
-};
-
-const container = {
-  paddingLeft: '12px',
-  paddingRight: '12px',
-  margin: '0 auto',
-};
-
-const h1 = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '24px',
-  fontWeight: 'bold',
-  margin: '40px 0',
-  padding: '0',
-};
-
-const link = {
-  color: '#2754C5',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  textDecoration: 'underline',
-};
-
-const text = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  margin: '24px 0',
-};
-
-const footer = {
-  color: '#898989',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '12px',
-  lineHeight: '22px',
-  marginTop: '12px',
-  marginBottom: '24px',
-};
-
-const code = {
-  display: 'inline-block',
-  padding: '16px 4.5%',
-  width: '90.5%',
-  backgroundColor: '#f4f4f4',
-  borderRadius: '5px',
-  border: '1px solid #eee',
-  color: '#333',
-};
