fix(buy): modal style changes

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

@@ -1,14 +1,19 @@
 <template>
-  <div>
+  <div class="d-flex justify-content-around">
     <span
       v-for="currency of currencies"
       :key="currency.key"
     >
       <div
-        class="svg-icon"
+        class="svg-icon ml-1"
         v-html="currency.icon"
       ></div>
-      <span :class="{'notEnough': currency.notEnough}">{{ currency.value | roundBigNumber }}</span>
+      <span
+        :class="{'notEnough': currency.notEnough}"
+        class="mx-1"
+      >
+        {{ currency.value | roundBigNumber }}
+      </span>
     </span>
   </div>
 </template>
@@ -29,9 +34,6 @@ span {
   vertical-align: middle;
   width: 16px;
   height: 16px;
-  margin-right: 8px;
-  margin-left: 4px;
-
   display: inline-block;
 }
 
@@ -51,9 +53,6 @@ import currencyMixin from './_currencyMixin';
 export default {
   mixins: [currencyMixin],
   props: {
-    withHourglass: {
-      type: Boolean,
-    },
     currencyNeeded: {
       type: String,
     },
@@ -73,14 +72,11 @@ export default {
   computed: {
     currencies () {
       const currencies = [];
-
-      if (this.withHourglass) {
-        currencies.push({
-          type: 'hourglasses',
-          icon: this.icons.hourglasses,
-          value: this.userHourglasses,
-        });
-      }
+      currencies.push({
+        type: 'hourglasses',
+        icon: this.icons.hourglasses,
+        value: this.userHourglasses,
+      });
 
       currencies.push({
         type: 'gems',

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

@@ -11,13 +11,13 @@
       @click.prevent.stop="togglePinned()"
     >
       <span
-        class="svg-icon inline color icon-10"
+        class="svg-icon inline color icon-16"
         v-html="icons.pin"
       ></span>
     </span>
-    <div class="close">
+    <div>
       <span
-        class="svg-icon inline icon-10"
+        class="svg-icon icon-12 close-icon"
         aria-hidden="true"
         @click="hideDialog()"
         v-html="icons.close"
@@ -54,10 +54,7 @@
         <h4 class="title">
           {{ itemText }}
         </h4>
-        <div
-          class="text"
-          v-html="itemNotes"
-        ></div>
+        <div v-html="itemNotes"></div>
         <slot
           name="additionalInfo"
           :item="item"
@@ -122,6 +119,9 @@
         <div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
           {{ $t('notEnoughGemsToBuy') }}
         </div>
+        <div v-if="nonSubscriberHourglasses" class="hourglass-nonsub mt-3">
+          {{ $t('mysticHourglassNeededNoSub') }}
+        </div>
         <button
           v-if="getPriceClass() === 'gems'
             && !enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)"
@@ -130,6 +130,13 @@
         >
           {{ $t('purchaseGems') }}
         </button>
+        <button
+          v-else-if="nonSubscriberHourglasses"
+          class="btn btn-primary"
+          @click="viewSubscriptions(item)"
+        >
+          {{ $t('viewSubscriptions') }}
+        </button>
         <button
           v-else
           class="btn btn-primary"
@@ -167,12 +174,11 @@
     </div>
     <div
       slot="modal-footer"
-      class="clearfix"
+      class="d-flex"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span>
+      <span class="balance mr-auto">{{ $t('yourBalance') }}</span>
       <balanceInfo
-        class="float-right"
-        :with-hourglass="getPriceClass() === 'hourglasses'"
+        class="ml-auto"
         :currency-needed="getPriceClass()"
         :amount-needed="item.value"
       />
@@ -187,6 +193,10 @@
   #buy-modal {
     @include centeredModal();
 
+    .modal-body {
+      padding-bottom: 0px;
+    }
+
     .modal-dialog {
       width: 330px;
     }
@@ -274,6 +284,7 @@
     button.btn.btn-primary {
       margin-top: 24px;
       margin-bottom: 24px;
+      min-width: 6rem;
     }
 
     .balance {
@@ -360,6 +371,21 @@
   }
 </style>
 
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .close-icon {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+
+  .hourglass-nonsub {
+    color: $yellow-5;
+    font-size: 12px;
+  }
+</style>
+
 <script>
 import keys from 'lodash/keys';
 import reduce from 'lodash/reduce';
@@ -488,6 +514,9 @@ export default {
     nextFreeRebirth () {
       return 45 - moment().diff(moment(this.user.flags.lastFreeRebirth), 'days');
     },
+    nonSubscriberHourglasses () {
+      return (!this.user.purchased.plan.customerId && this.getPriceClass() === 'hourglasses');
+    },
   },
   watch: {
     item: function itemChanged () {
@@ -612,6 +641,14 @@ export default {
 
       return {};
     },
+    viewSubscriptions (item) {
+      if (item.purchaseType === 'backgrounds') {
+        this.$root.$emit('habitica::dismiss-modal', 'avatar-modal');
+        this.$root.$emit('bv::hide::modal', 'avatar-modal');
+      }
+      this.$router.push('/user/settings/subscription');
+      this.hideDialog();
+    },
   },
 };
 </script>

website/common/locales/en/npc.json

@@ -48,7 +48,7 @@
   "displayPotionForGold": "Do you want to sell a <strong><%= itemType %> Potion</strong>?",
   "sellForGold": "Sell it for <%= gold %> Gold",
   "howManyToSell": "How many would you like to sell?",
-  "yourBalance": "Your balance",
+  "yourBalance": "Your balance:",
   "sell": "Sell",
   "buyNow": "Buy Now",
   "sortByNumber": "Number",

website/common/locales/en/subscriber.json

@@ -1,6 +1,7 @@
 {
     "subscription": "Subscription",
     "subscriptions": "Subscriptions",
+    "viewSubscriptions": "View Subscriptions",
     "subDescription": "Buy Gems with gold, get monthly mystery items, retain progress history, double daily drop-caps, support the devs. Click for more info.",
     "sendGems": "Send Gems",
     "buyGemsGold": "Buy Gems with Gold",
@@ -91,6 +92,7 @@
     "timeTravelersPopover": "Your Mystic Hourglass has opened our time portal! Choose what you’d like us to fetch from the past or future.",
     "timeTravelersAlreadyOwned": "Congratulations! You already own everything the Time Travelers currently offer. Thanks for supporting the site!",
     "mysticHourglassPopover": "A Mystic Hourglass allows you to purchase certain limited-time items, such as monthly Mystery Item Sets and awards from world bosses, from the past!",
+    "mysticHourglassNeededNoSub": "This item requires a Mystic Hourglass. You earn Mystic Hourglasses by being a Habitica subscriber.",
     "mysterySetNotFound": "Mystery set not found, or set already owned.",
     "mysteryItemIsEmpty": "Mystery items are empty",
     "mysteryItemOpened": "Mystery item opened.",