Clean up Jetpack CTA styles to use base component styles (https://github.com/woocommerce/woocommerce-admin/pull/4562)

Co-authored-by: Rebecca Scott <me@becdetat.com>
This commit is contained in:
Bec Scott 2020-06-16 11:39:45 +10:00 committed by GitHub
parent 4a73d136de
commit 21aa058a67
2 changed files with 6 additions and 26 deletions

View File

@ -109,7 +109,7 @@ function InstallJetpackCta( {
) }
</p>
<footer>
<Button isPrimary onClick={ install } isBusy={ isInstalling }>
<Button isSecondary onClick={ install } isBusy={ isInstalling }>
{ getInstallJetpackText() }
</Button>
<Button onClick={ dismiss } isBusy={ isInstalling }>

View File

@ -67,40 +67,20 @@ $promo-actions-border: $core-grey-light-500;
article.woocommerce-stats-overview__install-jetpack-promo {
h3 {
margin: 16px 24px 8px;
margin: $gap $gap-large $gap-smaller;
}
p {
margin: 0 24px 16px;
margin: 0 $gap-large $gap;
}
footer {
border-top: 1px solid $promo-actions-border;
.components-button {
margin: 16px 4px;
&.is-busy {
background-image: linear-gradient(-45deg, color($theme-color tint(40%)) 28%, #fff 0, #fff 72%, color($theme-color tint(40%)) 0);
cursor: progress;
color: color($theme-color tint(20%));
}
margin: $gap $gap-smallest;
}
.woocommerce-layout & button.components-button.is-button.is-primary {
margin-left: 24px;
background: transparent;
border: 1px solid $theme-color;
&:hover,
&:focus {
color: $core-grey-dark-500;
background-color: #fafafa;
border-color: #999;
}
&.is-busy:not(:disabled) {
background-image: linear-gradient(-45deg, $theme-color 28%, color($theme-color shade(20%)) 0, color($theme-color shade(20%)) 72%, $theme-color 0) !important;
color: $theme-color;
}
.woocommerce-layout & button.components-button.is-secondary {
margin-left: $gap-large;
}
}
}