From a2a78286da700d68a564f900eb4d2fbec612a447 Mon Sep 17 00:00:00 2001
From: Nick Winter <livelily@gmail.com>
Date: Wed, 25 Feb 2015 14:24:32 -0800
Subject: [PATCH] Fixed #2407 by implementing styles for new
 subscribe-in-gem-shop design.

---
 app/styles/play/modal/buy-gems-modal.sass    | 23 +++++---------------
 app/templates/play/modal/buy-gems-modal.jade | 11 +++++-----
 app/views/play/modal/BuyGemsModal.coffee     |  2 +-
 3 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/app/styles/play/modal/buy-gems-modal.sass b/app/styles/play/modal/buy-gems-modal.sass
index e0770f2ad..6dcbbaa72 100644
--- a/app/styles/play/modal/buy-gems-modal.sass
+++ b/app/styles/play/modal/buy-gems-modal.sass
@@ -6,10 +6,10 @@
   
   h1
     position: absolute
-    left: 164px
+    left: 200px
     top: -70px
     margin: 0
-    width: 450px
+    width: 612px
     text-align: center
     color: rgb(254,188,68)
     font-size: 38px
@@ -19,7 +19,7 @@
   .modal-dialog
     margin: 150px auto 0 auto
     padding: 0
-    width: 820px
+    width: 1060px
     height: 460px
     background: none
 
@@ -33,7 +33,7 @@
 
   #close-modal
     position: absolute
-    left: 612px
+    left: 770px
     top: -80px
     width: 60px
     height: 60px
@@ -53,7 +53,7 @@
     position: absolute
     left: 55px
     top: 242px
-    width: 720px
+    width: 960px
     height: 140px
     
     .product
@@ -78,8 +78,7 @@
         width: 80%
         left: 10%
         bottom: -30px
-        
-        
+
   //- Errors
   .alert
     position: absolute
@@ -87,13 +86,3 @@
     width: 80%
     top: 20px
     border: 5px solid gray
-
-  #or-subscribe
-    position: absolute
-    right: 30px
-    top: 420px
-    font-size: 16px
-    color: #eee
-
-    button
-      min-width: 182px
diff --git a/app/templates/play/modal/buy-gems-modal.jade b/app/templates/play/modal/buy-gems-modal.jade
index e2b2ac3be..d1b6c9ea9 100644
--- a/app/templates/play/modal/buy-gems-modal.jade
+++ b/app/templates/play/modal/buy-gems-modal.jade
@@ -18,6 +18,11 @@
             h3(data-i18n=product.i18n)
             button.btn.btn-illustrated.btn-lg(value=product.id)
               span= product.price
+
+        .product
+          h4 x3500 / mo
+          h3(data-i18n="account.subscription")
+          button.start-subscription-button.btn.btn-lg.btn-illustrated.btn-success(data-i18n="subscribe.subscribe_title") Subscribe
                 
       if state === 'declined'
         #declined-alert.alert.alert-danger.alert-dismissible
@@ -40,8 +45,4 @@
             
       div#close-modal
         span.glyphicon.glyphicon-remove
-
-      #or-subscribe
-        span(data-i18n="buy_gems.or_subscribe") Or 3500 gems/mo if you...
-        br
-        button.start-subscription-button.btn.btn-lg.btn-illustrated.btn-success(data-i18n="subscribe.subscribe_title") Subscribe
+        
diff --git a/app/views/play/modal/BuyGemsModal.coffee b/app/views/play/modal/BuyGemsModal.coffee
index 9180bf078..969bb59cd 100644
--- a/app/views/play/modal/BuyGemsModal.coffee
+++ b/app/views/play/modal/BuyGemsModal.coffee
@@ -21,7 +21,7 @@ module.exports = class BuyGemsModal extends ModalView
     'stripe:received-token': 'onStripeReceivedToken'
 
   events:
-    'click .product button': 'onClickProductButton'
+    'click .product button:not(.start-subscription-button)': 'onClickProductButton'
     'click #close-modal': 'hide'
     'click .start-subscription-button': 'onClickStartSubscription'