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" }