diff --git a/app/styles/play/modal/buy-gems-modal.sass b/app/styles/play/modal/buy-gems-modal.sass index 8552cc411..7f0e1683c 100644 --- a/app/styles/play/modal/buy-gems-modal.sass +++ b/app/styles/play/modal/buy-gems-modal.sass @@ -1,8 +1,23 @@ +@import "app/styles/mixins" + #buy-gems-modal + //- Header + + h1 + position: absolute + left: 164px + top: -70px + margin: 0 + width: 450px + text-align: center + color: rgb(254,188,68) + font-size: 38px + text-shadow: black 4px 4px 0, black -4px -4px 0, black 4px -4px 0, black -4px 4px 0, black 4px 0px 0, black 0px -4px 0, black -4px 0px 0, black 0px 4px 0 + //- Clear modal defaults .modal-dialog - margin: 100px auto 0 auto + margin: 150px auto 0 auto padding: 0 width: 820px height: 460px @@ -14,6 +29,24 @@ top: -157px left: -2px + //- Close modal button + + #close-modal + position: absolute + left: 612px + top: -80px + width: 60px + height: 60px + color: white + text-align: center + font-size: 30px + padding-top: 15px + cursor: pointer + @include rotate(-3deg) + + &:hover + color: yellow + //- Products #products diff --git a/app/templates/play/modal/buy-gems-modal.jade b/app/templates/play/modal/buy-gems-modal.jade index 701ecc0aa..d9391dd2f 100644 --- a/app/templates/play/modal/buy-gems-modal.jade +++ b/app/templates/play/modal/buy-gems-modal.jade @@ -1,5 +1,6 @@ .modal-dialog .modal-content + if state === 'purchasing' .alert.alert-info(data-i18n="buy_gems.purchasing") @@ -8,7 +9,8 @@ else img(src="/images/pages/play/modal/buy-gems-background.png")#buy-gems-background - + h1(data-i18n="play.buy_gems") + #products for product in products .product @@ -35,3 +37,6 @@ span(data-i18n="buy_gems.recovered") button.close(type="button" data-dismiss="alert") span(aria-hidden="true") × + + div#close-modal + span.glyphicon.glyphicon-remove diff --git a/app/views/play/modal/BuyGemsModal.coffee b/app/views/play/modal/BuyGemsModal.coffee index 2a3539b50..1032a6523 100644 --- a/app/views/play/modal/BuyGemsModal.coffee +++ b/app/views/play/modal/BuyGemsModal.coffee @@ -21,6 +21,7 @@ module.exports = class BuyGemsModal extends ModalView events: 'click .product button': 'onClickProductButton' + 'click #close-modal': 'hide' constructor: (options) -> super(options) diff --git a/public/images/pages/play/modal/buy-gems-background.png b/public/images/pages/play/modal/buy-gems-background.png new file mode 100644 index 000000000..fadecf6dc Binary files /dev/null and b/public/images/pages/play/modal/buy-gems-background.png differ