Discource-C
/
discourse-subscriptions
mirror of https://github.com/discourse/discourse-subscriptions.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Make styling consistent with everything else (#134)

This commit is contained in:
Bianca Nenciu 2022-10-03 16:14:32 +03:00 committed by GitHub
parent a58743e376
commit c00e539304
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/javascripts/discourse/components/payment-plan.js
View File

@ -4,6 +4,8 @@ import discourseComputed from "discourse-common/utils/decorators";
const RECURRING = "recurring"; const RECURRING = "recurring";
export default Component.extend({ export default Component.extend({
tagName: "",
@discourseComputed("selectedPlan") @discourseComputed("selectedPlan")
selectedClass(planId) { selectedClass(planId) {
return planId === this.plan.id ? "btn-primary" : ""; return planId === this.plan.id ? "btn-primary" : "";

8
assets/javascripts/discourse/templates/components/payment-plan.hbs
View File

@ -1,6 +1,8 @@
<DButton <DButton
@action={{action "planClick"}} @class={{concat "btn-discourse-subscriptions-subscribe " selectedClass}}> @action={{action "planClick"}}
<div class="interval"> @class={{concat-class "btn-discourse-subscriptions-subscribe" selectedClass}}
>
<span class="interval">
{{#if this.recurringPlan}} {{#if this.recurringPlan}}
{{i18n {{i18n
(concat (concat
@ -11,7 +13,7 @@
{{else}} {{else}}
{{i18n "discourse_subscriptions.one_time_payment"}} {{i18n "discourse_subscriptions.one_time_payment"}}
{{/if}} {{/if}}
</div> </span>
<span class="amount"> <span class="amount">
{{format-currency this.plan.currency this.plan.amountDollars}} {{format-currency this.plan.currency this.plan.amountDollars}}

15
assets/javascripts/discourse/templates/subscribe/show.hbs
View File

@ -30,14 +30,13 @@
{{else if isAnonymous}} {{else if isAnonymous}}
{{login-required}} {{login-required}}
{{else}} {{else}}
<div class="promo-code"> {{input
{{input type="text"
type="text" name="promo_code"
name="promo_code" placeholder=(i18n "discourse_subscriptions.subscribe.promo_code")
placeholder=(i18n "discourse_subscriptions.subscribe.promo_code") value=promoCode
value=promoCode class="subscribe-promo-code"
}} }}
</div>
{{d-button {{d-button
disabled=loading disabled=loading

12
assets/stylesheets/common/subscribe.scss
View File

@ -1,10 +1,12 @@
.subscribe-buttons { .subscribe-buttons {
align-items: stretch;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: left; justify-content: left;
.btn-discourse-subscriptions-subscribe { .btn-discourse-subscriptions-subscribe {
flex-direction: column; flex-direction: column;
flex-grow: 1;
margin: 0.25em; margin: 0.25em;
padding: 1em; padding: 1em;
width: 6em; width: 6em;
@ -24,9 +26,9 @@
padding: 10px; padding: 10px;
height: 40px; height: 40px;
margin-bottom: 20px; margin-bottom: 9px;
border: 1px solid var(--primary); border: 1px solid var(--primary-medium);
background-color: var(--secondary); background-color: var(--secondary);
font-size: $base-font-size; font-size: $base-font-size;
@ -34,7 +36,9 @@
} }
.StripeElement--focus { .StripeElement--focus {
border-color: var(--tertiary);
box-shadow: shadow("focus"); box-shadow: shadow("focus");
outline: 1px solid var(--tertiary);
} }
.StripeElement--invalid { .StripeElement--invalid {
@ -44,3 +48,7 @@
.StripeElement--webkit-autofill { .StripeElement--webkit-autofill {
color: var(--quaternary); color: var(--quaternary);
} }
.subscribe-promo-code {
width: 100%;
}