Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use a Recommended pill (not a ribbon) for WooCommerce Payments (https://github.com/woocommerce/woocommerce-admin/pull/4024) 

* Use recommend pill not ribbon for wcpay

* Tweak CSS, dark purple too plz
This commit is contained in:
Allen Snook 2020-03-31 05:58:11 -07:00 committed by GitHub
parent e5bd8f3184
commit a33a65222c
2 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
plugins/woocommerce-admin/client/dashboard/task-list/style.scss
View File

@ -325,6 +325,19 @@
} }
} }
.woocommerce-task-payment__recommended-pill {
border: 1px solid $studio-gray-5;
border-radius: 28px;
display: inline-block;
font-size: 13px;
margin-left: 12px;
padding: 1px 10px;
span {
max-width: 70px;
}
}
.woocommerce-task-payment__before { .woocommerce-task-payment__before {
margin-right: $gap-larger; margin-right: $gap-larger;
@ -369,6 +382,10 @@
display: none; display: none;
} }
.woocommerce-task-payment__recommended-pill {
display: none;
}
.woocommerce-task-payment__before { .woocommerce-task-payment__before {
order: 1; order: 1;
margin-right: auto; margin-right: auto;
@ -438,7 +455,7 @@
} }
.woocommerce-task-payment-wcpay.woocommerce-task-payment-not-configured { .woocommerce-task-payment-wcpay.woocommerce-task-payment-not-configured {
background-color: $studio-woocommerce-purple-60; background-color: $studio-woocommerce-purple-80;
.woocommerce-task-payment__title { .woocommerce-task-payment__title {
color: $studio-white; color: $studio-white;

36
plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js
View File

@ -248,25 +248,39 @@ class Payments extends Component {
'woocommerce-task-payment-' + key 'woocommerce-task-payment-' + key
); );
const isRecommended =
key === this.recommendedMethod && ! isConfigured;
const showRecommendedRibbon =
isRecommended && this.recommendedMethod !== 'wcpay';
const showRecommendedPill =
isRecommended && this.recommendedMethod === 'wcpay';
return ( return (
<Card key={ key } className={ classes }> <Card key={ key } className={ classes }>
<div className="woocommerce-task-payment__before"> <div className="woocommerce-task-payment__before">
{ key === this.recommendedMethod && { showRecommendedRibbon && (
! isConfigured && ( <div className="woocommerce-task-payment__recommended-ribbon">
<div className="woocommerce-task-payment__recommended-ribbon"> <span>
<span> { __(
{ __( 'Recommended',
'Recommended', 'woocommerce-admin'
'woocommerce-admin' ) }
) } </span>
</span> </div>
</div> ) }
) }
{ before } { before }
</div> </div>
<div className="woocommerce-task-payment__text"> <div className="woocommerce-task-payment__text">
<H className="woocommerce-task-payment__title"> <H className="woocommerce-task-payment__title">
{ title } { title }
{ showRecommendedPill && (
<span className="woocommerce-task-payment__recommended-pill">
{ __(
'Recommended',
'woocommerce-admin'
) }
</span>
) }
</H> </H>
<p className="woocommerce-task-payment__content"> <p className="woocommerce-task-payment__content">
{ content } { content }