30 seconds

apps/server/src/integrations/transactional/emails/comment-created-email.tsx

@@ -1,7 +1,7 @@
-import { Section, Text } from '@react-email/components';
+import { Section, Text, Button } from '@react-email/components';
 import * as React from 'react';
-import { content, paragraph } from '../css/styles';
+import { button, content, paragraph } from '../css/styles';
-import { EmailButton, MailBody } from '../partials/partials';
+import { MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -23,7 +23,19 @@ export const CommentCreateEmail = ({
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <EmailButton href={pageUrl}>View</EmailButton>
+      <Section
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingLeft: '15px',
+          paddingBottom: '15px',
+        }}
+      >
+        <Button href={pageUrl} style={button}>
+          View
+        </Button>
+      </Section>
     </MailBody>
   );
 };

apps/server/src/integrations/transactional/emails/comment-mention-email.tsx

@@ -1,7 +1,7 @@
-import { Section, Text } from '@react-email/components';
+import { Section, Text, Button } from '@react-email/components';
 import * as React from 'react';
-import { content, paragraph } from '../css/styles';
+import { button, content, paragraph } from '../css/styles';
-import { EmailButton, MailBody } from '../partials/partials';
+import { MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -23,7 +23,19 @@ export const CommentMentionEmail = ({
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <EmailButton href={pageUrl}>View</EmailButton>
+      <Section
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingLeft: '15px',
+          paddingBottom: '15px',
+        }}
+      >
+        <Button href={pageUrl} style={button}>
+          View
+        </Button>
+      </Section>
     </MailBody>
   );
 };

apps/server/src/integrations/transactional/emails/comment-resolved-email.tsx

@@ -1,7 +1,7 @@
-import { Section, Text } from '@react-email/components';
+import { Section, Text, Button } from '@react-email/components';
 import * as React from 'react';
-import { content, paragraph } from '../css/styles';
+import { button, content, paragraph } from '../css/styles';
-import { EmailButton, MailBody } from '../partials/partials';
+import { MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -23,7 +23,19 @@ export const CommentResolvedEmail = ({
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <EmailButton href={pageUrl}>View</EmailButton>
+      <Section
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingLeft: '15px',
+          paddingBottom: '15px',
+        }}
+      >
+        <Button href={pageUrl} style={button}>
+          View
+        </Button>
+      </Section>
     </MailBody>
   );
 };

apps/server/src/integrations/transactional/emails/invitation-email.tsx

@@ -1,7 +1,7 @@
-import { Section, Text } from '@react-email/components';
+import { Section, Text, Button } from '@react-email/components';
 import * as React from 'react';
-import { content, paragraph } from '../css/styles';
+import { button, content, paragraph } from '../css/styles';
-import { EmailButton, MailBody } from '../partials/partials';
+import { MailBody } from '../partials/partials';
 
 interface Props {
   inviteLink: string;
@@ -17,7 +17,19 @@ export const InvitationEmail = ({ inviteLink }: Props) => {
           Please click the button below to accept this invitation.
         </Text>
       </Section>
-      <EmailButton href={inviteLink}>Accept Invite</EmailButton>
+      <Section
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingLeft: '15px',
+          paddingBottom: '15px',
+        }}
+      >
+        <Button href={inviteLink} style={button}>
+          Accept Invite
+        </Button>
+      </Section>
     </MailBody>
   );
 };

apps/server/src/integrations/transactional/emails/page-mention-email.tsx

@@ -1,7 +1,7 @@
-import { Section, Text } from '@react-email/components';
+import { Section, Text, Button } from '@react-email/components';
 import * as React from 'react';
-import { content, paragraph } from '../css/styles';
+import { button, content, paragraph } from '../css/styles';
-import { EmailButton, MailBody } from '../partials/partials';
+import { MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -19,7 +19,19 @@ export const PageMentionEmail = ({ actorName, pageTitle, pageUrl }: Props) => {
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <EmailButton href={pageUrl}>View</EmailButton>
+      <Section
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingLeft: '15px',
+          paddingBottom: '15px',
+        }}
+      >
+        <Button href={pageUrl} style={button}>
+          View
+        </Button>
+      </Section>
     </MailBody>
   );
 };

apps/server/src/integrations/transactional/emails/permission-granted-email.tsx

@@ -1,7 +1,7 @@
-import { Section, Text } from '@react-email/components';
+import { Section, Text, Button } from '@react-email/components';
 import * as React from 'react';
-import { content, paragraph } from '../css/styles';
+import { button, content, paragraph } from '../css/styles';
-import { EmailButton, MailBody } from '../partials/partials';
+import { MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -25,7 +25,19 @@ export const PermissionGrantedEmail = ({
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <EmailButton href={pageUrl}>View</EmailButton>
+      <Section
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingLeft: '15px',
+          paddingBottom: '15px',
+        }}
+      >
+        <Button href={pageUrl} style={button}>
+          View
+        </Button>
+      </Section>
     </MailBody>
   );
 };

apps/server/src/integrations/transactional/partials/partials.tsx

@@ -1,4 +1,4 @@
-import { button as buttonStyle, container, footer, h1, logo, main } from '../css/styles';
+import { container, footer, h1, logo, main } from '../css/styles';
 import {
   Body,
   Container,
@@ -35,47 +35,6 @@ export function MailHeader() {
   );
 }
 
-interface EmailButtonProps {
-  href: string;
-  children: React.ReactNode;
-}
-
-export function EmailButton({ href, children }: EmailButtonProps) {
-  return (
-    <table
-      role="presentation"
-      cellPadding="0"
-      cellSpacing="0"
-      style={{ margin: '0 0 15px 15px' }}
-    >
-      <tr>
-        <td
-          style={{
-            backgroundColor: buttonStyle.backgroundColor,
-            borderRadius: buttonStyle.borderRadius,
-            textAlign: 'center' as const,
-          }}
-        >
-          <a
-            href={href}
-            target="_blank"
-            style={{
-              color: buttonStyle.color,
-              fontFamily: buttonStyle.fontFamily,
-              fontSize: buttonStyle.fontSize,
-              textDecoration: 'none',
-              display: 'inline-block',
-              padding: '8px 16px',
-            }}
-          >
-            {children}
-          </a>
-        </td>
-      </tr>
-    </table>
-  );
-}
-
 export function MailFooter() {
   return (
     <Section style={footer}>