From cd377ce1755e8350ca65d920d9f148500111a51e Mon Sep 17 00:00:00 2001
From: Jimmy Vo <huynhmaivo82@gmail.com>
Date: Mon, 26 Jan 2026 16:18:56 -0500
Subject: [PATCH] [PM-30610] wip

---
 .../organization-confirmation.mjml            | 287 +++++++++++++-----
 1 file changed, 212 insertions(+), 75 deletions(-)

diff --git a/src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation.mjml b/src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation.mjml
index 9a9cc0507c..ad3f692f56 100644
--- a/src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation.mjml
+++ b/src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation.mjml
@@ -1,11 +1,21 @@
 <mjml>
   <mj-head>
-    <mj-font name="Inter" href="https://fonts.googleapis.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-font
+        name="Inter"
+        href="https://fonts.googleapis.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-text color="#1B2029" />
-      <mj-body background-color="#e6e9ef" width="660px" />
+      <mj-all
+          font-family="'Inter','Helvetica Neue',Helvetica,Arial,sans-serif" />
+      <mj-text
+          color="#1B2029" />
+      <mj-body
+          background-color="#e6e9ef"
+          width="660px" />
     </mj-attributes>
     <mj-style>
       p { margin: 0px !important; }
@@ -14,84 +24,151 @@
     </mj-style>
   </mj-head>
 
-  <mj-body background-color="#e6e9ef">
+  <mj-body
+      background-color="#e6e9ef">
     <!-- Blue Header Section -->
-    <mj-section border-radius="10px 10px 0px 0px" padding="40px" background-color="#175ddc">
-      <mj-column width="60%" padding="0px">
-        <mj-image padding="0px 0px 28px 0px" align="left" width="150px" src="https://bitwarden.com/images/logo-horizontal-white.png"></mj-image>
-        <mj-text font-size="20px" line-height="30px" font-weight="700" padding="0px" align="left" color="#FEFFEA">
+    <mj-section
+        border-radius="10px 10px 0px 0px"
+        padding="40px"
+        background-color="#175ddc">
+      <mj-column
+          width="60%"
+          padding="0px">
+        <mj-image
+            padding="0px 0px 28px 0px"
+            align="left"
+            width="150px"
+            src="https://bitwarden.com/images/logo-horizontal-white.png">
+        </mj-image>
+        <mj-text
+            font-size="20px"
+            line-height="30px"
+            font-weight="700"
+            padding="0px"
+            align="left"
+            color="#FEFFEA">
           <p>You can now share passwords with members of {{OrganizationName}}!</p>
         </mj-text>
-        <mj-spacer height="28px"></mj-spacer>
-      <mj-button
-              href="{{WebVaultUrl}}"
-              background-color="#ffffff"
-              color="#1A41AC"
-              border-radius="20px"
-              align="left"
-              inner-padding="12px 24px"
-              padding="12px 24px"
-              font-size="16px"
-              font-family="Helvetica Neue, Helvetica, Arial, sans-serif"
-              font-weight="700"
-              line-height="24px"
-      >
+        <mj-spacer
+            height="28px">
+        </mj-spacer>
+        <mj-button
+            href="{{WebVaultUrl}}"
+            background-color="#ffffff"
+            color="#1A41AC"
+            border-radius="20px"
+            align="left"
+            inner-padding="12px 24px"
+            padding="12px 24px"
+            font-size="16px"
+            font-family="Helvetica Neue, Helvetica, Arial, sans-serif"
+            font-weight="700"
+            line-height="24px">
           Log in
-      </mj-button>
+        </mj-button>
       </mj-column>
-      <mj-column vertical-align="bottom" width="40%">
-        <mj-image align="center" padding="0px" width="155px" src="https://assets.bitwarden.com/email/v1/spot-business.png"></mj-image>
+      <mj-column
+          vertical-align="bottom"
+          width="40%">
+        <mj-image
+            align="center"
+            padding="0px"
+            width="155px"
+            src="https://assets.bitwarden.com/email/v1/spot-business.png">
+        </mj-image>
       </mj-column>
     </mj-section>
 
     <!-- Spacing -->
-    <mj-section padding="0px">
-      <mj-column padding="0px">
-          <mj-spacer height="16px"></mj-spacer>
+    <mj-section
+        padding="0px">
+      <mj-column
+          padding="0px">
+        <mj-spacer
+            height="16px">
+        </mj-spacer>
       </mj-column>
     </mj-section>
 
     <!-- Main Content Section -->
-    <mj-section padding="40px 40px 8px 40px" background-color="#fff">
+    <mj-section
+        padding="40px 40px 8px 40px"
+        background-color="#fff">
       <mj-column>
-        <mj-text font-size="16px" line-height="24px" padding="0px">
+        <mj-text
+            font-size="16px"
+            line-height="24px"
+            padding="0px">
           As a member of <b>{{OrganizationName}}</b>:
         </mj-text>
       </mj-column>
     </mj-section>
 
     <!-- Icon Row 1: Organization Ownership -->
-    <mj-section padding="8px 40px" background-color="#fff">
-      <mj-column width="15%" vertical-align="top">
-        <mj-image css-class="icon-box" src="https://assets.bitwarden.com/email/v1/icon-enterprise.png" alt="Organization Icon" width="48px" border-radius="8px" padding="0px"></mj-image>
+    <mj-section
+        padding="8px 40px"
+        background-color="#fff">
+      <mj-column
+          width="15%"
+          vertical-align="top">
+        <mj-image
+            css-class="icon-box"
+            src="https://assets.bitwarden.com/email/v1/icon-enterprise.png"
+            alt="Organization Icon"
+            width="48px"
+            border-radius="8px"
+            padding="0px">
+        </mj-image>
       </mj-column>
-      <mj-column width="5%">
-        <mj-spacer height="1px"></mj-spacer>
+      <mj-column
+          width="5%">
+        <mj-spacer
+            height="1px">
+        </mj-spacer>
       </mj-column>
-      <mj-column width="80%" vertical-align="top">
-        <mj-text font-family="'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif" line-height="24px" font-size="16px" padding="0px 0px 0px 0px">
+      <mj-column
+          width="80%"
+          vertical-align="top">
+        <mj-text
+            font-family="'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif"
+            line-height="24px"
+            font-size="16px"
+            padding="0px 0px 0px 0px">
           Your account is owned by {{OrganizationName}} and is subject to their security and management policies.
         </mj-text>
       </mj-column>
     </mj-section>
 
     <!-- Icon Row 2: Password Sharing -->
-    <mj-section padding="8px 40px 40px 40px" background-color="#fff">
-      <mj-column width="15%" vertical-align="top">
+    <mj-section
+        padding="8px 40px 40px 40px"
+        background-color="#fff">
+      <mj-column
+          width="15%"
+          vertical-align="top">
         <mj-image
-                css-class="icon-box"
-                src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
-                alt="Share Icon"
-                width="48px"
-                border-radius="8px"
-                padding="0px">
+            css-class="icon-box"
+            src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
+            alt="Share Icon"
+            width="48px"
+            border-radius="8px"
+            padding="0px">
         </mj-image>
       </mj-column>
-      <mj-column width="5%">
-        <mj-spacer height="1px"></mj-spacer>
+      <mj-column
+          width="5%">
+        <mj-spacer
+            height="1px">
+        </mj-spacer>
       </mj-column>
-      <mj-column width="80%" vertical-align="top">
-        <mj-text font-family="'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif" line-height="24px" font-size="16px" padding="0px 0px 0px 0px">
+      <mj-column
+          width="80%"
+          vertical-align="top">
+        <mj-text
+            font-family="'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif"
+            line-height="24px"
+            font-size="16px"
+            padding="0px 0px 0px 0px">
           You can easily access and share passwords with your team.<br/>
           <a href="https://bitwarden.com/help/share-items/" class="link">Share passwords in Bitwarden</a>
         </mj-text>
@@ -99,53 +176,113 @@
     </mj-section>
 
     <!-- Spacing -->
-    <mj-section padding="0px">
-      <mj-column padding="0px">
-        <mj-spacer height="16px"></mj-spacer>
+    <mj-section
+        padding="0px">
+      <mj-column
+          padding="0px">
+        <mj-spacer
+            height="16px">
+        </mj-spacer>
       </mj-column>
     </mj-section>
 
     <!-- Learn More Section -->
-    <mj-section border-radius="0px 0px 10px 10px" padding="40px" background-color="#F3F6F9">
-      <mj-column width="70%">
-        <mj-text line-height="30px" font-size="20px" font-weight="700" padding="0px 0px 8px 0px">
+    <mj-section
+        border-radius="0px 0px 10px 10px"
+        padding="40px"
+        background-color="#F3F6F9">
+      <mj-column
+          width="70%">
+        <mj-text
+            line-height="30px"
+            font-size="20px"
+            font-weight="700"
+            padding="0px 0px 8px 0px">
           Learn more about Bitwarden
         </mj-text>
-        <mj-text line-height="20px" font-size="14px" padding="0px">
+        <mj-text
+            line-height="20px"
+            font-size="14px"
+            padding="0px">
           Find user guides, product documentation, and videos on the <a href="https://bitwarden.com/help/" class="link">Bitwarden help center</a>.
         </mj-text>
       </mj-column>
-      <mj-column width="30%" vertical-align="middle">
-        <mj-image src="https://assets.bitwarden.com/email/v1/spot-community.png" width="94px" padding="0px"></mj-image>
+      <mj-column
+          width="30%"
+          vertical-align="middle">
+        <mj-image
+            src="https://assets.bitwarden.com/email/v1/spot-community.png"
+            width="94px"
+            padding="0px">
+        </mj-image>
       </mj-column>
     </mj-section>
 
     <!-- Spacing -->
-    <mj-section padding="0px">
-      <mj-column padding="0px">
-        <mj-spacer height="16px"></mj-spacer>
+    <mj-section
+        padding="0px">
+      <mj-column
+          padding="0px">
+        <mj-spacer
+            height="16px">
+        </mj-spacer>
       </mj-column>
     </mj-section>
 
     <!-- Social Media Icons -->
-    <mj-section padding="16px 20px 10px 20px" background-color="transparent">
+    <mj-section
+        padding="16px 20px 10px 20px"
+        background-color="transparent">
       <mj-column>
-        <mj-social icon-size="24px" inner-padding="8px" padding="0px" mode="horizontal">
-          <mj-social-element href="https://x.com/bitwarden" src="https://assets.bitwarden.com/email/v1/social-icons-x-twitter.png"></mj-social-element>
-          <mj-social-element href="https://www.reddit.com/r/Bitwarden/" src="https://assets.bitwarden.com/email/v1/social-icons-reddit.png"></mj-social-element>
-          <mj-social-element href="https://community.bitwarden.com/" src="https://assets.bitwarden.com/email/v1/social-icons-discourse.png"></mj-social-element>
-          <mj-social-element href="https://github.com/bitwarden" src="https://assets.bitwarden.com/email/v1/social-icons-github.png"></mj-social-element>
-          <mj-social-element href="https://www.youtube.com/channel/UCId9a_jQqvJre0_dE2lE_Rw" src="https://assets.bitwarden.com/email/v1/social-icons-youtube.png"></mj-social-element>
-          <mj-social-element href="https://www.linkedin.com/company/bitwarden1/" src="https://assets.bitwarden.com/email/v1/social-icons-linkedin.png"></mj-social-element>
-          <mj-social-element href="https://www.facebook.com/bitwarden/" src="https://assets.bitwarden.com/email/v1/social-icons-facebook.png"></mj-social-element>
+        <mj-social
+            icon-size="24px"
+            inner-padding="8px"
+            padding="0px"
+            mode="horizontal">
+          <mj-social-element
+              href="https://x.com/bitwarden"
+              src="https://assets.bitwarden.com/email/v1/social-icons-x-twitter.png">
+          </mj-social-element>
+          <mj-social-element
+              href="https://www.reddit.com/r/Bitwarden/"
+              src="https://assets.bitwarden.com/email/v1/social-icons-reddit.png">
+          </mj-social-element>
+          <mj-social-element
+              href="https://community.bitwarden.com/"
+              src="https://assets.bitwarden.com/email/v1/social-icons-discourse.png">
+          </mj-social-element>
+          <mj-social-element
+              href="https://github.com/bitwarden"
+              src="https://assets.bitwarden.com/email/v1/social-icons-github.png">
+          </mj-social-element>
+          <mj-social-element
+              href="https://www.youtube.com/channel/UCId9a_jQqvJre0_dE2lE_Rw"
+              src="https://assets.bitwarden.com/email/v1/social-icons-youtube.png">
+          </mj-social-element>
+          <mj-social-element
+              href="https://www.linkedin.com/company/bitwarden1/"
+              src="https://assets.bitwarden.com/email/v1/social-icons-linkedin.png">
+          </mj-social-element>
+          <mj-social-element
+              href="https://www.facebook.com/bitwarden/"
+              src="https://assets.bitwarden.com/email/v1/social-icons-facebook.png">
+          </mj-social-element>
         </mj-social>
       </mj-column>
     </mj-section>
 
     <!-- Footer -->
-    <mj-section background-color="transparent" padding="0px 20px 10px 20px">
-      <mj-column width="100%">
-        <mj-text padding="0px" line-height="16px" align="center" color="#5A6D91" font-size="12px">
+    <mj-section
+        background-color="transparent"
+        padding="0px 20px 10px 20px">
+      <mj-column
+          width="100%">
+        <mj-text
+            padding="0px"
+            line-height="16px"
+            align="center"
+            color="#5A6D91"
+            font-size="12px">
           <p style="margin-bottom: 5px;">© 2025 Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa Barbara, CA, USA</p>
           <p style="margin-top: 5px;">Always confirm you are on a trusted Bitwarden domain before logging in:<br/>
           <a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc;">bitwarden.com</a> | <a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none;color:#175ddc;">Learn why we include this</a></p>