From 7ecb4500040faa91b791fb9434a4486588910e01 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 19 Jul 2024 11:29:34 +0200
Subject: [PATCH] Move the Copy button after the value that is being copied.

---
 .../src/color-picker/color-copy-button.tsx         |  2 +-
 packages/components/src/color-picker/component.tsx | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx
index 8d4e4b90d26242..927ab57544e9b4 100644
--- a/packages/components/src/color-picker/color-copy-button.tsx
+++ b/packages/components/src/color-picker/color-copy-button.tsx
@@ -51,7 +51,7 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 	}, [] );
 
 	return (
-		<Button variant="secondary" size="small" ref={ copyRef }>
+		<Button variant="secondary" ref={ copyRef } __next40pxDefaultSize>
 			{ copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' ) }
 		</Button>
 	);
diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index a1112d2e1ecd23..4e2e2258cfac27 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -96,18 +96,22 @@ const UnconnectedColorPicker = (
 						hideLabelFromVision
 						variant="minimal"
 					/>
-					<ColorCopyButton
-						color={ safeColordColor }
-						colorType={ copyFormat || colorType }
-					/>
 				</AuxiliaryColorArtefactHStackHeader>
-				<ColorInputWrapper direction="column" gap={ 2 }>
+				<ColorInputWrapper
+					direction={ colorType === 'hex' ? 'row' : 'column' }
+					align="flex-start"
+					gap={ 2 }
+				>
 					<ColorInput
 						colorType={ colorType }
 						color={ safeColordColor }
 						onChange={ handleChange }
 						enableAlpha={ enableAlpha }
 					/>
+					<ColorCopyButton
+						color={ safeColordColor }
+						colorType={ copyFormat || colorType }
+					/>
 				</ColorInputWrapper>
 			</AuxiliaryColorArtefactWrapper>
 		</ColorfulWrapper>