From 5368b16da00782ec737a0ca972cccd73c7bece63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Sacrist=C3=A1n?= Date: Wed, 26 Apr 2023 19:38:19 +0200 Subject: [PATCH] feat: added back button --- app/qr/index.tsx | 81 +++++++++++++++----------------- app/settings/export.tsx | 45 ++++++++---------- app/settings/import.tsx | 95 +++++++++++++++++--------------------- src/components/Section.tsx | 64 +++++++++++++++++++++++++ src/icons/BackIcon.tsx | 22 +++++++++ src/ui/IconButton.tsx | 10 +++- 6 files changed, 191 insertions(+), 126 deletions(-) create mode 100644 src/components/Section.tsx create mode 100644 src/icons/BackIcon.tsx diff --git a/app/qr/index.tsx b/app/qr/index.tsx index ff5164d..7b04a63 100644 --- a/app/qr/index.tsx +++ b/app/qr/index.tsx @@ -4,12 +4,13 @@ import { useRouter } from 'expo-router'; import React, { FC, useEffect, useState } from 'react'; import { Dimensions, StyleSheet, View } from 'react-native'; import { parseOtpUri } from '../../src/util/parseOtpUri'; -import { Trans } from '@lingui/macro'; +import { Trans, t } from '@lingui/macro'; import colors from '../../src/constants/colors'; import { Button, MD3Theme, useTheme } from 'react-native-paper'; import Text from '../../src/ui/Text'; import { ScanQRIcon } from '../../src/icons/ScanQR'; import Container from '../../src/ui/Container'; +import Section from '../../src/components/Section'; const CAMERA_WIDTH = Dimensions.get('screen').width - 2 * 20; @@ -51,56 +52,46 @@ const QRScanner: FC = () => { } return ( - - - - Add a new site - - - - Scan your website's 2FA QR code using your device's camera - - - {showCamera && ( - <> - - - - - - The QR code can be easily recognized by simply pointing your - device's camera at it - - - - )} - {!showCamera && ( - <> - + + + Scan your website's 2FA QR code using your device's camera + + + {showCamera && ( + <> + + - - - )} - - + + + + The QR code can be easily recognized by simply pointing your + device's camera at it + + + + )} + {!showCamera && ( + <> + + + + )} + ); }; const getStyles = (theme: MD3Theme) => StyleSheet.create({ - container: { - flex: 1, - padding: 0, - margin: 0, - }, camera: { width: '100%', aspectRatio: 1, diff --git a/app/settings/export.tsx b/app/settings/export.tsx index 1e053d9..48f52d1 100644 --- a/app/settings/export.tsx +++ b/app/settings/export.tsx @@ -1,4 +1,4 @@ -import { Trans } from '@lingui/macro'; +import { Trans, t } from '@lingui/macro'; import * as FileSystem from 'expo-file-system'; import * as Sharing from 'expo-sharing'; import React, { FC } from 'react'; @@ -10,6 +10,7 @@ import { useDB } from '../../src/providers/DatabaseProvider'; import Container from '../../src/ui/Container'; import Text from '../../src/ui/Text'; import { format } from 'date-fns'; +import Section from '../../src/components/Section'; const SettingsExport: FC = () => { const { listSites } = useDB(); @@ -52,39 +53,29 @@ const SettingsExport: FC = () => { }; return ( - - - - Backup your data - - - - To ensure that you don't lose your saved data, you can download a - file of the sites and restore them at a later time - - +
+ + + To ensure that you don't lose your saved data, you can download a file + of the sites and restore them at a later time + + - - - - + + + - +
); }; const getStyles = (theme: MD3Theme) => StyleSheet.create({ - container: { - flex: 1, - padding: 0, - margin: 0, - }, buttonContainer: { marginTop: 24, }, diff --git a/app/settings/import.tsx b/app/settings/import.tsx index e98d3d9..54ac7f7 100644 --- a/app/settings/import.tsx +++ b/app/settings/import.tsx @@ -1,4 +1,4 @@ -import { Plural, Trans } from '@lingui/macro'; +import { Plural, Trans, t } from '@lingui/macro'; import * as FileSystem from 'expo-file-system'; import * as Sharing from 'expo-sharing'; import React, { FC, useState } from 'react'; @@ -11,6 +11,7 @@ import Container from '../../src/ui/Container'; import Text from '../../src/ui/Text'; import * as DocumentPicker from 'expo-document-picker'; import { OtpRecord } from '../../src/types'; +import Section from '../../src/components/Section'; const SettingsImport: FC = () => { const { newSite } = useDB(); @@ -54,64 +55,54 @@ const SettingsImport: FC = () => { }; return ( - - - - Restore sites - - - - If you want to restore your saved sites from a backup, you can load - the file stored on your device. It's important to note that the - existing sites will remain unchanged and won't be replaced - - +
+ + + If you want to restore your saved sites from a backup, you can load + the file stored on your device. It's important to note that the + existing sites will remain unchanged and won't be replaced + + - - {processing && ( - - - {sitesProcessed !== numberOfSites && Processing} - {sitesProcessed === numberOfSites && Completed} - - - - - - Processed 1 site of {numberOfSites}} - other={Processed # sites of {numberOfSites}} - /> - + + {processing && ( + + + {sitesProcessed !== numberOfSites && Processing} + {sitesProcessed === numberOfSites && Completed} + + + - )} - {!processing && ( - - - - )} - - + + Processed 1 site of {numberOfSites}} + other={Processed # sites of {numberOfSites}} + /> + + + )} + {!processing && ( + + + + )} +
); }; const getStyles = (theme: MD3Theme) => StyleSheet.create({ - container: { - flex: 1, - padding: 0, - margin: 0, - }, buttonContainer: { marginTop: 24, }, diff --git a/src/components/Section.tsx b/src/components/Section.tsx new file mode 100644 index 0000000..04538f9 --- /dev/null +++ b/src/components/Section.tsx @@ -0,0 +1,64 @@ +import { Trans } from '@lingui/macro'; +import { FC, ReactNode } from 'react'; +import { StyleSheet, View } from 'react-native'; +import Container from '../ui/Container'; +import Text from '../ui/Text'; +import IconButton from '../ui/IconButton'; +import { BackIcon } from '../icons/BackIcon'; +import { useNavigation } from 'expo-router'; + +type SectionProps = { + title: string; + children: ReactNode; + showBack?: boolean; +}; + +const Section: FC = ({ children, title, showBack }) => { + const { goBack } = useNavigation(); + return ( + + + + + {showBack && ( + { + goBack(); + }} + style={styles.button} + > + + + )} + + + {title} + + + {children} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 0, + margin: 0, + }, + button: { + paddingRight: 16, + width: 36, + minWidth: 20, + }, + head: { + flexDirection: 'row', + alignContent: 'center', + }, + wrapper: { + flexGrow: 1, + }, +}); + +export default Section; diff --git a/src/icons/BackIcon.tsx b/src/icons/BackIcon.tsx new file mode 100644 index 0000000..9bd7d73 --- /dev/null +++ b/src/icons/BackIcon.tsx @@ -0,0 +1,22 @@ +import { FC } from 'react'; +import Svg, { Path } from 'react-native-svg'; +import colors from '../constants/colors'; +import { ComponentWithColor, ComponentWithSize } from '../types'; + +export const BackIcon: FC = ({ + width = 48, + height = 48, + color = colors.dark, +}) => { + return ( + + + + ); +}; diff --git a/src/ui/IconButton.tsx b/src/ui/IconButton.tsx index 94a4c4b..8e0ab61 100644 --- a/src/ui/IconButton.tsx +++ b/src/ui/IconButton.tsx @@ -1,5 +1,5 @@ import { FC, useState } from 'react'; -import { StyleSheet, View } from 'react-native'; +import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { TouchableOpacity } from 'react-native-gesture-handler'; import { MD3Theme, useTheme } from 'react-native-paper'; import { ComponentWithChildren } from '../types'; @@ -7,11 +7,13 @@ import colors from '../constants/colors'; type IconButtonProps = { onPress: () => void; + style?: StyleProp; }; const IconButton: FC = ({ children, onPress, + style, }) => { const theme = useTheme(); const styles = getStyles(theme); @@ -24,7 +26,11 @@ const IconButton: FC = ({ onPress={() => onPress()} > {children}