make discard btn more apparent in UI (#912)
parent
cd21a7dfc9
commit
25b3e14926
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 : (
|
||||
|
|
Loading…
Reference in New Issue