refactor: small copy & layout changes for renewals

WelcometoMyGarden · Jan 15, 2025 · 10f7bec · 10f7bec
1 parent b34132c
commit 10f7bec
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 24 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -909,7 +909,7 @@
       }
     },
     "payment-section": {
-      "payment-method": "Payment",
+      "payment-method": "Payment method",
       "pay-button": "Pay now",
       "loading": "Loading...",
       "processing-payment": "Processing...",

diff --git a/src/routes/(marketing)/(membership)/MembershipPricing.svelte b/src/routes/(marketing)/(membership)/MembershipPricing.svelte
@@ -147,9 +147,13 @@
 
 <div class="container">
   <div class="pricing-description">
-    <h3 id="pricing-title">{$t('become-superfan.pricing-section.title')}</h3>
+    <svelte:element this={condensed ? 'h3' : 'h2'} id="pricing-title" class:condensed
+      >{$t('become-superfan.pricing-section.title')}</svelte:element
+    >
     <p id="pricing-description">{$t('become-superfan.pricing-section.description')}</p>
-    <Img class="members-bar" src={membersBarImg} />
+    {#if !condensed || isMobile}
+      <Img class="members-bar" src={membersBarImg} />
+    {/if}
   </div>
   <div
     class="membership-levels"
@@ -281,6 +285,10 @@
     container-type: inline-size;
   }
 
+  #pricing-title:not(.condensed) {
+    margin-bottom: 1.2rem;
+  }
+
   /* Condensed desktop modal styles & overrides */
   .membership-levels.condensed {
     border: 1px solid var(--color-green);
@@ -328,8 +336,8 @@
       margin-bottom: 1rem;
     }
     .pricing-description :global(.members-bar) {
-      margin: 1rem auto;
-      max-width: 40rem;
+      margin: 1.2rem auto 1.5rem auto;
+      max-width: 34rem;
     }
   }
   .select-level-button {

diff --git a/src/routes/(marketing)/(membership)/become-member/payment/+layout.svelte b/src/routes/(marketing)/(membership)/become-member/payment/+layout.svelte
@@ -288,9 +288,7 @@
     {#if stripe && clientSecret}
       <form on:submit|preventDefault={submit}>
         <Elements {stripe} {clientSecret} bind:elements>
-          <span class="method-title mh3"
-            >{$_('payment-superfan.payment-section.payment-method')}</span
-          >
+          <span class="method-title">{$_('payment-superfan.payment-section.payment-method')}</span>
           <PaymentElement
             options={{
               paymentMethodOrder: ['bancontact', 'card', 'ideal', 'sofort'],
@@ -311,7 +309,7 @@
             }}
           />
         </Elements>
-        <div class="payment-button">
+        <div class="payment-button-section">
           <Button type="submit" uppercase medium orange arrow loading={processingPayment} fullWidth
             >{$_('payment-superfan.payment-section.pay-button')}</Button
           >
@@ -350,36 +348,42 @@
 </PaddedSection>
 
 <style>
-  .method-title.mh3 {
-    display: block;
-    font-size: 2rem;
-    margin-bottom: 1.8rem;
+  .method-title {
+    /* Taken from Stripe's Payment element CSS */
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+      'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 14.88px;
+    color: rgb(48, 49, 61);
+    line-height: 17.1167px;
+    display: inline-block;
+    margin-bottom: 0.8rem;
   }
 
   /* Exceptionally, less padding */
   :global(.outer.summary-section) {
     margin-bottom: 4rem !important;
   }
 
-  .payment-button {
+  .payment-button-section {
     width: 100%;
-    padding: 2rem;
+    padding: 0 2rem 2rem 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
 
-  .payment-button :global(button) {
+  .payment-button-section :global(button) {
     max-width: 30rem;
+    margin: 3rem auto 2.7rem auto;
   }
 
   .error {
     color: var(--color-danger);
   }
 
   .terms {
-    margin-top: 1.3rem;
+    margin-bottom: 0;
     text-align: center;
     font-size: 1.4rem;
     line-height: 1.4;

diff --git a/src/routes/(marketing)/(membership)/become-member/payment/LevelSummary.svelte b/src/routes/(marketing)/(membership)/become-member/payment/LevelSummary.svelte
@@ -34,9 +34,6 @@
         <span class="to"><span class="arrow">→</span> {formatDate($locale ?? 'en', periodEnd)}</span
         >
       </div>
-      <p class="feature-overview">
-        {$_(`payment-superfan.overview-section.feature-overview.${level.slug}`)}
-      </p>
       <ul class="features checklist">
         <!-- TODO TEST INSERT $LOCALE not hardcoded 'en' -->
         {#each getNodeArray('payment-superfan.overview-section.features', 'en') as feature}
@@ -80,10 +77,6 @@
     line-height: 1.6;
   }
 
-  .feature-overview {
-    margin-bottom: 1rem;
-  }
-
   .checklist {
     display: grid;
     grid-template-columns: auto auto;