fix(demo): update email templates with correct <Button> syntax (#965)

Co-authored-by: Vitor Capretz <[email protected]>

Author: lordelogos

demo/emails/codepen-challengers.tsx

@@ -98,7 +98,7 @@ export const CodepenChallengersEmail = () => (
               front-end designer or developer at any experience level.
             </Text>
 
-            <Button style={button} pX={12} pY={12}>
+            <Button style={button}>
               <strong>Learn More</strong>
             </Button>
           </Section>
@@ -209,9 +209,7 @@ export const CodepenChallengersEmail = () => (
         </Section>
 
         <Section style={goToChallenge}>
-          <Button style={footerButton} pY={15} pX={30}>
-            Go to Challenge Page
-          </Button>
+          <Button style={footerButton}>Go to Challenge Page</Button>
         </Section>
 
         <Section style={footer}>
@@ -333,6 +331,7 @@ const button = {
   lineHeight: "18px",
   cursor: "pointer",
   borderRadius: "4px",
+  padding: "12px",
 };
 
 const resourcesTitle = {
@@ -395,6 +394,7 @@ const footerButton = {
   borderRadius: "4px",
   fontWeight: "bold",
   cursor: "pointer",
+  padding: "15px 30px",
 };
 
 const footer = {

demo/emails/dropbox-reset-password.tsx

@@ -43,7 +43,7 @@ export const DropboxResetPasswordEmail = ({
               Someone recently requested a password change for your Dropbox
               account. If this was you, you can set a new password here:
             </Text>
-            <Button style={button} href={resetPasswordLink} pX={7} pY={14}>
+            <Button style={button} href={resetPasswordLink}>
               Reset password
             </Button>
             <Text style={text}>
@@ -102,6 +102,7 @@ const button = {
   textAlign: "center" as const,
   display: "block",
   width: "210px",
+  padding: "14px 7px",
 };
 
 const anchor = {

demo/emails/github-access-token.tsx

@@ -51,9 +51,7 @@ export const GithubAccessTokenEmail = ({
             recently added to your account.
           </Text>
 
-          <Button style={button} pX={24} pY={12}>
-            View your token
-          </Button>
+          <Button style={button}>View your token</Button>
         </Section>
         <Text style={links}>
           <Link style={link}>Your security audit log</Link> ・{" "}
@@ -110,6 +108,7 @@ const button = {
   color: "#fff",
   lineHeight: 1.5,
   borderRadius: "0.5em",
+  padding: "12px 24px",
 };
 
 const links = {

demo/emails/koala-welcome.tsx

@@ -43,7 +43,7 @@ export const KoalaWelcomeEmail = ({
           uncover qualified leads and close deals faster.
         </Text>
         <Section style={btnContainer}>
-          <Button pX={12} pY={12} style={button} href="https://getkoala.com">
+          <Button style={button} href="https://getkoala.com">
             Get started
           </Button>
         </Section>
@@ -97,6 +97,7 @@ const button = {
   textDecoration: "none",
   textAlign: "center" as const,
   display: "block",
+  padding: "12px",
 };
 
 const hr = {

demo/emails/linear-login-code.tsx

@@ -39,7 +39,7 @@ export const LinearLoginCodeEmail = ({
         />
         <Heading style={heading}>Your login code for Linear</Heading>
         <Section style={buttonContainer}>
-          <Button pY={11} pX={23} style={button} href="https://linear.app">
+          <Button style={button} href="https://linear.app">
             Login to Linear
           </Button>
         </Section>
@@ -110,6 +110,7 @@ const button = {
   textDecoration: "none",
   textAlign: "center" as const,
   display: "block",
+  padding: "11px 23px",
 };
 
 const reportLink = {

demo/emails/netlify-welcome.tsx

@@ -125,11 +125,7 @@ export const NetlifyWelcomeEmail = ({
             <ul>{steps?.map(({ Description }) => Description)}</ul>
 
             <Section className="text-center">
-              <Button
-                className="bg-brand text-white rounded-lg"
-                pY={12}
-                pX={18}
-              >
+              <Button className="bg-brand text-white rounded-lg py-3 px-[18px]">
                 Go to your dashboard
               </Button>
             </Section>

demo/emails/stripe-welcome.tsx

@@ -39,12 +39,7 @@ export const StripeWelcomeEmail = () => (
             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"
-          >
+          <Button style={button} href="https://dashboard.stripe.com/login">
             View your Stripe Dashboard
           </Button>
           <Hr style={hr} />
@@ -147,6 +142,7 @@ const button = {
   textAlign: "center" as const,
   display: "block",
   width: "100%",
+  padding: "10px",
 };
 
 const footer = {

demo/emails/vercel-invite-user.tsx

@@ -109,9 +109,7 @@ export const VercelInviteUserEmail = ({
             </Section>
             <Section className="text-center mt-[32px] mb-[32px]">
               <Button
-                pX={20}
-                pY={12}
-                className="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center"
+                className="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
                 href={inviteLink}
               >
                 Join the team

demo/emails/yelp-recent-login.tsx

@@ -109,9 +109,7 @@ export const YelpRecentLoginEmail = ({
             </Row>
             <Row style={{ ...boxInfos, paddingTop: "0" }}>
               <Column style={containerButton} colSpan={2}>
-                <Button pY={12} pX={30} style={button}>
-                  Learn More
-                </Button>
+                <Button style={button}>Learn More</Button>
               </Column>
             </Row>
           </Section>
@@ -173,6 +171,7 @@ const button = {
   fontWeight: "bold",
   border: "1px solid rgb(0,0,0, 0.1)",
   cursor: "pointer",
+  padding: "12px 30px",
 };
 
 const content = {

docs/getting-started/manual-setup.mdx

@@ -1,12 +1,12 @@
 ---
-title: 'Manual Setup'
-sidebarTitle: 'Manual Setup'
-description: 'Create a brand-new folder with packages powered by React Email.'
-'og:image': 'https://react.email/static/covers/react-email.png'
-icon: 'hammer'
+title: "Manual Setup"
+sidebarTitle: "Manual Setup"
+description: "Create a brand-new folder with packages powered by React Email."
+"og:image": "https://react.email/static/covers/react-email.png"
+icon: "hammer"
 ---
 
-import NextSteps from '../snippets/next-steps.mdx';
+import NextSteps from "../snippets/next-steps.mdx";
 
 ## 1. Create directory
 
@@ -55,18 +55,16 @@ Include the following script in your `package.json` file.
 Create a new folder called `emails`, create a file inside called `index.tsx`, and add the following code:
 
 ```jsx index.tsx
-import { Button } from '@react-email/button';
-import { Html } from '@react-email/html';
-import * as React from 'react';
+import { Button } from "@react-email/button";
+import { Html } from "@react-email/html";
+import * as React from "react";
 
 export default function Email() {
   return (
     <Html>
       <Button
-        pX={20}
-        pY={12}
         href="https://example.com"
-        style={{ background: '#000', color: '#fff' }}
+        style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
       >
         Click me
       </Button>