Add headline, update footer UI

mozilla · Aug 24, 2021 · fcca15e · fcca15e
1 parent 2e8638e
commit fcca15e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git 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
@@ -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,28 +346,29 @@ 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 {
  background-color: var(--relayGrey50);
 }
 
 .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
@@ -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
@@ -95,11 +95,12 @@ <h1 class="onboarding-h1"></h1>
  </ul>
  </div>
  <img class="email-domain-illustration">
+ <p class="register-domain-headline i18n-content" data-i18n-message-id="popupRegisterDomainHeadline"></p>
  <a class="register-domain-cta i18n-content button sign-in-btn blue-primary-btn close-popup-after-click" data-event-action="click" data-i18n-message-id="registerDomainButton"></a> 
  </div>
  </onboarding-panel>
  <footer>
- <a class="button fx-relay-new-tab close-popup-after-click footer-button dashboard-link i18n-content" data-event-action="click" data-event-label="panel-manage-all-aliases-btn" data-i18n-message-id="ManageAllAliases"></a>
+ <a class="close-popup-after-click footer-button dashboard-link i18n-content" data-event-action="click" data-event-label="panel-manage-all-aliases-btn" data-i18n-message-id="ManageAllAliases"></a>
  </footer>
  </main-panel>
  </panel-content>