forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
More darkmode fixes (#381)
* Update confirm modal to use theming system (close #347)
* Add dark mode styles to serverinput modal
* Fix lint
authored by
Paul Frazee
and committed by
GitHub
9102af6b
59e6b308
+35
-29
+25
-20
src/view/com/modals/Confirm.tsx
+25
-20
src/view/com/modals/Confirm.tsx
···
5
5
TouchableOpacity,
6
6
View,
7
7
} from 'react-native'
8
-
import LinearGradient from 'react-native-linear-gradient'
9
8
import {Text} from '../util/text/Text'
10
9
import {useStores} from 'state/index'
11
-
import {s, colors, gradients} from 'lib/styles'
10
+
import {s, colors} from 'lib/styles'
12
11
import {ErrorMessage} from '../util/error/ErrorMessage'
13
12
import {cleanError} from 'lib/strings/errors'
13
+
import {usePalette} from 'lib/hooks/usePalette'
14
14
15
-
export const snapPoints = ['50%']
15
+
export const snapPoints = [300]
16
16
17
17
export function Component({
18
18
title,
···
23
23
message: string | (() => JSX.Element)
24
24
onPressConfirm: () => void | Promise<void>
25
25
}) {
26
+
const pal = usePalette('default')
26
27
const store = useStores()
27
28
const [isProcessing, setIsProcessing] = useState<boolean>(false)
28
29
const [error, setError] = useState<string>('')
···
39
40
}
40
41
}
41
42
return (
42
-
<View testID="confirmModal" style={[s.flex1, s.pl10, s.pr10]}>
43
-
<Text style={styles.title}>{title}</Text>
43
+
<View testID="confirmModal" style={[pal.view, styles.container]}>
44
+
<Text type="title-xl" style={[pal.text, styles.title]}>
45
+
{title}
46
+
</Text>
44
47
{typeof message === 'string' ? (
45
-
<Text style={styles.description}>{message}</Text>
48
+
<Text type="xl" style={[pal.textLight, styles.description]}>
49
+
{message}
50
+
</Text>
46
51
) : (
47
52
message()
48
53
)}
···
51
56
<ErrorMessage message={error} />
52
57
</View>
53
58
) : undefined}
59
+
<View style={s.flex1} />
54
60
{isProcessing ? (
55
61
<View style={[styles.btn, s.mt10]}>
56
62
<ActivityIndicator />
57
63
</View>
58
64
) : (
59
-
<TouchableOpacity testID="confirmBtn" style={s.mt10} onPress={onPress}>
60
-
<LinearGradient
61
-
colors={[gradients.blueLight.start, gradients.blueLight.end]}
62
-
start={{x: 0, y: 0}}
63
-
end={{x: 1, y: 1}}
64
-
style={[styles.btn]}>
65
-
<Text style={[s.white, s.bold, s.f18]}>Confirm</Text>
66
-
</LinearGradient>
65
+
<TouchableOpacity
66
+
testID="confirmBtn"
67
+
onPress={onPress}
68
+
style={[styles.btn]}>
69
+
<Text style={[s.white, s.bold, s.f18]}>Confirm</Text>
67
70
</TouchableOpacity>
68
71
)}
69
72
</View>
···
71
74
}
72
75
73
76
const styles = StyleSheet.create({
77
+
container: {
78
+
flex: 1,
79
+
padding: 10,
80
+
paddingBottom: 60,
81
+
},
74
82
title: {
75
83
textAlign: 'center',
76
-
fontWeight: 'bold',
77
-
fontSize: 24,
78
84
marginBottom: 12,
79
85
},
80
86
description: {
81
87
textAlign: 'center',
82
-
fontSize: 17,
83
88
paddingHorizontal: 22,
84
-
color: colors.gray5,
85
89
marginBottom: 10,
86
90
},
87
91
btn: {
88
92
flexDirection: 'row',
89
93
alignItems: 'center',
90
94
justifyContent: 'center',
91
-
width: '100%',
92
95
borderRadius: 32,
93
96
padding: 14,
94
-
backgroundColor: colors.gray1,
97
+
marginTop: 22,
98
+
marginHorizontal: 44,
99
+
backgroundColor: colors.blue3,
95
100
},
96
101
})
+10
-9
src/view/com/modals/ServerInput.tsx
+10
-9
src/view/com/modals/ServerInput.tsx
···
8
8
import {Text} from '../util/text/Text'
9
9
import {useStores} from 'state/index'
10
10
import {s, colors} from 'lib/styles'
11
+
import {usePalette} from 'lib/hooks/usePalette'
11
12
import {useTheme} from 'lib/ThemeContext'
12
13
import {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'state/index'
13
14
import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags'
···
16
17
17
18
export function Component({onSelect}: {onSelect: (url: string) => void}) {
18
19
const theme = useTheme()
20
+
const pal = usePalette('default')
19
21
const store = useStores()
20
22
const [customUrl, setCustomUrl] = useState<string>('')
21
23
···
28
30
}
29
31
30
32
return (
31
-
<View style={s.flex1} testID="serverInputModal">
32
-
<Text style={[s.textCenter, s.bold, s.f18]}>Choose Service</Text>
33
+
<View style={[pal.view, s.flex1]} testID="serverInputModal">
34
+
<Text type="2xl-bold" style={[pal.text, s.textCenter]}>
35
+
Choose Service
36
+
</Text>
33
37
<ScrollView style={styles.inner}>
34
38
<View style={styles.group}>
35
39
{LOGIN_INCLUDE_DEV_SERVERS ? (
···
66
70
</TouchableOpacity>
67
71
</View>
68
72
<View style={styles.group}>
69
-
<Text style={styles.label}>Other service</Text>
73
+
<Text style={[pal.text, styles.label]}>Other service</Text>
70
74
<View style={s.flexRow}>
71
75
<TextInput
72
76
testID="customServerTextInput"
73
-
style={styles.textInput}
77
+
style={[pal.borderDark, pal.text, styles.textInput]}
74
78
placeholder="e.g. https://bsky.app"
75
79
placeholderTextColor={colors.gray4}
76
80
autoCapitalize="none"
···
82
86
/>
83
87
<TouchableOpacity
84
88
testID="customServerSelectBtn"
85
-
style={styles.textInputBtn}
89
+
style={[pal.borderDark, pal.text, styles.textInputBtn]}
86
90
onPress={() => doSelect(customUrl)}>
87
91
<FontAwesomeIcon
88
92
icon="check"
89
-
style={[s.black as FontAwesomeIconStyle, styles.checkIcon]}
93
+
style={[pal.text as FontAwesomeIconStyle, styles.checkIcon]}
90
94
size={18}
91
95
/>
92
96
</TouchableOpacity>
···
112
116
textInput: {
113
117
flex: 1,
114
118
borderWidth: 1,
115
-
borderColor: colors.gray3,
116
119
borderTopLeftRadius: 6,
117
120
borderBottomLeftRadius: 6,
118
121
paddingHorizontal: 14,
119
122
paddingVertical: 12,
120
123
fontSize: 16,
121
-
color: colors.black,
122
124
},
123
125
textInputBtn: {
124
126
borderWidth: 1,
125
127
borderLeftWidth: 0,
126
-
borderColor: colors.gray3,
127
128
borderTopRightRadius: 6,
128
129
borderBottomRightRadius: 6,
129
130
paddingHorizontal: 14,