npm - react-email - Versions diffs - 1.0.11 → 1.1.0 - Mend

react-email 1.0.11 → 1.1.0

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 (219) hide show

package/base/emails/notion-magic-link.tsx ADDED Viewed

@@ -0,0 +1,133 @@
+import { Code } from '@react-email/code';
+import { Container } from '@react-email/container';
+import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
+import { Html } from '@react-email/html';
+import { Img } from '@react-email/img';
+import { Link } from '@react-email/link';
+import { Preview } from '@react-email/preview';
+import { Section } from '@react-email/section';
+import { Text } from '@react-email/text';
+import * as React from 'react';
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Log in with this magic link</Preview>
+      <Section>
+        <Container style={container}>
+          <Heading as="h1" 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}>sparo-ndigo-amurt-secan</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="https://assets.react.email/demo/notion-logo.png"
+            width="32"
+            height="32"
+            alt="Notion's Logo"
+          />
+          <Text style={footer}>
+            <Link
+              href="https://notion.so"
+              target="_blank"
+              style={{ ...link, color: '#898989' }}
+            >
+              Notion.so
+            </Link>
+            , the all-in-one-workspace
+            <br />
+            for your notes, tasks, wikis, and databases.
+          </Text>
+        </Container>
+      </Section>
+    </Html>
+  );
+}
+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: '123px 0 44px',
+  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',
+};

package/base/emails/plaid-verify-identity.tsx ADDED Viewed

@@ -0,0 +1,133 @@
+import { Container } from '@react-email/container';
+import { Head } from '@react-email/head';
+import { Section } from '@react-email/section';
+import { Html } from '@react-email/html';
+import { Img } from '@react-email/img';
+import { Link } from '@react-email/link';
+import { Text } from '@react-email/text';
+import * as React from 'react';
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Container style={container}>
+        <Img
+          src="https://assets.react.email/demo/plaid.png"
+          width="212"
+          height="88"
+          alt="Plaid"
+          style={logo}
+        />
+        <Text style={tertiary}>Verify Your Identity</Text>
+        <Text style={secondary}>
+          Enter the following code to finish linking Venmo.
+        </Text>
+        <Section style={codeContainer}>
+          <Text style={code}>144833</Text>
+        </Section>
+        <Text style={paragraph}>Not expecting this email?</Text>
+        <Text style={paragraph}>
+          Contact{' '}
+          <Link href="mailto:login@plaid.com" style={link}>
+            login@plaid.com
+          </Link>{' '}
+          if you did not request this code.
+        </Text>
+      </Container>
+      <Text style={footer}>Securely powered by Plaid.</Text>
+    </Html>
+  );
+}
+const container = {
+  backgroundColor: '#ffffff',
+  border: '1px solid #eee',
+  borderRadius: '5px',
+  boxShadow: '0 5px 10px rgba(20,50,70,.2)',
+  marginTop: '20px',
+  width: '360px',
+  margin: '0 auto',
+  padding: '68px 0 130px',
+};
+const logo = {
+  margin: '0 auto',
+};
+const tertiary = {
+  color: '#0a85ea',
+  fontSize: '11px',
+  fontWeight: 700,
+  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
+  height: '16px',
+  letterSpacing: '0',
+  lineHeight: '16px',
+  margin: '16px 8px 8px 8px',
+  textTransform: 'uppercase' as const,
+  textAlign: 'center' as const,
+};
+const secondary = {
+  color: '#000',
+  display: 'inline-block',
+  fontFamily: 'HelveticaNeue-Medium,Helvetica,Arial,sans-serif',
+  fontSize: '20px',
+  fontWeight: 500,
+  lineHeight: '24px',
+  marginBottom: '0',
+  marginTop: '0',
+  textAlign: 'center' as const,
+};
+const codeContainer = {
+  background: 'rgba(0,0,0,.05)',
+  borderRadius: '4px',
+  margin: '16px auto 14px',
+  verticalAlign: 'middle',
+  width: '280px',
+};
+const code = {
+  color: '#000',
+  display: 'inline-block',
+  fontFamily: 'HelveticaNeue-Bold',
+  fontSize: '32px',
+  fontWeight: 700,
+  letterSpacing: '6px',
+  lineHeight: '40px',
+  paddingBottom: '8px',
+  paddingTop: '8px',
+  margin: '0 auto',
+  width: '100%',
+  textAlign: 'center' as const,
+};
+const paragraph = {
+  color: '#444',
+  fontSize: '15px',
+  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
+  letterSpacing: '0',
+  lineHeight: '23px',
+  padding: '0 40px',
+  margin: '0',
+  textAlign: 'center' as const,
+};
+const link = {
+  color: '#444',
+  textDecoration: 'underline',
+};
+const footer = {
+  color: '#000',
+  fontSize: '12px',
+  fontWeight: 800,
+  letterSpacing: '0',
+  lineHeight: '23px',
+  margin: '0',
+  marginTop: '20px',
+  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
+  textAlign: 'center' as const,
+  textTransform: 'uppercase' as const,
+};

package/base/emails/stripe-welcome.tsx ADDED Viewed

@@ -0,0 +1,152 @@
+import { Button } from '@react-email/button';
+import { Container } from '@react-email/container';
+import { Head } from '@react-email/head';
+import { Hr } from '@react-email/hr';
+import { Html } from '@react-email/html';
+import { Img } from '@react-email/img';
+import { Link } from '@react-email/link';
+import { Preview } from '@react-email/preview';
+import { Section } from '@react-email/section';
+import { Text } from '@react-email/text';
+import * as React from 'react';
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>You're now ready to make live transactions with Stripe!</Preview>
+      <Section style={main}>
+        <Container style={container}>
+          <Section style={box}>
+            <Img
+              src="https://assets.react.email/demo/stripe-logo.png"
+              width="49"
+              height="21"
+              alt="Stripe"
+            />
+            <Hr style={hr} />
+            <Text style={paragraph}>
+              Thanks for submitting your account information. You're now ready
+              to make live transactions with Stripe!
+            </Text>
+            <Text style={paragraph}>
+              You can view your payments and a variety of other information
+              about your account right from your dashboard.
+            </Text>
+            <Button
+              pX={10}
+              pY={10}
+              style={button}
+              href="https://dashboard.stripe.com/login"
+            >
+              View your Stripe Dashboard
+            </Button>
+            <Hr style={hr} />
+            <Text style={paragraph}>
+              If you haven't finished your integration, you might find our{' '}
+              <Link style={anchor} href="https://stripe.com/docs">
+                docs
+              </Link>{' '}
+              handy.
+            </Text>
+            <Text style={paragraph}>
+              Once you're ready to start accepting payments, you'll just need to
+              use your live{' '}
+              <Link
+                style={anchor}
+                href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
+              >
+                API keys
+              </Link>{' '}
+              instead of your test API keys. Your account can simultaneously be
+              used for both test and live requests, so you can continue testing
+              while accepting live payments. Check out our{' '}
+              <Link style={anchor} href="https://stripe.com/docs/dashboard">
+                tutorial about account basics
+              </Link>
+              .
+            </Text>
+            <Text style={paragraph}>
+              Finally, we've put together a{' '}
+              <Link
+                style={anchor}
+                href="https://stripe.com/docs/checklist/website"
+              >
+                quick checklist
+              </Link>{' '}
+              to ensure your website conforms to card network standards.
+            </Text>
+            <Text style={paragraph}>
+              We'll be here to help you with any step along the way. You can
+              find answers to most questions and get in touch with us on our{' '}
+              <Link style={anchor} href="https://support.stripe.com/">
+                support site
+              </Link>
+              .
+            </Text>
+            <Text style={paragraph}>— The Stripe team</Text>
+            <Hr style={hr} />
+            <Text style={footer}>
+              Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
+            </Text>
+          </Section>
+        </Container>
+      </Section>
+    </Html>
+  );
+}
+const main = {
+  backgroundColor: '#f6f9fc',
+};
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  padding: '20px 0 48px',
+  marginBottom: '64px',
+};
+const box = {
+  padding: '0 48px',
+};
+const hr = {
+  borderColor: '#e6ebf1',
+  margin: '20px 0',
+};
+const paragraph = {
+  color: '#525f7f',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+  fontSize: '16px',
+  lineHeight: '24px',
+  textAlign: 'left' as const,
+};
+const anchor = {
+  color: '#556cd6',
+};
+const button = {
+  backgroundColor: '#656ee8',
+  borderRadius: '5px',
+  color: '#fff',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  textDecoration: 'none',
+  textAlign: 'center' as const,
+  display: 'block',
+  width: '100%',
+};
+const footer = {
+  color: '#8898aa',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+  fontSize: '12px',
+  lineHeight: '16px',
+};

package/base/emails/vercel-invite-user.tsx ADDED Viewed

@@ -0,0 +1,193 @@
+import { Avatar, AvatarImage } from '@react-email/avatar';
+import { Button } from '@react-email/button';
+import { Column } from '@react-email/column';
+import { Container } from '@react-email/container';
+import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
+import { Hr } from '@react-email/hr';
+import { Html } from '@react-email/html';
+import { Img } from '@react-email/img';
+import { Link } from '@react-email/link';
+import { Preview } from '@react-email/preview';
+import { Section } from '@react-email/section';
+import { Text } from '@react-email/text';
+import * as React from 'react';
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Join bukinoshita on Vercel</Preview>
+      <Section>
+        <Container style={container}>
+          <Section style={section}>
+            <Img
+              src="https://assets.react.email/demo/vercel-logo.png"
+              width="40"
+              height="37"
+              alt="Vercel"
+              style={logo}
+            />
+            <Heading as="h1" style={h1}>
+              Join <strong>My Project</strong> on <strong>Vercel</strong>
+            </Heading>
+            <Text style={text}>Hello zenorocha,</Text>
+            <Text style={text}>
+              <strong>bukinoshita</strong> (
+              <Link href="mailto:bukinoshita@example.com" style={link}>
+                bukinoshita@example.com
+              </Link>
+              ) has invited you to the <strong>My Project</strong> team on{' '}
+              <strong>Vercel</strong>.
+            </Text>
+            <Section>
+              <Column>
+                <Avatar>
+                  <AvatarImage
+                    style={avatar}
+                    src="https://vercel.com/api/www/avatar/?u=zenorocha&amp;s=240&amp;format=png"
+                    width="64"
+                    height="64"
+                  />
+                </Avatar>
+              </Column>
+              <Column>
+                <Img
+                  src="https://assets.react.email/demo/vercel-arrow.png"
+                  width="12"
+                  height="9"
+                  alt="invited you to"
+                />
+              </Column>
+              <Column>
+                <Avatar>
+                  <AvatarImage
+                    style={avatar}
+                    src="https://vercel.com/api/www/avatar/?teamId=team_3e17ZatpKJ1imLQdTyrLeBoX&amp;s=240&amp;format=png"
+                    width="64"
+                    height="64"
+                  />
+                </Avatar>
+              </Column>
+            </Section>
+            <Section style={btnCenter}>
+              <Button
+                pX={20}
+                pY={12}
+                style={btn}
+                href="https://vercel.com/teams/invite/foo"
+              >
+                Join the team
+              </Button>
+            </Section>
+            <Text style={text}>
+              <br />
+              or copy and paste this URL into your browser:{' '}
+              <Link
+                href="https://vercel.com/teams/invite/foo"
+                target="_blank"
+                style={link}
+                rel="noreferrer"
+              >
+                https://vercel.com/teams/invite/foo
+              </Link>
+            </Text>
+            <Hr style={hr} />
+            <Text style={footer}>
+              This invitation was intended for{' '}
+              <span style={black}>zenorocha</span>.This invite was sent from{' '}
+              <span style={black}>204.13.186.218</span> located in{' '}
+              <span style={black}>São Paulo, Brazil</span>. If you were not
+              expecting this invitation, you can ignore this email. If you are
+              concerned about your account's safety, please reply to this email
+              to get in touch with us.
+            </Text>
+          </Section>
+        </Container>
+      </Section>
+    </Html>
+  );
+}
+const container = {
+  border: '1px solid #eaeaea',
+  borderRadius: '5px',
+  margin: '40px auto',
+};
+const section = {
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  textAlign: 'left' as const,
+  width: '465px',
+};
+const logo = {
+  margin: '32px auto 0',
+};
+const h1 = {
+  color: '#000',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '24px',
+  fontWeight: 'normal',
+  margin: '30px 0',
+  textAlign: 'center' as const,
+  padding: '0',
+};
+const avatar = {
+  borderRadius: '100%',
+};
+const link = {
+  color: '#067df7',
+  textDecoration: 'none',
+};
+const text = {
+  color: '#000',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '14px',
+  lineHeight: '24px',
+};
+const black = {
+  color: 'black',
+};
+const btnCenter = {
+  margin: '0 auto',
+  width: 'auto',
+};
+const btn = {
+  backgroundColor: '#000',
+  borderRadius: '5px',
+  color: '#fff',
+  display: 'inline-block',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '12px',
+  fontWeight: 500,
+  lineHeight: '50px',
+  textDecoration: 'none',
+  textAlign: 'center' as const,
+};
+const hr = {
+  border: 'none',
+  borderTop: '1px solid #eaeaea',
+  margin: '26px 0',
+  width: '100%',
+};
+const footer = {
+  color: '#666666',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '12px',
+  lineHeight: '24px',
+};