diff --git a/frontend/public/scss/certificates/certificate.scss b/frontend/public/scss/certificates/certificate.scss index 175b6969b6..e0c3f07e95 100644 --- 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 index bace5fbee7..b39fae22f4 100644 --- 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 index 7e957804da..3e12489ed7 100644 --- 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 index 81f296b0de..b4e207f54d 100644 --- 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 index 9afdd6ad3f..dd39165f3a 100644 --- 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 ( - Institute Logo - MIT Logo - - - - + MITx Online Logo + MITx Online Logo + + + + + + + + + + + + + + + + + + ) diff --git a/frontend/public/src/components/InstituteLogo_test.js b/frontend/public/src/components/InstituteLogo_test.js index 62138feaca..5e82f21fb1 100644 --- 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 index 28aea2883e..789e7a2db6 100644 --- a/frontend/public/src/components/TopBar.js +++ b/frontend/public/src/components/TopBar.js @@ -39,13 +39,9 @@ const TopBar = ({ currentUser }: Props) => { }`} >
- + -
- - MITx Online -