Some refinements for the renewal page

- Less spacing between the title and content, - decrease height of the logo, - less spacing between the CTA and the terms link, and - link directly to the pricing section on the landing page.
mozilla · Feb 3, 2025 · 59dc2e2 · 59dc2e2
1 parent 052345f
commit 59dc2e2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/plus-expiration/RenewalShell.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/plus-expiration/RenewalShell.tsx
@@ -27,6 +27,7 @@ export const RenewalShell = (props: Props) => {
             <Image
               src={monitorLogo}
               alt={l10n.getString("plus-expiration-header-logo-alt")}
+              height={32}
             />
           }
         >

diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/plus-expiration/View.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/user/plus-expiration/View.module.scss
@@ -10,11 +10,17 @@
   padding-block-end: tokens.$spacing-md;
   text-align: center;
 
-  h1 {
-    font: tokens.$text-title-xs;
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: tokens.$spacing-sm;
+
+    h1 {
+      font: tokens.$text-title-xs;
 
-    b {
-      color: tokens.$color-purple-70;
+      b {
+        color: tokens.$color-purple-70;
+      }
     }
   }
 

diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/plus-expiration/View.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/plus-expiration/View.tsx
@@ -140,12 +140,14 @@ export const View = (props: Props) => {
           </>
         ) : (
           <>
-            <h1>
-              {l10n.getFragment("plus-expiration-intro-heading", {
-                elems: { b: <b /> },
-              })}
-            </h1>
-            <p>{l10n.getString("plus-expiration-intro-content")}</p>
+            <div className={styles.content}>
+              <h1>
+                {l10n.getFragment("plus-expiration-intro-heading", {
+                  elems: { b: <b /> },
+                })}
+              </h1>
+              <p>{l10n.getString("plus-expiration-intro-content")}</p>
+            </div>
             {applyCouponState.error &&
               applyCouponState.error !== "not_applied_yet" &&
               !isApplyCouponPending &&
@@ -181,16 +183,16 @@ export const View = (props: Props) => {
               >
                 {l10n.getString("plus-expiration-intro-cta-label")}
               </Button>
+              <p className={styles.terms}>
+                <Link href="/terms/expiration-offer" target="_blank">
+                  {l10n.getString("plus-expiration-intro-terms")}
+                  <OpenInNew
+                    alt={l10n.getString("open-in-new-tab-alt")}
+                    width={13}
+                  />
+                </Link>
+              </p>
             </div>
-            <p className={styles.terms}>
-              <Link href="/terms/expiration-offer" target="_blank">
-                {l10n.getString("plus-expiration-intro-terms")}
-                <OpenInNew
-                  alt={l10n.getString("open-in-new-tab-alt")}
-                  width={13}
-                />
-              </Link>
-            </p>
           </>
         )}
       </div>

diff --git a/src/app/(proper_react)/(redesign)/terms/expiration-offer/View.tsx b/src/app/(proper_react)/(redesign)/terms/expiration-offer/View.tsx
@@ -36,7 +36,7 @@ export const View = (props: Props) => {
           <li>{l10n.getString("plus-expiration-terms-term5")}</li>
           <li>
             {l10n.getFragment("plus-expiration-terms-term6", {
-              elems: { "monitor-link": <Link href="/" /> },
+              elems: { "monitor-link": <Link href="/#pricing" /> },
             })}
           </li>
         </ul>
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ export const RenewalShell = (props: Props) => { @@
                 <Image
                   src={monitorLogo}
                   alt={l10n.getString("plus-expiration-header-logo-alt")}
+                  height={32}
                 />
               }
             >
@@ Expand Down @@