diff --git a/app/styles/modal/subscribe-modal.sass b/app/styles/modal/subscribe-modal.sass index 4a9efb066..c7c66c159 100644 --- a/app/styles/modal/subscribe-modal.sass +++ b/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 diff --git a/app/templates/core/subscribe-modal.jade b/app/templates/core/subscribe-modal.jade index b0eca0241..fde542d05 100644 --- a/app/templates/core/subscribe-modal.jade +++ b/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