Commit 5eea4dca881 for woocommerce
commit 5eea4dca881695f5cef68bd85df9fcbcc4fe9c51
Author: Michal Iwanow <4765119+mcliwanow@users.noreply.github.com>
Date: Fri Jun 12 09:41:32 2026 +0200
Align promo card styling with admin cards (#65660)
* Align promo card styling with admin cards
* Add changelog for promo card styling
* Scale promo card background to card height
* Match promo card border to Core cards
* Use Card component for promo card surface
* Match promo text to Inbox note typography
* Match promo dismiss button to Inbox notes
* Remove redundant promo button CSS
* Match promo title to Inbox note typography
* Fix promo CardBody type error
diff --git a/plugins/woocommerce/changelog/fix-promo-card-styling b/plugins/woocommerce/changelog/fix-promo-card-styling
new file mode 100644
index 00000000000..55ea887cc8a
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-promo-card-styling
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Align Woo Home in-app promo banner styling with updated admin card patterns.
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.scss b/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.scss
index 6234faa5c70..2290eb47954 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.scss
@@ -1,26 +1,30 @@
@import "../../stylesheets/_variables.scss";
.promo-card {
- background-color: #fff;
- box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
- border-radius: 1px;
- padding: 24px;
+ .promo-card__body {
+ padding: $large-gap;
+ }
&.has-background {
+ background-color: #fbf9f6;
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzExIiBoZWlnaHQ9IjE2NCIgdmlld0JveD0iMCAwIDMxMSAxNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTM0Ni4wMjggMTA2LjQ4OEMzNjcuMzA4IDg3LjAwNjEgMzUzLjQwOSA0Mi43MDc5IDMxNC45OTcgNy41NDIxM0MyNzYuNTc2IC0yNy42MzE4IDIyOC4xODggLTQwLjM0ODQgMjA2LjkwOCAtMjAuODc0OUMxOTMuNTIgLTguNjE4NjQgMTk0LjA1OSAxMy40NzcxIDIwNS44NzUgMzYuOTI5MUMxNDYuMTkyIC0xLjIyMDUzIDgzLjE5NTQgLTEwLjcxNDggNTIuMTI4MSAxNy43MTg3QzIxLjA2OTggNDYuMTUyMSAzMS40NDA2IDEwMy44MjUgNzMuMTEyIDE1OC40NzJDNDcuNDg2IDE0Ny42NTQgMjMuMzU5NSAxNDcuMTUzIDkuOTcxODEgMTU5LjQxN0MtMTEuMzA4NCAxNzguODk5IDIuNTkxMDggMjIzLjE5NyA0MS4wMDMyIDI1OC4zNjNDNzkuNDE1MyAyOTMuNTI5IDEyNy44MTIgMzA2LjI1NCAxNDkuMDgzIDI4Ni43NzJDMTYyLjQ3MSAyNzQuNTE2IDE2MS45MzIgMjUyLjQyIDE1MC4xMTYgMjI4Ljk2OEMyMDkuNzk5IDI2Ny4xMTcgMjcyLjc5NiAyNzYuNjEyIDMwMy44NjMgMjQ4LjE3QzMzNC45MjEgMjE5LjczNyAzMjQuNTUxIDE2Mi4wNjQgMjgyLjg3OSAxMDcuNDE3QzMwOC41MDUgMTE4LjIzNCAzMzIuNjMyIDExOC43MjggMzQ2LjAxOSAxMDYuNDcxTDM0Ni4wMjggMTA2LjQ4OFoiIGZpbGw9IiNFNkUyREUiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9zdmc+);
+ background-position: right -50px bottom;
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ }
+
+ &.has-background .promo-card__body {
align-items: center;
- background: #fbf9f6 url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzExIiBoZWlnaHQ9IjE2NCIgdmlld0JveD0iMCAwIDMxMSAxNjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTM0Ni4wMjggMTA2LjQ4OEMzNjcuMzA4IDg3LjAwNjEgMzUzLjQwOSA0Mi43MDc5IDMxNC45OTcgNy41NDIxM0MyNzYuNTc2IC0yNy42MzE4IDIyOC4xODggLTQwLjM0ODQgMjA2LjkwOCAtMjAuODc0OUMxOTMuNTIgLTguNjE4NjQgMTk0LjA1OSAxMy40NzcxIDIwNS44NzUgMzYuOTI5MUMxNDYuMTkyIC0xLjIyMDUzIDgzLjE5NTQgLTEwLjcxNDggNTIuMTI4MSAxNy43MTg3QzIxLjA2OTggNDYuMTUyMSAzMS40NDA2IDEwMy44MjUgNzMuMTEyIDE1OC40NzJDNDcuNDg2IDE0Ny42NTQgMjMuMzU5NSAxNDcuMTUzIDkuOTcxODEgMTU5LjQxN0MtMTEuMzA4NCAxNzguODk5IDIuNTkxMDggMjIzLjE5NyA0MS4wMDMyIDI1OC4zNjNDNzkuNDE1MyAyOTMuNTI5IDEyNy44MTIgMzA2LjI1NCAxNDkuMDgzIDI4Ni43NzJDMTYyLjQ3MSAyNzQuNTE2IDE2MS45MzIgMjUyLjQyIDE1MC4xMTYgMjI4Ljk2OEMyMDkuNzk5IDI2Ny4xMTcgMjcyLjc5NiAyNzYuNjEyIDMwMy44NjMgMjQ4LjE3QzMzNC45MjEgMjE5LjczNyAzMjQuNTUxIDE2Mi4wNjQgMjgyLjg3OSAxMDcuNDE3QzMwOC41MDUgMTE4LjIzNCAzMzIuNjMyIDExOC43MjggMzQ2LjAxOSAxMDYuNDcxTDM0Ni4wMjggMTA2LjQ4OFoiIGZpbGw9IiNFNkUyREUiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9zdmc+) no-repeat right -50px top -20px;
- border: none;
- box-shadow: none;
display: flex;
flex-direction: row;
- gap: 12px;
+ gap: $medium-gap;
justify-content: space-between;
}
- &.wide {
+ &.wide .promo-card__body {
display: flex;
flex-direction: column;
- gap: 24px;
+ gap: $large-gap;
justify-content: space-between;
.promo-content-image {
@@ -43,9 +47,9 @@
}
.promo-content {
- .promo-text:last-child {
- margin-bottom: 0;
- }
+ display: flex;
+ flex-direction: column;
+ gap: $small-gap;
}
.promo-image {
@@ -60,11 +64,16 @@
.promo-content-links {
display: flex;
flex-direction: column;
+ gap: $medium-gap;
+
+ .promo-links {
+ margin-top: 0;
+ }
}
.promo-content-image {
display: flex;
- gap: 24px;
+ gap: $large-gap;
justify-content: space-between;
}
@@ -73,52 +82,59 @@
align-self: stretch;
display: flex;
flex-direction: row;
- gap: 8px;
+ gap: $small-gap;
justify-content: flex-start;
- margin-top: 15px;
+ margin-top: $medium-gap;
}
.promo-title {
- font-size: 20px;
+ color: #1e1e1e;
+ font-size: 16px;
+ font-style: normal;
font-weight: normal;
- margin-bottom: 8px;
- margin-top: 0;
+ line-height: 24px;
+ margin: 0;
}
.promo-text {
+ color: $gray-700;
font-size: 14px;
- color: $gray-800;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 20px;
+ text-wrap: pretty;
+
+ p {
+ color: inherit;
+ font-size: inherit;
+ font-style: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+ margin-top: 0;
+ text-wrap: inherit;
+ }
+
+ p:last-child {
+ margin-bottom: 0;
+ }
}
-.promo-cta {
- background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #0073aa));
- border-radius: 2px;
- color: var(--wp-components-color-accent-inverted, #fff);
- display: flex;
- padding: 10px 15px;
- text-decoration: none;
+.promo-cta,
+.promo-cta-link {
white-space: nowrap;
}
-.promo-cta:hover {
- background-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #005a8a));
- color: #fff;
-}
+.promo-cta-link.woocommerce-admin-dismiss-notification {
+ color: $gray-700;
-.promo-cta-link {
- align-items: center;
- align-self: stretch;
- color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #0073aa));
- display: flex;
- justify-content: center;
- padding: var(--grid-unit-10, 8px) var(--grid-unit-20, 16px);
- white-space: nowrap;
+ &:hover {
+ box-shadow: inset 0 0 0 1px $gray-700;
+ }
}
// WooCommerce > Extensions
.woocommerce-admin-page__extensions {
.promo-card {
- border-radius: 4px;
margin-bottom: 40px;
width: 100%;
}
@@ -129,9 +145,6 @@
.promo-card {
margin-bottom: 24px;
}
- .promo-title {
- font-size: 16px;
- }
}
@media screen and (min-width: 385px) {
@@ -143,13 +156,11 @@
@media screen and (min-width: $breakpoint-small) {
.promo-card {
- &.has-background {
- gap: 24px;
+ &.has-background .promo-card__body {
+ gap: $large-gap;
}
- }
- .has-background {
- .promo-image {
+ &.has-background .promo-image {
width: 250px;
}
}
@@ -157,7 +168,7 @@
@media screen and (min-width: $breakpoint-medium) {
.promo-card {
- &.wide {
+ &.wide .promo-card__body {
flex-direction: row;
.promo-links {
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.tsx
index 7d3b46c1993..56c478a1553 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { Button } from '@wordpress/components';
+import { Button, Card, CardBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { createElement, useEffect, useState } from '@wordpress/element';
import { recordEvent } from '@woocommerce/tracks';
@@ -92,11 +92,15 @@ const PromoCard = ( {
<Button
className="promo-cta"
href={ promotion.cta_link ?? '' }
+ variant="secondary"
onClick={ handleClick }
>
{ promotion.cta_label?.en_US ?? '' }
</Button>
- <Button className="promo-cta-link" onClick={ handleDismiss }>
+ <Button
+ className="promo-cta-link woocommerce-admin-dismiss-notification"
+ onClick={ handleDismiss }
+ >
{ __( 'Dismiss', 'woocommerce' ) }
</Button>
</div>
@@ -122,25 +126,27 @@ const PromoCard = ( {
}
return (
- <div className={ classNames }>
- { promotion?.style === 'has-background' ? (
- <>
- <div className="promo-content-links">
- { content }
- { links }
- </div>
- { getImage() }
- </>
- ) : (
- <>
- <div className="promo-content-image">
- { content }
+ <Card className={ classNames }>
+ <CardBody className="promo-card__body">
+ { promotion?.style === 'has-background' ? (
+ <>
+ <div className="promo-content-links">
+ { content }
+ { links }
+ </div>
{ getImage() }
- </div>
- { links }
- </>
- ) }
- </div>
+ </>
+ ) : (
+ <>
+ <div className="promo-content-image">
+ { content }
+ { getImage() }
+ </div>
+ { links }
+ </>
+ ) }
+ </CardBody>
+ </Card>
);
};