From c341f0deaf32e36b7b643723245174a1d11d69b5 Mon Sep 17 00:00:00 2001
From: Kalista Payne <sabrecat@gmail.com>
Date: Fri, 1 Nov 2024 14:17:59 -0500
Subject: [PATCH] fix(subs): don't hide HG preview entirely

---
 .../src/components/settings/subscription.vue  | 29 +++++++++++++------
 website/common/locales/en/subscriber.json     |  3 +-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index 874b2abedc1..936ee40af69 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -310,7 +310,6 @@
             <div
               class="hourglass-preview purple-gradient d-flex flex-column
               justify-content-center align-items-center position-relative mb-4"
-              v-if="nextHourGlass"
             >
               <div
                 v-once
@@ -318,15 +317,22 @@
                 v-html="icons.hourglassLeft"
               >
               </div>
-              <div class="white mb-1">
-                {{ nextHourGlass }}
-              </div>
-              <div
-                v-once
-                class="purple-600"
-              >
-                {{ $t('nextHourglass') }}
+              <div v-if="nextHourGlass">
+                <div
+                  class="white mb-1"
+                >
+                  {{ nextHourGlass }}
+                </div>
+                <div
+                  v-once
+                  class="purple-600"
+                  >
+                  {{ $t('nextHourglass') }}
+                </div>
               </div>
+              <p class="w-50 text-center" v-else>
+                {{ $t('subscribeAgainContinueHourglasses') }}
+              </p>
               <div
                 v-once
                 class="svg svg-icon position-absolute right-24"
@@ -535,6 +541,11 @@
     border-radius: 8px;
     font-weight: 700;
 
+    p {
+      color: $white;
+      line-height: 1.4;
+    }
+
     .white {
       font-family: 'Roboto Condensed';
       font-size: 20px;
diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json
index e166a4b046f..747bb94110c 100644
--- a/website/common/locales/en/subscriber.json
+++ b/website/common/locales/en/subscriber.json
@@ -255,5 +255,6 @@
     "nMonthsGift": "For <%= months %> months",
     "unlockNGemsGift": "They'll unlock <strong><%= count %> Gems</strong> per month instantly",
     "earn2GemsGift": "They'll earn <strong>+2 Gems</strong> every month they're subscribed",
-    "maxGemCapGift": "They'll have the max <strong>Gem Cap</strong>"
+    "maxGemCapGift": "They'll have the max <strong>Gem Cap</strong>",
+    "subscribeAgainContinueHourglasses": "Subscribe again to continue receiving Mystic Hourglasses"
 }