From c938b66ee74baeeadfb456976ac934ea858c8677 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 19 Jun 2020 12:13:41 +1200
Subject: [PATCH] Task List: Cleanup styles
 (https://github.com/woocommerce/woocommerce-admin/pull/4627)

---
 plugins/woocommerce-admin/client/homescreen/style.scss |  1 +
 plugins/woocommerce-admin/client/quick-links/index.js  |  2 +-
 plugins/woocommerce-admin/client/task-list/index.js    |  4 ++++
 plugins/woocommerce-admin/client/task-list/style.scss  | 10 ++++++++++
 .../packages/components/src/list/index.js              |  5 ++++-
 .../packages/components/src/list/style.scss            |  5 +----
 6 files changed, 21 insertions(+), 6 deletions(-)

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: <Text as="div" variant="button">{ item.title }</Text>,
 			before: <Icon icon={ item.icon } />,
 			after: <Icon icon={ chevronRight } />,
 			...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 {
 				</div>
 			);
 
+			task.title = (
+				<Text as="div" variant={ task.completed ? 'body.small' : 'button' }>{ task.title }</Text>
+			);
+
 			if ( ! task.completed ) {
 				task.after = task.time ? (
 					<span className="woocommerce-task-estimated-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;
 	}