forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
alf error screen (#7135)
authored by
Samuel Newman
and committed by
GitHub
be33c626
1a160df3
+55
-82
+55
-82
src/view/com/util/error/ErrorScreen.tsx
+55
-82
src/view/com/util/error/ErrorScreen.tsx
···
1
-
import {StyleSheet, View} from 'react-native'
1
+
import {View} from 'react-native'
2
2
import {
3
3
FontAwesomeIcon,
4
4
FontAwesomeIconStyle,
···
7
7
import {useLingui} from '@lingui/react'
8
8
9
9
import {usePalette} from '#/lib/hooks/usePalette'
10
-
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
11
-
import {useTheme} from '#/lib/ThemeContext'
12
-
import {ViewHeader} from '#/view/com/util/ViewHeader'
13
-
import {Button} from '../forms/Button'
14
-
import {Text} from '../text/Text'
15
-
import {CenteredView} from '../Views'
10
+
import {atoms as a, useTheme} from '#/alf'
11
+
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
12
+
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwiseIcon} from '#/components/icons/ArrowRotateCounterClockwise'
13
+
import * as Layout from '#/components/Layout'
14
+
import {Text} from '#/components/Typography'
16
15
17
16
export function ErrorScreen({
18
17
title,
···
29
28
testID?: string
30
29
showHeader?: boolean
31
30
}) {
32
-
const theme = useTheme()
33
-
const {isMobile} = useWebMediaQueries()
31
+
const t = useTheme()
34
32
const pal = usePalette('default')
35
33
const {_} = useLingui()
36
34
37
35
return (
38
-
<>
39
-
{showHeader && isMobile && (
40
-
<ViewHeader title={_(msg`Error`)} showBorder />
36
+
<Layout.Center testID={testID}>
37
+
{showHeader && (
38
+
<Layout.Header.Outer>
39
+
<Layout.Header.BackButton />
40
+
<Layout.Header.Content>
41
+
<Layout.Header.TitleText>
42
+
<Trans>Error</Trans>
43
+
</Layout.Header.TitleText>
44
+
</Layout.Header.Content>
45
+
<Layout.Header.Slot />
46
+
</Layout.Header.Outer>
41
47
)}
42
-
<CenteredView testID={testID} style={[styles.outer, pal.view]}>
43
-
<View style={styles.errorIconContainer}>
48
+
<View style={[a.px_xl, a.py_2xl]}>
49
+
<View style={[a.mb_md, a.align_center]}>
44
50
<View
45
51
style={[
46
-
styles.errorIcon,
47
-
{backgroundColor: theme.palette.inverted.background},
52
+
a.rounded_full,
53
+
{width: 50, height: 50},
54
+
a.align_center,
55
+
a.justify_center,
56
+
{backgroundColor: t.palette.contrast_950},
48
57
]}>
49
58
<FontAwesomeIcon
50
59
icon="exclamation"
···
53
62
/>
54
63
</View>
55
64
</View>
56
-
<Text type="title-lg" style={[styles.title, pal.text]}>
65
+
<Text style={[a.text_center, a.font_heavy, a.text_2xl, a.mb_md]}>
57
66
{title}
58
67
</Text>
59
-
<Text style={[styles.message, pal.text]}>{message}</Text>
68
+
<Text style={[a.text_center, a.text_md, a.mb_xl]}>{message}</Text>
60
69
{details && (
61
-
<Text
62
-
testID={`${testID}-details`}
63
-
style={[styles.details, pal.text, pal.viewLight]}>
64
-
{details}
65
-
</Text>
70
+
<View
71
+
style={[
72
+
a.w_full,
73
+
a.border,
74
+
t.atoms.border_contrast_medium,
75
+
t.atoms.bg_contrast_25,
76
+
a.mb_xl,
77
+
a.py_sm,
78
+
a.px_lg,
79
+
a.rounded_xs,
80
+
a.overflow_hidden,
81
+
]}>
82
+
<Text
83
+
testID={`${testID}-details`}
84
+
style={[a.text_center, a.text_md, t.atoms.text_contrast_high]}>
85
+
{details}
86
+
</Text>
87
+
</View>
66
88
)}
67
89
{onPressTryAgain && (
68
-
<View style={styles.btnContainer}>
90
+
<View style={[a.align_center]}>
69
91
<Button
70
92
testID="errorScreenTryAgainButton"
71
-
type="default"
72
-
style={[styles.btn]}
73
93
onPress={onPressTryAgain}
74
-
accessibilityLabel={_(msg`Retry`)}
94
+
variant="solid"
95
+
color="secondary_inverted"
96
+
size="small"
97
+
label={_(msg`Retry`)}
75
98
accessibilityHint={_(
76
99
msg`Retries the last action, which errored out`,
77
100
)}>
78
-
<FontAwesomeIcon
79
-
icon="arrows-rotate"
80
-
style={pal.link as FontAwesomeIconStyle}
81
-
size={16}
82
-
/>
83
-
<Text type="button" style={[styles.btnText, pal.link]}>
101
+
<ButtonIcon icon={ArrowRotateCounterClockwiseIcon} />
102
+
<ButtonText>
84
103
<Trans context="action">Try again</Trans>
85
-
</Text>
104
+
</ButtonText>
86
105
</Button>
87
106
</View>
88
107
)}
89
-
</CenteredView>
90
-
</>
108
+
</View>
109
+
</Layout.Center>
91
110
)
92
111
}
93
-
94
-
const styles = StyleSheet.create({
95
-
outer: {
96
-
flex: 1,
97
-
paddingVertical: 30,
98
-
paddingHorizontal: 14,
99
-
},
100
-
title: {
101
-
textAlign: 'center',
102
-
marginBottom: 10,
103
-
},
104
-
message: {
105
-
textAlign: 'center',
106
-
marginBottom: 20,
107
-
},
108
-
details: {
109
-
textAlign: 'center',
110
-
paddingVertical: 10,
111
-
paddingHorizontal: 14,
112
-
overflow: 'hidden',
113
-
marginBottom: 20,
114
-
},
115
-
btnContainer: {
116
-
alignItems: 'center',
117
-
},
118
-
btn: {
119
-
flexDirection: 'row',
120
-
alignItems: 'center',
121
-
paddingHorizontal: 16,
122
-
paddingVertical: 10,
123
-
},
124
-
btnText: {
125
-
marginLeft: 5,
126
-
},
127
-
errorIconContainer: {
128
-
alignItems: 'center',
129
-
marginBottom: 10,
130
-
},
131
-
errorIcon: {
132
-
borderRadius: 25,
133
-
width: 50,
134
-
height: 50,
135
-
alignItems: 'center',
136
-
justifyContent: 'center',
137
-
},
138
-
})