Update subscribe modal's style to support i18n, fixes #3526

Subscribe modal: make the "parent" and "sale" buttons take only as much space as necessary and the "subscribe" button takes all the remaining space, this fixes #3526.

Here's how the new style looks:

### Before
![](http://i.imgur.com/uwt9Jed.png)
![](http://i.imgur.com/1VKdJjZ.png)

### After
![](http://i.imgur.com/2ElCHMT.png)
![](http://i.imgur.com/G4EAi1P.png)

app/styles/modal/subscribe-modal.sass

@@ -147,14 +147,23 @@
     font-family: $headings-font-family
     font-size: 18px
 
+  //- Action buttons
+
+  .subscribe-actions
+    position: absolute
+    top: 430px
+    left: 18px
+    right: 18px
+    display: flex
+
+    > button
+      height: 70px
+      margin: 0 5px
+
   //- Purchase button
 
   .purchase-button
-    position: absolute
-    right: 24px
-    width: 300px
-    height: 70px
-    top: 430px
+    flex-grow: 1
     font-size: 32px
     line-height: 42px
     border-style: solid
@@ -178,11 +187,6 @@
   //- TODO: Add hover and active effects
 
   .parent-button
-    position: absolute
-    left: 24px
-    width: 250px
-    height: 70px
-    top: 430px
     font-size: 28px
     line-height: 38px
     border-style: solid
@@ -193,11 +197,6 @@
   //- Sale button
 
   .sale-button
-    position: absolute
-    left: 290px
-    width: 115px
-    height: 70px
-    top: 430px
     font-size: 32px
     line-height: 42px
     border-style: solid
@@ -237,17 +236,17 @@ html.no-borderimage #subscribe-modal
     &:active
       padding: 9px 8px 8px 12px
       border: 0
-  
+
   .purchase-button
     background-image: url(/images/level/code_toolbar_submit_button_active.png)
     &:hover
       background-image: url(/images/level/code_toolbar_submit_button_zazz.png)
-  
+
   .parent-button
     background-image: url(/images/common/button-background-warning-active.png)
     &:hover, &:active
       background-image: url(/images/common/button-background-warning-pressed.png)
-  
+
   .sale-button
     background-image: url(/images/common/button-background-primary-active.png)
     &:hover, &:active

app/templates/core/subscribe-modal.jade

@@ -91,11 +91,12 @@
       #parents-info(data-i18n="subscribe.parents")
       #payment-methods-info(data-i18n="subscribe.payment_methods")
 
-      if !me.isOnPremiumServer()
-        button.btn.btn-lg.btn-illustrated.parent-button(data-i18n="subscribe.parent_button")
-      if view.yearProduct
-        button.btn.btn-lg.btn-illustrated.sale-button(data-i18n="[title]subscribe.sale_button_title", data-i18n="subscribe.sale_button")
-      button.btn.btn-lg.btn-illustrated.purchase-button(data-i18n="subscribe.subscribe_title")
+      .subscribe-actions
+        if !me.isOnPremiumServer()
+          button.btn.btn-lg.btn-illustrated.parent-button(data-i18n="subscribe.parent_button")
+        if view.yearProduct
+          button.btn.btn-lg.btn-illustrated.sale-button(data-i18n="[title]subscribe.sale_button_title", data-i18n="subscribe.sale_button")
+        button.btn.btn-lg.btn-illustrated.purchase-button(data-i18n="subscribe.subscribe_title")
 
       if view.state === 'declined'
         #declined-alert.alert.alert-danger.alert-dismissible