Merge pull request #1513 from mozilla/subdomain-module-onboarding

Fix #1461 - Update UI of subdomain onboarding module
mozilla · Feb 9, 2022 · ee0ae02 · ee0ae02
2 parents 1306383 + 44469f3
commit ee0ae02
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 21 deletions.
diff --git a/privaterelay/locales b/privaterelay/locales
diff --git a/privaterelay/templates/includes/premium-onboarding.html b/privaterelay/templates/includes/premium-onboarding.html
@@ -40,8 +40,8 @@ <h1>{% ftlmsg 'multi-part-onboarding-premium-get-domain' %}</h1>
                         {% if not user_profile.subdomain %}
                             <div class="js-premium-onboarding-domain-registration-form">
                                 <p>{% ftlmsg 'multi-part-onboarding-premium-domain-cta' %}</p>
-                                <samp>***@<span>{% ftlmsg 'banner-register-subdomain-example-address' %}</span>.mozmail.com</samp>
-                                <form id="onboardingDomainRegistration" class="c-premium-onboarding-domain-registration-form" method="post" action="{% url 'profile_subdomain' %}">
+                                <samp class="c-premium-onboarding-subdomain-registration">***@<span>{% ftlmsg 'banner-register-subdomain-example-address' %}</span>.mozmail.com</samp>
+                                <form id="onboardingDomainRegistration" method="post" action="{% url 'profile_subdomain' %}">
                                     {% csrf_token %}
                                     <input
                                     class="js-subdomain-value subdomain-banner-input"
@@ -59,8 +59,11 @@ <h1>{% ftlmsg 'multi-part-onboarding-premium-get-domain' %}</h1>
                         {% endif %}
 
                         <div class="c-premium-onboarding-action-completed {% if user_profile.subdomain %} is-visible {% endif %}">
-                            <img class="margin-right" src="/static/images/icon-check.svg" alt="">
-                            <samp class="js-premium-onboarding-domain-registration-preview">{{ user_profile.custom_domain }}</samp>
+                            <div class="c-premium-onboarding-subdomain-set-module">
+                                <p class="c-premium-onboarding-label">{% ftlmsg 'profile-label-domain' %}</p>
+                                <samp class="c-premium-onboarding-subdomain">@<span class="js-premium-onboarding-domain-registration-preview">{{ user_profile.subdomain }}</span></samp>
+                                <span class="c-premium-onboarding-mozmail">.mozmail.com</span>
+                            </div>
                         </div>
                     </div>
                 </div>

diff --git a/static/js/domain-registration.js b/static/js/domain-registration.js
@@ -174,7 +174,7 @@
 
                 switch (e.target.parentFormHTMLElement.id) {
                     case "domainRegistration":
-                        domainRegistration.modal.showSuccessState(e.target.parentFormRequestedDomain,{ "form": "dashboard" });
+                        domainRegistration.modal.showSuccessState(e.target.parentFormRequestedDomain, { "form": "dashboard" });
                         break;
                     case "onboardingDomainRegistration":
                         domainRegistration.modal.showSuccessState(e.target.parentFormRequestedDomain, { "form": "onboarding" });
@@ -189,7 +189,7 @@
                 modalRegistrationSuccessState.classList.remove("is-hidden");
 
                 const domainPreview = document.querySelector(".js-premium-onboarding-domain-registration-preview");
-                domainPreview.textContent = domain + ".mozmail.com";
+                domainPreview.textContent = domain;
 
                 const modalContinue = document.querySelector(".js-modal-domain-registration-continue");
 

diff --git a/static/scss/partials/onboarding.scss b/static/scss/partials/onboarding.scss
@@ -48,7 +48,7 @@
     &::after {
         content: attr(data-number);
         display: block;
-        font-weight: bold;
+        font-weight: 700;
         font-size: 1rem;
         text-align: center;
         color: $color-light-gray-70;
@@ -282,7 +282,7 @@
 // Step 2: Register custom subdomain 
 .c-premium-onboarding-step-2 {
 
-    samp {
+    .c-premium-onboarding-subdomain-registration {
         @include text-title-2xs;
         display: block;
         color: $color-grey-30;
@@ -406,29 +406,60 @@ firefox-private-relay-addon[data-addon-installed="true"] + firefox-private-relay
 }
 
 .c-premium-onboarding-action-completed {
-    padding: $spacing-md;
+    padding: $spacing-lg;
     padding-inline-end: $spacing-lg;
     background-color: $color-white;
     display: none;
     align-items: center;
     border-radius: $border-radius-md;
-    width: auto;
-
-    samp {
-        margin-bottom: 0;
-        color: $color-informational;
-        max-width: 100%;
-        word-break: break-all;
+    width: 100%;
 
-        @include text-title-3xs;
+    @media #{$mq-md} {
+        width: auto;
     }
 
     &.is-visible {
         display: inline-flex;
     }
 
-    img {
-        margin-right: $spacing-sm;
+    p {
+        margin: 0;
+    }
+
+    .c-premium-onboarding-subdomain-set-module {
+        font-family: $font-stack-firefox;
+        display: grid;
+        text-align: center;
+        font-weight: 600;
+        margin: 0 auto;
+    }
+
+    .c-premium-onboarding-label {
+        color: $color-dark-gray-05;
+    }
+
+    .c-premium-onboarding-label::before {
+        width: $layout-2xs;
+        height: $layout-2xs;
+        display: inline-block;
+        content: "";
+        background-image: url("/static/images/icon-check.svg");
+        background-repeat: no-repeat;
+        background-position: center center;
+        padding-right: $spacing-sm;
+    }
+
+    .c-premium-onboarding-subdomain {
+        @include text-body-lg;
+        font-family: $font-stack-firefox;
+        word-break: break-word;
+        font-weight: 700;
+        color: $color-purple-50;
+    }
+
+    .c-premium-onboarding-mozmail {
+        @include text-body-sm;
+        color: $color-light-gray-90;
     }
 }
 

diff --git a/static/scss/partials/vpn-promo.scss b/static/scss/partials/vpn-promo.scss
@@ -70,7 +70,7 @@
     cursor: pointer;
     display: inline-block;
     font-size: 1.125rem;
-    font-weight: bold;
+    font-weight: 700;
     line-height: 1.5rem;
     padding: $spacing-sm $spacing-md;
     margin-bottom: $spacing-md;