feat: Introduce a new mail package for email templates and update the gatekeeper login page with new logo assets.

2026-02-05 01:05:49 +01:00
parent 646d615e76
commit 95d0a1622f
15 changed files with 1149 additions and 4 deletions
--- a/packages/mail/src/layouts/BaseLayout.tsx
+++ b/packages/mail/src/layouts/BaseLayout.tsx
@@ -0,0 +1,53 @@
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Preview,
+  Section,
+} from "@react-email/components";
+import * as React from "react";
+
+export interface BaseLayoutProps {
+  preview: string;
+  children: React.ReactNode;
+  brandColor?: string;
+}
+
+export const BaseLayout = ({
+  preview,
+  children,
+  brandColor = "#82ed20",
+}: BaseLayoutProps) => {
+  return (
+    <Html>
+      <Head />
+      <Preview>{preview}</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Section style={content}>{children}</Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+const main = {
+  backgroundColor: "#0a0a0a",
+  color: "#ffffff",
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+};
+
+const container = {
+  backgroundColor: "#0f0f0f",
+  margin: "0 auto",
+  padding: "40px 0",
+  maxWidth: "600px",
+  border: "1px solid #1a1a1a",
+  borderRadius: "12px",
+};
+
+const content = {
+  padding: "0 40px",
+};
--- a/packages/mail/src/layouts/ClientLayout.tsx
+++ b/packages/mail/src/layouts/ClientLayout.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+import { Hr, Section, Text, Img } from "@react-email/components";
+import { BaseLayout } from "./BaseLayout";
+
+export interface ClientLayoutProps {
+  preview: string;
+  children: React.ReactNode;
+  clientLogo?: string;
+  clientName: string;
+  brandColor?: string;
+}
+
+export const ClientLayout = ({
+  preview,
+  children,
+  clientLogo,
+  clientName,
+  brandColor = "#82ed20",
+}: ClientLayoutProps) => {
+  return (
+    <BaseLayout preview={preview} brandColor={brandColor}>
+      <Section style={header}>
+        {clientLogo ? (
+          <Img src={clientLogo} alt={clientName} height="40" style={logo} />
+        ) : (
+          <Text style={logoText(brandColor)}>{clientName}</Text>
+        )}
+      </Section>
+      <Hr style={hr} />
+      <Section style={mainContent}>{children}</Section>
+      <Hr style={hr} />
+      <Section style={footer}>
+        <Text style={footerText}>
+          &copy; 2026 {clientName}. All rights reserved.
+        </Text>
+      </Section>
+    </BaseLayout>
+  );
+};
+
+const header = {
+  marginBottom: "32px",
+};
+
+const logo = {
+  margin: "0 auto",
+  display: "block",
+};
+
+const logoText = (color: string) => ({
+  margin: "0 auto",
+  textAlign: "center" as const,
+  fontSize: "24px",
+  fontWeight: 900,
+  color: "#ffffff",
+  letterSpacing: "-0.02em",
+  borderLeft: `4px solid ${color}`,
+  paddingLeft: "12px",
+});
+
+const mainContent = {
+  marginBottom: "32px",
+};
+
+const hr = {
+  borderColor: "#222222",
+  margin: "20px 0",
+};
+
+const footer = {
+  marginTop: "32px",
+  textAlign: "center" as const,
+};
+
+const footerText = {
+  fontSize: "10px",
+  color: "#333333",
+  textTransform: "uppercase" as const,
+  letterSpacing: "0.1em",
+};
--- a/packages/mail/src/layouts/MintelLayout.tsx
+++ b/packages/mail/src/layouts/MintelLayout.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Hr, Section, Text } from "@react-email/components";
+import { BaseLayout } from "./BaseLayout";
+import { MintelLogo } from "../components/MintelLogo";
+
+export interface MintelLayoutProps {
+  preview: string;
+  children: React.ReactNode;
+}
+
+export const MintelLayout = ({ preview, children }: MintelLayoutProps) => {
+  return (
+    <BaseLayout preview={preview} brandColor="#82ed20">
+      <Section style={header}>
+        <MintelLogo />
+      </Section>
+      <Hr style={hr} />
+      <Section style={mainContent}>{children}</Section>
+      <Hr style={hr} />
+      <Section style={footer}>
+        <Text style={footerText}>
+          &copy; 2026 Mintel Infrastructure. Secure Communication Channel.
+        </Text>
+      </Section>
+    </BaseLayout>
+  );
+};
+
+const header = {
+  marginBottom: "32px",
+};
+
+const mainContent = {
+  marginBottom: "32px",
+};
+
+const hr = {
+  borderColor: "#222222",
+  margin: "20px 0",
+};
+
+const footer = {
+  marginTop: "32px",
+  textAlign: "center" as const,
+};
+
+const footerText = {
+  fontSize: "12px",
+  color: "#444444",
+  fontWeight: 700,
+  textTransform: "uppercase" as const,
+  letterSpacing: "0.1em",
+};