From 2a00c4a3049cd009ccb43742b6f936e04b939b8d Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sat, 14 Mar 2026 00:39:38 +0000
Subject: [PATCH] fix email button

---
 apps/server/src/ee                            |  2 +-
 .../emails/comment-created-email.tsx          | 20 ++-------
 .../emails/comment-mention-email.tsx          | 20 ++-------
 .../emails/comment-resolved-email.tsx         | 20 ++-------
 .../transactional/emails/invitation-email.tsx | 20 ++-------
 .../emails/page-mention-email.tsx             | 20 ++-------
 .../emails/permission-granted-email.tsx       | 20 ++-------
 .../transactional/partials/partials.tsx       | 43 ++++++++++++++++++-
 8 files changed, 67 insertions(+), 98 deletions(-)

diff --git a/apps/server/src/ee b/apps/server/src/ee
index 8b7ae8cf..62a8a7e5 160000
--- a/apps/server/src/ee
+++ b/apps/server/src/ee
@@ -1 +1 @@
-Subproject commit 8b7ae8cf1b17e6c5f7b497d35df33b058cf0472d
+Subproject commit 62a8a7e548a17b8e3baf4dfdc90f2f432a691ee0
diff --git a/apps/server/src/integrations/transactional/emails/comment-created-email.tsx b/apps/server/src/integrations/transactional/emails/comment-created-email.tsx
index 49bde6c5..7fee6dc9 100644
--- a/apps/server/src/integrations/transactional/emails/comment-created-email.tsx
+++ b/apps/server/src/integrations/transactional/emails/comment-created-email.tsx
@@ -1,7 +1,7 @@
-import { Section, Text, Button } from '@react-email/components';
+import { Section, Text } from '@react-email/components';
 import * as React from 'react';
-import { button, content, paragraph } from '../css/styles';
-import { MailBody } from '../partials/partials';
+import { content, paragraph } from '../css/styles';
+import { EmailButton, MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -23,19 +23,7 @@ export const CommentCreateEmail = ({
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <Section
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          paddingLeft: '15px',
-          paddingBottom: '15px',
-        }}
-      >
-        <Button href={pageUrl} style={button}>
-          View
-        </Button>
-      </Section>
+      <EmailButton href={pageUrl}>View</EmailButton>
     </MailBody>
   );
 };
diff --git a/apps/server/src/integrations/transactional/emails/comment-mention-email.tsx b/apps/server/src/integrations/transactional/emails/comment-mention-email.tsx
index 379a8586..079912a0 100644
--- a/apps/server/src/integrations/transactional/emails/comment-mention-email.tsx
+++ b/apps/server/src/integrations/transactional/emails/comment-mention-email.tsx
@@ -1,7 +1,7 @@
-import { Section, Text, Button } from '@react-email/components';
+import { Section, Text } from '@react-email/components';
 import * as React from 'react';
-import { button, content, paragraph } from '../css/styles';
-import { MailBody } from '../partials/partials';
+import { content, paragraph } from '../css/styles';
+import { EmailButton, MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -23,19 +23,7 @@ export const CommentMentionEmail = ({
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <Section
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          paddingLeft: '15px',
-          paddingBottom: '15px',
-        }}
-      >
-        <Button href={pageUrl} style={button}>
-          View
-        </Button>
-      </Section>
+      <EmailButton href={pageUrl}>View</EmailButton>
     </MailBody>
   );
 };
diff --git a/apps/server/src/integrations/transactional/emails/comment-resolved-email.tsx b/apps/server/src/integrations/transactional/emails/comment-resolved-email.tsx
index 886d08fd..4555acb6 100644
--- a/apps/server/src/integrations/transactional/emails/comment-resolved-email.tsx
+++ b/apps/server/src/integrations/transactional/emails/comment-resolved-email.tsx
@@ -1,7 +1,7 @@
-import { Section, Text, Button } from '@react-email/components';
+import { Section, Text } from '@react-email/components';
 import * as React from 'react';
-import { button, content, paragraph } from '../css/styles';
-import { MailBody } from '../partials/partials';
+import { content, paragraph } from '../css/styles';
+import { EmailButton, MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -23,19 +23,7 @@ export const CommentResolvedEmail = ({
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <Section
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          paddingLeft: '15px',
-          paddingBottom: '15px',
-        }}
-      >
-        <Button href={pageUrl} style={button}>
-          View
-        </Button>
-      </Section>
+      <EmailButton href={pageUrl}>View</EmailButton>
     </MailBody>
   );
 };
diff --git a/apps/server/src/integrations/transactional/emails/invitation-email.tsx b/apps/server/src/integrations/transactional/emails/invitation-email.tsx
index b564b2c1..ac8ce32a 100644
--- a/apps/server/src/integrations/transactional/emails/invitation-email.tsx
+++ b/apps/server/src/integrations/transactional/emails/invitation-email.tsx
@@ -1,7 +1,7 @@
-import { Section, Text, Button } from '@react-email/components';
+import { Section, Text } from '@react-email/components';
 import * as React from 'react';
-import { button, content, paragraph } from '../css/styles';
-import { MailBody } from '../partials/partials';
+import { content, paragraph } from '../css/styles';
+import { EmailButton, MailBody } from '../partials/partials';
 
 interface Props {
   inviteLink: string;
@@ -17,19 +17,7 @@ export const InvitationEmail = ({ inviteLink }: Props) => {
           Please click the button below to accept this invitation.
         </Text>
       </Section>
-      <Section
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          paddingLeft: '15px',
-          paddingBottom: '15px',
-        }}
-      >
-        <Button href={inviteLink} style={button}>
-          Accept Invite
-        </Button>
-      </Section>
+      <EmailButton href={inviteLink}>Accept Invite</EmailButton>
     </MailBody>
   );
 };
diff --git a/apps/server/src/integrations/transactional/emails/page-mention-email.tsx b/apps/server/src/integrations/transactional/emails/page-mention-email.tsx
index a4b9baa7..d7886641 100644
--- a/apps/server/src/integrations/transactional/emails/page-mention-email.tsx
+++ b/apps/server/src/integrations/transactional/emails/page-mention-email.tsx
@@ -1,7 +1,7 @@
-import { Section, Text, Button } from '@react-email/components';
+import { Section, Text } from '@react-email/components';
 import * as React from 'react';
-import { button, content, paragraph } from '../css/styles';
-import { MailBody } from '../partials/partials';
+import { content, paragraph } from '../css/styles';
+import { EmailButton, MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -19,19 +19,7 @@ export const PageMentionEmail = ({ actorName, pageTitle, pageUrl }: Props) => {
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <Section
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          paddingLeft: '15px',
-          paddingBottom: '15px',
-        }}
-      >
-        <Button href={pageUrl} style={button}>
-          View
-        </Button>
-      </Section>
+      <EmailButton href={pageUrl}>View</EmailButton>
     </MailBody>
   );
 };
diff --git a/apps/server/src/integrations/transactional/emails/permission-granted-email.tsx b/apps/server/src/integrations/transactional/emails/permission-granted-email.tsx
index f4aa878a..bd4529b7 100644
--- a/apps/server/src/integrations/transactional/emails/permission-granted-email.tsx
+++ b/apps/server/src/integrations/transactional/emails/permission-granted-email.tsx
@@ -1,7 +1,7 @@
-import { Section, Text, Button } from '@react-email/components';
+import { Section, Text } from '@react-email/components';
 import * as React from 'react';
-import { button, content, paragraph } from '../css/styles';
-import { MailBody } from '../partials/partials';
+import { content, paragraph } from '../css/styles';
+import { EmailButton, MailBody } from '../partials/partials';
 
 interface Props {
   actorName: string;
@@ -25,19 +25,7 @@ export const PermissionGrantedEmail = ({
           <strong>{pageTitle}</strong>.
         </Text>
       </Section>
-      <Section
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          paddingLeft: '15px',
-          paddingBottom: '15px',
-        }}
-      >
-        <Button href={pageUrl} style={button}>
-          View
-        </Button>
-      </Section>
+      <EmailButton href={pageUrl}>View</EmailButton>
     </MailBody>
   );
 };
diff --git a/apps/server/src/integrations/transactional/partials/partials.tsx b/apps/server/src/integrations/transactional/partials/partials.tsx
index 753a978f..f97eb989 100644
--- a/apps/server/src/integrations/transactional/partials/partials.tsx
+++ b/apps/server/src/integrations/transactional/partials/partials.tsx
@@ -1,4 +1,4 @@
-import { container, footer, h1, logo, main } from '../css/styles';
+import { button as buttonStyle, container, footer, h1, logo, main } from '../css/styles';
 import {
   Body,
   Container,
@@ -35,6 +35,47 @@ 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}>