Onboarding Domain Registration UI Fixes (#1369)

* Fix issue where premium dashboard would prompt user who registered domain during onboarding step to register their domain

* Adjust premium dashboard UI to match Figma more

* Add comment in SCSS

* Submodule updates

.env-dist

@@ -32,3 +32,4 @@ PREMIUM_PROD_ID=prod_K29ULZL9pUR9Fr
 SUBSCRIPTIONS_WITH_UNLIMITED="monitor-unlimited,mozilla-one,guardian_vpn"
 PREMIUM_RELEASE_DATE='2021-10-22 17:00:00+00:00'
 MAX_ONBOARDING_AVAILABLE=3
+DOMAIN_REGISTRATION_MODAL=True

privaterelay/locales

@@ -1 +1 @@
-Subproject commit e20fc7c95429e1b13f9f39900927c79f93695527
+Subproject commit 4be56fc7f96681f3d685a7da638c19e1a678692e

privaterelay/templates/profile.html

@@ -64,10 +64,10 @@
         {% if not user_profile.subdomain %}
           <div class="mpp-dashbaord-header-action">
             <a href="#mpp-choose-subdomain" class="mpp-action-link">
-              <img class="margin-right" src="/static/images/icon-check.svg" alt=""> {% ftlmsg 'profile-label-create-domain' %}
+              <img src="/static/images/icon-check.svg" alt=""> {% ftlmsg 'profile-label-create-domain' %}
             </a>
             <div class="mpp-action-tooltip">
-              <img class="margin-left" src="/static/images/icon-info.svg" alt="">
+              <img src="/static/images/icon-info.svg" alt="">
               <div class="mpp-action-tooltip-hover">
                 <div class="mpp-action-tooltip-hover-wrapper">
                   {% ftlmsg 'profile-label-domain-tooltip' %}
@@ -77,7 +77,8 @@
           </div>
         {% else %}
           <div class="mpp-dashbaord-header-action">
-            {% ftlmsg 'profile-label-domain' %} <samp>{{ user_profile.custom_domain }}</samp>
+              <img src="/static/images/icon-check.svg" alt=""> {% ftlmsg 'profile-label-domain' %} 
+              <samp>{{ user_profile.custom_domain }}</samp>
           </div>
         {% endif %}
       </div>

static/js/domain-registration.js

@@ -200,6 +200,9 @@
                     onboardingDomainRegistration.classList.add("is-hidden");
                     onboardingDomainRegistration.nextElementSibling.classList.add("is-visible");
 
+                    const dashboardDomainRegistrationPrompt = document.querySelector(".mpp-dashbaord-header-action");
+                    dashboardDomainRegistrationPrompt?.classList.add("is-hidden");
+
                     const onboardingDomainRegistrationActionButtons = document.querySelectorAll(".c-premium-onboarding-action-step-2 button");
                     onboardingDomainRegistrationActionButtons.forEach( button => {
                         button.classList.toggle("is-hidden");

static/scss/pages/dashboard.scss

@@ -73,26 +73,35 @@
 }
 
 .mpp-dashbaord-header-action {
+    color: $color-blue-50;
     display: flex;
     align-items: center;
+    font-weight: 600;
+
+    &.is-hidden {
+        display: none;
+    }
+
+    samp {
+        @include font-base;
+        display: inline-block;
+        margin-inline-start: $spacing-xs;
+    }
+
+    img {
+        margin-right: $spacing-xs;
+    }
 }
 
 .mpp-action-link {
-    color: $color-blue-50;
+    
     appearance: none;
     background: none;
     border: none;
     outline: none;
     display: flex;
     align-items: center;
-
-    .margin-right {
-        margin-right: $spacing-xs;
-    }
-
-    .margin-left {
-        margin-left: $spacing-xs;
-    }
+    font-weight: 400;
 
     &:hover {
         color: $color-blue-40;
@@ -149,6 +158,12 @@
     position: relative;
     z-index: 1;
     margin-left: $spacing-sm;
+
+    // This image margin for the (i) icon, which is after the string
+    img {
+        margin-left: $spacing-xs;
+        margin-right: 0;
+    }
     
     &:hover .mpp-action-tooltip-hover {
         display: block;