[RNMobile] Embed block: Add styles for error case (#33535)

WordPress · Jul 20, 2021 · 3b85572 · 3b85572
1 parent 5aa3559
commit 3b85572
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/packages/block-library/src/embed/embed-placeholder.native.js b/packages/block-library/src/embed/embed-placeholder.native.js
@@ -31,10 +31,8 @@ const EmbedPlaceholder = ( {
 		styles.embed__label,
 		styles[ 'embed__label--dark' ]
 	);
-	const descriptionStyle = usePreferredColorSchemeStyle(
-		styles.embed__description,
-		styles[ 'embed__description--dark' ]
-	);
+	const descriptionStyle = styles.embed__description;
+	const descriptionErrorStyle = styles[ 'embed__description--error' ];
 	const actionStyle = usePreferredColorSchemeStyle(
 		styles.embed__action,
 		styles[ 'embed__action--dark' ]
@@ -43,6 +41,7 @@ const EmbedPlaceholder = ( {
 		styles.embed__icon,
 		styles[ 'embed__icon--dark' ]
 	);
+	const embedIconErrorStyle = styles[ 'embed__icon--error' ];
 
 	return (
 		<>
@@ -57,10 +56,15 @@ const EmbedPlaceholder = ( {
 						<>
 							<Icon
 								icon={ noticeOutline }
-								fill={ embedIconStyle.fill }
-								style={ styles[ 'embed__icon--error' ] }
+								fill={ embedIconErrorStyle.fill }
+								style={ embedIconErrorStyle }
 							/>
-							<Text style={ descriptionStyle }>
+							<Text
+								style={ [
+									descriptionStyle,
+									descriptionErrorStyle,
+								] }
+							>
 								{ __( 'Unable to embed media' ) }
 							</Text>
 							<Text style={ actionStyle }>

diff --git a/packages/block-library/src/embed/styles.native.scss b/packages/block-library/src/embed/styles.native.scss
@@ -29,6 +29,7 @@
 
 .embed__icon--error {
 	margin-bottom: 6;
+	fill: $alert-red;
 }
 
 .embed__label {
@@ -55,6 +56,10 @@
 	color: $dark-secondary;
 }
 
+.embed__description--error {
+	color: $alert-red;
+}
+
 .embed__action {
 	width: 100%;
 	text-align: center;