From 469df6847660b75774671036d3e3108a0e45aa5d Mon Sep 17 00:00:00 2001 From: Dan Hauk Date: Fri, 15 Jan 2016 12:36:26 -0500 Subject: [PATCH 1/6] clarify upgrade discount messaging --- client/components/plans/plan-price/index.jsx | 6 +++--- client/components/plans/plan-price/style.scss | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/client/components/plans/plan-price/index.jsx b/client/components/plans/plan-price/index.jsx index 8e92e3c736e7d2..bb84427ea1597b 100644 --- a/client/components/plans/plan-price/index.jsx +++ b/client/components/plans/plan-price/index.jsx @@ -46,11 +46,11 @@ module.exports = React.createClass( { } return ( -
+
{ this.getPrice() } - { hasDiscount ? this.translate( 'for first year' ) : plan.bill_period_label } - + { hasDiscount ? this.translate( 'due today when you upgrade' ) : plan.bill_period_label } +
); } diff --git a/client/components/plans/plan-price/style.scss b/client/components/plans/plan-price/style.scss index f9a65710c9c682..85e211ca405236 100644 --- a/client/components/plans/plan-price/style.scss +++ b/client/components/plans/plan-price/style.scss @@ -12,6 +12,11 @@ color: darken( $gray, 10% ); } +.plan-header .plan-price__discount, +.plan-price__discount .plan-price__billing-period { + color: $alert-green; +} + .plan-price.is-placeholder { @include placeholder( 23% ); } From fdd9b342532b7c4897e62a60bd76fabb959a0f11 Mon Sep 17 00:00:00 2001 From: Dan Hauk Date: Fri, 15 Jan 2016 14:09:49 -0500 Subject: [PATCH 2/6] remove discount message banner at the top of the plan --- client/components/plans/plan-discount-message/index.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/client/components/plans/plan-discount-message/index.jsx b/client/components/plans/plan-discount-message/index.jsx index b6ec2c90673107..cfb2e7012eb086 100644 --- a/client/components/plans/plan-discount-message/index.jsx +++ b/client/components/plans/plan-discount-message/index.jsx @@ -42,9 +42,7 @@ module.exports = React.createClass( { }, render: function() { - if ( this.planHasDiscount() ) { - return this.planDiscountMessage(); - } else if ( this.showMostPopularMessage() ) { + if ( this.showMostPopularMessage() ) { return this.mostPopularPlan(); } return false; From ba8ad3115317381a8749d82c15fcce98032b75e6 Mon Sep 17 00:00:00 2001 From: Dan Hauk Date: Fri, 15 Jan 2016 15:10:53 -0500 Subject: [PATCH 3/6] fix wrapping issue on mobile --- client/components/plans/plan-header/style.scss | 3 +-- client/components/plans/plan-price/style.scss | 4 +--- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/client/components/plans/plan-header/style.scss b/client/components/plans/plan-header/style.scss index c802e32e764d95..6a28ada79236b6 100644 --- a/client/components/plans/plan-header/style.scss +++ b/client/components/plans/plan-header/style.scss @@ -34,7 +34,7 @@ .plan-header { background: $white; width: 100%; - padding: 24px 16px; + padding: 24px 16px 16px; position: relative; box-sizing: border-box; cursor: pointer; @@ -140,7 +140,6 @@ .plan.card { .plan-header { float: left; - height: 70px; .plan-header__title { margin: -8px 0 0 0; diff --git a/client/components/plans/plan-price/style.scss b/client/components/plans/plan-price/style.scss index 85e211ca405236..42a8acdd36c1a3 100644 --- a/client/components/plans/plan-price/style.scss +++ b/client/components/plans/plan-price/style.scss @@ -3,7 +3,6 @@ font-size: 14px; font-weight: 400; line-height: 20px; - text-align: right; } .plan-price__billing-period { @@ -48,8 +47,7 @@ @mixin plans-collapsed() { .plan-header .plan-price { - display: inline-block; - padding: 0 0 0 40px; + padding: 0 20px 0 40px; } .plan-price__billing-period { From ef29348f43a91c177207a8145254134895ae353a Mon Sep 17 00:00:00 2001 From: Dan Hauk Date: Fri, 15 Jan 2016 15:11:13 -0500 Subject: [PATCH 4/6] make discounted price on plan comparison page green too --- client/components/plans/plan-price/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/components/plans/plan-price/style.scss b/client/components/plans/plan-price/style.scss index 42a8acdd36c1a3..27086e59651a55 100644 --- a/client/components/plans/plan-price/style.scss +++ b/client/components/plans/plan-price/style.scss @@ -43,6 +43,10 @@ display: block; opacity: .7; } + + .plan-price__discount { + color: $alert-green; + } } @mixin plans-collapsed() { From e20569bdf2dac7006d7462a7f29bd4b68ff8a2dd Mon Sep 17 00:00:00 2001 From: Dan Hauk Date: Mon, 18 Jan 2016 12:13:00 -0500 Subject: [PATCH 5/6] fix height issue at smallest breakpoint --- assets/stylesheets/sections/_upgrades.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/stylesheets/sections/_upgrades.scss b/assets/stylesheets/sections/_upgrades.scss index 205d26cadf0513..6ad65015dda4a0 100644 --- a/assets/stylesheets/sections/_upgrades.scss +++ b/assets/stylesheets/sections/_upgrades.scss @@ -182,7 +182,6 @@ .plan-header { float: left; width: 100%; - height: 50px; box-sizing: border-box; .badge { From 655341e34c9d29f62100dade09afef25a78b46ec Mon Sep 17 00:00:00 2001 From: Dan Hauk Date: Mon, 18 Jan 2016 12:23:44 -0500 Subject: [PATCH 6/6] fix bug where placeholder card is shorter so the size jumps after load --- client/components/plans/plan-header/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/components/plans/plan-header/style.scss b/client/components/plans/plan-header/style.scss index 6a28ada79236b6..8f100cc50c539f 100644 --- a/client/components/plans/plan-header/style.scss +++ b/client/components/plans/plan-header/style.scss @@ -80,6 +80,10 @@ display: none; } } + + @include breakpoint( "<480px" ) { + height: 70px; + } } .plans-compare {