buyModal styling/functions

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

@@ -22,7 +22,7 @@
   @import '~@/assets/scss/colors.scss';
 
 span {
-  font-weight: normal;
+  font-weight: bold;
   font-size: 12px;
   line-height: 1.33;
   color: $gray-200;

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

@@ -88,6 +88,7 @@
         <div
           v-if="item.value > 0"
           class="purchase-amount"
+          :hidden="attemptingToPurchaseMoreGemsThanAreLeft"
         >
           <div class="item-cost">
             <span
@@ -108,10 +109,14 @@
           <div
             v-if="showAmountToBuy(item)"
             class="how-many-to-buy"
+            :hidden="attemptingToPurchaseMoreGemsThanAreLeft"
           >
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
-          <div v-if="showAmountToBuy(item)">
+          <div
+            v-if="showAmountToBuy(item)"
+            :hidden="attemptingToPurchaseMoreGemsThanAreLeft"
+          >
             <number-increment
               @updateQuantity="selectedAmountToBuy = $event"
             />
@@ -129,7 +134,10 @@
             </div>
           </div>
         </div>
-        <div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
+        <div
+          v-if="attemptingToPurchaseMoreGemsThanAreLeft"
+          class="no-more-gems"
+        >
           {{ $t('notEnoughGemsToBuy') }}
         </div>
         <div
@@ -153,6 +161,11 @@
         >
           {{ $t('viewSubscriptions') }}
         </button>
+        <button
+          v-else-if="attemptingToPurchaseMoreGemsThanAreLeft"
+          :hidden="attemptingToPurchaseMoreGemsThanAreLeft"
+        >
+        </button>
         <button
           v-else
           class="btn btn-primary"
@@ -208,9 +221,9 @@
       slot="modal-footer"
       class="d-flex"
     >
-      <span class="balance mr-auto">{{ $t('yourBalance') }}</span>
+      <span class="mr-auto balance">{{ $t('yourBalance') }}</span>
       <balanceInfo
-        class="ml-auto"
+        class="ml-auto balance"
         :currency-needed="getPriceClass()"
         :amount-needed="item.value"
       />
@@ -340,6 +353,12 @@
         }
       }
     }
+    .no-more-gems {
+      color: $yellow-5;
+      font-size: 0.875em;
+      line-height: 1.33;
+      margin: 16px 48px 0 48px;
+    }
 
     span.svg-icon.inline.icon-24 {
       height: 24px;
@@ -431,16 +450,17 @@
       }
     }
 
-    .balance {
+    span.balance {
       width: 74px;
       height: 16px;
-      font-size: 12px;
+      font-size: 0.75em;
       font-weight: bold;
       line-height: 1.33;
       color: $gray-200;
+      margin-bottom: 16px;
+      margin-top: 16px;
     }
 
-
     .notEnough {
       pointer-events: none;
       opacity: 0.55;
@@ -478,6 +498,7 @@
     margin-top: 24px;
     margin-bottom: -40px;
     color: $green-1;
+    width: 100%;
   }
 
   .out-of-gems-banner {
@@ -487,6 +508,7 @@
     margin-bottom: -40px;
     background-color: $yellow-100;
     color: $yellow-1;
+    width: 100%;
   }
 }
 </style>

website/common/locales/en/subscriber.json

@@ -192,7 +192,7 @@
     "subscriptionBenefit6": "Earn Mystic Hourglasses to purchase items in the Time Traveler’s Shop!",
     "purchaseAll": "Purchase Set",
     "gemsRemaining": "remaining",
-    "notEnoughGemsToBuy": "You are unable to buy that amount of Gems",
+    "notEnoughGemsToBuy": "No more Gems available for purchase this month. More will become avalable within the first 3 days of each month.",
     "subscribersReceiveBenefits": "Subscribers receive these useful benefits!",
     "monthlyMysteryItems": "Monthly Mystery Items",
     "doubleDropCap": "Double the Drops",