diff --git a/website/client/assets/scss/colors.scss b/website/client/assets/scss/colors.scss
index a21990ccca..cfc0da1d78 100644
--- a/website/client/assets/scss/colors.scss
+++ b/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;
diff --git a/website/client/assets/svg/clock-white.svg b/website/client/assets/svg/clock-white.svg
new file mode 100644
index 0000000000..fdbbc32e65
--- /dev/null
+++ b/website/client/assets/svg/clock-white.svg
@@ -0,0 +1,6 @@
+
diff --git a/website/client/components/shops/buyModal.vue b/website/client/components/shops/buyModal.vue
index 12016ef0d8..c2f267cd07 100644
--- a/website/client/components/shops/buyModal.vue
+++ b/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;
+ }
}
@@ -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 () {
diff --git a/website/common/locales/en/rebirth.json b/website/common/locales/en/rebirth.json
index b39e1ff92d..b290945f78 100644
--- a/website/common/locales/en/rebirth.json
+++ b/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": "<%= days %> days until FREE Orb of Rebirth"
}