From 598d7087d2edc9875555165a8e0a40ca86180d0d Mon Sep 17 00:00:00 2001
From: Jimmy Vo <huynhmaivo82@gmail.com>
Date: Tue, 3 Feb 2026 14:30:40 -0500
Subject: [PATCH] [PM-30610] Move styling to MJML classes

---
 ...anization-confirmation-family-free-v2.mjml | 48 ++++++++++++-------
 1 file changed, 30 insertions(+), 18 deletions(-)

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 a232ce5d51..a027577ae0 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
@@ -21,6 +21,31 @@
                     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>
@@ -52,25 +77,14 @@
                         src="https://bitwarden.com/images/logo-horizontal-white.png">
                 </mj-image>
                 <mj-text
-                        font-size="20px"
-                        line-height="30px"
-                        font-weight="400"
-                        padding="0px 0px 24px 0px"
-                        align="left"
-                        color="#ffffff">
+                        mj-class="ac-hero-text"
+                        padding="0px 0px 24px 0px">
                     <p>You can now share passwords with members of <strong>{{OrganizationName}}!</strong></p>
                 </mj-text>
                 <mj-button
+                        mj-class="ac-button"
                         href="{{WebVaultUrl}}"
-                        background-color="#ffffff"
-                        color="#1A41AC"
-                        border-radius="9999px"
-                        align="left"
-                        inner-padding="12px 24px"
-                        padding="0px"
-                        font-size="16px"
-                        font-weight="700"
-                        line-height="24px">
+                        padding="0px">
                     Log in
                 </mj-button>
             </mj-column>
@@ -261,9 +275,7 @@
             <mj-column
                     width="70%">
                 <mj-text
-                        line-height="30px"
-                        font-size="20px"
-                        font-weight="700"
+                        mj-class="ac-heading"
                         padding="0px 0px 8px 0px">
                     Learn more about Bitwarden
                 </mj-text>