Style improvements for template previews

packages/block-editor/src/components/page-template-picker/preview.native.js

@@ -2,19 +2,15 @@
  * WordPress dependencies
  */
 import { BlockEditorProvider, BlockList } from '@wordpress/block-editor';
-import { Button, ModalHeaderBar } from '@wordpress/components';
+import { ModalHeaderBar } from '@wordpress/components';
+import { usePreferredColorScheme } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
  * External dependencies
  */
-import { Modal, View, SafeAreaView, Text, TouchableOpacity } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
+import { Modal, View, SafeAreaView } from 'react-native';
 
 // We are replicating this here because the one in @wordpress/block-editor always
 // tries to scale the preview and we would need a lot of cross platform code to handle
@@ -46,45 +42,38 @@ BlockPreview.displayName = 'BlockPreview';
 
 const Preview = ( props ) => {
 	const { template, onDismiss, onApply } = props;
+	const preferredColorScheme = usePreferredColorScheme();
+	const containerBackgroundColor = preferredColorScheme === 'dark' ? 'black' : 'white';
 
 	if ( template === undefined ) {
 		return null;
 	}
 
 	const leftButton = (
-		<View
-			style={ { flex: 1, width: 44 } }
-		>
-			<Button
-				icon="no-alt"
-				size={ 24 }
-				label={ __( 'Close' ) }
-				onClick={ onDismiss }
-			/>
-		</View>
+		<ModalHeaderBar.CloseButton onPress={ onDismiss } />
 	);
 
 	const rightButton = (
-		<View
-			style={ styles.headerRightButton }
-		>
-			<TouchableOpacity onPress={ onApply }>
-				<Text>{ __( 'Apply' ) }</Text>
-			</TouchableOpacity>
-		</View>
+		<ModalHeaderBar.Button
+			onPress={ onApply }
+			title={ __( 'Apply' ) }
+			isPrimary={ true }
+		/>
 	);
 
 	return (
 		<Modal
 			visible={ !! template }
 			animationType="slide"
 			onRequestClose={ onDismiss }
+			supportedOrientations={ [ 'portrait', 'landscape' ] }
 		>
-			<SafeAreaView style={ { flex: 1 } }>
+			<SafeAreaView style={ { flex: 1, backgroundColor: containerBackgroundColor } }>
 				<ModalHeaderBar
 					leftButton={ leftButton }
 					rightButton={ rightButton }
 					title={ template.name }
+					subtitle={ __( 'Template Preview' ) }
 				/>
 				<BlockPreview
 					blocks={ template.blocks }

packages/block-editor/src/components/page-template-picker/styles.native.scss

@@ -34,10 +34,3 @@
 .buttonTextDark {
 	color: $light-opacity-700;
 }
-
-.headerRightButton {
-	flex: 1;
-	align-items: flex-end;
-	justify-content: center;
-	padding-right: 12px;
-}

packages/components/src/mobile/modal-header-bar/button.android.scss

@@ -0,0 +1,10 @@
+@import "./button.native.scss";
+
+.icon {
+	margin-top: 1px;
+	color: $gray-60;
+}
+
+.title {
+	text-transform: uppercase;
+}

packages/components/src/mobile/modal-header-bar/button.ios.scss

@@ -0,0 +1,5 @@
+@import "./button.native.scss";
+
+.titlePrimary {
+	font-weight: 600;
+}

packages/components/src/mobile/modal-header-bar/button.native.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import { Platform, Text, TouchableOpacity } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '../../icon';
+import closeIcon from './close-icon';
+import styles from './button.scss';
+
+const ICON_SIZE = 24;
+
+const Button = withPreferredColorScheme( ( { icon, onPress, title, isPrimary, getStylesFromColorScheme } ) => {
+	const titleStyle = getStylesFromColorScheme( styles.title, styles.titleDark );
+	return (
+		<TouchableOpacity onPress={ onPress }>
+			{ icon ?
+				<Icon icon={ icon } size={ ICON_SIZE } style={ styles.icon } /> :
+				<Text style={ [ titleStyle, isPrimary && styles.titlePrimary ] }>{ title }</Text>
+			}
+		</TouchableOpacity>
+	);
+} );
+
+Button.displayName = 'ModalHeaderBar.Button';
+
+export { Button };
+
+const CloseButton = ( { onPress } ) => {
+	const props = Platform.select( {
+		ios: {
+			title: __( 'Close' ),
+		},
+		android: {
+			accessibilityLabel: __( 'Close' ),
+			icon: closeIcon,
+		},
+	} );
+	return (
+		<Button onPress={ onPress } { ...props } />
+	);
+};
+CloseButton.displayName = 'ModalHeaderBar.CloseButton';
+
+export { CloseButton };

packages/components/src/mobile/modal-header-bar/button.native.scss

@@ -0,0 +1,8 @@
+.title {
+	color: $blue-50;
+	font-size: 17px;
+}
+
+.titleDark {
+	color: $blue-30;
+}

packages/components/src/mobile/modal-header-bar/close-icon.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export default (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /><Path d="M0 0h24v24H0z" fill="none" /></SVG>
+);

packages/components/src/mobile/modal-header-bar/index.native.js

@@ -12,28 +12,36 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  * Internal dependencies
  */
 import styles from './styles.scss';
+import { Button, CloseButton } from './button';
 
 const ModalHeaderBar = withPreferredColorScheme( ( props ) => {
 	const {
 		leftButton,
 		title,
+		subtitle,
 		rightButton,
 		getStylesFromColorScheme,
 	} = props;
 
 	const separatorStyle = getStylesFromColorScheme( styles.separator, styles.separatorDark );
-	// TODO: dark mode for background and title??
+	const titleStyle = getStylesFromColorScheme( styles.title, styles.titleDark );
+	const subtitleStyle = getStylesFromColorScheme( styles.subtitle, styles.subtitleDark );
 
 	return (
 		<View>
-			<View style={ styles.bar }>
+			<View style={ [ styles.bar, subtitle && styles.subtitleBar ] }>
 				<View style={ styles.leftContainer }>
 					{ leftButton }
 				</View>
-				<View style={ styles.titleContainer }>
-					<Text style={ styles.title } accessibilityRole="header">
+				<View style={ styles.titleContainer } accessibilityRole="header">
+					<Text style={ titleStyle }>
 						{ title }
 					</Text>
+					{ subtitle &&
+						<Text style={ subtitleStyle }>
+							{ subtitle }
+						</Text>
+					}
 				</View>
 				<View style={ styles.rightContainer }>
 					{ rightButton }
@@ -46,4 +54,7 @@ const ModalHeaderBar = withPreferredColorScheme( ( props ) => {
 
 ModalHeaderBar.displayName = 'ModalHeaderBar';
 
+ModalHeaderBar.Button = Button;
+ModalHeaderBar.CloseButton = CloseButton;
+
 export default ModalHeaderBar;

packages/components/src/mobile/modal-header-bar/styles.native.scss

@@ -1,34 +1,52 @@
 .bar {
 	flex-direction: row;
 	width: 100%;
-	margin-bottom: 5px;
 	justify-content: space-between;
 	align-items: center;
-	align-content: center;
-	min-height: 48;
+	height: 48px;
+	padding: 0 16px;
+}
+
+.subtitleBar {
+	height: 64px;
 }
 
 .leftContainer {
-	flex: 1;
-	justify-content: flex-start;
+	flex-grow: 0;
+	flex-shrink: 0;
 }
 
 .rightContainer {
-	flex: 1;
-	justify-content: flex-end;
+	flex-grow: 0;
+	flex-shrink: 0;
 }
 
 .titleContainer {
 	justify-content: center;
-	flex: 2;
-	align-content: center;
+	flex: 1;
+	flex-direction: column;
 }
 
 .title {
-	color: $dark-gray-600;
+	color: $dark-opacity-900;
 	font-size: 18px;
-	font-weight: 600;
+	font-weight: bold;
+	text-align: center;
+}
+
+.titleDark {
+	color: $white;
+}
+
+.subtitle {
+	flex-shrink: 0;
 	text-align: center;
+	font-size: 16px;
+	color: $dark-opacity-600;
+}
+
+.subtitleDark {
+	color: $light-opacity-200;
 }
 
 .separator {