Hosting Command Palette: Refresh icons (#85377)

* Use the reusable block icon to represent "Cache"

* Document icon best practices

* Use the generic settings icon as the settings icon

* Use the profile icon for account settings

* Add margin right to cache icon on hosting cards

client/components/command-palette/README.md

@@ -37,7 +37,7 @@ Please consider carefully before adding a new command to the palette. We aim to
 - Command labels should be short and descriptive and use sentence case. For example, "Add new site" instead of "Add New Site".
 - Commands should start with a verb. For example, "Add new site" instead of "New site".
 - Picking the correct verb is important. `Open` is the more generic verb, if the page has a list of elements, we can use `View`, if the user is expected to take an action we can use `Manage` or `Change`. We prefer specific verbs over generic ones.
-- We prefer to use [Gutenberg icons](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library) for root commands.
+- We prefer to use [Gutenberg icons](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library) for root commands. The icon should relate to the object (e.g. "Cache"), not the type of page (e.g. "Settings").
 - It's important to keep the same terminology and icons used elsewhere in the interace or in core.
 - We can introduce aliases, and keywords using `searchLabel`. For example. "Import a site" would be an alias of "Migrate a site" because the navigation it's under Tools → Import.
 - Most commands navigate to other pages. We can also navigate to a specific section/card inside a page. For example, "Manage cache settings" in addition to "Manage hosting configuration".

client/my-sites/hosting/cache-card/index.js

@@ -2,11 +2,11 @@ import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { Button, Card } from '@automattic/components';
 import styled from '@emotion/styled';
 import { ToggleControl } from '@wordpress/components';
+import { Icon, reusableBlock as cacheIcon } from '@wordpress/icons';
 import { localize } from 'i18n-calypso';
 import { connect } from 'react-redux';
 import CardHeading from 'calypso/components/card-heading';
 import InlineSupportLink from 'calypso/components/inline-support-link';
-import MaterialIcon from 'calypso/components/material-icon';
 import { clearWordPressCache } from 'calypso/state/hosting/actions';
 import getRequest from 'calypso/state/selectors/get-request';
 import isPrivateSite from 'calypso/state/selectors/is-private-site';
@@ -152,7 +152,7 @@ export const CacheCard = ( {
 	//autorenew
 	return (
 		<Card className="cache-card">
-			<MaterialIcon icon="autorenew" size={ 32 } />
+			<Icon class="card-icon" icon={ cacheIcon } size={ 32 } />
 			<CardHeading id="cache" size={ 20 }>
 				{ translate( 'Cache' ) }
 			</CardHeading>

client/my-sites/hosting/style.scss

@@ -6,6 +6,7 @@
 		margin-top: 0;
 	}
 
+	.card > .card-icon,
 	.card > .material-icon,
 	.card > .gridicon {
 		display: inline-block;
@@ -66,6 +67,7 @@
 			.card {
 				padding-left: 72px;
 
+				> .card-icon,
 				> .material-icon,
 				> .gridicon {
 					display: block;

client/sites-dashboard/components/wpcom-smp-commands.tsx

@@ -6,7 +6,6 @@ import {
 	backup as backupIcon,
 	brush as brushIcon,
 	chartBar as statsIcon,
-	cog as settingsIcon,
 	commentAuthorAvatar as profileIcon,
 	commentAuthorName as subscriberIcon,
 	download as downloadIcon,
@@ -21,14 +20,14 @@ import {
 	plugins as pluginsIcon,
 	plus as plusIcon,
 	postComments as postCommentsIcon,
-	settings as accountSettingsIcon,
+	settings as settingsIcon,
 	tool as toolIcon,
 	wordpress as wordpressIcon,
+	reusableBlock as cacheIcon,
 	help as helpIcon,
 } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { CommandCallBackParams } from 'calypso/components/command-palette/use-command-palette';
-import MaterialIcon from 'calypso/components/material-icon';
 import { SiteExcerptData } from 'calypso/data/sites/site-excerpt-types';
 import { navigate } from 'calypso/lib/navigate';
 import { useAddNewSiteUrl } from 'calypso/lib/paths/use-add-new-site-url';
@@ -294,7 +293,7 @@ export const useCommandsArrayWpcom = ( {
 				},
 				filter: ( site: SiteExcerptData ) => site?.is_wpcom_atomic,
 			},
-			icon: <MaterialIcon icon="autorenew" />,
+			icon: cacheIcon,
 		},
 		{
 			name: 'enableEdgeCache',
@@ -308,7 +307,7 @@ export const useCommandsArrayWpcom = ( {
 				filter: ( site: SiteExcerptData ) =>
 					site?.is_wpcom_atomic && ! site?.is_coming_soon && ! site?.is_private,
 			},
-			icon: <MaterialIcon icon="autorenew" />,
+			icon: cacheIcon,
 		},
 		{
 			name: 'disableEdgeCache',
@@ -322,7 +321,7 @@ export const useCommandsArrayWpcom = ( {
 				filter: ( site: SiteExcerptData ) =>
 					site?.is_wpcom_atomic && ! site?.is_coming_soon && ! site?.is_private,
 			},
-			icon: <MaterialIcon icon="autorenew" />,
+			icon: cacheIcon,
 		},
 		{
 			name: 'openSiteDashboard',
@@ -476,7 +475,7 @@ export const useCommandsArrayWpcom = ( {
 				close();
 				navigate( `/me/account` );
 			},
-			icon: accountSettingsIcon,
+			icon: profileIcon,
 		},
 		{
 			name: 'accessPurchases',
@@ -758,7 +757,7 @@ export const useCommandsArrayWpcom = ( {
 				},
 				filter: ( site: SiteExcerptData ) => site?.is_wpcom_atomic,
 			},
-			icon: toolIcon,
+			icon: cacheIcon,
 		},
 		{
 			name: 'changeAdminInterfaceStyle',