diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index e0f812ee8..f333b3f02 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -99,6 +99,9 @@ "popupOnboardingMaxAliasesPanelBody": { "message": "You’re a Firefox Relay power user!" }, + "popupRegisterDomainHeadline": { + "message": "Get a custom domain for Relay email aliases" + }, "popupRegisterDomainButton": { "message": "Register email domain" }, diff --git a/src/css/popup.css b/src/css/popup.css index d578579da..de6b8d918 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -115,7 +115,6 @@ fx-relay-logo-wrapper { align-items: center; padding: 0 24px 0 24px; width: 100%; - border-bottom: 1px solid var(--relayGrey20); min-height: 64px; height: 64px; max-height: 64px; @@ -285,6 +284,7 @@ main-panel { line-height: 150%; font-size: 1rem; border-bottom: 1px solid var(--relayGrey20); + border-top: 1px solid var(--relayGrey20); } .aliases-remaining { @@ -346,13 +346,15 @@ footer { width: 100%; font-size: 15px; padding: 4px 8px; - background-color: var(--relayGrey20); - justify-content: center; - min-height: 64px; + color: var(--relayBlue3); + font-weight: 600; + text-decoration: none; + margin: 0 auto 16px auto; + font-family: 'InterUI'; + text-align: center; } .footer-button:hover { - background-color: var(--relayGrey30); } .footer-button:active { @@ -360,14 +362,13 @@ footer { } .footer-button:focus { - background-color: var(--relayGrey40); } /* onboarding */ onboarding-panel { font-size: 14px !important; - padding: 24px 30px 30px 30px; + padding: 8px 30px 30px 30px; display: flex; align-items: flex-start; height: 100%; @@ -376,9 +377,11 @@ onboarding-panel { transition: all 0.2s ease; } +/* Premium Panel */ .premiumPanel { - padding: 24px 30px 30px 30px; + padding: 8px 16px 0px 16px; + font-family: 'InterUI'; } .content-wrapper, .premium-wrapper { @@ -396,7 +399,6 @@ onboarding-panel { width: 100%; border-radius: 8px; padding: 0 15px; - font-family: var(--relayMetropolis); background: #F7F7F7; } @@ -461,10 +463,17 @@ onboarding-panel { margin-top: 30px; } -.register-domain-cta{ +.register-domain-cta { margin: 10px auto; } +.register-domain-headline { + margin: 0 auto; + font-weight: 700; + font-size: 14px; + padding-top: 8px; +} + .onboarding-h1 { margin: auto auto 8px 0; font-size: 16px; diff --git a/src/js/popup.js b/src/js/popup.js index 921c2a6da..5cde85223 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -24,6 +24,7 @@ function getOnboardingPanels() { }, "premiumPanel": { "registerDomainButton": browser.i18n.getMessage("popupRegisterDomainButton"), + "registerDomainHeadline": browser.i18n.getMessage("popupRegisterDomainHeadline"), "registerDomainImg": "/images/panel-images/email-domain-illustration.svg", "aliasesUsedText": browser.i18n.getMessage("popupAliasesUsed"), "emailsBlockedText": browser.i18n.getMessage("popupEmailsBlocked"), @@ -65,6 +66,7 @@ async function showRelayPanel(tipPanelToShow) { //Premium Panel const premiumPanelWrapper = document.querySelector(".premium-wrapper"); const registerDomainButtonEl = premiumPanelWrapper.querySelector(".register-domain-cta"); + const registerDomainHeadlineEl = premiumPanelWrapper.querySelector(".register-domain-headline"); const registerDomainImgEl = premiumPanelWrapper.querySelector(".email-domain-illustration"); const aliasesUsedValEl = premiumPanelWrapper.querySelector(".aliases-used"); @@ -92,6 +94,7 @@ async function showRelayPanel(tipPanelToShow) { //Premium Panel registerDomainImgEl.src = panelStrings.registerDomainImg; registerDomainButtonEl.textContent = panelStrings.registerDomainButton; + registerDomainHeadlineEl.textContent = panelStrings.registerDomainHeadline; aliasesUsedValEl.textContent = aliasesUsedVal; emailsBlockedValEl.textContent = emailsBlockedVal; emailsForwardedValEl.textContent = emailsForwardedVal; diff --git a/src/popup.html b/src/popup.html index ed85a315d..db8a9a458 100644 --- a/src/popup.html +++ b/src/popup.html @@ -95,11 +95,12 @@

+