From 61bb5559cb01566a63b8387ad7cbfd99c6c67072 Mon Sep 17 00:00:00 2001
From: Carlos Garcia <fluiddot@gmail.com>
Date: Fri, 13 May 2022 17:02:07 +0200
Subject: [PATCH] Add HelpSectionTitle component

---
 .../editor-help/help-section-title.native.js  | 29 +++++++++++++++++++
 .../components/editor-help/index.native.js    | 21 +++++---------
 .../src/components/editor-help/style.scss     | 15 ++++++++++
 3 files changed, 51 insertions(+), 14 deletions(-)
 create mode 100644 packages/editor/src/components/editor-help/help-section-title.native.js

diff --git a/packages/editor/src/components/editor-help/help-section-title.native.js b/packages/editor/src/components/editor-help/help-section-title.native.js
new file mode 100644
index 00000000000000..573d48d24fd6ce
--- /dev/null
+++ b/packages/editor/src/components/editor-help/help-section-title.native.js
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const HelpSectionTitle = ( { children } ) => {
+	const helpSectionTitle = usePreferredColorSchemeStyle(
+		styles.helpSectionTitle,
+		styles.helpSectionTitleDark
+	);
+
+	return (
+		<View style={ styles.helpSectionTitleContainer }>
+			<Text style={ helpSectionTitle }>{ children }</Text>
+		</View>
+	);
+};
+
+export default HelpSectionTitle;
diff --git a/packages/editor/src/components/editor-help/index.native.js b/packages/editor/src/components/editor-help/index.native.js
index cb039d5d79c007..cccb359fbe1939 100644
--- a/packages/editor/src/components/editor-help/index.native.js
+++ b/packages/editor/src/components/editor-help/index.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { kebabCase } from 'lodash';
-import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
 /**
@@ -17,7 +17,6 @@ import { __ } from '@wordpress/i18n';
 import { helpFilled, plusCircleFilled, trash, cog } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import {
 	requestContactCustomerSupport,
 	requestGotoCustomerSupportOptions,
@@ -35,7 +34,8 @@ import AddBlocks from './add-blocks';
 import MoveBlocks from './move-blocks';
 import RemoveBlocks from './remove-blocks';
 import CustomizeBlocks from './customize-blocks';
-import moveBlocksIcon from './icon-move-blocks.native';
+import moveBlocksIcon from './icon-move-blocks';
+import HelpSectionTitle from './help-section-title';
 
 const HELP_TOPICS = [
 	{
@@ -62,11 +62,6 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
 
-	const sectionTitle = usePreferredColorSchemeStyle(
-		styles.helpDetailSectionHeading,
-		styles.helpDetailSectionHeadingDark
-	);
-
 	const title =
 		postType === 'page'
 			? __( 'How to edit your page' )
@@ -125,9 +120,9 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 											} }
 										>
 											<PanelBody>
-												<Text style={ sectionTitle }>
+												<HelpSectionTitle>
 													{ __( 'The basics' ) }
-												</Text>
+												</HelpSectionTitle>
 												{ /* Print out help topics. */ }
 												{ HELP_TOPICS.map(
 													( { label, icon } ) => {
@@ -149,11 +144,9 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 													}
 												) }
 												{
-													<Text
-														style={ sectionTitle }
-													>
+													<HelpSectionTitle>
 														{ __( 'Get support' ) }
-													</Text>
+													</HelpSectionTitle>
 												}
 												{
 													<HelpGetSupportButton
diff --git a/packages/editor/src/components/editor-help/style.scss b/packages/editor/src/components/editor-help/style.scss
index 8c2ef19d607cdd..8058f00381da95 100644
--- a/packages/editor/src/components/editor-help/style.scss
+++ b/packages/editor/src/components/editor-help/style.scss
@@ -31,6 +31,21 @@
 	padding: 0;
 }
 
+.helpSectionTitleContainer {
+	margin-top: 24px;
+	margin-bottom: 16px;
+}
+
+.helpSectionTitle {
+	color: $light-primary;
+	font-weight: 600;
+	font-size: 16px;
+}
+
+.helpSectionTitleDark {
+	color: $dark-secondary;
+}
+
 .helpDetailContainer {
 	padding: 0 16px;
 }