Mobile - Color settings: Update the label to "Select a color above" a…

…nd display the selected hex color. (#33973)
WordPress · Aug 19, 2021 · d473726 · d473726
1 parent 89ef4b2
commit d473726
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js
@@ -56,6 +56,10 @@ const PaletteScreen = () => {
 		styles.clearButton,
 		styles.clearButtonDark
 	);
+	const selectedColorTextStyle = usePreferredColorSchemeStyle(
+		styles.colorText,
+		styles.colorTextDark
+	);
 
 	const isSolidSegment = currentSegment === segments[ 0 ];
 	const isCustomGadientShown = ! isSolidSegment && isGradientColor;
@@ -136,12 +140,22 @@ const PaletteScreen = () => {
 						/>
 					) }
 				</View>
-				<Text
-					style={ styles.selectColorText }
-					maxFontSizeMultiplier={ 2 }
-				>
-					{ __( 'Select a color' ) }
-				</Text>
+				{ currentValue ? (
+					<Text
+						style={ selectedColorTextStyle }
+						maxFontSizeMultiplier={ 2 }
+						selectable
+					>
+						{ currentValue.toUpperCase() }
+					</Text>
+				) : (
+					<Text
+						style={ styles.selectColorText }
+						maxFontSizeMultiplier={ 2 }
+					>
+						{ __( 'Select a color above' ) }
+					</Text>
+				) }
 				<View style={ styles.flex }>
 					{ currentValue && getClearButton() }
 				</View>

diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss
@@ -29,6 +29,17 @@
 	line-height: 24px;
 }
 
+.colorText {
+	font-family: $default-monospace-font;
+	color: $light-primary;
+	font-size: 16px;
+	font-weight: 400;
+}
+
+.colorTextDark {
+	color: $dark-primary;
+}
+
 .flex {
 	flex: 1;
 }