From 723c5971df37a8322e37cf3534af1fef184f3afd Mon Sep 17 00:00:00 2001
From: Jimmy Vo <huynhmaivo82@gmail.com>
Date: Tue, 3 Feb 2026 14:39:49 -0500
Subject: [PATCH] [PM-30610] Move styling into AC MJML component

---
 .../Mjml/components/admin-console-head.mjml   | 56 ++++++++++++++++++
 ...anization-confirmation-family-free-v2.mjml | 58 +------------------
 2 files changed, 58 insertions(+), 56 deletions(-)
 create mode 100644 src/Core/MailTemplates/Mjml/components/admin-console-head.mjml

diff --git a/src/Core/MailTemplates/Mjml/components/admin-console-head.mjml b/src/Core/MailTemplates/Mjml/components/admin-console-head.mjml
new file mode 100644
index 0000000000..2d076fc04f
--- /dev/null
+++ b/src/Core/MailTemplates/Mjml/components/admin-console-head.mjml
@@ -0,0 +1,56 @@
+<mj-font
+        name="Inter"
+        href="https://fonts.googleapgis.com/css2?family=Inter:wght@400;600;700&display=swap">
+</mj-font>
+<mj-font
+        name="Roboto"
+        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
+</mj-font>
+
+<mj-attributes>
+    <mj-all
+            font-family="'Inter','Helvetica Neue',Helvetica,Arial,sans-serif" />
+    <mj-class
+            name="ac-text"
+            font-size="16px"
+            font-weight="400"
+            line-height="24px"
+    />
+    <mj-class
+            name="ac-heading"
+            font-size="20px"
+            font-weight="700"
+            line-height="30px"
+    />
+    <mj-class
+            name="ac-hero-text"
+            font-size="20px"
+            font-weight="400"
+            line-height="30px"
+            align="left"
+            color="#ffffff"
+    />
+    <mj-class
+            name="ac-button"
+            background-color="#ffffff"
+            color="#1A41AC"
+            border-radius="9999px"
+            align="left"
+            inner-padding="12px 24px"
+            font-size="16px"
+            font-weight="700"
+            line-height="24px"
+    />
+</mj-attributes>
+
+<mj-style>
+    .ac-link {
+        text-decoration: none;
+        color: #175ddc;
+        font-weight: 700;
+    }
+
+    @media only screen and (max-width: 480px) {
+        .hide-mobile { display: none !important; }
+    }
+</mj-style>
diff --git a/src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation-family-free-v2.mjml b/src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation-family-free-v2.mjml
index a027577ae0..e7cee74b7e 100644
--- a/src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation-family-free-v2.mjml
+++ b/src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation-family-free-v2.mjml
@@ -3,62 +3,8 @@
         <!-- Include shared head styles -->
         <mj-include path="../../../components/head.mjml" />
 
-        <mj-font
-                name="Inter"
-                href="https://fonts.googleapgis.com/css2?family=Inter:wght@400;600;700&display=swap">
-        </mj-font>
-        <mj-font
-                name="Roboto"
-                href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
-        </mj-font>
-
-        <mj-attributes>
-            <mj-all
-                    font-family="'Inter','Helvetica Neue',Helvetica,Arial,sans-serif" />
-            <mj-class
-                    name="ac-text"
-                    font-size="16px"
-                    font-weight="400"
-                    line-height="24px"
-            />
-            <mj-class
-                    name="ac-heading"
-                    font-size="20px"
-                    font-weight="700"
-                    line-height="30px"
-            />
-            <mj-class
-                    name="ac-hero-text"
-                    font-size="20px"
-                    font-weight="400"
-                    line-height="30px"
-                    align="left"
-                    color="#ffffff"
-            />
-            <mj-class
-                    name="ac-button"
-                    background-color="#ffffff"
-                    color="#1A41AC"
-                    border-radius="9999px"
-                    align="left"
-                    inner-padding="12px 24px"
-                    font-size="16px"
-                    font-weight="700"
-                    line-height="24px"
-            />
-        </mj-attributes>
-
-        <mj-style>
-            .ac-link {
-                text-decoration: none;
-                color: #175ddc;
-                font-weight: 700;
-            }
-
-            @media only screen and (max-width: 480px) {
-                .hide-mobile { display: none !important; }
-            }
-        </mj-style>
+        <!-- Include admin console shared styles -->
+        <mj-include path="../../../components/admin-console-head.mjml" />
     </mj-head>
 
     <mj-body>