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 {
margin-right: $gap-larger;
@ -369,6 +382,10 @@
display: none;
}
.woocommerce-task-payment__recommended-pill {
display: none;
}
.woocommerce-task-payment__before {
order: 1;
margin-right: auto;
@ -438,7 +455,7 @@
}
.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 {
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
);
const isRecommended =
key === this.recommendedMethod && ! isConfigured;
const showRecommendedRibbon =
isRecommended && this.recommendedMethod !== 'wcpay';
const showRecommendedPill =
isRecommended && this.recommendedMethod === 'wcpay';
return (
<Card key={ key } className={ classes }>
<div className="woocommerce-task-payment__before">
{ key === this.recommendedMethod &&
! isConfigured && (
<div className="woocommerce-task-payment__recommended-ribbon">
<span>
{ __(
'Recommended',
'woocommerce-admin'
) }
</span>
</div>
) }
{ showRecommendedRibbon && (
<div className="woocommerce-task-payment__recommended-ribbon">
<span>
{ __(
'Recommended',
'woocommerce-admin'
) }
</span>
</div>
) }
{ before }
</div>
<div className="woocommerce-task-payment__text">
<H className="woocommerce-task-payment__title">
{ title }
{ showRecommendedPill && (
<span className="woocommerce-task-payment__recommended-pill">
{ __(
'Recommended',
'woocommerce-admin'
) }
</span>
) }
</H>
<p className="woocommerce-task-payment__content">
{ content }