forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Replace incongruous buttons in drawer (#4772)
* Replace incongruous buttons in drawer
* Improve a11y help
authored by
Eric Bailey
and committed by
GitHub
7c1c24ef
f85df425
+24
-34
+24
-34
src/view/shell/Drawer.tsx
+24
-34
src/view/shell/Drawer.tsx
···
9
9
View,
10
10
ViewStyle,
11
11
} from 'react-native'
12
-
import {
13
-
FontAwesomeIcon,
14
-
FontAwesomeIconStyle,
15
-
} from '@fortawesome/react-native-fontawesome'
12
+
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
16
13
import {msg, Plural, Trans} from '@lingui/macro'
17
14
import {useLingui} from '@lingui/react'
18
15
import {StackActions, useNavigation} from '@react-navigation/native'
···
37
34
import {Text} from 'view/com/util/text/Text'
38
35
import {UserAvatar} from 'view/com/util/UserAvatar'
39
36
import {useTheme as useAlfTheme} from '#/alf'
37
+
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
40
38
import {
41
39
Bell_Filled_Corner0_Rounded as BellFilled,
42
40
Bell_Stroke2_Corner0_Rounded as Bell,
···
52
50
} from '#/components/icons/HomeOpen'
53
51
import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
54
52
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
53
+
import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
55
54
import {SettingsGear2_Stroke2_Corner0_Rounded as Settings} from '#/components/icons/SettingsGear2'
56
55
import {
57
56
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
···
319
318
onPressFeedback: () => void
320
319
onPressHelp: () => void
321
320
}): React.ReactNode => {
322
-
const theme = useTheme()
323
-
const pal = usePalette('default')
324
321
const {_} = useLingui()
325
322
return (
326
323
<View style={styles.footer}>
327
-
<TouchableOpacity
328
-
accessibilityRole="link"
329
-
accessibilityLabel={_(msg`Send feedback`)}
330
-
accessibilityHint=""
331
-
onPress={onPressFeedback}
332
-
style={[
333
-
styles.footerBtn,
334
-
styles.footerBtnFeedback,
335
-
theme.colorScheme === 'light'
336
-
? styles.footerBtnFeedbackLight
337
-
: styles.footerBtnFeedbackDark,
338
-
]}>
339
-
<FontAwesomeIcon
340
-
style={pal.link as FontAwesomeIconStyle}
341
-
size={18}
342
-
icon={['far', 'message']}
343
-
/>
344
-
<Text type="lg-medium" style={[pal.link, s.pl10]}>
324
+
<Button
325
+
label={_(msg`Send feedback`)}
326
+
size="small"
327
+
variant="solid"
328
+
color="secondary"
329
+
onPress={onPressFeedback}>
330
+
<ButtonIcon icon={Message} position="left" />
331
+
<ButtonText>
345
332
<Trans>Feedback</Trans>
346
-
</Text>
347
-
</TouchableOpacity>
348
-
<TouchableOpacity
349
-
accessibilityRole="link"
350
-
accessibilityLabel={_(msg`Send feedback`)}
351
-
accessibilityHint=""
333
+
</ButtonText>
334
+
</Button>
335
+
<Button
336
+
label={_(msg`Get help`)}
337
+
size="small"
338
+
variant="outline"
339
+
color="secondary"
352
340
onPress={onPressHelp}
353
-
style={[styles.footerBtn]}>
354
-
<Text type="lg-medium" style={[pal.link, s.pl10]}>
341
+
style={{
342
+
backgroundColor: 'transparent',
343
+
}}>
344
+
<ButtonText>
355
345
<Trans>Help</Trans>
356
-
</Text>
357
-
</TouchableOpacity>
346
+
</ButtonText>
347
+
</Button>
358
348
</View>
359
349
)
360
350
}