From b5214e95d317f3ed78efdfbae128fc650ab34138 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 19 Jun 2020 11:44:00 +1200
Subject: [PATCH] Stats Overview: Cleanup styles
 (https://github.com/woocommerce/woocommerce-admin/pull/4625)

---
 .../client/homescreen/stats-overview/index.js | 105 ++++++++++--------
 .../stats-overview/install-jetpack-cta.js     |  29 +++--
 .../homescreen/stats-overview/style.scss      |  37 ++++--
 .../client/homescreen/style.scss              |  44 ++++----
 .../client/quick-links/index.js               |  15 ++-
 .../client/task-list/index.js                 |  11 +-
 .../client/task-list/style.scss               |  10 +-
 .../components/src/ellipsis-menu/index.js     |   4 +-
 .../components/src/summary/style.scss         |   2 +-
 9 files changed, 147 insertions(+), 110 deletions(-)

diff --git a/plugins/woocommerce-admin/client/homescreen/stats-overview/index.js b/plugins/woocommerce-admin/client/homescreen/stats-overview/index.js
index 1c813b4d01b..9cf2465c637 100644
--- a/plugins/woocommerce-admin/client/homescreen/stats-overview/index.js
+++ b/plugins/woocommerce-admin/client/homescreen/stats-overview/index.js
@@ -3,14 +3,20 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-import { TabPanel } from '@wordpress/components';
+import {
+	TabPanel,
+	Card,
+	CardHeader,
+	CardBody,
+	CardFooter,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { get, xor } from 'lodash';
 
 /**
  * WooCommerce dependencies
  */
 import {
-	Card,
 	EllipsisMenu,
 	MenuItem,
 	MenuTitle,
@@ -38,7 +44,11 @@ const stats = performanceIndicators.filter( ( indicator ) => {
 
 export const StatsOverview = () => {
 	const { updateUserPreferences, ...userPrefs } = useUserPreferences();
-	const hiddenStats = get( userPrefs, [ 'homepage_stats', 'hiddenStats' ], DEFAULT_HIDDEN_STATS );
+	const hiddenStats = get(
+		userPrefs,
+		[ 'homepage_stats', 'hiddenStats' ],
+		DEFAULT_HIDDEN_STATS
+	);
 
 	const toggleStat = ( stat ) => {
 		const nextHiddenStats = xor( hiddenStats, [ stat ] );
@@ -57,9 +67,13 @@ export const StatsOverview = () => {
 
 	return (
 		<Card
-			className="woocommerce-analytics__card woocommerce-stats-overview"
-			title={ __( 'Stats overview', 'woocommerce-admin' ) }
-			menu={
+			size="large"
+			className="woocommerce-stats-overview woocommerce-homescreen-card"
+		>
+			<CardHeader size="medium">
+				<Text variant="title.small">
+					{ __( 'Stats overview', 'woocommerce-admin' ) }
+				</Text>
 				<EllipsisMenu
 					label={ __(
 						'Choose which values to display',
@@ -92,44 +106,45 @@ export const StatsOverview = () => {
 						</Fragment>
 					) }
 				/>
-			}
-		>
-			<TabPanel
-				className="woocommerce-stats-overview__tabs"
-				onSelect={ ( period ) => {
-					recordEvent( 'statsoverview_date_picker_update', {
-						period,
-					} );
-				} }
-				tabs={ [
-					{
-						title: __( 'Today', 'woocommerce-admin' ),
-						name: 'today',
-					},
-					{
-						title: __( 'Week to date', 'woocommerce-admin' ),
-						name: 'week',
-					},
-					{
-						title: __( 'Month to date', 'woocommerce-admin' ),
-						name: 'month',
-					},
-				] }
-			>
-				{ ( tab ) => (
-					<Fragment>
-						<InstallJetpackCta />
-						<StatsList
-							query={ {
-								period: tab.name,
-								compare: 'previous_period',
-							} }
-							stats={ activeStats }
-						/>
-					</Fragment>
-				) }
-			</TabPanel>
-			<div className="woocommerce-stats-overview__footer">
+			</CardHeader>
+			<CardBody>
+				<TabPanel
+					className="woocommerce-stats-overview__tabs"
+					onSelect={ ( period ) => {
+						recordEvent( 'statsoverview_date_picker_update', {
+							period,
+						} );
+					} }
+					tabs={ [
+						{
+							title: __( 'Today', 'woocommerce-admin' ),
+							name: 'today',
+						},
+						{
+							title: __( 'Week to date', 'woocommerce-admin' ),
+							name: 'week',
+						},
+						{
+							title: __( 'Month to date', 'woocommerce-admin' ),
+							name: 'month',
+						},
+					] }
+				>
+					{ ( tab ) => (
+						<Fragment>
+							<InstallJetpackCta />
+							<StatsList
+								query={ {
+									period: tab.name,
+									compare: 'previous_period',
+								} }
+								stats={ activeStats }
+							/>
+						</Fragment>
+					) }
+				</TabPanel>
+			</CardBody>
+			<CardFooter>
 				<Link
 					className="woocommerce-stats-overview__more-btn"
 					href={ getNewPath( {}, '/analytics/overview' ) }
@@ -142,7 +157,7 @@ export const StatsOverview = () => {
 				>
 					{ __( 'View detailed stats' ) }
 				</Link>
-			</div>
+			</CardFooter>
 		</Card>
 	);
 };
diff --git a/plugins/woocommerce-admin/client/homescreen/stats-overview/install-jetpack-cta.js b/plugins/woocommerce-admin/client/homescreen/stats-overview/install-jetpack-cta.js
index a41be6a9b85..eaf597cd225 100644
--- a/plugins/woocommerce-admin/client/homescreen/stats-overview/install-jetpack-cta.js
+++ b/plugins/woocommerce-admin/client/homescreen/stats-overview/install-jetpack-cta.js
@@ -97,22 +97,27 @@ function InstallJetpackCta( {
 
 	return (
 		<article className="woocommerce-stats-overview__install-jetpack-promo">
-			<H>
-				{ __( 'Get traffic stats with Jetpack', 'woocommerce-admin' ) }
-			</H>
-			<p>
-				{ __(
-					'Keep an eye on your views and visitors metrics with ' +
-						'Jetpack. Requires Jetpack plugin and a WordPress.com ' +
-						'account.',
-					'woocommerce-admin'
-				) }
-			</p>
+			<div className="woocommerce-stats-overview__install-jetpack-promo__content">
+				<H>
+					{ __(
+						'Get traffic stats with Jetpack',
+						'woocommerce-admin'
+					) }
+				</H>
+				<p>
+					{ __(
+						'Keep an eye on your views and visitors metrics with ' +
+							'Jetpack. Requires Jetpack plugin and a WordPress.com ' +
+							'account.',
+						'woocommerce-admin'
+					) }
+				</p>
+			</div>
 			<footer>
 				<Button isSecondary onClick={ install } isBusy={ isInstalling }>
 					{ getInstallJetpackText() }
 				</Button>
-				<Button onClick={ dismiss } isBusy={ isInstalling }>
+				<Button isTertiary onClick={ dismiss } isBusy={ isInstalling }>
 					{ __( 'No thanks', 'woocommerce-admin' ) }
 				</Button>
 			</footer>
diff --git a/plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss b/plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss
index f6a5cd582cf..b45c586bdc0 100644
--- a/plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss
+++ b/plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss
@@ -12,10 +12,6 @@ $promo-actions-border-bottom: $light-gray-tertiary;
 	}
 }
 
-.woocommerce-stats-overview__footer {
-	border-top: 1px solid $outer-border;
-}
-
 .woocommerce-stats-overview__more-btn {
 	display: inline-block;
 	padding: $gap;
@@ -29,6 +25,8 @@ $promo-actions-border-bottom: $light-gray-tertiary;
 
 		.components-button {
 			width: 33.33%;
+			padding-right: $gap-large;
+			padding-left: $gap-large;
 		}
 	}
 }
@@ -67,22 +65,37 @@ $promo-actions-border-bottom: $light-gray-tertiary;
 }
 
 article.woocommerce-stats-overview__install-jetpack-promo {
-	h3 {
-		margin: $gap $gap-large $gap-smaller;
+	.woocommerce-stats-overview__install-jetpack-promo__content {
+		padding: $gap $gap-large;
+	}
+
+	h2 {
+		color: $dark-gray-primary;
+		@include font-size( 16 );
+		font-style: normal;
+		line-height: 1.5;
+		font-weight: normal;
+		margin: $gap-smaller 0;
 	}
 	p {
-		margin: 0 $gap-large $gap;
+		color: $medium-gray-text;
+		font-style: normal;
+		font-weight: normal;
+		@include font-size( 14 );
+		line-height: 20px;
+		margin: $gap-smaller 0;
 	}
 	footer {
+		padding: $gap $gap-large;
 		border-top: 1px solid $promo-actions-border-top;
 		border-bottom: 1px solid $promo-actions-border-bottom;
 
-		.components-button {
-			margin: $gap $gap-smallest;
-		}
+		button {
+			margin-left: $gap-smaller;
 
-		.woocommerce-layout & button.components-button.is-secondary {
-			margin-left: $gap-large;
+			&:first-child {
+				margin-left: 0;
+			}
 		}
 	}
 }
diff --git a/plugins/woocommerce-admin/client/homescreen/style.scss b/plugins/woocommerce-admin/client/homescreen/style.scss
index 53ac9fafdc9..37d2212cb52 100644
--- a/plugins/woocommerce-admin/client/homescreen/style.scss
+++ b/plugins/woocommerce-admin/client/homescreen/style.scss
@@ -33,26 +33,6 @@
 		margin-right: -16px;
 		flex-direction: column-reverse;
 	}
-
-	.components-card {
-		.components-card__header.is-size-large {
-			display: grid;
-			// to maintain consistent height with or without an ellipsis menu
-			min-height: 63px;
-			// to match alignment of `Card` from `@woocommerce/components`
-			padding: $gap-small $gap;
-
-			// IE doesn't support `align-items` on grid container
-			& > * {
-				align-self: center;
-			}
-
-			h2 {
-				// to match height of `Card` from `@woocommerce/components`
-				margin: 0;
-			}
-		}
-	}
 }
 .woocommerce-homescreen-column {
 	width: 50%;
@@ -70,3 +50,27 @@
 	height: 225px;
 	background-color: #6495ed;
 }
+
+.woocommerce-homescreen-card {
+	.components-card__header.is-size-large,
+	.components-card__header.is-size-medium {
+		min-height: 63px;
+		min-height: unset;
+		display: grid;
+		grid-template-columns: auto 24px;
+
+		// IE doesn't support `align-items` on grid container
+		& > * {
+			align-self: center;
+		}
+	}
+
+	.components-card__body.is-size-large {
+		padding: 0;
+	}
+
+	.components-card__footer.is-size-large {
+		padding: 0 $gap-smaller;
+	}
+}
+
diff --git a/plugins/woocommerce-admin/client/quick-links/index.js b/plugins/woocommerce-admin/client/quick-links/index.js
index fcd724ca2f3..2721d77855c 100644
--- a/plugins/woocommerce-admin/client/quick-links/index.js
+++ b/plugins/woocommerce-admin/client/quick-links/index.js
@@ -2,7 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardBody, CardHeader } from '@wordpress/components';
+import {
+	Card,
+	CardBody,
+	CardHeader,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import {
 	Icon,
 	megaphone,
@@ -22,7 +27,7 @@ import { partial } from 'lodash';
  * WooCommerce dependencies
  */
 import { getSetting } from '@woocommerce/wc-admin-settings';
-import { H, List } from '@woocommerce/components';
+import { List } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -167,8 +172,10 @@ const QuickLinks = ( props ) => {
 
 	return (
 		<Card size="large" className="woocommerce-quick-links">
-			<CardHeader>
-				<H>{ __( 'Store management', 'woocommerce-admin' ) }</H>
+			<CardHeader size="medium">
+				<Text variant="title.small">
+					{ __( 'Store management', 'woocommerce-admin' ) }
+				</Text>
 			</CardHeader>
 			<CardBody>
 				<List
diff --git a/plugins/woocommerce-admin/client/task-list/index.js b/plugins/woocommerce-admin/client/task-list/index.js
index 1b01f9627cd..6d23265683e 100644
--- a/plugins/woocommerce-admin/client/task-list/index.js
+++ b/plugins/woocommerce-admin/client/task-list/index.js
@@ -12,6 +12,7 @@ import {
 	CardBody,
 	CardHeader,
 	Modal,
+	__experimentalText as Text,
 } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 import { Icon, check, chevronRight } from '@wordpress/icons';
@@ -19,7 +20,7 @@ import { Icon, check, chevronRight } from '@wordpress/icons';
 /**
  * WooCommerce dependencies
  */
-import { H, List, EllipsisMenu } from '@woocommerce/components';
+import { List, EllipsisMenu } from '@woocommerce/components';
 import { updateQueryString } from '@woocommerce/navigation';
 import {
 	PLUGINS_STORE_NAME,
@@ -348,20 +349,20 @@ class TaskDashboard extends Component {
 						<Fragment>
 							<Card
 								size="large"
-								className="woocommerce-task-card"
+								className="woocommerce-task-card woocommerce-homescreen-card"
 							>
 								<progress
 									className={ progressBarClass }
 									max={ listTasks.length }
 									value={ numCompleteTasks }
 								/>
-								<CardHeader>
-									<H>
+								<CardHeader size="medium">
+									<Text variant="title.small">
 										{ __(
 											'Finish setup',
 											'woocommerce-admin'
 										) }
-									</H>
+									</Text>
 									{ this.renderMenu() }
 								</CardHeader>
 								<CardBody>
diff --git a/plugins/woocommerce-admin/client/task-list/style.scss b/plugins/woocommerce-admin/client/task-list/style.scss
index 64ecf3c8a33..8ad0d949400 100644
--- a/plugins/woocommerce-admin/client/task-list/style.scss
+++ b/plugins/woocommerce-admin/client/task-list/style.scss
@@ -5,17 +5,9 @@
 
 	.woocommerce-task-dashboard__container {
 		.woocommerce-task-card {
-			.components-card__header.is-size-large {
-				min-height: unset;
+			.components-card__header.is-size-medium {
 				padding-top: 0;
-				display: grid;
-				grid-template-columns: auto 24px;
 			}
-
-			.components-card__body.is-size-large {
-				padding: 0;
-			}
-
 			.woocommerce-list__item:not(.is-complete) {
 				.woocommerce-task__icon {
 					border: 1px solid $core-grey-light-500;
diff --git a/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/index.js b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/index.js
index 942bb08615c..2d8fb91aea0 100644
--- a/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/index.js
@@ -4,7 +4,7 @@
 import { Component } from '@wordpress/element';
 import classnames from 'classnames';
 import { Button, Dropdown, NavigableMenu } from '@wordpress/components';
-import { Icon, moreVertical } from '@wordpress/icons';
+import { Icon, more } from '@wordpress/icons';
 import PropTypes from 'prop-types';
 
 /**
@@ -33,7 +33,7 @@ class EllipsisMenu extends Component {
 					title={ label }
 					aria-expanded={ isOpen }
 				>
-					<Icon icon={ moreVertical } />
+					<Icon icon={ more } />
 				</Button>
 			);
 		};
diff --git a/plugins/woocommerce-admin/packages/components/src/summary/style.scss b/plugins/woocommerce-admin/packages/components/src/summary/style.scss
index 0d6b7ebcd8d..a3aef304b3c 100644
--- a/plugins/woocommerce-admin/packages/components/src/summary/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/summary/style.scss
@@ -260,7 +260,7 @@ $border: $light-gray-tertiary;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	padding: $spacing;
+	padding: $gap-large;
 	background-color: $core-grey-light-100;
 	border-bottom: 1px solid $border;
 	border-right: 1px solid $border;