Merge pull request #2263 from divyanshu013/master

Improved upon the Buy Gems Window for #2238

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

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

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)