diff --git a/plugins/woocommerce-admin/client/homescreen/style.scss b/plugins/woocommerce-admin/client/homescreen/style.scss
index 37d2212cb52..20dc0f8cbe7 100644
--- a/plugins/woocommerce-admin/client/homescreen/style.scss
+++ b/plugins/woocommerce-admin/client/homescreen/style.scss
@@ -60,6 +60,7 @@
grid-template-columns: auto 24px;
// IE doesn't support `align-items` on grid container
+
& > * {
align-self: center;
}
diff --git a/plugins/woocommerce-admin/client/quick-links/index.js b/plugins/woocommerce-admin/client/quick-links/index.js
index 2721d77855c..bb39c2dcc7d 100644
--- a/plugins/woocommerce-admin/client/quick-links/index.js
+++ b/plugins/woocommerce-admin/client/quick-links/index.js
@@ -157,7 +157,7 @@ function getLinkTypeAndHref( item ) {
function getListItems( props ) {
return getItems( props ).map( ( item ) => {
return {
- title: item.title,
+ title: { item.title },
before: ,
after: ,
...getLinkTypeAndHref( item ),
diff --git a/plugins/woocommerce-admin/client/task-list/index.js b/plugins/woocommerce-admin/client/task-list/index.js
index 6d23265683e..f9a719a9bbd 100644
--- a/plugins/woocommerce-admin/client/task-list/index.js
+++ b/plugins/woocommerce-admin/client/task-list/index.js
@@ -313,6 +313,10 @@ class TaskDashboard extends Component {
);
+ task.title = (
+ { task.title }
+ );
+
if ( ! task.completed ) {
task.after = task.time ? (
diff --git a/plugins/woocommerce-admin/client/task-list/style.scss b/plugins/woocommerce-admin/client/task-list/style.scss
index 8ad0d949400..4e2062d4d91 100644
--- a/plugins/woocommerce-admin/client/task-list/style.scss
+++ b/plugins/woocommerce-admin/client/task-list/style.scss
@@ -15,6 +15,12 @@
}
}
+ .woocommerce-list__item.is-complete {
+ .woocommerce-list__item-title {
+ color: $medium-gray-text;
+ }
+ }
+
.woocommerce-list__item-before .woocommerce-task__icon {
border-radius: 50%;
width: 32px;
@@ -34,6 +40,10 @@
}
}
+ .woocommerce-task-estimated-time {
+ color: $medium-gray-text;
+ }
+
.woocommerce-card.is-narrow {
max-width: 680px;
margin-left: auto;
diff --git a/plugins/woocommerce-admin/packages/components/src/list/index.js b/plugins/woocommerce-admin/packages/components/src/list/index.js
index a17d22a9c7a..23e952fbbb0 100644
--- a/plugins/woocommerce-admin/packages/components/src/list/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/list/index.js
@@ -149,7 +149,10 @@ List.propTypes = {
/**
* Title displayed for the list item.
*/
- title: PropTypes.string.isRequired,
+ title: PropTypes.oneOfType( [
+ PropTypes.string,
+ PropTypes.node,
+ ] ),
} )
).isRequired,
};
diff --git a/plugins/woocommerce-admin/packages/components/src/list/style.scss b/plugins/woocommerce-admin/packages/components/src/list/style.scss
index f91733ef017..472ef415d9b 100644
--- a/plugins/woocommerce-admin/packages/components/src/list/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/list/style.scss
@@ -17,7 +17,7 @@
width: 100%;
display: flex;
align-items: center;
- padding: $gap;
+ padding: $gap $gap-large;
&:focus {
box-shadow: inset 0 0 0 1px $studio-wordpress-blue, inset 0 0 0 2px $studio-white;
@@ -25,9 +25,6 @@
}
.woocommerce-list__item-title {
- display: block;
- font-size: 16px;
- line-height: 22px;
color: $studio-gray-90;
}