chore(demo): Make email support adjustments

Author: gabrielmfern

apps/demo/emails/magic-links/plaid-verify-identity.tsx

@@ -115,7 +115,6 @@ const codeContainer = {
 
 const code = {
   color: '#000',
-  display: 'inline-block',
   fontFamily: 'HelveticaNeue-Bold',
   fontSize: '32px',
   fontWeight: 700,
@@ -124,7 +123,7 @@ const code = {
   paddingBottom: '8px',
   paddingTop: '8px',
   margin: '0 auto',
-  width: '100%',
+  display: 'block',
   textAlign: 'center' as const,
 };
 

apps/demo/emails/magic-links/slack-confirm.tsx

@@ -178,7 +178,7 @@ const footerLogos = {
   marginBottom: '32px',
   paddingLeft: '8px',
   paddingRight: '8px',
-  width: '100%',
+  display: 'block'
 };
 
 const socialMediaIcon = {

apps/demo/emails/notifications/yelp-recent-login.tsx

@@ -112,7 +112,7 @@ export const YelpRecentLoginEmail = ({
               </Column>
             </Row>
             <Row style={{ ...boxInfos, paddingTop: '0' }}>
-              <Column style={containerButton} colSpan={2}>
+              <Column style={buttonContainer} colSpan={2}>
                 <Button style={button}>Learn More</Button>
               </Column>
             </Row>
@@ -166,10 +166,8 @@ const logo = {
   padding: '30px 20px',
 };
 
-const containerButton = {
+const buttonContainer = {
   display: 'flex',
-  justifyContent: 'center',
-  width: '100%',
 };
 
 const button = {
@@ -179,6 +177,7 @@ const button = {
   fontWeight: 'bold',
   border: '1px solid rgb(0,0,0, 0.1)',
   cursor: 'pointer',
+  margin: '0 auto',
   padding: '12px 30px',
 };
 

apps/demo/emails/reviews/airbnb-review.tsx

@@ -166,12 +166,10 @@ const button = {
   borderRadius: '3px',
   color: '#fff',
   fontSize: '18px',
-  paddingTop: '19px',
-  paddingBottom: '19px',
+  padding: '19px 30px',
   textDecoration: 'none',
   textAlign: 'center' as const,
   display: 'block',
-  width: '100%',
 };
 
 const link = {

apps/demo/emails/welcome/stripe-welcome.tsx

@@ -141,7 +141,6 @@ const button = {
   textDecoration: 'none',
   textAlign: 'center' as const,
   display: 'block',
-  width: '100%',
   padding: '10px',
 };