From 25b3e14926d2d565b37c3ff715897ca7c513a0d2 Mon Sep 17 00:00:00 2001 From: Ansh Date: Mon, 26 Jun 2023 17:10:04 -0700 Subject: make discard btn more apparent in UI (#912) --- src/state/models/ui/shell.ts | 3 +++ src/view/com/composer/Composer.tsx | 17 +++++++++++------ src/view/com/modals/Confirm.tsx | 16 ++++++++-------- 3 files changed, 22 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts index d6ece48aa..ba03fe1b5 100644 --- a/src/state/models/ui/shell.ts +++ b/src/state/models/ui/shell.ts @@ -7,6 +7,7 @@ import {Image as RNImage} from 'react-native-image-crop-picker' import {ImageModel} from '../media/image' import {ListModel} from '../content/list' import {GalleryModel} from '../media/gallery' +import {StyleProp, ViewStyle} from 'react-native' export type ColorMode = 'system' | 'light' | 'dark' @@ -20,6 +21,8 @@ export interface ConfirmModal { message: string | (() => JSX.Element) onPressConfirm: () => void | Promise onPressCancel?: () => void | Promise + confirmBtnText?: string + confirmBtnStyle?: StyleProp } export interface EditProfileModal { diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index abac291a2..fb6aaa231 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -107,12 +107,14 @@ export const ComposePost = observer(function ComposePost({ shell.openModal({ name: 'confirm', - title: 'Cancel draft', + title: 'Discard draft', onPressConfirm: onClose, onPressCancel: () => { store.shell.closeModal() }, - message: "Are you sure you'd like to cancel this draft?", + message: "Are you sure you'd like to discard this draft?", + confirmBtnText: 'Discard', + confirmBtnStyle: {backgroundColor: colors.red4}, }) } }, @@ -222,13 +224,13 @@ export const ComposePost = observer(function ComposePost({ - Cancel + accessibilityLabel="Discard" + accessibilityHint="Closes post composer and discards post draft"> + Discard {isProcessing ? ( @@ -381,6 +383,9 @@ const styles = StyleSheet.create({ paddingHorizontal: 20, height: 55, }, + discard: { + color: colors.red3, + }, postBtn: { borderRadius: 20, paddingHorizontal: 20, diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx index 11e1a6334..f9bc0de14 100644 --- a/src/view/com/modals/Confirm.tsx +++ b/src/view/com/modals/Confirm.tsx @@ -12,6 +12,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage' import {cleanError} from 'lib/strings/errors' import {usePalette} from 'lib/hooks/usePalette' import {isDesktopWeb} from 'platform/detection' +import type {ConfirmModal} from 'state/models/ui/shell' export const snapPoints = ['50%'] @@ -20,12 +21,9 @@ export function Component({ message, onPressConfirm, onPressCancel, -}: { - title: string - message: string | (() => JSX.Element) - onPressConfirm: () => void | Promise - onPressCancel?: () => void | Promise -}) { + confirmBtnText, + confirmBtnStyle, +}: ConfirmModal) { const pal = usePalette('default') const store = useStores() const [isProcessing, setIsProcessing] = useState(false) @@ -68,11 +66,13 @@ export function Component({ - Confirm + + {confirmBtnText ?? 'Confirm'} + )} {onPressCancel === undefined ? null : ( -- cgit 1.4.1