Apply suggestions from code review

Co-authored-by: Marco Ciampini <[email protected]> (+1 squashed commit) Squashed commits: [eeb7fa834e] Implement new color picker design
WordPress · Sep 9, 2021 · 65de35a · 65de35a
1 parent f5280f1
commit 65de35a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 29 deletions.
diff --git a/packages/components/src/ui/color-picker/component.tsx b/packages/components/src/ui/color-picker/component.tsx
@@ -24,7 +24,11 @@ import {
 import { HStack } from '../../h-stack';
 import Button from '../../button';
 import { Spacer } from '../../spacer';
-import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper } from './styles';
+import {
+	ColorfulWrapper,
+	SelectControl,
+	AuxiliaryColorArtefactWrapper,
+} from './styles';
 import { ColorDisplay } from './color-display';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
@@ -97,34 +101,34 @@ const ColorPicker = (
 			/>
 			<AuxiliaryColorArtefactWrapper>
 				<HStack justify="space-between">
-				{ showInputs ? (
-					<SelectControl
-						options={ options }
-						value={ colorType }
-						onChange={ ( nextColorType ) =>
-							setColorType( nextColorType as ColorType )
+					{ showInputs ? (
+						<SelectControl
+							options={ options }
+							value={ colorType }
+							onChange={ ( nextColorType ) =>
+								setColorType( nextColorType as ColorType )
+							}
+							label={ __( 'Color format' ) }
+							hideLabelFromVision
+						/>
+					) : (
+						<ColorDisplay
+							color={ safeColor }
+							colorType={ copyFormat || colorType }
+							enableAlpha={ enableAlpha }
+						/>
+					) }
+					<Button
+						onClick={ () => setShowInputs( ! showInputs ) }
+						icon={ settings }
+						isPressed={ showInputs }
+						label={
+							showInputs
+								? __( 'Hide detailed inputs' )
+								: __( 'Show detailed inputs' )
 						}
-						label={ __( 'Color format' ) }
-						hideLabelFromVision
 					/>
-				) : (
-					<ColorDisplay
-						color={ safeColor }
-						colorType={ copyFormat || colorType }
-						enableAlpha={ enableAlpha }
-					/>
-				) }
-				<Button
-					onClick={ () => setShowInputs( ! showInputs ) }
-					icon={ settings }
-					isPressed={ showInputs }
-					label={
-						showInputs
-							? __( 'Hide detailed inputs' )
-							: __( 'Show detailed inputs' )
-					}
-				/>
-			</HStack>
+				</HStack>
 				<Spacer margin={ 4 } />
 				{ showInputs && (
 					<ColorInput

diff --git a/packages/components/src/ui/color-picker/styles.ts b/packages/components/src/ui/color-picker/styles.ts
@@ -16,6 +16,7 @@ import {
 	Container as InputControlContainer,
 	Input,
 } from '../../input-control/styles/input-control-styles';
+import CONFIG from '../../utils/config-values';
 
 export const NumberControlWrapper = styled( NumberControl )`
 	${ InputControlContainer } {
@@ -81,8 +82,8 @@ export const ColorfulWrapper = styled.div`
 	.react-colorful__pointer {
 		height: 16px;
 		width: 16px;
-		border: 1.5px solid #ffffff;
-		box-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.25 );
+		border: ${ CONFIG.borderWidthFocus } solid rgba( 255, 255, 255, 0 );
+		box-shadow: inset 0px 0px 0px ${ CONFIG.borderWidthFocus } #ffffff;
 	}
 
 	${ StyledField } {