make discard btn more apparent in UI (#912)

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

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({
       <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"
+            accessibilityLabel="Discard"
-            accessibilityHint="Closes post composer">
+            accessibilityHint="Closes post composer and discards post draft">
-            <Text style={[pal.link, s.f18]}>Cancel</Text>
+            <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,

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,
-}: {
+  confirmBtnText,
-  title: string
+  confirmBtnStyle,
-  message: string | (() => JSX.Element)
+}: ConfirmModal) {
-  onPressConfirm: () => void | Promise<void>
-  onPressCancel?: () => void | Promise<void>
-}) {
   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 : (