From e8a9b134a2a8c7e977abd0059a859937ea738510 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 7 Dec 2021 12:10:57 +0100
Subject: [PATCH] Gradient picker: Small refinement to "Remove Control Point".

---
 .../components/src/color-picker/component.tsx    | 16 +++++++++-------
 .../src/custom-gradient-bar/control-points.js    |  9 ++++-----
 .../src/custom-gradient-picker/style.scss        |  6 ++++--
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index 4f9f0c7da59e78..4c2a4294d7bab3 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -129,14 +129,16 @@ const ColorPicker = (
 						}
 					/>
 				</HStack>
-				<Spacer margin={ 4 } />
 				{ showInputs && (
-					<ColorInput
-						colorType={ colorType }
-						color={ safeColordColor }
-						onChange={ handleChange }
-						enableAlpha={ enableAlpha }
-					/>
+					<>
+						<Spacer margin={ 4 } />
+						<ColorInput
+							colorType={ colorType }
+							color={ safeColordColor }
+							onChange={ handleChange }
+							enableAlpha={ enableAlpha }
+						/>
+					</>
 				) }
 			</AuxiliaryColorArtefactWrapper>
 		</ColorfulWrapper>
diff --git a/packages/components/src/custom-gradient-bar/control-points.js b/packages/components/src/custom-gradient-bar/control-points.js
index aeed04ba94bb46..efd98c615780e9 100644
--- a/packages/components/src/custom-gradient-bar/control-points.js
+++ b/packages/components/src/custom-gradient-bar/control-points.js
@@ -10,7 +10,7 @@ import { colord } from 'colord';
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { plus } from '@wordpress/icons';
+import { plus, trash } from '@wordpress/icons';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
 
 /**
@@ -228,6 +228,8 @@ function ControlPoints( {
 							{ ! disableRemove && (
 								<Button
 									className="components-custom-gradient-picker__remove-control-point"
+									icon={ trash }
+									label={ __( 'Remove control point' ) }
 									onClick={ () => {
 										onChange(
 											removeControlPoint(
@@ -237,10 +239,7 @@ function ControlPoints( {
 										);
 										onClose();
 									} }
-									variant="link"
-								>
-									{ __( 'Remove Control Point' ) }
-								</Button>
+								/>
 							) }
 						</>
 					) }
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index 4b4daff76ce309..7f291d976e2ba4 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -63,9 +63,11 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 
 .components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point {
 	margin-left: auto;
-	margin-right: auto;
+	padding: 0;
+	margin-right: $grid-unit-20;
 	display: block;
-	margin-bottom: $grid-unit-10;
+	min-width: $button-size-small;
+	height: $button-size-small;
 }
 
 .components-custom-gradient-picker__inserter {