diff options
| -rw-r--r-- | src/view/com/util/error/ErrorScreen.tsx | 137 |
1 files changed, 55 insertions, 82 deletions
diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx index 846f4d295..e9b0e50a3 100644 --- a/src/view/com/util/error/ErrorScreen.tsx +++ b/src/view/com/util/error/ErrorScreen.tsx @@ -1,4 +1,4 @@ -import {StyleSheet, View} from 'react-native' +import {View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, @@ -7,12 +7,11 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {useTheme} from '#/lib/ThemeContext' -import {ViewHeader} from '#/view/com/util/ViewHeader' -import {Button} from '../forms/Button' -import {Text} from '../text/Text' -import {CenteredView} from '../Views' +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwiseIcon} from '#/components/icons/ArrowRotateCounterClockwise' +import * as Layout from '#/components/Layout' +import {Text} from '#/components/Typography' export function ErrorScreen({ title, @@ -29,22 +28,32 @@ export function ErrorScreen({ testID?: string showHeader?: boolean }) { - const theme = useTheme() - const {isMobile} = useWebMediaQueries() + const t = useTheme() const pal = usePalette('default') const {_} = useLingui() return ( - <> - {showHeader && isMobile && ( - <ViewHeader title={_(msg`Error`)} showBorder /> + <Layout.Center testID={testID}> + {showHeader && ( + <Layout.Header.Outer> + <Layout.Header.BackButton /> + <Layout.Header.Content> + <Layout.Header.TitleText> + <Trans>Error</Trans> + </Layout.Header.TitleText> + </Layout.Header.Content> + <Layout.Header.Slot /> + </Layout.Header.Outer> )} - <CenteredView testID={testID} style={[styles.outer, pal.view]}> - <View style={styles.errorIconContainer}> + <View style={[a.px_xl, a.py_2xl]}> + <View style={[a.mb_md, a.align_center]}> <View style={[ - styles.errorIcon, - {backgroundColor: theme.palette.inverted.background}, + a.rounded_full, + {width: 50, height: 50}, + a.align_center, + a.justify_center, + {backgroundColor: t.palette.contrast_950}, ]}> <FontAwesomeIcon icon="exclamation" @@ -53,86 +62,50 @@ export function ErrorScreen({ /> </View> </View> - <Text type="title-lg" style={[styles.title, pal.text]}> + <Text style={[a.text_center, a.font_heavy, a.text_2xl, a.mb_md]}> {title} </Text> - <Text style={[styles.message, pal.text]}>{message}</Text> + <Text style={[a.text_center, a.text_md, a.mb_xl]}>{message}</Text> {details && ( - <Text - testID={`${testID}-details`} - style={[styles.details, pal.text, pal.viewLight]}> - {details} - </Text> + <View + style={[ + a.w_full, + a.border, + t.atoms.border_contrast_medium, + t.atoms.bg_contrast_25, + a.mb_xl, + a.py_sm, + a.px_lg, + a.rounded_xs, + a.overflow_hidden, + ]}> + <Text + testID={`${testID}-details`} + style={[a.text_center, a.text_md, t.atoms.text_contrast_high]}> + {details} + </Text> + </View> )} {onPressTryAgain && ( - <View style={styles.btnContainer}> + <View style={[a.align_center]}> <Button testID="errorScreenTryAgainButton" - type="default" - style={[styles.btn]} onPress={onPressTryAgain} - accessibilityLabel={_(msg`Retry`)} + variant="solid" + color="secondary_inverted" + size="small" + label={_(msg`Retry`)} accessibilityHint={_( msg`Retries the last action, which errored out`, )}> - <FontAwesomeIcon - icon="arrows-rotate" - style={pal.link as FontAwesomeIconStyle} - size={16} - /> - <Text type="button" style={[styles.btnText, pal.link]}> + <ButtonIcon icon={ArrowRotateCounterClockwiseIcon} /> + <ButtonText> <Trans context="action">Try again</Trans> - </Text> + </ButtonText> </Button> </View> )} - </CenteredView> - </> + </View> + </Layout.Center> ) } - -const styles = StyleSheet.create({ - outer: { - flex: 1, - paddingVertical: 30, - paddingHorizontal: 14, - }, - title: { - textAlign: 'center', - marginBottom: 10, - }, - message: { - textAlign: 'center', - marginBottom: 20, - }, - details: { - textAlign: 'center', - paddingVertical: 10, - paddingHorizontal: 14, - overflow: 'hidden', - marginBottom: 20, - }, - btnContainer: { - alignItems: 'center', - }, - btn: { - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 16, - paddingVertical: 10, - }, - btnText: { - marginLeft: 5, - }, - errorIconContainer: { - alignItems: 'center', - marginBottom: 10, - }, - errorIcon: { - borderRadius: 25, - width: 50, - height: 50, - alignItems: 'center', - justifyContent: 'center', - }, -}) |