diff options
Diffstat (limited to 'src/view/com/modals')
| -rw-r--r-- | src/view/com/modals/CreateScene.tsx | 22 | ||||
| -rw-r--r-- | src/view/com/modals/EditProfile.tsx | 21 | ||||
| -rw-r--r-- | src/view/com/modals/ServerInput.tsx | 14 |
3 files changed, 34 insertions, 23 deletions
diff --git a/src/view/com/modals/CreateScene.tsx b/src/view/com/modals/CreateScene.tsx index 9c4cdc5da..3fb3ab6f8 100644 --- a/src/view/com/modals/CreateScene.tsx +++ b/src/view/com/modals/CreateScene.tsx @@ -92,15 +92,18 @@ export function Component({}: {}) { setIsProcessing(false) } } + const onPressCancel = () => { + store.shell.closeModal() + } return ( <View style={styles.outer}> - <Text style={styles.title}>Create a scene</Text> - <Text style={styles.description}> - Scenes are invite-only groups which aggregate what's popular with - members. - </Text> <BottomSheetScrollView style={styles.inner}> + <Text style={styles.title}>Create a scene</Text> + <Text style={styles.description}> + Scenes are invite-only groups which aggregate what's popular with + members. + </Text> <View style={{paddingBottom: 50}}> <View style={styles.group}> <Text style={styles.label}>Scene Handle</Text> @@ -159,6 +162,11 @@ export function Component({}: {}) { </View> </View> )} + <TouchableOpacity style={s.mt10} onPress={onPressCancel}> + <View style={[styles.btn, {backgroundColor: colors.white}]}> + <Text style={[s.black, s.bold]}>Cancel</Text> + </View> + </TouchableOpacity> </View> </BottomSheetScrollView> </View> @@ -168,8 +176,7 @@ export function Component({}: {}) { const styles = StyleSheet.create({ outer: { flex: 1, - paddingTop: 20, - paddingBottom: 20, + // paddingTop: 20, }, title: { textAlign: 'center', @@ -222,7 +229,6 @@ const styles = StyleSheet.create({ width: '100%', borderRadius: 32, padding: 14, - marginBottom: 10, backgroundColor: colors.gray1, }, }) diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 7310ab592..d4cb6692c 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -1,7 +1,8 @@ import React, {useState} from 'react' import Toast from '../util/Toast' -import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native' +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' +import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet' import {ErrorMessage} from '../util/ErrorMessage' import {useStores} from '../../../state' import {ProfileViewModel} from '../../../state/models/profile-view' @@ -9,7 +10,7 @@ import {s, colors, gradients} from '../../lib/styles' import {enforceLen, MAX_DISPLAY_NAME, MAX_DESCRIPTION} from '../../lib/strings' import * as Profile from '../../../third-party/api/src/client/types/app/bsky/actor/profile' -export const snapPoints = ['80%'] +export const snapPoints = ['60%'] export function Component({ profileView, @@ -26,6 +27,9 @@ export function Component({ const [description, setDescription] = useState<string>( profileView.description || '', ) + const onPressCancel = () => { + store.shell.closeModal() + } const onPressSave = async () => { if (error) { setError('') @@ -60,7 +64,7 @@ export function Component({ return ( <View style={s.flex1}> <Text style={[s.textCenter, s.bold, s.f16]}>Edit my profile</Text> - <View style={styles.inner}> + <BottomSheetScrollView style={styles.inner}> {error !== '' && ( <View style={s.mb10}> <ErrorMessage message={error} /> @@ -68,7 +72,7 @@ export function Component({ )} <View style={styles.group}> <Text style={styles.label}>Display Name</Text> - <TextInput + <BottomSheetTextInput style={styles.textInput} placeholder="e.g. Alice Roberts" value={displayName} @@ -77,7 +81,7 @@ export function Component({ </View> <View style={styles.group}> <Text style={styles.label}>Description</Text> - <TextInput + <BottomSheetTextInput style={[styles.textArea]} placeholder="e.g. Artist, dog-lover, and memelord." multiline @@ -94,7 +98,12 @@ export function Component({ <Text style={[s.white, s.bold]}>Save Changes</Text> </LinearGradient> </TouchableOpacity> - </View> + <TouchableOpacity style={s.mt5} onPress={onPressCancel}> + <View style={[styles.btn]}> + <Text style={[s.black, s.bold]}>Cancel</Text> + </View> + </TouchableOpacity> + </BottomSheetScrollView> </View> ) } diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx index 1f3cc90f9..0aa1a07e2 100644 --- a/src/view/com/modals/ServerInput.tsx +++ b/src/view/com/modals/ServerInput.tsx @@ -1,13 +1,9 @@ import React, {useState} from 'react' -import Toast from '../util/Toast' import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import LinearGradient from 'react-native-linear-gradient' -import {ErrorMessage} from '../util/ErrorMessage' +import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet' import {useStores} from '../../../state' -import {ProfileViewModel} from '../../../state/models/profile-view' -import {s, colors, gradients} from '../../lib/styles' -import {enforceLen, MAX_DISPLAY_NAME, MAX_DESCRIPTION} from '../../lib/strings' +import {s, colors} from '../../lib/styles' import { IS_PROD_BUILD, LOCAL_DEV_SERVICE, @@ -38,7 +34,7 @@ export function Component({ return ( <View style={s.flex1}> <Text style={[s.textCenter, s.bold, s.f18]}>Choose Service</Text> - <View style={styles.inner}> + <BottomSheetScrollView style={styles.inner}> <View style={styles.group}> {!IS_PROD_BUILD ? ( <> @@ -66,7 +62,7 @@ export function Component({ <View style={styles.group}> <Text style={styles.label}>Other service</Text> <View style={{flexDirection: 'row'}}> - <TextInput + <BottomSheetTextInput style={styles.textInput} placeholder="e.g. https://bsky.app" autoCapitalize="none" @@ -86,7 +82,7 @@ export function Component({ </TouchableOpacity> </View> </View> - </View> + </BottomSheetScrollView> </View> ) } |