diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index 85a38932..30e5d017 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -1,6 +1,7 @@ import React, {useEffect, useMemo, useState} from 'react' import { ActivityIndicator, + KeyboardAvoidingView, StyleSheet, Text, TextInput, @@ -20,7 +21,7 @@ import {s, colors, gradients} from '../../lib/styles' const MAX_TEXT_LENGTH = 256 const WARNING_TEXT_LENGTH = 200 -const DANGER_TEXT_LENGTH = 255 +const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH export function ComposePost({ replyTo, @@ -56,9 +57,6 @@ export function ComposePost({ }) const onChangeText = (newText: string) => { - if (newText.length > MAX_TEXT_LENGTH) { - newText = newText.slice(0, MAX_TEXT_LENGTH) - } setText(newText) const prefix = extractTextAutocompletePrefix(newText) @@ -81,6 +79,9 @@ export function ComposePost({ if (isProcessing) { return } + if (text.length > MAX_TEXT_LENGTH) { + return + } setError('') if (text.trim().length === 0) { setError('Did you want to say anything?') @@ -112,6 +113,7 @@ export function ComposePost({ setAutocompleteOptions([]) } + const canPost = text.length <= MAX_TEXT_LENGTH const progressColor = text.length > DANGER_TEXT_LENGTH ? '#e60000' @@ -133,7 +135,7 @@ export function ComposePost({ }, [text]) return ( - + Cancel @@ -143,7 +145,7 @@ export function ComposePost({ - ) : ( + ) : canPost ? ( Post + ) : ( + + Post + )} {error !== '' && ( @@ -176,8 +182,11 @@ export function ComposePost({ style={styles.textInput}> {textDecorated} - + + + {text.length} / {MAX_TEXT_LENGTH} + - + ) } @@ -219,6 +228,7 @@ const styles = StyleSheet.create({ paddingTop: 10, paddingBottom: 5, paddingHorizontal: 5, + height: 50, }, postBtn: { borderRadius: 20, diff --git a/src/view/com/modals/CreateScene.tsx b/src/view/com/modals/CreateScene.tsx index 9c4cdc5d..3fb3ab6f 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 ( - Create a scene - - Scenes are invite-only groups which aggregate what's popular with - members. - + Create a scene + + Scenes are invite-only groups which aggregate what's popular with + members. + Scene Handle @@ -159,6 +162,11 @@ export function Component({}: {}) { )} + + + Cancel + + @@ -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 7310ab59..d4cb6692 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( profileView.description || '', ) + const onPressCancel = () => { + store.shell.closeModal() + } const onPressSave = async () => { if (error) { setError('') @@ -60,7 +64,7 @@ export function Component({ return ( Edit my profile - + {error !== '' && ( @@ -68,7 +72,7 @@ export function Component({ )} Display Name - Description - Save Changes - + + + Cancel + + + ) } diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx index 1f3cc90f..0aa1a07e 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 ( Choose Service - + {!IS_PROD_BUILD ? ( <> @@ -66,7 +62,7 @@ export function Component({ Other service - - + ) } diff --git a/src/view/lib/strings.ts b/src/view/lib/strings.ts index 1cbad1a4..df134e37 100644 --- a/src/view/lib/strings.ts +++ b/src/view/lib/strings.ts @@ -42,9 +42,7 @@ export function ago(date: number | string | Date): string { ts = date } const diffSeconds = Math.floor((Date.now() - ts) / 1e3) - if (diffSeconds === 0) { - return 'just now' - } else if (diffSeconds < MINUTE) { + if (diffSeconds < MINUTE) { return `${diffSeconds}s` } else if (diffSeconds < HOUR) { return `${Math.floor(diffSeconds / MINUTE)}m`