Update logos to current versions (#119)

* Update logos to current versions * Fix email not showing up on registration verification
mitodl · Nov 8, 2024 · 7212bb8 · 7212bb8
1 parent b12d173
commit 7212bb8
Show file tree

Hide file tree

Showing 15 changed files with 125 additions and 47 deletions.
diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/email/html/email-verification.ftl b/ol-keycloak/oltheme/src/main/resources/theme/ol/email/html/email-verification.ftl
@@ -66,6 +66,11 @@
   <!--<![endif]-->
   <style type="text/css">
     @media only screen and (min-width:480px) {
+      .mj-column-per-50 {
+        width: 50% !important;
+        max-width: 50%;
+      }
+
       .mj-column-per-100 {
         width: 100% !important;
         max-width: 100%;
@@ -74,6 +79,11 @@
 
   </style>
   <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-50 {
+      width: 50% !important;
+      max-width: 50%;
+    }
+
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
@@ -117,14 +127,28 @@
                   <tbody>
                     <tr>
                       <td style="border-bottom:1px solid #DDE1E6;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
-                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
-                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
+                        <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                  <div style="font-family:neue-haas-grotesk-text, sans-serif;font-size:13px;line-height:18px;text-align:left;color:#000000;"><a href="${msg(" homeUrl")}">
+                                      <img src="${url.resourcesUrl}/img/mit-learn-logo.png" height="24" width="132" alt="MIT Learn" />
+                                    </a></div>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
+                        <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                             <tbody>
                               <tr>
-                                <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
-                                  <div style="font-family:neue-haas-grotesk-text, sans-serif;font-size:13px;line-height:18px;text-align:center;color:#000000;"><a href="${msg(" homeUrl")}">
-                                      <img src="${url.resourcesUrl}/img/MITlearn.png" height="29" width="103" alt="MIT Learn" />
+                                <td align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                  <div style="font-family:neue-haas-grotesk-text, sans-serif;font-size:13px;line-height:18px;text-align:right;color:#000000;"><a href="https://mit.edu">
+                                      <img src="${url.resourcesUrl}/img/mit-logo-black.png" height="24" width="45" alt="MIT" />
                                     </a></div>
                                 </td>
                               </tr>

diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/email/html/password-reset.ftl b/ol-keycloak/oltheme/src/main/resources/theme/ol/email/html/password-reset.ftl
@@ -66,6 +66,11 @@
   <!--<![endif]-->
   <style type="text/css">
     @media only screen and (min-width:480px) {
+      .mj-column-per-50 {
+        width: 50% !important;
+        max-width: 50%;
+      }
+
       .mj-column-per-100 {
         width: 100% !important;
         max-width: 100%;
@@ -74,6 +79,11 @@
 
   </style>
   <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-50 {
+      width: 50% !important;
+      max-width: 50%;
+    }
+
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
@@ -117,14 +127,28 @@
                   <tbody>
                     <tr>
                       <td style="border-bottom:1px solid #DDE1E6;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
-                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
-                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
+                        <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                  <div style="font-family:neue-haas-grotesk-text, sans-serif;font-size:13px;line-height:18px;text-align:left;color:#000000;"><a href="${msg(" homeUrl")}">
+                                      <img src="${url.resourcesUrl}/img/mit-learn-logo.png" height="24" width="132" alt="MIT Learn" />
+                                    </a></div>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
+                        <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                             <tbody>
                               <tr>
-                                <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
-                                  <div style="font-family:neue-haas-grotesk-text, sans-serif;font-size:13px;line-height:18px;text-align:center;color:#000000;"><a href="${msg(" homeUrl")}">
-                                      <img src="${url.resourcesUrl}/img/MITlearn.png" height="29" width="103" alt="MIT Learn" />
+                                <td align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                  <div style="font-family:neue-haas-grotesk-text, sans-serif;font-size:13px;line-height:18px;text-align:right;color:#000000;"><a href="https://mit.edu">
+                                      <img src="${url.resourcesUrl}/img/mit-logo-black.png" height="24" width="45" alt="MIT" />
                                     </a></div>
                                 </td>
                               </tr>

diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/email/html/template.ftl b/ol-keycloak/oltheme/src/main/resources/theme/ol/email/html/template.ftl
@@ -67,6 +67,11 @@
   <!--<![endif]-->
   <style type="text/css">
     @media only screen and (min-width:480px) {
+      .mj-column-per-50 {
+        width: 50% !important;
+        max-width: 50%;
+      }
+
       .mj-column-per-100 {
         width: 100% !important;
         max-width: 100%;
@@ -75,6 +80,11 @@
 
   </style>
   <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-50 {
+      width: 50% !important;
+      max-width: 50%;
+    }
+
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
@@ -118,14 +128,28 @@
                   <tbody>
                     <tr>
                       <td style="border-bottom:1px solid #DDE1E6;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
-                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
-                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
+                        <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                  <div style="font-family:neue-haas-grotesk-text, sans-serif;font-size:13px;line-height:18px;text-align:left;color:#000000;"><a href="${msg(" homeUrl")}">
+                                      <img src="${url.resourcesUrl}/img/mit-learn-logo.png" height="24" width="132" alt="MIT Learn" />
+                                    </a></div>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
+                        <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                             <tbody>
                               <tr>
-                                <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
-                                  <div style="font-family:neue-haas-grotesk-text, sans-serif;font-size:13px;line-height:18px;text-align:center;color:#000000;"><a href="${msg(" homeUrl")}">
-                                      <img src="${url.resourcesUrl}/img/MITlearn.png" height="29" width="103" alt="MIT Learn" />
+                                <td align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                                  <div style="font-family:neue-haas-grotesk-text, sans-serif;font-size:13px;line-height:18px;text-align:right;color:#000000;"><a href="https://mit.edu">
+                                      <img src="${url.resourcesUrl}/img/mit-logo-black.png" height="24" width="45" alt="MIT" />
                                     </a></div>
                                 </td>
                               </tr>

diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/email/mjml/includes/header.mjml b/ol-keycloak/oltheme/src/main/resources/theme/ol/email/mjml/includes/header.mjml
@@ -1,14 +1,26 @@
 <mj-section border-bottom="1px solid #DDE1E6">
   <mj-column>
-    <mj-text padding="0" align="center">
+    <mj-text align="left">
       <a href="${msg("homeUrl")}">
         <img
-          src="${url.resourcesUrl}/img/MITlearn.png"
-          height="29"
-          width="103"
+          src="${url.resourcesUrl}/img/mit-learn-logo.png"
+          height="24"
+          width="132"
           alt="MIT Learn"
         />
       </a>
     </mj-text>
   </mj-column>
+  <mj-column>
+    <mj-text align="right">
+      <a href="https://mit.edu">
+        <img
+          src="${url.resourcesUrl}/img/mit-logo-black.png"
+          height="24"
+          width="45"
+          alt="MIT"
+        />
+      </a>
+    </mj-text>
+  </mj-column>
 </mj-section>
diff --git a/...loak/oltheme/src/main/resources/theme/ol/email/resources/img/mit-learn-logo.png b/...loak/oltheme/src/main/resources/theme/ol/email/resources/img/mit-learn-logo.png
diff --git a/...loak/oltheme/src/main/resources/theme/ol/email/resources/img/mit-logo-black.png b/...loak/oltheme/src/main/resources/theme/ol/email/resources/img/mit-logo-black.png
diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/login/header.ftl b/ol-keycloak/oltheme/src/main/resources/theme/ol/login/header.ftl
@@ -1,10 +1,10 @@
-<a href="${olSettings.homeUrl!"#"}" class="logo-link">
-  <svg xmlns="http://www.w3.org/2000/svg" width="103" height="29" viewBox="0 0 103 29" fill="none" role="img" title="MIT Learn">
-    <path d="M27.2647 28.7212H33.3235V9.57372H27.2647V28.7212ZM36.3529 6.38248H51.5V0H36.3529V6.38248ZM27.2647 0H33.3235V6.38248H27.2647V0ZM18.1765 28.7212H24.2353V0H18.1765V28.7212ZM9.08824 22.3387H15.1471V0H9.08824V22.3387ZM0 28.7212H6.05882V0H0V28.7212ZM36.3529 28.7212H42.4118V9.57372H36.3529V28.7212Z" fill="black"/>
-    <path d="M58.1536 14.518H60.8408V25.572H67.0675V27.8238H58.1536V14.518Z" fill="black"/>
-    <path d="M67.6603 23.0412C67.6603 20.2125 69.5691 18.0166 72.3489 18.0166C75.4066 18.0166 77.0374 20.3614 77.0374 23.767H70.1435C70.3289 25.2371 71.1442 26.149 72.5712 26.149C73.5534 26.149 74.1279 25.7024 74.4059 24.9765H76.8892C76.5371 26.67 75.036 28.103 72.5898 28.103C69.4394 28.103 67.6603 25.8884 67.6603 23.0412ZM70.1806 22.0177H74.406C74.3318 20.808 73.5349 19.9706 72.386 19.9706C71.0516 19.9706 70.403 20.7708 70.1806 22.0177Z" fill="black"/>
-    <path d="M83.894 26.7631H83.8569C83.3751 27.4889 82.6894 28.0472 81.0586 28.0472C79.1127 28.0472 77.7414 27.0236 77.7414 25.1255C77.7414 23.0225 79.4464 22.3526 81.559 22.0549C83.1342 21.8316 83.857 21.7013 83.857 20.9755C83.857 20.287 83.3195 19.8403 82.2632 19.8403C81.0772 19.8403 80.5027 20.2683 80.4286 21.1802H78.1861C78.2603 19.5053 79.5019 18.0352 82.2817 18.0352C85.1356 18.0352 86.2847 19.3193 86.2847 21.5524V26.4095C86.2847 27.1352 86.3959 27.5633 86.6183 27.7308V27.8239H84.1906C84.0423 27.6378 83.9496 27.1911 83.894 26.7631ZM83.9125 24.4555V23.0225C83.4678 23.2831 82.7821 23.432 82.152 23.5808C80.8362 23.8786 80.1876 24.1764 80.1876 25.0696C80.1876 25.9629 80.7806 26.2792 81.6701 26.2792C83.1157 26.2792 83.9125 25.386 83.9125 24.4555Z" fill="black"/>
-    <path d="M90.3058 19.8031H90.3614C90.9359 18.7237 91.5845 18.1654 92.6964 18.1654C92.9744 18.1654 93.1411 18.1841 93.2895 18.2399V20.4545H93.2339C91.5845 20.287 90.3984 21.1616 90.3984 23.1715V27.8239H87.8781V18.2771H90.3058L90.3058 19.8031Z" fill="black"/>
-    <path d="M96.8474 19.5798H96.903C97.5516 18.5563 98.4226 18.0166 99.7198 18.0166C101.684 18.0166 103 19.5053 103 21.5897V27.8239H100.48V21.9619C100.48 20.9384 99.8867 20.2126 98.8303 20.2126C97.7184 20.2126 96.903 21.1059 96.903 22.4085V27.824H94.3827V18.2771H96.8474L96.8474 19.5798Z" fill="black"/>
-  </svg>
-</a>
+<div class="pf-v5-l-flex pf-m-justify-content-space-between">
+  <h1 class="pf-v5-l-flex__item">
+    <a href="${olSettings.homeUrl!" #"}">
+      <img src="${url.resourcesPath}/img/mit-learn-logo.png" height="24" width="132" alt="MIT Learn" />
+    </a>
+  </h1>
+  <a href="https://mit.edu" class="pf-v5-l-flex__item">
+    <img src="${url.resourcesPath}/img/mit-logo-black.png" height="24" width="45" alt="MIT" />
+  </a>
+</div>
diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/login/login-verify-email.ftl b/ol-keycloak/oltheme/src/main/resources/theme/ol/login/login-verify-email.ftl
@@ -4,7 +4,7 @@
         ${msg("emailVerifyTitle")}
     <#elseif section = "form">
         <p class="instruction">
-          ${msg("emailVerifyInstruction1")}
+          ${msg("emailVerifyInstruction1", user.email)}
         </p>
     <#elseif section = "info">
         <div id="kc-info" class="${properties.kcSignUpClass!}">

diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/login/login.ftl b/ol-keycloak/oltheme/src/main/resources/theme/ol/login/login.ftl
@@ -152,6 +152,6 @@
           <p class="pf-v5-u-font-weight-bold pf-v5-u-mb-sm">You already have a login with:</p>
         </#if>
         <#include "social-providers.ftl">
-          </#if>
+      </#if>
 
   </@layout.registrationLayout>
diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/login/messages/messages_en.properties b/ol-keycloak/oltheme/src/main/resources/theme/ol/login/messages/messages_en.properties
@@ -190,7 +190,7 @@ loginChooseAuthenticator=Select sign in method
 # oauth2DeviceConsentDeniedMessage=Consent denied for connecting the device.
 # oauth2DeviceAuthorizationGrantDisabledMessage=Client is not allowed to initiate OAuth 2.0 Device Authorization Grant. The flow is disabled for the client.
 #
-emailVerifyInstruction1=A verification email has been sent to:
+emailVerifyInstruction1=A verification email has been sent to: {0}
 emailVerifyInstruction2=Please click the link from your email to continue.
 emailVerifyInstruction3=Check the email inbox you signed up with. You may need to check the Spam folder.
 emailVerifyInstruction4Bold=Still no verification email?

diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/login/register.ftl b/ol-keycloak/oltheme/src/main/resources/theme/ol/login/register.ftl
@@ -6,6 +6,7 @@
     <#elseif section = "form">
         <p class="instruction pf-v5-u-pb-md">${msg("registerInstruction")}</p>
         <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
+            <input type="hidden" name="emailOptIn" value="1"/>
             <div class="${properties.kcFormGroupClass!}">
                 <div class="${properties.kcLabelWrapperClass!}">
                     <label for="fullName" class="${properties.kcLabelClass!}">${msg("fullName")}</label>

diff --git a/ol-keycloak/oltheme/src/main/resources/theme/ol/login/resources/css/styles.css b/ol-keycloak/oltheme/src/main/resources/theme/ol/login/resources/css/styles.css
@@ -208,6 +208,11 @@ main {
   align-self: stretch;
 }
 
+.header-wrapper {
+  margin-bottom: 48px;
+  margin-inline-end: 0;
+}
+
 #kc-attempted-username {
   color: #d5dae1;
   leading-trim: both;

diff --git a/...loak/oltheme/src/main/resources/theme/ol/login/resources/img/mit-learn-logo.png b/...loak/oltheme/src/main/resources/theme/ol/login/resources/img/mit-learn-logo.png
diff --git a/...loak/oltheme/src/main/resources/theme/ol/login/resources/img/mit-logo-black.png b/...loak/oltheme/src/main/resources/theme/ol/login/resources/img/mit-logo-black.png