Task List: Cleanup styles (https://github.com/woocommerce/woocommerce-admin/pull/4627)

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;
 		}

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 ),

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">

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;

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,
 };

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;
 	}