this repo has no description
Improve select language prompt (#8391)
authored by
Samuel Newman
and committed by
GitHub
fe73c135
a18b25d1
+29
-42
+29
-42
src/view/com/composer/select-language/SuggestedLanguage.tsx
+29
-42
src/view/com/composer/select-language/SuggestedLanguage.tsx
···
1
1
import {useEffect, useState} from 'react'
2
-
import {StyleSheet, View} from 'react-native'
3
-
import {
4
-
FontAwesomeIcon,
5
-
FontAwesomeIconStyle,
6
-
} from '@fortawesome/react-native-fontawesome'
2
+
import {View} from 'react-native'
7
3
import {msg, Trans} from '@lingui/macro'
8
4
import {useLingui} from '@lingui/react'
9
5
import lande from 'lande'
10
6
11
-
import {usePalette} from '#/lib/hooks/usePalette'
12
-
import {s} from '#/lib/styles'
13
7
import {code3ToCode2Strict, codeToLanguageName} from '#/locale/helpers'
14
8
import {
15
9
toPostLanguages,
16
10
useLanguagePrefs,
17
11
useLanguagePrefsApi,
18
12
} from '#/state/preferences/languages'
19
-
import {Button} from '../../util/forms/Button'
20
-
import {Text} from '../../util/text/Text'
13
+
import {atoms as a, useTheme} from '#/alf'
14
+
import {Button, ButtonText} from '#/components/Button'
15
+
import {Earth_Stroke2_Corner2_Rounded as EarthIcon} from '#/components/icons/Globe'
16
+
import {Text} from '#/components/Typography'
21
17
22
18
// fallbacks for safari
23
19
const onIdle = globalThis.requestIdleCallback || (cb => setTimeout(cb, 1))
···
29
25
>()
30
26
const langPrefs = useLanguagePrefs()
31
27
const setLangPrefs = useLanguagePrefsApi()
32
-
const pal = usePalette('default')
28
+
const t = useTheme()
33
29
const {_} = useLingui()
34
30
35
31
useEffect(() => {
···
59
55
)
60
56
61
57
return (
62
-
<View style={[pal.border, styles.infoBar]}>
63
-
<FontAwesomeIcon
64
-
icon="language"
65
-
style={pal.text as FontAwesomeIconStyle}
66
-
size={24}
67
-
/>
68
-
<Text style={[pal.text, s.flex1]}>
58
+
<View
59
+
style={[
60
+
t.atoms.border_contrast_low,
61
+
a.gap_sm,
62
+
a.border,
63
+
a.flex_row,
64
+
a.align_center,
65
+
a.rounded_sm,
66
+
a.px_lg,
67
+
a.py_md,
68
+
a.mx_md,
69
+
a.my_sm,
70
+
t.atoms.bg,
71
+
]}>
72
+
<EarthIcon />
73
+
<Text style={[a.flex_1]}>
69
74
<Trans>
70
75
Are you writing in{' '}
71
-
<Text type="sm-bold" style={pal.text}>
72
-
{suggestedLanguageName}
73
-
</Text>
74
-
?
76
+
<Text style={[a.font_bold]}>{suggestedLanguageName}</Text>?
75
77
</Trans>
76
78
</Text>
77
79
78
80
<Button
79
-
type="default"
81
+
color="secondary"
82
+
size="small"
83
+
variant="solid"
80
84
onPress={() => setLangPrefs.setPostLanguage(suggestedLanguage)}
81
-
accessibilityLabel={_(
82
-
msg`Change post language to ${suggestedLanguageName}`,
83
-
)}
84
-
accessibilityHint="">
85
-
<Text type="button" style={[pal.link, s.fw600]}>
85
+
label={_(msg`Change post language to ${suggestedLanguageName}`)}>
86
+
<ButtonText>
86
87
<Trans>Yes</Trans>
87
-
</Text>
88
+
</ButtonText>
88
89
</Button>
89
90
</View>
90
91
)
···
92
93
return null
93
94
}
94
95
}
95
-
96
-
const styles = StyleSheet.create({
97
-
infoBar: {
98
-
flexDirection: 'row',
99
-
alignItems: 'center',
100
-
gap: 10,
101
-
borderWidth: 1,
102
-
borderRadius: 6,
103
-
paddingHorizontal: 16,
104
-
paddingVertical: 12,
105
-
marginHorizontal: 10,
106
-
marginBottom: 10,
107
-
},
108
-
})
109
96
110
97
/**
111
98
* This function is using the lande language model to attempt to detect the language