feat(rebirth): add banner to buy modal

website/client/assets/scss/colors.scss

@@ -35,6 +35,7 @@ $maroon-50: #C92B2B;
 $maroon-100: #DE3F3F;
 $maroon-500: #F19595;
 
+$yellow-5: #EE9109;
 $yellow-10: #FFA623;
 $yellow-50: #FFB445;
 $yellow-100: #FFBE5D;
@@ -60,9 +61,6 @@ $green-50: #3FDAA2;
 $green-100: #5AEAB2;
 $green-500: #A6FFDF;
 
-$orange-10: #ee9109;
-$orange-50: #bf7d1a;
-
 $suggested-item-color: #D5C8FF;
 
 $healer-color: #cf8229;

website/client/assets/svg/clock-white.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FFF" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m0 2c3.308 0 6 2.692 6 6s-2.692 6-6 6-6-2.692-6-6 2.692-6 6-6"/>
+        <path stroke="#FFF" stroke-linecap="round" stroke-width="2" d="M8 5v3.031L10 10"/>
+    </g>
+</svg>

website/client/components/shops/buyModal.vue

@@ -76,9 +76,14 @@
         ) {{ $t('buyNow') }}
 
     div.limitedTime(v-if="item.event && item.owned == null")
-      span.svg-icon.inline.icon-16(v-html="icons.clock")
+      span.svg-icon.inline.icon-16.clock-icon(v-html="icons.clock")
       span.limitedString {{ limitedString }}
 
+    .free-rebirth.d-flex.align-items-center(v-if='item.key === "rebirth_orb" && item.value > 0')
+      .m-auto
+        span.svg-icon.inline.icon-16.mr-2.pt-015(v-html="icons.whiteClock")
+        span(v-html='$t("nextFreeRebirth", {days: nextFreeRebirth})')
+
     div.clearfix(slot="modal-footer")
       span.balance.float-left {{ $t('yourBalance') }}
       balanceInfo(
@@ -253,6 +258,18 @@
     .gems-left {
       margin-top: .5em;
     }
+
+    .free-rebirth {
+      background-color: $yellow-5;
+      color: $white;
+      height: 2rem;
+      line-height: 16px;
+      margin: auto -1rem -1rem;
+    }
+
+    .pt-015 {
+      padding-top: 0.15rem;
+    }
   }
 </style>
 
@@ -268,6 +285,7 @@
   import svgHourglasses from 'assets/svg/hourglass.svg';
   import svgPin from 'assets/svg/pin.svg';
   import svgClock from 'assets/svg/clock.svg';
+  import svgWhiteClock from 'assets/svg/clock-white.svg';
 
   import BalanceInfo  from './balanceInfo.vue';
   import currencyMixin from './_currencyMixin';
@@ -308,6 +326,7 @@
           hourglasses: svgHourglasses,
           pin: svgPin,
           clock: svgClock,
+          whiteClock: svgWhiteClock,
         }),
 
         selectedAmountToBuy: 1,
@@ -360,6 +379,9 @@
       notEnoughCurrency () {
         return !this.enoughCurrency(this.getPriceClass(), this.item.value * this.selectedAmountToBuy);
       },
+      nextFreeRebirth () {
+        return 45 - moment().diff(moment(this.user.flags.lastFreeRebirth), 'days');
+      },
     },
     watch: {
       item: function itemChanged () {

website/common/locales/en/rebirth.json

@@ -25,5 +25,6 @@
     "rebirthName": "Orb of Rebirth",
     "reborn": "Reborn, max level <%= reLevel %>",
     "confirmReborn": "Are you sure?",
-    "rebirthComplete": "You have been reborn!"
+    "rebirthComplete": "You have been reborn!",
+    "nextFreeRebirth": "<strong><%= days %> days</strong> until <strong>FREE</strong> Orb of Rebirth"
 }