diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/view/com/modals/Confirm.tsx | 45 | ||||
| -rw-r--r-- | src/view/com/modals/ServerInput.tsx | 19 |
2 files changed, 35 insertions, 29 deletions
diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx index 2bfcf4118..63877fe5d 100644 --- a/src/view/com/modals/Confirm.tsx +++ b/src/view/com/modals/Confirm.tsx @@ -5,14 +5,14 @@ import { TouchableOpacity, View, } from 'react-native' -import LinearGradient from 'react-native-linear-gradient' import {Text} from '../util/text/Text' import {useStores} from 'state/index' -import {s, colors, gradients} from 'lib/styles' +import {s, colors} from 'lib/styles' import {ErrorMessage} from '../util/error/ErrorMessage' import {cleanError} from 'lib/strings/errors' +import {usePalette} from 'lib/hooks/usePalette' -export const snapPoints = ['50%'] +export const snapPoints = [300] export function Component({ title, @@ -23,6 +23,7 @@ export function Component({ message: string | (() => JSX.Element) onPressConfirm: () => void | Promise<void> }) { + const pal = usePalette('default') const store = useStores() const [isProcessing, setIsProcessing] = useState<boolean>(false) const [error, setError] = useState<string>('') @@ -39,10 +40,14 @@ export function Component({ } } return ( - <View testID="confirmModal" style={[s.flex1, s.pl10, s.pr10]}> - <Text style={styles.title}>{title}</Text> + <View testID="confirmModal" style={[pal.view, styles.container]}> + <Text type="title-xl" style={[pal.text, styles.title]}> + {title} + </Text> {typeof message === 'string' ? ( - <Text style={styles.description}>{message}</Text> + <Text type="xl" style={[pal.textLight, styles.description]}> + {message} + </Text> ) : ( message() )} @@ -51,19 +56,17 @@ export function Component({ <ErrorMessage message={error} /> </View> ) : undefined} + <View style={s.flex1} /> {isProcessing ? ( <View style={[styles.btn, s.mt10]}> <ActivityIndicator /> </View> ) : ( - <TouchableOpacity testID="confirmBtn" style={s.mt10} onPress={onPress}> - <LinearGradient - colors={[gradients.blueLight.start, gradients.blueLight.end]} - start={{x: 0, y: 0}} - end={{x: 1, y: 1}} - style={[styles.btn]}> - <Text style={[s.white, s.bold, s.f18]}>Confirm</Text> - </LinearGradient> + <TouchableOpacity + testID="confirmBtn" + onPress={onPress} + style={[styles.btn]}> + <Text style={[s.white, s.bold, s.f18]}>Confirm</Text> </TouchableOpacity> )} </View> @@ -71,26 +74,28 @@ export function Component({ } const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 10, + paddingBottom: 60, + }, title: { textAlign: 'center', - fontWeight: 'bold', - fontSize: 24, marginBottom: 12, }, description: { textAlign: 'center', - fontSize: 17, paddingHorizontal: 22, - color: colors.gray5, marginBottom: 10, }, btn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - width: '100%', borderRadius: 32, padding: 14, - backgroundColor: colors.gray1, + marginTop: 22, + marginHorizontal: 44, + backgroundColor: colors.blue3, }, }) diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx index 1d352cec9..078abbf64 100644 --- a/src/view/com/modals/ServerInput.tsx +++ b/src/view/com/modals/ServerInput.tsx @@ -8,6 +8,7 @@ import {ScrollView, TextInput} from './util' import {Text} from '../util/text/Text' import {useStores} from 'state/index' import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' import {useTheme} from 'lib/ThemeContext' import {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'state/index' import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags' @@ -16,6 +17,7 @@ export const snapPoints = ['80%'] export function Component({onSelect}: {onSelect: (url: string) => void}) { const theme = useTheme() + const pal = usePalette('default') const store = useStores() const [customUrl, setCustomUrl] = useState<string>('') @@ -28,8 +30,10 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) { } return ( - <View style={s.flex1} testID="serverInputModal"> - <Text style={[s.textCenter, s.bold, s.f18]}>Choose Service</Text> + <View style={[pal.view, s.flex1]} testID="serverInputModal"> + <Text type="2xl-bold" style={[pal.text, s.textCenter]}> + Choose Service + </Text> <ScrollView style={styles.inner}> <View style={styles.group}> {LOGIN_INCLUDE_DEV_SERVERS ? ( @@ -66,11 +70,11 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) { </TouchableOpacity> </View> <View style={styles.group}> - <Text style={styles.label}>Other service</Text> + <Text style={[pal.text, styles.label]}>Other service</Text> <View style={s.flexRow}> <TextInput testID="customServerTextInput" - style={styles.textInput} + style={[pal.borderDark, pal.text, styles.textInput]} placeholder="e.g. https://bsky.app" placeholderTextColor={colors.gray4} autoCapitalize="none" @@ -82,11 +86,11 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) { /> <TouchableOpacity testID="customServerSelectBtn" - style={styles.textInputBtn} + style={[pal.borderDark, pal.text, styles.textInputBtn]} onPress={() => doSelect(customUrl)}> <FontAwesomeIcon icon="check" - style={[s.black as FontAwesomeIconStyle, styles.checkIcon]} + style={[pal.text as FontAwesomeIconStyle, styles.checkIcon]} size={18} /> </TouchableOpacity> @@ -112,18 +116,15 @@ const styles = StyleSheet.create({ textInput: { flex: 1, borderWidth: 1, - borderColor: colors.gray3, borderTopLeftRadius: 6, borderBottomLeftRadius: 6, paddingHorizontal: 14, paddingVertical: 12, fontSize: 16, - color: colors.black, }, textInputBtn: { borderWidth: 1, borderLeftWidth: 0, - borderColor: colors.gray3, borderTopRightRadius: 6, borderBottomRightRadius: 6, paddingHorizontal: 14, |