From ba0e353ae67c4e8ad13912e4c315afa238068354 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 1 Apr 2022 18:52:55 +0200
Subject: [PATCH] Global Styles: fix icon vertical alignment in palette panel

---
 packages/components/src/z-stack/styles.ts     |  3 +++
 .../src/components/global-styles/palette.js   | 27 +++++++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts
index d0bf20d38b1f4c..ec588b8442016e 100644
--- a/packages/components/src/z-stack/styles.ts
+++ b/packages/components/src/z-stack/styles.ts
@@ -19,6 +19,9 @@ export const ZStackChildView = styled.div< {
 	offsetAmount: number;
 	zIndex: number;
 } >`
+	/* TODO: split this change to a separate PR */
+	display: flex;
+
 	${ ( { isLayered, offsetAmount } ) =>
 		isLayered
 			? css( rtl( { marginLeft: offsetAmount } )() )
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index d4298d09bcbb57..ede5608767b2b0 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -7,7 +7,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
-	FlexBlock,
 	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -64,16 +63,22 @@ function Palette( { name } ) {
 							colors.length === 0 ? 'row-reverse' : 'row'
 						}
 					>
-						<FlexBlock>
-							<ZStack isLayered={ false } offset={ -8 }>
-								{ colors.slice( 0, 5 ).map( ( { color } ) => (
-									<ColorIndicator
-										key={ color }
-										colorValue={ color }
-									/>
-								) ) }
-							</ZStack>
-						</FlexBlock>
+						<ZStack
+							isLayered={ false }
+							offset={ -8 }
+							// TODO:
+							// - move to SCSS code + classname
+							// - consider using grid scss variables
+							// - consider adding a size prop to `ColorIndicator` ?
+							style={ { marginTop: '2px', marginBottom: '2px' } }
+						>
+							{ colors.slice( 0, 5 ).map( ( { color } ) => (
+								<ColorIndicator
+									key={ color }
+									colorValue={ color }
+								/>
+							) ) }
+						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
 				</NavigationButton>