diff --git a/apps/api/src/mail/emails/components/base-email-template.tsx b/apps/api/src/mail/emails/components/base-email-template.tsx
new file mode 100644
index 00000000..891ddfe0
--- /dev/null
+++ b/apps/api/src/mail/emails/components/base-email-template.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react'
+import {
+ Body,
+ Container,
+ Head,
+ Heading,
+ Html,
+ Link,
+ Preview,
+ Section,
+ Text
+} from '@react-email/components'
+import {
+ container,
+ content,
+ footer,
+ footerText,
+ h1,
+ link,
+ main,
+ text
+} from '../styles/common-styles'
+
+interface BaseEmailTemplateProps {
+ previewText: string
+ heading: string
+ children: React.ReactNode
+}
+
+export const BaseEmailTemplate: React.FC = ({
+ previewText,
+ heading,
+ children
+}) => {
+ return (
+
+
+ {previewText}
+
+
+
+ {heading}
+ {children}
+
+ If you believe this action was taken in error or have any
+ questions regarding this change, please contact your project
+ administrator or our support team.
+
+
+ We appreciate your understanding and thank you for your
+ contributions to the project.
+
+
+ Cheers,
+
+ Team Keyshade
+
+
+
+
+ This is an automated message. Please do not reply to this email.
+
+
+ Read our{' '}
+
+ Privacy Policy
+ {' '}
+ and{' '}
+
+ Terms and Conditions
+ {' '}
+ for more information on how we manage your data and services.
+
+
+
+
+
+ )
+}
+
+export default BaseEmailTemplate
\ No newline at end of file
diff --git a/apps/api/src/mail/emails/styles/common-styles.ts b/apps/api/src/mail/emails/styles/common-styles.ts
new file mode 100644
index 00000000..027deedb
--- /dev/null
+++ b/apps/api/src/mail/emails/styles/common-styles.ts
@@ -0,0 +1,78 @@
+import { CSSProperties } from 'react'
+
+export const main: CSSProperties = {
+ fontFamily: "'Segoe UI', 'Roboto', sans-serif",
+ lineHeight: '1.6',
+ color: '#04050a',
+ backgroundColor: '#fafafa',
+ margin: '0',
+ padding: '20px'
+}
+
+export const container: CSSProperties = {
+ maxWidth: '600px',
+ margin: '0 auto',
+ backgroundColor: '#fff',
+ borderRadius: '5px',
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)'
+}
+
+export const content: CSSProperties = {
+ padding: '20px 40px'
+}
+
+export const h1: CSSProperties = {
+ color: '#000',
+ marginBottom: '20px',
+ fontSize: '24px',
+ fontWeight: '600'
+}
+
+export const text: CSSProperties = {
+ marginBottom: '5px',
+ color: '#666'
+}
+
+export const workspaceDetails: CSSProperties = {
+ width: '100%',
+ backgroundColor: '#fafafa',
+ borderRadius: '5px',
+ margin: '20px 0px',
+ padding: '10px 20px'
+}
+
+export const workspaceInfo: CSSProperties = {
+ margin: '7px 0px'
+}
+
+export const ctaButton: CSSProperties = {
+ width: '100px',
+ color: '#ffffff',
+ fontSize: '14px',
+ fontWeight: '500',
+ textAlign: 'center',
+ marginTop: '10px',
+ cursor: 'pointer',
+ display: 'inline-block',
+ backgroundColor: '#000',
+ textDecoration: 'none',
+ padding: '10px 22px',
+ borderRadius: '5px'
+}
+
+export const footer: CSSProperties = {
+ borderTop: '1px solid #eaeaea',
+ padding: '20px'
+}
+
+export const footerText: CSSProperties = {
+ fontSize: '12px',
+ color: '#999',
+ textAlign: 'center' as const,
+ margin: '0'
+}
+
+export const link: CSSProperties = {
+ color: '#000',
+ textDecoration: 'underline'
+}
diff --git a/apps/api/src/mail/emails/workspace-invitation.tsx b/apps/api/src/mail/emails/workspace-invitation.tsx
new file mode 100644
index 00000000..37b4fc0f
--- /dev/null
+++ b/apps/api/src/mail/emails/workspace-invitation.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { Button, Section, Text } from '@react-email/components'
+import dayjs from 'dayjs'
+import {
+ ctaButton,
+ text,
+ workspaceDetails,
+ workspaceInfo
+} from './styles/common-styles'
+import BaseEmailTemplate from './components/base-email-template'
+
+interface WorkspaceInvitationEmailProps {
+ workspaceName: string
+ actionUrl: string
+ invitedBy: string
+ invitedOn: string
+ forRegisteredUser: boolean
+}
+
+export const WorkspaceInvitationEmail = ({
+ workspaceName,
+ actionUrl,
+ invitedBy,
+ invitedOn,
+ forRegisteredUser
+}: WorkspaceInvitationEmailProps) => {
+ const formattedInvitedOnDate = dayjs(invitedOn).format(
+ 'ddd, MMM D, YYYY h:mm A'
+ )
+
+ const previewText = forRegisteredUser
+ ? 'Welcome Back! Join Your Workspace'
+ : 'You are Invited to Join the Workspace'
+
+ return (
+
+ Dear User,
+
+ We're excited to inform you that you've been invited to join a
+ workspace on Keyshade. Here are the details of your invitation:
+
+
+
+ Workspace Name: {workspaceName}
+
+
+ Invited By: {invitedBy}
+
+
+ Invited On: {formattedInvitedOnDate}
+
+
+
+ Join the project by clicking the button below - we're excited to
+ have you!
+
+
+
+ )
+}
+
+export default WorkspaceInvitationEmail
\ No newline at end of file
diff --git a/apps/api/src/mail/emails/workspace-removal.tsx b/apps/api/src/mail/emails/workspace-removal.tsx
index da1ed0aa..29a28693 100644
--- a/apps/api/src/mail/emails/workspace-removal.tsx
+++ b/apps/api/src/mail/emails/workspace-removal.tsx
@@ -1,16 +1,8 @@
import * as React from 'react'
-import {
- Body,
- Container,
- Head,
- Heading,
- Html,
- Link,
- Preview,
- Section,
- Text
-} from '@react-email/components'
+import { Text, Section } from '@react-email/components'
import dayjs from 'dayjs'
+import { text, workspaceDetails, workspaceInfo } from './styles/common-styles'
+import BaseEmailTemplate from './components/base-email-template'
interface WorkspaceRemovalEmailProps {
workspaceName: string
@@ -26,126 +18,25 @@ export const RemovedFromWorkspaceEmail = ({
)
return (
-
-
-