make discard btn more apparent in UI (#912)

zio/stable
Ansh 2023-06-26 17:10:04 -07:00 committed by GitHub
parent cd21a7dfc9
commit 25b3e14926
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 14 deletions

View File

@ -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<void>
onPressCancel?: () => void | Promise<void>
confirmBtnText?: string
confirmBtnStyle?: StyleProp<ViewStyle>
}
export interface EditProfileModal {

View File

@ -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({
<View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal>
<View style={styles.topbar}>
<TouchableOpacity
testID="composerCancelButton"
testID="composerDiscardButton"
onPress={hackfixOnClose}
onAccessibilityEscape={hackfixOnClose}
accessibilityRole="button"
accessibilityLabel="Cancel"
accessibilityHint="Closes post composer">
<Text style={[pal.link, s.f18]}>Cancel</Text>
accessibilityLabel="Discard"
accessibilityHint="Closes post composer and discards post draft">
<Text style={[pal.link, s.f18, styles.discard]}>Discard</Text>
</TouchableOpacity>
<View style={s.flex1} />
{isProcessing ? (
@ -381,6 +383,9 @@ const styles = StyleSheet.create({
paddingHorizontal: 20,
height: 55,
},
discard: {
color: colors.red3,
},
postBtn: {
borderRadius: 20,
paddingHorizontal: 20,

View File

@ -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<void>
onPressCancel?: () => void | Promise<void>
}) {
confirmBtnText,
confirmBtnStyle,
}: ConfirmModal) {
const pal = usePalette('default')
const store = useStores()
const [isProcessing, setIsProcessing] = useState<boolean>(false)
@ -68,11 +66,13 @@ export function Component({
<TouchableOpacity
testID="confirmBtn"
onPress={onPress}
style={[styles.btn]}
style={[styles.btn, confirmBtnStyle]}
accessibilityRole="button"
accessibilityLabel="Confirm"
accessibilityHint="">
<Text style={[s.white, s.bold, s.f18]}>Confirm</Text>
<Text style={[s.white, s.bold, s.f18]}>
{confirmBtnText ?? 'Confirm'}
</Text>
</TouchableOpacity>
)}
{onPressCancel === undefined ? null : (