update top-nav go-back btn in the left. Fixes #130

cashubtc · Aug 22, 2023 · fec3dc1 · fec3dc1
1 parent 5c98a2f
commit fec3dc1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
@@ -429,6 +429,13 @@ export function NostrIcon() {
 		/>
 	)
 }
+export function LeftArrow({ width, height, color }: TIconProps) {
+	return (
+		<Svg width={width || 24} height={height || 24} viewBox="0 0 24 24" fill="none">
+			<Path d="M21.0001 11H6.41406L11.7071 5.70697L10.2931 4.29297L2.58606 12L10.2931 19.707L11.7071 18.293L6.41406 13H21.0001V11Z" fill={color} />
+		</Svg>
+	)
+}
 
 const styles = StyleSheet.create({
 	nostrIcon: {

diff --git a/src/components/nav/TopNav.tsx b/src/components/nav/TopNav.tsx
@@ -1,7 +1,7 @@
-import { ScanQRIcon } from '@comps/Icons'
+import { LeftArrow, ScanQRIcon } from '@comps/Icons'
 import { useThemeContext } from '@src/context/Theme'
 import { NS } from '@src/i18n'
-import { globals } from '@styles'
+import { globals, highlight as hi } from '@styles'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 
@@ -18,24 +18,30 @@ export default function TopNav({ screenName, withBackBtn, cancel, handlePress, t
 	const { color, highlight } = useThemeContext()
 	return (
 		<View style={[styles.topNav, { backgroundColor: color.BACKGROUND }]}>
-			{screenName ?
-				<Text style={globals(color).navTxt}>
-					{screenName}
-				</Text>
-				:
-				<View />
-			}
-			<TouchableOpacity style={styles.topIconR} onPress={handlePress}>
-				{(withBackBtn || cancel || txt?.length) ?
+			{/* Placeholder */}
+			{!screenName && !withBackBtn && <View />}
+			<View style={styles.wrap}>
+				{withBackBtn && !cancel && !txt?.length &&
+					<TouchableOpacity
+						onPress={handlePress}
+						style={styles.backiconWrap}
+					>
+						<LeftArrow color={hi[highlight]} />
+					</TouchableOpacity>
+				}
+				{screenName &&
+					<Text style={globals(color).navTxt}>
+						{screenName}
+					</Text>
+				}
+			</View>
+			<TouchableOpacity style={styles.right} onPress={handlePress}>
+				{(cancel || txt?.length) ?
 					<Text style={globals(color, highlight).pressTxt}>
-						{txt ?
-							txt
-							:
-							t(withBackBtn ? 'back' : 'cancel')
-						}
+						{txt || t('cancel')}
 					</Text>
 					:
-					<ScanQRIcon color={color.TEXT} />
+					!withBackBtn && <ScanQRIcon color={color.TEXT} />
 				}
 			</TouchableOpacity>
 		</View>
@@ -56,7 +62,14 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 20,
 		paddingBottom: 10,
 	},
-	topIconR: {
+	wrap: {
+		flexDirection: 'row',
+		alignItems: 'center',
+	},
+	backiconWrap: {
+		paddingRight: 20,
+	},
+	right: {
 		paddingLeft: 20,
 	},
 })