Align chosen subdomain display with designs

React re-implementation of #1513.
mozilla · Feb 2, 2022 · b836860 · b836860
1 parent 45f6e8d
commit b836860
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss
@@ -54,14 +54,34 @@
   }
 
   .actionComplete {
-    @include text-title-3xs;
-    display: inline-flex;
+    @include text-body-sm;
+    font-family: $font-stack-firefox;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     padding: $spacing-md;
     border-radius: $border-radius-md;
     background-color: $color-white;
-    color: $color-blue-50;
-    gap: $spacing-sm;
-    width: auto;
+
+    .label {
+      display: inline-flex;
+      align-items: center;
+      gap: $spacing-xs;
+      padding-bottom: $spacing-xs;
+    }
+
+    samp {
+      @include text-body-lg;
+      font-family: $font-stack-firefox;
+      font-weight: bold;
+      color: $color-purple-50;
+    }
+
+    .domain {
+      @include text-body-xs;
+      color: $color-light-gray-90;
+    }
   }
 
   &.stepCustomDomain {

diff --git a/frontend/src/components/dashboard/PremiumOnboarding.tsx b/frontend/src/components/dashboard/PremiumOnboarding.tsx
@@ -279,12 +279,16 @@ const StepTwo = (props: Step2Props) => {
 
   const subdomain =
     typeof props.profile.subdomain === "string" ? (
-      <div className={styles.actionComplete}>
-        <img src={checkIcon.src} alt="" width={18} />
-        <samp>
-          @{props.profile.subdomain}.{getRuntimeConfig().mozmailDomain}
-        </samp>
-      </div>
+      <p className={styles.actionComplete}>
+        <span className={styles.label}>
+          <img src={checkIcon.src} alt="" width={18} />
+          {l10n.getString("profile-label-domain")}
+        </span>
+        <samp>@{props.profile.subdomain}</samp>
+        <span className={styles.domain}>
+          .{getRuntimeConfig().mozmailDomain}
+        </span>
+      </p>
     ) : (
       <Step2SubdomainPicker
         onPickSubdomain={props.onPickSubdomain}