Visual refinements for native nextpage (#14826)

* Visual refinements for native nextpage * Moved nextpage font setting to JS to keep the linter happy
WordPress · Apr 9, 2019 · 27fe0a2 · 27fe0a2
1 parent 8eb5a6e
commit 27fe0a2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js
@@ -16,11 +16,17 @@ import styles from './editor.scss';
 
 export default function NextPageEdit( { attributes } ) {
 	const { customText = __( 'Page break' ) } = attributes;
+	// Setting the font here to keep the CSS linter happy, it was demanding a syntax
+	// that React Native wasn't able to handle (adding a fallback generic font family).
+	const textStyle = {
+		...styles[ 'block-library-nextpage__text' ],
+		fontFamily: 'System',
+	};
 
 	return (
 		<View style={ styles[ 'block-library-nextpage__container' ] }>
 			<Hr text={ customText }
-				textStyle={ styles[ 'block-library-nextpage__text' ] }
+				textStyle={ textStyle }
 				lineStyle={ styles[ 'block-library-nextpage__line' ] } />
 		</View>
 	);

diff --git a/packages/block-library/src/nextpage/editor.native.scss b/packages/block-library/src/nextpage/editor.native.scss
@@ -1,16 +1,12 @@
 // @format
 
-.block-library-nextpage__container {
-	align-items: center;
-	padding: 4px 4px 4px 4px;
-}
-
 .block-library-nextpage__line {
-	background-color: #555d66;
+	background-color: $gray-lighten-20;
 	height: 2;
 }
 
 .block-library-nextpage__text {
+	color: $gray;
 	text-decoration-style: solid;
-	font-family: $default-regular-font;
+	text-transform: uppercase;
 }