New MITxOnline Logo (#2074)

mitodl · Feb 2, 2024 · f99e69f · f99e69f
1 parent c44c69b
commit f99e69f
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 72 deletions.
diff --git a/frontend/public/scss/certificates/certificate.scss b/frontend/public/scss/certificates/certificate.scss
@@ -12,7 +12,7 @@ $blue: #355b6b;
 
   .certificate-logo {
     display: block;
-    max-width: 250px;
+    max-width: 161px;
     margin: 0 auto 15px;
     position: relative;
 

diff --git a/frontend/public/scss/footer.scss b/frontend/public/scss/footer.scss
@@ -13,22 +13,24 @@
   .new-footer-container {
     display:flex;
 
+    @include media-breakpoint-up(lg) {
+      flex-basis: 75%;
+    }
     @include media-breakpoint-down(md) {
-       flex-direction: column-reverse;
-       padding-left: 10px;
+      flex-direction: column-reverse;
+      padding-left: 10px;
     }
   }
 
   .copyright-container {
-       padding: 40px 0 40px 40px;
-       width:47%;
+       padding: 40px 0;
+       flex-basis:40%;
        flex-wrap: wrap;
        flex-direction: row-reverse;
-       padding-left: 98px;
 
       @include media-breakpoint-down(md) {
          width:100%;
-         padding-top: 0;
+         padding-top: 10px;
          display: inline-flex;
          flex-direction: column;
       }
@@ -46,13 +48,8 @@
         padding: 30px 0 30px 30px;
       }
 
-      @include media-breakpoint-between(lg, xl) {
-        padding-left:70px;
-      }
-
 
       .copyright-col{
-        margin-left: 100px;
         @include media-breakpoint-down(lg) {
           margin-left: 0;
         }
@@ -62,37 +59,34 @@
         opacity: 0.6;
       }
       .address-col, .copyright-col {
-        display:inline-flex;
         @include media-breakpoint-only(md) {
           flex-direction: column;
          }
       }
 
-      .address-col>img {
-          width: 85px;
-          height: 45px;
-          flex-shrink: 0;
-          margin-top: 5px;
-          margin-right: 15px;
-          @include media-breakpoint-only(md) {
-             margin-bottom: 20px;
-         }
+      .address-col>a>img {
+        display: inline-flex;
+        width: 130px;
+        height: 33px;
+        flex-shrink: 0;
+        margin-top: 5px;
+        margin-right: 15px;
+        margin-bottom: 20px;
+        @include media-breakpoint-only(md) {
+           margin-bottom: 20px;
+       }
       }
   }
 
   .help-contact-container{
-    width:55%;
-    margin-top: 30px;
-    margin-bottom: 20px;
+    flex-basis:60%;
+    margin: auto;
     opacity: 0.6;
 
-    @media (min-width: 1024px) {
-      width: auto;
-    }
-
     @include media-breakpoint-down(sm) {
       padding-left: 12px;
-      width:100%;
+      width: 100%;
+      padding-top: 30px;
       .links > li {
         width: calc(100% / 3);
         padding: 5px 0;
@@ -102,6 +96,7 @@
     @include media-breakpoint-between(sm, md) {
       padding-left: 0;
       width:100%;
+      padding-top: 30px;
     }
 
     .help-contact-row {

diff --git a/frontend/public/scss/learner-records.scss b/frontend/public/scss/learner-records.scss
@@ -1,5 +1,5 @@
 #learner-record-school-name img {
-  width: 245px;
+  width: 200px;
 }
 
 .badge.badge-partially-completed {

diff --git a/frontend/public/scss/top-app-bar.scss b/frontend/public/scss/top-app-bar.scss
@@ -237,20 +237,12 @@ header.site-header {
 }
 
 .svg-site-logo {
-  height: 35px !important;
-  width: 65px !important;
+  width: 121px !important;
+  height: 33px !important;
 
   @include media-breakpoint-down(sm) {
-    width: 46px !important;
-    height: 25px !important;
-  }
-
-  g {
-    transform: scale(0.2);
-
-    @include media-breakpoint-down(sm) {
-      transform: scale(0.15);
-    }
+    width: 81px !important;
+    height: 22px !important;
   }
 }
 
@@ -263,7 +255,7 @@ header.site-header.new-design {
   .navbar.top-navbar {
     display: flex;
     justify-content: space-between;
-    padding: 12px 15px;
+    padding: 15px;
 
     @include media-breakpoint-down(md) {
       position: static;
@@ -348,19 +340,6 @@ header.site-header.new-design {
   align-items: center;
   padding: 0;
 
-  .mitx-online-link {
-    font-family: Poppins;
-    color: var(--Blue-Dark, #03152D);
-    font-size: 18px;
-    font-weight: 700;
-    text-decoration: none;
-
-    @include media-breakpoint-down(md) {
-      font-size: 14px;
-      line-height: 18px;
-    }
-  }
-
   .logo-link {
     @include media-breakpoint-down(md) {
       display: inline-flex;

diff --git a/frontend/public/src/components/InstituteLogo.js b/frontend/public/src/components/InstituteLogo.js
@@ -4,17 +4,58 @@ import React from "react"
 function InstituteLogo() {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       aria-labelledby="instituteTitle instituteDesc"
       role="img"
       className="svg-site-logo"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 2676.86 726.72"
     >
-      <title id="instituteTitle">Institute Logo</title>
-      <desc id="instituteDesc">MIT Logo</desc>
-      <g strokeWidth="35" stroke="#A31F34">
-        <path d="m17.5,0v166m57-166v113m57-113v166m57-166v33m58,20v113" />
-        <path d="m188.5,53v113" stroke="#8A8B8C" />
-        <path d="m229,16.5h92" strokeWidth="33" />
+      <title id="instituteTitle">MITx Online Logo</title>
+      <desc id="instituteDesc">MITx Online Logo</desc>
+      <g id="Artwork">
+        <g>
+          <path
+            d="M720,720h160V240H720V720z M960,160h400V0H960V160z M720,0h160v160H720V0z M480,720h160V0H480V720z M240,560h160V0H240
+            V560z M0,720h160V0H0V720z M960,720h160V240H960V720z"
+          />
+          <g>
+            <path
+              d="M1507.07,570.63c0-89.79,56.22-156.51,144.76-156.51c88.53,0,144.34,66.71,144.34,156.51
+              c0,89.79-55.8,156.09-144.34,156.09C1563.29,726.72,1507.07,660.42,1507.07,570.63z M1734.07,570.63
+              c0-60-26.85-106.58-81.82-106.58s-83.08,46.57-83.08,106.58c0,59.58,28.11,106.16,83.08,106.16S1734.07,630.21,1734.07,570.63z"
+            />
+            <path
+              d="M1880.5,534.13h1.26c14.69-23.08,34.41-35.25,63.78-35.25c44.48,0,74.27,33.57,74.27,80.56V720h-57.06V587.83
+              c0-23.08-13.43-39.44-37.34-39.44c-25.17,0-43.64,20.14-43.64,49.51V720h-57.06V504.76h55.8V534.13z"
+            />
+            <path d="M2055.88,420h57.06v300h-57.06V420z" />
+            <path d="M2150.7,420h57.06v51.19h-57.06V420z M2150.7,504.76h57.06V720h-57.06V504.76z" />
+            <path
+              d="M2300.49,534.13h1.26c14.69-23.08,34.41-35.25,63.78-35.25c44.48,0,74.27,33.57,74.27,80.56V720h-57.06V587.83
+              c0-23.08-13.43-39.44-37.34-39.44c-25.17,0-43.64,20.14-43.64,49.51V720h-57.06V504.76h55.8V534.13z"
+            />
+            <path
+              d="M2464.55,612.17c0-63.78,43.22-113.29,106.16-113.29c69.23,0,106.16,52.87,106.16,129.65h-156.09
+              c4.2,33.15,22.66,53.71,54.97,53.71c22.24,0,35.25-10.07,41.54-26.43h56.22c-7.97,38.18-41.96,70.49-97.34,70.49
+              C2504.83,726.3,2464.55,676.37,2464.55,612.17z M2521.61,589.09h95.67c-1.68-27.27-19.72-46.15-45.73-46.15
+              C2541.33,542.94,2526.65,560.98,2521.61,589.09z"
+            />
+          </g>
+          <g>
+            <path
+              d="M1520.08,0h85.6l42.38,150.63c10.49,37.76,18.88,80.98,18.88,80.98h0.84c0,0,7.97-43.22,18.46-80.98L1728.61,0h86.85v300
+              h-56.64V127.97c0-24.34,2.52-62.1,2.52-62.1h-0.84c0,0-6.71,35.25-13.01,57.06L1695.88,300h-58.32l-50.35-177.07
+              c-6.29-21.82-13.01-57.06-13.01-57.06h-0.84c0,0,2.52,37.76,2.52,62.1V300h-55.81V0z"
+            />
+            <path d="M1862.03,0h60.84v300h-60.84V0z" />
+            <path d="M1953.92,0h241.26v51.19h-90.21V300h-60.84V51.19h-90.21V0z" />
+            <path
+              d="M2255.18,185.88l-70.07-101.12h65.04l38.18,61.68h0.84l36.08-61.68h59.16l-66.71,100.7L2394.48,300h-67.97l-39.86-71.33
+              h-0.84L2239.23,300h-62.52L2255.18,185.88z"
+            />
+          </g>
+        </g>
       </g>
     </svg>
   )

diff --git a/frontend/public/src/components/InstituteLogo_test.js b/frontend/public/src/components/InstituteLogo_test.js
@@ -11,9 +11,9 @@ describe("InstituteLogo component", () => {
 
     const title = wrapper.find("title")
     assert.exists(title)
-    assert.equal(title.text(), "Institute Logo")
+    assert.equal(title.text(), "MITx Online Logo")
     const desc = wrapper.find("desc")
     assert.exists(desc)
-    assert.equal(desc.text(), "MIT Logo")
+    assert.equal(desc.text(), "MITx Online Logo")
   })
 })
diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js
@@ -39,13 +39,9 @@ const TopBar = ({ currentUser }: Props) => {
         }`}
       >
         <div className="top-branding">
-          <a href="https://mit.edu" className="logo-link">
+          <a href="https://mitxonline.mit.edu" className="logo-link">
             <InstituteLogo />
           </a>
-          <div className="divider-grey" />
-          <a href={routes.root} className="mitx-online-link">
-            MITx Online
-          </a>
         </div>
         <button
           className="navbar-toggler nav-opener collapsed"

diff --git a/main/templates/footer.html b/main/templates/footer.html
@@ -5,7 +5,9 @@
   <div class="new-footer-container">
       <div class="copyright-container">
           <div class="address-col">
-           <img src="{% static 'images/mit.png' %}" alt="MIT" loading="lazy"/>
+            <a href="https://openlearning.mit.edu">
+              <img src="{% static 'images/open-learning-logo.png' %}" alt="MIT" loading="lazy"/>
+            </a>
             <address>
               Massachusetts Institute of Technology <br />77 Massachusetts Avenue
               <br />Cambridge, MA 02139

diff --git a/static/images/mitx-online-logo.png b/static/images/mitx-online-logo.png
diff --git a/static/images/open-learning-logo.png b/static/images/open-learning-logo.png