Add pill-shaped background to button

packages/components/src/mobile/audio-player/index.native.js

@@ -111,10 +111,10 @@ function Player( {
 		...( isUploadFailed && uploadFailedStyle ),
 	};
 
-	const buttonTextStyle = {
-		...styles.buttonText,
-		...( isIOS ? styles.buttonTextIOS : styles.buttonTextAndroid ),
-	};
+	const buttonBackgroundStyle = getStylesFromColorScheme(
+		styles.buttonBackground,
+		styles.buttonBackgroundDark
+	);
 
 	let title = '';
 	let extension = '';
@@ -184,7 +184,11 @@ function Player( {
 						) }
 						onPress={ onPressListen }
 					>
-						<Text style={ buttonTextStyle }>{ __( 'OPEN' ) }</Text>
+						<View style={ buttonBackgroundStyle }>
+							<Text style={ styles.buttonText }>
+								{ __( 'OPEN' ) }
+							</Text>
+						</View>
 					</TouchableWithoutFeedback>
 				) }
 			</View>

packages/components/src/mobile/audio-player/styles.scss

@@ -84,19 +84,21 @@
 	color: $dark-secondary;
 }
 
-.buttonText {
-	padding: 16px;
-	font-size: 17;
-	font-weight: 500;
-	color: $blue-wordpress;
+.buttonBackground {
+	margin: 12px 16px;
+	padding: 8px 16px;
+	border-radius: 500px;
+	background-color: $light-ultra-dim;
 }
 
-.buttonTextIOS {
-	margin-top: 1px;
+.buttonBackgroundDark {
+	background-color: $dark-ultra-dim;
 }
 
-.buttonTextAndroid {
-	margin-top: -2px;
+.buttonText {
+	font-size: 17;
+	font-weight: 500;
+	color: $blue-wordpress;
 }
 
 .errorIcon {