[PM-30610] Undo shared components

src/Core/MailTemplates/Mjml/components/mj-bw-hero.js

@@ -36,9 +36,8 @@ class MjBwHero extends BodyComponent {
             color="#1A41AC"
             border-radius="20px"
             align="left"
-            inner-padding="12px 24px"
           >
-            ${this.getAttribute("button-text")}
+              ${this.getAttribute("button-text")}
             </mj-button
           >` : "";
     const subTitleElement = this.getAttribute("sub-title") ?
@@ -63,7 +62,7 @@ class MjBwHero extends BodyComponent {
             height="30px"
           ></mj-image>
           <mj-text color="#fff" padding-top="0" padding-bottom="0">
-            <h1 style="font-weight: 400; font-size: 24px; line-height: 32px">
+            <h1 style="font-weight: normal; font-size: 24px; line-height: 32px">
               ${this.getAttribute("title")}
             </h1>
             ` +
@@ -78,8 +77,7 @@ class MjBwHero extends BodyComponent {
             src="${this.getAttribute("img-src")}"
             alt=""
             width="155px"
-            padding="0px 20px 0px 0px"
-            align="right"
+            padding="0px"
             css-class="mj-bw-hero-responsive-img"
             />
         </mj-column>

src/Core/MailTemplates/Mjml/components/mj-bw-icon-row.js

@@ -1,7 +1,7 @@
 const { BodyComponent } = require("mjml-core");
 
 const BODY_TEXT_STYLES = `
-  font-family="'Helvetica Neue', Helvetica, Arial, sans-serif"
+  font-family="Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif"
   font-size="16px"
   font-weight="400"
   line-height="24px"
@@ -30,17 +30,12 @@ class MjBwIconRow extends BodyComponent {
     return `
       @media only screen and (max-width:${breakpoint}) {
         .mj-bw-icon-row-text {
-          padding-left: 15px !important;
-          padding-right: 15px !important;
+          padding-left: 5px !important;
           line-height: 20px;
         }
-        .mj-bw-icon-row-icon {
-          display: none !important;
-          width: 0 !important;
-          max-width: 0 !important;
-        }
-        .mj-bw-icon-row-text-column {
-          width: 100% !important;
+        .mj-bw-icon-row {
+          padding: 10px 15px;
+          width: fit-content !important;
         }
       }
     `;
@@ -66,29 +61,36 @@ class MjBwIconRow extends BodyComponent {
 
     const footAnchorElement =
       this.getAttribute("foot-url-text") && this.getAttribute("foot-url")
-        ? `<mj-text css-class="mj-bw-icon-row-text" padding="0px" ${BODY_TEXT_STYLES}>
+        ? `<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
                 <a href="${this.getAttribute("foot-url")}" class="link">
                     ${this.getAttribute("foot-url-text")}
+                    <span style="text-decoration: none">
+                      <img src="https://assets.bitwarden.com/email/v1/bwi-external-link-16px.png"
+                        alt="External Link Icon"
+                        width="16px"
+                        style="vertical-align: middle;"
+                      />
+                    </span>
               </a>
           </mj-text>`
         : "";
 
     return this.renderMJML(
       `
-      <mj-section background-color="#fff" padding="0px 10px 24px 10px">
+      <mj-section background-color="#fff" padding="10px 10px 10px 10px">
         <mj-group css-class="mj-bw-icon-row">
-          <mj-column width="15%" vertical-align="middle" css-class="mj-bw-icon-row-icon">
+          <mj-column width="15%" vertical-align="top">
             <mj-image
               src="${this.getAttribute("icon-src")}"
               alt="${this.getAttribute("icon-alt")}"
               width="48px"
-              padding="0px 10px 0px 5px"
+              padding="0px"
               border-radius="8px"
             />
           </mj-column>
-          <mj-column width="85%" vertical-align="middle" css-class="mj-bw-icon-row-text-column">
+          <mj-column width="85%" vertical-align="top">
               ${headAnchorElement}
-              <mj-text css-class="mj-bw-icon-row-text" padding="0px 0px 0px 0px" ${BODY_TEXT_STYLES}>
+              <mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
                 ${this.getAttribute("text")}
               </mj-text>
               ${footAnchorElement}

src/Core/MailTemplates/Mjml/components/mj-bw-learn-more-footer.js

@@ -25,25 +25,21 @@ class MjBwLearnMoreFooter extends BodyComponent {
   render() {
     return this.renderMJML(
       `
-      <mj-section border-radius="0px 0px 4px 4px" background-color="#F3F6F9" padding="14px 10px 14px 10px">
+      <mj-section border-radius="0px 0px 4px 4px" background-color="#F3F6F9" padding="5px 10px 10px 10px">
         <mj-column width="70%">
-          <mj-text padding="10px 15px 10px 15px">
-            <p style="font-size: 18px; line-height: 28px; font-weight: 500; margin: 0 0 8px 0;">
+          <mj-text line-height="24px">
+            <p style="font-size: 18px; line-height: 28px; font-weight: bold;">
               Learn more about Bitwarden
             </p>
-            <p style="font-size: 16px; line-height: 24px; margin: 0;">
-              Find user guides, product documentation, and videos on the
-              <a href="https://bitwarden.com/help/" class="link"> Bitwarden Help Center</a>.
-            </p>
+            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="bottom">
+        <mj-column width="30%">
           <mj-image
             src="https://assets.bitwarden.com/email/v1/spot-community.png"
             css-class="mj-bw-learn-more-footer-responsive-img"
             width="94px"
-            padding="0px 15px 0px 0px"
-            align="right"
           />
         </mj-column>
       </mj-section>