Enhance styling of nextpage block using the Hr element (#11354)

* Add a line into nextpage block using the Hr element * Fix lint problems * Fix scss lint issue
WordPress · Nov 1, 2018 · 563e292 · 563e292
1 parent 52119c3
commit 563e292
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import Hr from 'react-native-hr';
 
 /**
  * WordPress dependencies
@@ -18,7 +19,9 @@ export default function NextPageEdit( { attributes } ) {
 
 	return (
 		<View className={ styles[ 'block-library-nextpage__container' ] }>
-			<Text>{ customText }</Text>
+			<Hr text={ customText }
+				textStyle={ styles[ 'block-library-nextpage__text' ] }
+				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
@@ -4,3 +4,12 @@
 	align-items: center;
 	padding: 4px 4px 4px 4px;
 }
+
+.block-library-nextpage__line {
+	background-color: #555d66;
+	height: 2;
+}
+
+.block-library-nextpage__text {
+	text-decoration-style: solid;
+}