From ec5c51c997db5c73abb13f741bc8fe471030dc64 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 12 Oct 2021 17:04:00 +0100
Subject: [PATCH 1/2] Move the global styles reset action to a dropdown menu

---
 .../sidebar/global-styles-sidebar.js          | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
index 628932a314fa28..c1c952cd8e85fd 100644
--- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { styles } from '@wordpress/icons';
+import { styles, moreHorizontal } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -12,7 +12,7 @@ import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
 
 export default function GlobalStylesSidebar() {
-	const [ canRestart, onReset ] = useGlobalStylesReset();
+	const [ canReset, onReset ] = useGlobalStylesReset();
 
 	return (
 		<DefaultSidebar
@@ -22,21 +22,27 @@ export default function GlobalStylesSidebar() {
 			icon={ styles }
 			closeLabel={ __( 'Close global styles sidebar' ) }
 			header={
-				<>
-					<strong>{ __( 'Styles' ) }</strong>
-					<span className="edit-site-global-styles-sidebar__beta">
-						{ __( 'Beta' ) }
-					</span>
-					<Button
-						className="edit-site-global-styles-sidebar__reset-button"
-						isSmall
-						variant="tertiary"
-						disabled={ ! canRestart }
-						onClick={ onReset }
-					>
-						{ __( 'Reset to defaults' ) }
-					</Button>
-				</>
+				<Flex>
+					<FlexBlock>
+						<strong>{ __( 'Styles' ) }</strong>
+						<span className="edit-site-global-styles-sidebar__beta">
+							{ __( 'Beta' ) }
+						</span>
+					</FlexBlock>
+					<FlexItem>
+						<DropdownMenu
+							icon={ moreHorizontal }
+							label={ __( 'More Global Styles Actions' ) }
+							toggleProps={ { disabled: ! canReset } }
+							controls={ [
+								{
+									title: __( 'Reset to defaults' ),
+									onClick: onReset,
+								},
+							] }
+						/>
+					</FlexItem>
+				</Flex>
 			}
 		>
 			<GlobalStylesUI />

From edd8e1ae04463fe20d4f75ca6b87865fe32c3996 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 12 Oct 2021 17:53:17 +0100
Subject: [PATCH 2/2] Use a vertical ellipsis

---
 .../edit-site/src/components/sidebar/global-styles-sidebar.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
index c1c952cd8e85fd..daed883cbca982 100644
--- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -3,7 +3,7 @@
  */
 import { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { styles, moreHorizontal } from '@wordpress/icons';
+import { styles, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export default function GlobalStylesSidebar() {
 					</FlexBlock>
 					<FlexItem>
 						<DropdownMenu
-							icon={ moreHorizontal }
+							icon={ moreVertical }
 							label={ __( 'More Global Styles Actions' ) }
 							toggleProps={ { disabled: ! canReset } }
 							controls={ [