Commit 4df8f89d86f for woocommerce
commit 4df8f89d86ff98a3bb22faf6e8e6ca1f874d21c6
Author: Poli Gilad <83961704+poligilad-auto@users.noreply.github.com>
Date: Tue Jul 7 16:25:40 2026 +0200
Improve Woo Home dashboard card visuals (#66198)
* Polish Woo Home dashboard cards
* Add changelog entries for Woo Home polish
* Update setup checklist e2e menu label
* Fix setup checklist e2e menu target
* Stabilize setup checklist menu e2e
* Keep task progress header description clear of the ellipsis toggle
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Peter Petrov <peter.petrov89@gmail.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
diff --git a/packages/js/experimental/changelog/tweak-woo-home-dashboard-task-styles b/packages/js/experimental/changelog/tweak-woo-home-dashboard-task-styles
new file mode 100644
index 00000000000..fc18cf072e6
--- /dev/null
+++ b/packages/js/experimental/changelog/tweak-woo-home-dashboard-task-styles
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Polish experimental task and inbox note spacing used by Woo Home dashboard cards.
diff --git a/packages/js/experimental/src/experimental-list/task-item/style.scss b/packages/js/experimental/src/experimental-list/task-item/style.scss
index d3c5ebf5dce..b84b9c96586 100644
--- a/packages/js/experimental/src/experimental-list/task-item/style.scss
+++ b/packages/js/experimental/src/experimental-list/task-item/style.scss
@@ -142,15 +142,15 @@ $task-alert-yellow: #f0b849;
.woocommerce-task-list__item-before .woocommerce-task__icon {
border-radius: 50%;
- width: 32px;
- height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
}
.woocommerce-task-list__item-before .woocommerce-task__icon svg {
fill: $white;
- position: relative;
- top: 4px;
- left: 5px;
}
&.complete {
diff --git a/packages/js/experimental/src/inbox-note/style.scss b/packages/js/experimental/src/inbox-note/style.scss
index 05c67fcec5d..be29217b3f4 100644
--- a/packages/js/experimental/src/inbox-note/style.scss
+++ b/packages/js/experimental/src/inbox-note/style.scss
@@ -51,7 +51,7 @@
font-style: normal;
line-height: 1.5;
font-weight: bold;
- margin: $gap-smaller 0;
+ margin: $gap-smaller 0 $gap-smallest;
.is-placeholder & {
& > div {
diff --git a/plugins/woocommerce/changelog/tweak-woo-home-dashboard-visual-polish b/plugins/woocommerce/changelog/tweak-woo-home-dashboard-visual-polish
new file mode 100644
index 00000000000..eb2510bc0d3
--- /dev/null
+++ b/plugins/woocommerce/changelog/tweak-woo-home-dashboard-visual-polish
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Polish Woo Home dashboard card spacing, menus, task list states, and mobile alignment.
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox.scss b/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox.scss
index 9d7d204601d..0e7490704a4 100644
--- a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox.scss
+++ b/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/inbox.scss
@@ -1,5 +1,11 @@
.woocommerce-layout__activity-panel-content {
+ .woocommerce-abbreviated-card,
+ .woocommerce-homepage-notes-wrapper .components-card,
+ .woocommerce-inbox-message {
+ border-radius: 0;
+ }
+
.woocommerce-abbreviated-notifications {
border-top: 1px solid $gray-200;
& > div {
diff --git a/plugins/woocommerce/client/admin/client/homescreen/activity-panel/style.scss b/plugins/woocommerce/client/admin/client/homescreen/activity-panel/style.scss
index f6ac3015a60..3bb95274858 100644
--- a/plugins/woocommerce/client/admin/client/homescreen/activity-panel/style.scss
+++ b/plugins/woocommerce/client/admin/client/homescreen/activity-panel/style.scss
@@ -1,10 +1,15 @@
.woocommerce-homescreen .woocommerce-activity-panel {
- background: transparent;
+ background: $studio-white;
border: 0;
+ border-radius: 8px;
+ box-shadow: 0 0 0 1px rgba($black, 0.1);
+ overflow: hidden;
.components-panel__body {
- background: #fff;
- border: 1px solid $gray-200;
+ background: transparent;
+ border: 0;
+ border-bottom: 1px solid $gray-200;
+ margin-top: 0;
&:first-child {
border-top-left-radius: 8px;
@@ -12,6 +17,7 @@
}
&:last-child {
+ border-bottom: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
@@ -41,7 +47,7 @@
}
&.components-panel > .components-panel__body:last-child {
- border-bottom: 1px solid $gray-200;
+ border-bottom: 0;
}
.components-panel__row {
@@ -60,6 +66,15 @@
}
}
+ .components-panel__body-toggle {
+ min-height: 69px;
+ padding-left: $gap-large;
+
+ .components-panel__arrow {
+ right: $gap-large;
+ }
+ }
+
.woocommerce-activity-panel {
margin-bottom: $gap-large;
}
diff --git a/plugins/woocommerce/client/admin/client/homescreen/stats-overview/index.js b/plugins/woocommerce/client/admin/client/homescreen/stats-overview/index.js
index f88b80376ec..86f7f22f1c6 100644
--- a/plugins/woocommerce/client/admin/client/homescreen/stats-overview/index.js
+++ b/plugins/woocommerce/client/admin/client/homescreen/stats-overview/index.js
@@ -4,14 +4,18 @@
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { Fragment } from '@wordpress/element';
-import { TabPanel, Card, CardHeader, CardFooter } from '@wordpress/components';
-import { get, xor } from 'lodash';
import {
- EllipsisMenu,
+ TabPanel,
+ Card,
+ CardHeader,
+ CardFooter,
+ DropdownMenu,
+ MenuGroup,
MenuItem,
- MenuTitle,
- Link,
-} from '@woocommerce/components';
+} from '@wordpress/components';
+import { check, moreVertical } from '@wordpress/icons';
+import { get, xor } from 'lodash';
+import { Link } from '@woocommerce/components';
import { useUserPreferences, pluginsStore } from '@woocommerce/data';
import { getNewPath } from '@woocommerce/navigation';
import { recordEvent } from '@woocommerce/tracks';
@@ -81,16 +85,21 @@ export const StatsOverview = () => {
>
<CardHeader size="medium">
<HeaderText />
- <EllipsisMenu
+ <DropdownMenu
+ icon={ moreVertical }
label={ __(
'Choose which values to display',
'woocommerce'
) }
- renderContent={ () => (
- <Fragment>
- <MenuTitle>
- { __( 'Display stats:', 'woocommerce' ) }
- </MenuTitle>
+ popoverProps={ { placement: 'bottom-end' } }
+ toggleProps={ {
+ className: 'woocommerce-ellipsis-menu__toggle',
+ } }
+ >
+ { () => (
+ <MenuGroup
+ label={ __( 'Display stats', 'woocommerce' ) }
+ >
{ stats.map( ( item ) => {
const checked = ! hiddenStats.includes(
item.stat
@@ -98,21 +107,23 @@ export const StatsOverview = () => {
return (
<MenuItem
- checked={ checked }
- isCheckbox
- isClickable
+ className="woocommerce-stats-overview__dropdown-item"
+ icon={ check }
+ iconPosition="left"
+ isSelected={ checked }
key={ item.stat }
- onInvoke={ () =>
+ onClick={ () =>
toggleStat( item.stat )
}
+ role="menuitemcheckbox"
>
{ item.label }
</MenuItem>
);
} ) }
- </Fragment>
+ </MenuGroup>
) }
- />
+ </DropdownMenu>
</CardHeader>
<TabPanel
className="woocommerce-stats-overview__tabs"
diff --git a/plugins/woocommerce/client/admin/client/homescreen/stats-overview/style.scss b/plugins/woocommerce/client/admin/client/homescreen/stats-overview/style.scss
index 865256761e7..e43fa2b5b72 100644
--- a/plugins/woocommerce/client/admin/client/homescreen/stats-overview/style.scss
+++ b/plugins/woocommerce/client/admin/client/homescreen/stats-overview/style.scss
@@ -7,6 +7,13 @@ $promo-actions-border-bottom: $gray-100;
.woocommerce-card__body {
padding: 0;
}
+
+ .components-card__footer {
+ justify-content: flex-start;
+ min-height: auto;
+ padding: $gap $gap-large;
+ }
+
.woocommerce-summary {
margin: 0;
}
@@ -14,7 +21,13 @@ $promo-actions-border-bottom: $gray-100;
.woocommerce-stats-overview__more-btn {
display: inline-block;
- padding: $gap;
+ padding: 0;
+}
+
+.woocommerce-stats-overview__dropdown-item[aria-checked="false"] {
+ .components-menu-items__item-icon {
+ opacity: 0;
+ }
}
.woocommerce-stats-overview__tabs {
@@ -24,9 +37,15 @@ $promo-actions-border-bottom: $gray-100;
border-bottom: 1px solid $outer-border;
.components-button {
+ border-radius: 0;
width: 33.33%;
padding-right: $gap-large;
padding-left: $gap-large;
+
+ &::before,
+ &::after {
+ border-radius: 0;
+ }
}
}
}
diff --git a/plugins/woocommerce/client/admin/client/homescreen/style.scss b/plugins/woocommerce/client/admin/client/homescreen/style.scss
index ada0dca11ab..665c7d1f58d 100644
--- a/plugins/woocommerce/client/admin/client/homescreen/style.scss
+++ b/plugins/woocommerce/client/admin/client/homescreen/style.scss
@@ -38,16 +38,26 @@
@include breakpoint( "<782px" ) {
flex-direction: column;
-
- .your-store-today {
- display: none;
- }
}
}
@include breakpoint( "<782px" ) {
- margin-left: -16px;
- margin-right: -16px;
+ box-sizing: border-box;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .woocommerce-task-progress-header,
+ h1.woocommerce-task-progress-header__title {
+ @include breakpoint( "<782px" ) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+
+ .woocommerce-ellipsis-menu__toggle .gridicon {
+ height: 20px;
+ width: 20px;
}
}
@@ -73,12 +83,12 @@
}
.woocommerce-homescreen-card {
- .components-card__header.is-size-large,
- .components-card__header.is-size-medium {
+ .components-card__header {
min-height: 63px;
min-height: unset;
display: grid;
- grid-template-columns: auto 24px;
+ grid-template-columns: auto $gap-larger;
+ padding-right: $gap;
// IE doesn't support `align-items` on grid container
@@ -87,6 +97,19 @@
}
}
+ .woocommerce-ellipsis-menu__toggle.components-button {
+ border-radius: 0;
+ height: $gap-larger;
+ min-width: $gap-larger;
+ padding: 0;
+ width: $gap-larger;
+
+ &::before,
+ &::after {
+ border-radius: 0;
+ }
+ }
+
.components-card__footer.is-size-large {
padding: 0 $gap-smaller;
}
@@ -94,4 +117,24 @@
.woocommerce-layout__inbox-panel-header.your-store-today {
display: none;
+ padding: 0;
+
+ .woocommerce-layout__inbox-title .components-text {
+ color: $gray-900;
+ font-size: 23px;
+ font-weight: 400;
+ line-height: 1.3;
+ padding: 4px 0;
+ }
+
+ .woocommerce-layout__inbox-subtitle {
+ margin-top: $gap-smaller;
+
+ .components-text {
+ color: $gray-700;
+ display: block;
+ font-size: 16px;
+ line-height: 24px;
+ }
+ }
}
diff --git a/plugins/woocommerce/client/admin/client/inbox-panel/index.js b/plugins/woocommerce/client/admin/client/inbox-panel/index.js
index 8c03e547b69..a3058a28132 100644
--- a/plugins/woocommerce/client/admin/client/inbox-panel/index.js
+++ b/plugins/woocommerce/client/admin/client/inbox-panel/index.js
@@ -3,13 +3,15 @@
*/
import { __, _n } from '@wordpress/i18n';
import { useEffect, useState, useMemo } from '@wordpress/element';
+import { EmptyContent, Section, Badge } from '@woocommerce/components';
import {
- EmptyContent,
- Section,
- Badge,
- EllipsisMenu,
-} from '@woocommerce/components';
-import { Card, CardHeader, Button, CardFooter } from '@wordpress/components';
+ Card,
+ CardHeader,
+ DropdownMenu,
+ Button,
+ CardFooter,
+} from '@wordpress/components';
+import { chevronDown, moreVertical } from '@wordpress/icons';
import { notesStore, QUERY_DEFAULTS } from '@woocommerce/data';
import { useSelect, useDispatch } from '@wordpress/data';
import { recordEvent } from '@woocommerce/tracks';
@@ -119,7 +121,10 @@ const renderNotes = ( {
const notesArray = Object.keys( notes ).map( ( key ) => notes[ key ] );
return (
- <Card size="large">
+ <Card
+ className="woocommerce-homescreen-card woocommerce-inbox-card"
+ size="large"
+ >
{ showHeader && (
<CardHeader size="medium">
<div className="woocommerce-inbox-card__header">
@@ -128,20 +133,21 @@ const renderNotes = ( {
</Text>
<Badge count={ unreadNotesCount } />
</div>
- <EllipsisMenu
- label={ __( 'Inbox Notes Options', 'woocommerce' ) }
- renderContent={ ( { onToggle } ) => (
- <div className="woocommerce-inbox-card__section-controls">
- <Button
- onClick={ () => {
- onDismissAll( true );
- onToggle();
- } }
- >
- { __( 'Dismiss all', 'woocommerce' ) }
- </Button>
- </div>
- ) }
+ <DropdownMenu
+ controls={ [
+ {
+ title: __( 'Dismiss all', 'woocommerce' ),
+ onClick: () => {
+ onDismissAll( true );
+ },
+ },
+ ] }
+ icon={ moreVertical }
+ label={ __( 'Inbox notes options', 'woocommerce' ) }
+ popoverProps={ { placement: 'bottom-end' } }
+ toggleProps={ {
+ className: 'woocommerce-ellipsis-menu__toggle',
+ } }
/>
</CardHeader>
) }
@@ -184,10 +190,12 @@ const renderNotes = ( {
size="medium"
>
<Button
- isPrimary={ true }
+ icon={ chevronDown }
+ iconPosition="right"
onClick={ () => {
loadMoreNotes();
} }
+ variant="tertiary"
>
{ notesArray.length >
DEFAULT_INBOX_QUERY.per_page
diff --git a/plugins/woocommerce/client/admin/client/inbox-panel/index.scss b/plugins/woocommerce/client/admin/client/inbox-panel/index.scss
index 63b61d8f10c..c66ea6e5dd0 100644
--- a/plugins/woocommerce/client/admin/client/inbox-panel/index.scss
+++ b/plugins/woocommerce/client/admin/client/inbox-panel/index.scss
@@ -6,6 +6,10 @@
.components-card {
overflow: hidden;
}
+
+ .woocommerce-inbox-message:last-child:not(.is-placeholder) {
+ border-bottom: none;
+ }
}
.woocommerce-layout__inbox-panel-header {
@@ -84,7 +88,7 @@
}
.woocommerce-inbox-card__footer {
- background-color: #f6f7f7;
+ background-color: $studio-white;
display: flex;
justify-content: center;
align-items: center;
diff --git a/plugins/woocommerce/client/admin/client/task-lists/components/progress-header/progress-header.scss b/plugins/woocommerce/client/admin/client/task-lists/components/progress-header/progress-header.scss
index a27d1481618..a04b43a134d 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/components/progress-header/progress-header.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/components/progress-header/progress-header.scss
@@ -13,6 +13,12 @@ $progress-complete-color: var(--wp-admin-theme-color);
font-size: 16px;
line-height: 24px;
margin-top: $gap-smaller;
+ // Reserve room for the ellipsis toggle, which is absolutely positioned at
+ // the header's right edge and $gap-larger wide. Without this the description
+ // runs under the toggle wherever the header is narrow (mobile homescreen, the
+ // 430px setup activity panel). Insetting the whole header instead would also
+ // pull the full-width progress bar off the gutter.
+ padding-right: $gap-larger;
}
.woocommerce-task-progress-header__progress-bar {
@@ -51,7 +57,29 @@ $progress-complete-color: var(--wp-admin-theme-color);
.woocommerce-card__menu {
position: absolute;
right: 0;
- top: -7px;
+ // Align the 24px icon with the paragraph while preserving a 36px focus target.
+ top: -6px;
+ width: $gap-larger;
+
+ .woocommerce-ellipsis-menu,
+ .woocommerce-ellipsis-menu__toggle {
+ height: $gap-larger;
+ }
+
+ .woocommerce-ellipsis-menu__toggle {
+ align-items: center;
+ border-radius: 0;
+ display: inline-flex;
+ justify-content: center;
+ min-width: $gap-larger;
+ padding: 0;
+ width: $gap-larger;
+
+ &::before,
+ &::after {
+ border-radius: 0;
+ }
+ }
}
// Styles for the activity/setup panel.
diff --git a/plugins/woocommerce/client/admin/client/task-lists/components/task-list-menu.tsx b/plugins/woocommerce/client/admin/client/task-lists/components/task-list-menu.tsx
index 6da0a5de88c..aee6dd4dddd 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/components/task-list-menu.tsx
+++ b/plugins/woocommerce/client/admin/client/task-lists/components/task-list-menu.tsx
@@ -2,8 +2,8 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { EllipsisMenu } from '@woocommerce/components';
+import { DropdownMenu } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
import { onboardingStore } from '@woocommerce/data';
import { useDispatch } from '@wordpress/data';
@@ -14,19 +14,25 @@ export type TaskListMenuProps = {
export const TaskListMenu = ( { id, hideTaskListText }: TaskListMenuProps ) => {
const { hideTaskList } = useDispatch( onboardingStore );
+ const label = __( 'Task list options', 'woocommerce' );
return (
<div className="woocommerce-card__menu woocommerce-card__header-item">
- <EllipsisMenu
- label={ __( 'Task List Options', 'woocommerce' ) }
- renderContent={ () => (
- <div className="woocommerce-task-card__section-controls">
- <Button onClick={ () => hideTaskList( id ) }>
- { hideTaskListText ||
- __( 'Hide this', 'woocommerce' ) }
- </Button>
- </div>
- ) }
+ <DropdownMenu
+ controls={ [
+ {
+ title:
+ hideTaskListText ||
+ __( 'Hide this', 'woocommerce' ),
+ onClick: () => hideTaskList( id ),
+ },
+ ] }
+ icon={ moreVertical }
+ label={ label }
+ popoverProps={ { placement: 'bottom-end' } }
+ toggleProps={ {
+ className: 'woocommerce-ellipsis-menu__toggle',
+ } }
/>
</div>
);
diff --git a/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/components/task-list-completed-header.scss b/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/components/task-list-completed-header.scss
index a930c370f94..8583aa09980 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/components/task-list-completed-header.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/components/task-list-completed-header.scss
@@ -1,24 +1,46 @@
$ces-feedback-height: 64px;
-.woocommerce-task-card__header .woocommerce-task-card__header-subtitle {
- color: $gray-700;
- margin-bottom: $gap-large;
+h1.woocommerce-task-progress-header__title + .woocommerce-task-dashboard__container.setup-task-list {
+ margin-top: $gap-large;
}
-.woocommerce-task-card__finished-header-image {
- max-width: 75%;
+.woocommerce-task-card.completed {
+ .components-card__header {
+ display: block;
+ padding: 0;
+ }
+
+ .woocommerce-task-card__header {
+ align-items: center;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ padding: $gap-large $gap-larger;
+ position: relative;
+ text-align: center;
+ width: 100%;
+ }
+
+ .woocommerce-task-card__header-subtitle {
+ color: $gray-700;
+ margin: $gap-smaller 0 $gap-large;
+ }
+
+ .woocommerce-task-card__finished-header-image {
+ max-width: 75%;
+ }
+
+ .woocommerce-task-card__header-menu {
+ position: absolute;
+ right: $gap;
+ top: $gap;
+ }
}
.customer-feedback-simple__container {
height: $ces-feedback-height;
}
-.woocommerce-task-card__header-menu {
- position: absolute;
- right: 0;
- top: 0;
-}
-
.woocommerce-task-card__header-ces-feedback {
height: $ces-feedback-height;
display: flex;
diff --git a/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx b/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx
index 46732b2efcb..cf538f396c1 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx
+++ b/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx
@@ -3,11 +3,11 @@
*/
import clsx from 'clsx';
import { useEffect, useState } from '@wordpress/element';
-import { EllipsisMenu } from '@woocommerce/components';
import { recordEvent } from '@woocommerce/tracks';
import { useDispatch, useSelect } from '@wordpress/data';
import { optionsStore, WEEK } from '@woocommerce/data';
-import { Button, Card, CardHeader } from '@wordpress/components';
+import { Card, CardHeader, DropdownMenu } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
import { Text } from '@woocommerce/experimental';
import {
ADMIN_INSTALL_TIMESTAMP_OPTION_NAME,
@@ -190,23 +190,28 @@ export const TaskListCompletedHeader = ( {
) }
</Text>
<div className="woocommerce-task-card__header-menu">
- <EllipsisMenu
+ <DropdownMenu
+ controls={ [
+ {
+ title: __(
+ 'Hide this',
+ 'woocommerce'
+ ),
+ onClick: () => hideTasks(),
+ },
+ ] }
+ icon={ moreVertical }
label={ __(
- 'Task List Options',
+ 'Task list options',
'woocommerce'
) }
- renderContent={ () => (
- <div className="woocommerce-task-card__section-controls">
- <Button
- onClick={ () => hideTasks() }
- >
- { __(
- 'Hide this',
- 'woocommerce'
- ) }
- </Button>
- </div>
- ) }
+ popoverProps={ {
+ placement: 'bottom-end',
+ } }
+ toggleProps={ {
+ className:
+ 'woocommerce-ellipsis-menu__toggle',
+ } }
/>
</div>
</div>
diff --git a/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/style.scss b/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/style.scss
index ede04ce1e8e..45cf147ef94 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/style.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/setup-task-list/style.scss
@@ -2,6 +2,10 @@
margin-bottom: 0;
}
+.woocommerce-homescreen .woocommerce-task-dashboard__container.setup-task-list {
+ margin-bottom: 0;
+}
+
.woocommerce-task-dashboard__container {
.woocommerce-homescreen-card {
max-width: none;
@@ -117,6 +121,9 @@
border-right: none;
border-bottom: 1px solid #e0e0e0;
}
+ li:last-child {
+ border-bottom: none;
+ }
li.is-active {
box-shadow: inset 5px 0 0 0 var(--wp-admin-theme-color);
transition: box-shadow 0.1s linear;
@@ -235,6 +242,12 @@
padding: 16px;
}
+ @at-root .woocommerce-setup-panel .woocommerce-homescreen-card,
+ .woocommerce-setup-panel .woocommerce-homescreen-card > .components-card__header,
+ .woocommerce-setup-panel .woocommerce-homescreen-card > .components-card__footer {
+ border-radius: 0;
+ }
+
.woocommerce-task-header__contents-container {
padding: 24px 40px 24px 24px;
position: relative;
diff --git a/plugins/woocommerce/client/admin/client/task-lists/task-lists.scss b/plugins/woocommerce/client/admin/client/task-lists/task-lists.scss
index a3e92652b1f..09ae0fefe4f 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/task-lists.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/task-lists.scss
@@ -17,9 +17,18 @@
.woocommerce-task-card__header {
display: flex;
+ align-items: center;
+ min-width: 0;
.components-text + .woocommerce-badge {
- margin-left: 16px;
+ margin-left: $gap;
+ }
+
+ .woocommerce-badge {
+ align-items: center;
+ display: inline-flex;
+ justify-content: center;
+ line-height: 20px;
}
}
@@ -42,6 +51,83 @@
}
}
+.woocommerce-task-dashboard__container .woocommerce-task-card {
+ .woocommerce-card__menu {
+ align-items: center;
+ display: flex;
+ height: $gap-larger;
+ justify-content: center;
+ margin-top: 0;
+ width: $gap-larger;
+
+ .woocommerce-ellipsis-menu {
+ height: $gap-larger;
+ }
+
+ .woocommerce-ellipsis-menu__toggle {
+ align-items: center;
+ display: inline-flex;
+ height: $gap-larger;
+ min-width: $gap-larger;
+
+ .gridicon {
+ display: block;
+ }
+ }
+ }
+
+ .woocommerce-task-list__item.complete {
+ .woocommerce-task-list__item-title {
+ color: var(--wp-admin-theme-color);
+ font-weight: 600;
+ line-height: 20px;
+ text-decoration: line-through;
+ }
+ }
+}
+
+.woocommerce-task-dashboard__container:not(.setup-task-list) {
+ .woocommerce-task-card {
+ .components-card__header {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ min-height: 69px;
+ }
+
+ .woocommerce-task-list__item-title {
+ font-weight: 600;
+ }
+ }
+
+ .woocommerce-task-list__item {
+ grid-template-columns: 68px minmax(0, 1fr) 68px;
+ min-height: 64px;
+ }
+
+ .woocommerce-task-list__item-before {
+ padding: $gap 0 $gap $gap-large;
+ }
+
+ .woocommerce-task-list__item-text {
+ min-width: 0;
+ padding: $gap 0;
+ }
+
+ .woocommerce-task__additional-info {
+ margin-top: $gap-smallest;
+ }
+
+ .woocommerce-task-list__item-after {
+ align-self: stretch;
+ justify-content: center;
+ padding: 0 $gap-large 0 $gap;
+ }
+
+ .woocommerce-task-list__item:not(.complete) .woocommerce-task__icon {
+ border-color: $gray-100;
+ }
+}
+
.woocommerce-task__additional-info,
.woocommerce-task__estimated-time,
.woocommerce-task-list__item-expandable-content {
diff --git a/plugins/woocommerce/tests/e2e/tests/onboarding/setup-checklist.spec.ts b/plugins/woocommerce/tests/e2e/tests/onboarding/setup-checklist.spec.ts
index a2b00ef2980..18288040691 100644
--- a/plugins/woocommerce/tests/e2e/tests/onboarding/setup-checklist.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/onboarding/setup-checklist.spec.ts
@@ -74,13 +74,14 @@ test(
} );
await test.step( 'Hide the task list', async () => {
- await page
- .getByRole( 'button', { name: 'Task List Options' } )
- .first()
- .click();
- await page
- .getByRole( 'button', { name: 'Hide setup list' } )
+ const setupTaskProgressHeader = page.locator(
+ '.woocommerce-task-progress-header'
+ );
+
+ await setupTaskProgressHeader
+ .getByRole( 'button', { name: 'Task list options' } )
.click();
+ await page.getByText( 'Hide setup list', { exact: true } ).click();
await expect(
page.getByRole( 'heading', {
name: 'Customize your store',