fix(subs): clarity and layout improvements

website/client/src/components/settings/subscription.vue

@@ -93,7 +93,7 @@
       <div class="subscribe-card mx-auto">
         <div
           v-if="hasSubscription && !hasCanceledSubscription"
-          class="d-flex flex-column align-items-center"
+          class="d-flex flex-column align-items-center pt-4"
         >
           <div class="round-container bg-green-10 d-flex align-items-center justify-content-center">
             <div
@@ -107,7 +107,7 @@
           </h2>
           <div
             v-if="hasGroupPlan"
-            class="mx-5 text-center"
+            class="mx-5 mb-4 text-center"
           >
             {{ $t('youHaveGroupPlan') }}
           </div>
@@ -157,7 +157,47 @@
           </div>
         </div>
         <div
-          v-if="hasCanceledSubscription"
+          v-if="hasGiftSubscription"
+          class="d-flex flex-column align-items-center mt-4"
+        >
+          <div class="round-container bg-green-10 d-flex align-items-center justify-content-center">
+            <div
+              v-once
+              class="svg-icon svg-check"
+              v-html="icons.checkmarkIcon"
+            ></div>
+          </div>
+          <h2 class="green-10 mx-auto mb-75">
+            {{ $t('youAreSubscribed') }}
+          </h2>
+          <div
+            class="mx-4 text-center mb-4 lh-71"
+          >
+            <span v-once>
+              {{ $t('haveNonRecurringSub') }}
+            </span>
+            <span
+              v-once
+              v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
+            >
+            </span>
+          </div>
+          <h2 v-once>
+            {{ $t('switchToRecurring') }}
+          </h2>
+          <small
+            v-once
+            class="mx-4 mb-3 text-center"
+          >
+            {{ $t('continueGiftSubBenefits') }}
+          </small>
+          <subscription-options
+            :note="'subscriptionCreditConversion'"
+            class="w-100 mb-2"
+          />
+        </div>
+        <div
+          v-else-if="hasCanceledSubscription"
           class="d-flex flex-column align-items-center mt-4"
         >
           <div class="round-container bg-gray-300 d-flex align-items-center justify-content-center">
@@ -180,7 +220,7 @@
         </div>
         <div
           v-if="hasSubscription"
-          class="bg-gray-700 py-3 mt-4 mb-3 text-center"
+          class="bg-gray-700 py-3 mb-3 text-center"
         >
           <div class="header-mini mb-3">
             {{ $t('subscriptionStats') }}
@@ -322,6 +362,12 @@
     max-width: 21rem;
   }
 
+  small {
+    color: $gray-100;
+    font-size: 12px ;
+    line-height: 1.33;
+  }
+
   strong {
     font-size: 16px;
   }
@@ -399,6 +445,10 @@
     height: 49px;
   }
 
+  .lh-71 {
+    line-height: 1.71;
+  }
+
   .maroon-50 {
     color: $maroon-50;
   }
@@ -443,7 +493,6 @@
   }
 
   .subscribe-card {
-    padding-top: 2rem;
     width: 28rem;
     border-radius: 8px;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
@@ -472,8 +521,7 @@
   }
 
   .svg-check {
-    width: 35.1px;
-    height: 28px;
+    width: 36px;
     color: $white;
   }
 
@@ -670,6 +718,9 @@ export default {
     hasSubscription () {
       return Boolean(this.user.purchased.plan.customerId);
     },
+    hasGiftSubscription () {
+      return this.user.purchased.plan.customerId === 'Gift';
+    },
     hasCanceledSubscription () {
       return (
         this.hasSubscription