help: improve the styling of the enablePromptAPI section.

avikalpg · Jan 21, 2025 · 28fe0e0 · 28fe0e0
1 parent 5b725ba
commit 28fe0e0
Showing 1 changed file with 53 additions and 40 deletions.
diff --git a/src/pages/help/EnablePromptAPI.js b/src/pages/help/EnablePromptAPI.js
@@ -1,25 +1,64 @@
 import React from 'react';
 import { View, StyleSheet, Linking } from 'react-native';
-import { Text } from 'react-native-paper';
+import { Text, useTheme } from 'react-native-paper';
 
 const EnablePromptAPI = () => {
+
+	const theme = useTheme();
+	const styles = StyleSheet.create({
+		container: {
+			flex: 1,
+			justifyContent: 'center',
+		},
+		question: {
+			fontSize: 18,
+			fontWeight: 'bold',
+			marginVertical: 10,
+		},
+		answer: {
+			fontSize: 16,
+			marginBottom: 5,
+			padding: 5,
+			borderRadius: 5,
+		},
+		sectionTitle: {
+			fontWeight: 'bold',
+			fontSize: 16,
+		},
+		step: {
+			fontSize: 16,
+			marginVertical: 5,
+			padding: 5,
+			borderRadius: 5,
+		},
+		link: {
+			color: 'blue',
+			textDecorationLine: 'underline',
+			marginBottom: 5,
+		},
+	});
+
 	return (
 		<View style={styles.container}>
-			<Text style={styles.title}>Help Page</Text>
-			<Text style={styles.question}>How to Enable Language Models in Your Browser?</Text>
+			<Text style={styles.question}>How do I enable Prompt API (Language Models) in my browser?</Text>
 			<Text style={styles.answer}>To enable language models in your browser, follow these steps:</Text>
 
 			<ol>
-				<li>
+				<li style={{ marginBottom: 10 }}>
 					<Text style={styles.sectionTitle}>Check Chrome Compatibility</Text>
-					<ol>
+					<ol type="i">
 						<li>
 							<Text style={styles.step}>
-								Ensure you are using <Text style={{ fontWeight: 'bold' }}>Chrome version 92 or higher</Text>.
-								You can check your version by clicking on the three dots in the top right corner, then <Text style={{ fontStyle: 'italic' }}>'Help' &gt; 'About Google Chrome'</Text>.
-								Look for the version number in the format: <Text style={{ fontStyle: 'italic' }}>Version 132.0.6834.83 (Official Build) (arm64)</Text>.
-								Make sure the first number (major version) is 92 or greater.
+								Ensure you are using Chrome version 92 or higher.
+							</Text>
+							<Text variant='bodySmall'>
+								<ul>
+									<li>You can check your version by clicking on the three dots in the top right corner, then <Text style={{ fontStyle: 'italic' }}>'Help' &gt; 'About Google Chrome'</Text>.</li>
+									<li>Look for the version number in the format: <Text style={{ fontStyle: 'italic' }}>Version 132.0.6834.83</Text>.</li>
+									<li>Make sure the first number (major version) is 92 or greater.</li>
+								</ul>
 							</Text>
+
 						</li>
 						<li>
 							<Text style={styles.step}>
@@ -29,9 +68,9 @@ const EnablePromptAPI = () => {
 					</ol>
 				</li>
 
-				<li>
+				<li style={{ marginBottom: 10 }}>
 					<Text style={styles.sectionTitle}>Enable the Prompt API Flag</Text>
-					<ol>
+					<ol type='i'>
 						<li>
 							<Text style={styles.step}>
 								Go to <Text style={{ color: 'blue' }} onPress={() => Linking.openURL('chrome://flags')}>chrome://flags</Text> in your browser.
@@ -55,10 +94,10 @@ const EnablePromptAPI = () => {
 					</ol>
 				</li>
 
-				<li>
-					<Text style={styles.sectionTitle}>Additional Resources</Text>
+				<li style={{ marginBottom: 10 }}>
+					<Text style={styles.sectionTitle}>Additional Resources</Text><br />
 					<Text style={styles.step}>For more information, visit the following links:</Text>
-					<ol>
+					<ol type='i'>
 						<li>
 							<Text style={styles.link} onPress={() => Linking.openURL('https://github.com/webmachinelearning/prompt-api/blob/main/README.md')}>
 								Prompt API Documentation
@@ -81,30 +120,4 @@ const EnablePromptAPI = () => {
 	);
 };
 
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		padding: 20,
-		justifyContent: 'center',
-	},
-	title: {
-		fontSize: 24,
-		fontWeight: 'bold',
-		marginBottom: 20,
-	},
-	sectionTitle: {
-		fontSize: 20,
-		fontWeight: 'bold',
-		marginBottom: 10,
-	},
-	step: {
-		marginBottom: 10,
-	},
-	link: {
-		color: 'blue',
-		textDecorationLine: 'underline',
-		marginBottom: 5,
-	},
-});
-
 export default EnablePromptAPI;