gem modal styling/functions

website/client/src/components/shops/buyModal.vue

@@ -187,15 +187,22 @@
     </div>
     <div
       v-if="item.key === 'gem'"
-      class="gems-left d-flex justify-content-center align-items-center"
+      class="d-flex justify-content-center align-items-center"
     >
-      {{ $t('monthlyGems') }}
-      <span v-if="gemsLeft > 0">
-        {{ gemsLeft }} {{ $t('gemsRemaining') }}
-      </span>
-      <span v-if="gemsLeft === 0">
-        {{ $t('maxBuyGems') }}
-      </span>
+      <div
+        v-if="gemsLeft > 0"
+        class="gems-left d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
+      <div
+        v-if="gemsLeft === 0"
+        class="out-of-gems-banner d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
     </div>
     <div
       slot="modal-footer"
@@ -349,8 +356,7 @@
     }
 
     .item-cost {
-      padding-top: 16px;
-      padding-bottom: 16px;
+       padding-bottom: 16px;
     }
 
     .cost {
@@ -473,6 +479,15 @@
     margin-bottom: -40px;
     color: $green-1;
   }
+
+  .out-of-gems-banner {
+    height: 32px;
+    font-size: 0.75rem;
+    margin-top: 24px;
+    margin-bottom: -40px;
+    background-color: $yellow-100;
+    color: $yellow-1;
+  }
 }
 </style>
 
@@ -615,6 +630,11 @@ export default {
       return planGemLimits.convCap
         + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
     },
+    totalGems () {
+      if (!this.user.purchased.plan) return 0;
+      return planGemLimits.convCap
+        + this.user.purchased.plan.consecutive.gemCapExtra;
+    },
     attemptingToPurchaseMoreGemsThanAreLeft () {
       if (this.item && this.item.key && this.item.key === 'gem' && this.selectedAmountToBuy > this.gemsLeft) return true;
       return false;

website/common/locales/ach/subscriber.json

@@ -133,5 +133,4 @@
     "purchaseAll": "Purchase Set",
     "gemsRemaining": "gems remaining",
     "notEnoughGemsToBuy": "You are unable to buy that amount of gems",
-    "monthlyGems": "Monthly Gems:"
 }

website/common/locales/en/subscriber.json

@@ -190,7 +190,7 @@
     "subscriptionBenefit5": "Receive the Royal Purple Jackalope pet when you become a new subscriber.",
     "subscriptionBenefit6": "Earn Mystic Hourglasses to purchase items in the Time Traveler’s Shop!",
     "purchaseAll": "Purchase Set",
-    "gemsRemaining": "Gems remaining",
+    "gemsRemaining": "remaining",
     "notEnoughGemsToBuy": "You are unable to buy that amount of Gems",
     "subscribersReceiveBenefits": "Subscribers receive these useful benefits!",
     "monthlyMysteryItems": "Monthly Mystery Items",
@@ -213,5 +213,6 @@
     "haveNonRecurringSub": "You have a non-recurring gift subscription.",
     "switchToRecurring": "Switch to a recurring subscription?",
     "continueGiftSubBenefits": "Want to continue your benefits? You can start a new subscription before your gifted one runs out to keep your benefits active.",
-    "subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled."
+    "subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled.",
+    "monthlyGems": "Monthly Gems:"
 }