ALF confirmation dialogs (Dialogs Pt. 3) (#3143)

* Improve a11y on ios

* Format

* Remove android

* Fix android

* ALF confirmation dialog

* Use ALF for Delete Post confirmation

organize

diff

fix text

minimize

change copy

alternative confirm prompt

revert type changes

add ButtonColor param

* small adjustment to buttons in prompt

* full width below gtmobile

* update hide post dialog

* space out dialogs

* update dialogs for lists

* add example

* add to app passwords

* Revert some changes

* use sharedvalue for `importantForAccessibility`

* add back `isOpen`

* fix some more types

* small adjustment to buttons in prompt

* full width below gtmobile

* update the rest of the prompts

rm old confirm modal

rm update prompt

feed error prompt

feed source card and profile block/unblock

composer discard

* Update src/view/screens/AppPasswords.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* lint

* How about a default

* Reverse reverse

* Port over confirm dialogs

* Add some comments

* Remove unused file

* complete merge

* add testID where needed

---------

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

src/view/com/modals/Confirm.tsx

@@ -1,132 +0,0 @@
-import React, {useState} from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
-import {Text} from '../util/text/Text'
-import {s, colors} from 'lib/styles'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {cleanError} from 'lib/strings/errors'
-import {usePalette} from 'lib/hooks/usePalette'
-import {isWeb} from 'platform/detection'
-import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
-import type {ConfirmModal} from '#/state/modals'
-import {useModalControls} from '#/state/modals'
-
-export const snapPoints = ['50%']
-
-export function Component({
-  title,
-  message,
-  onPressConfirm,
-  onPressCancel,
-  confirmBtnText,
-  confirmBtnStyle,
-  cancelBtnText,
-}: ConfirmModal) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const {closeModal} = useModalControls()
-  const [isProcessing, setIsProcessing] = useState<boolean>(false)
-  const [error, setError] = useState<string>('')
-  const onPress = async () => {
-    setError('')
-    setIsProcessing(true)
-    try {
-      await onPressConfirm()
-      closeModal()
-      return
-    } catch (e: any) {
-      setError(cleanError(e))
-      setIsProcessing(false)
-    }
-  }
-  return (
-    <View testID="confirmModal" style={[pal.view, styles.container]}>
-      <Text type="title-xl" style={[pal.text, styles.title]}>
-        {title}
-      </Text>
-      {typeof message === 'string' ? (
-        <Text type="xl" style={[pal.textLight, styles.description]}>
-          {message}
-        </Text>
-      ) : (
-        message()
-      )}
-      {error ? (
-        <View style={s.mt10}>
-          <ErrorMessage message={error} />
-        </View>
-      ) : undefined}
-      <View style={s.flex1} />
-      {isProcessing ? (
-        <View style={[styles.btn, s.mt10]}>
-          <ActivityIndicator />
-        </View>
-      ) : (
-        <TouchableOpacity
-          testID="confirmBtn"
-          onPress={onPress}
-          style={[styles.btn, confirmBtnStyle]}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg({message: 'Confirm', context: 'action'}))}
-          accessibilityHint="">
-          <Text style={[s.white, s.bold, s.f18]}>
-            {confirmBtnText ?? <Trans context="action">Confirm</Trans>}
-          </Text>
-        </TouchableOpacity>
-      )}
-      {onPressCancel === undefined ? null : (
-        <TouchableOpacity
-          testID="cancelBtn"
-          onPress={onPressCancel}
-          style={[styles.btnCancel, s.mt10]}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg({message: 'Cancel', context: 'action'}))}
-          accessibilityHint="">
-          <Text type="button-lg" style={pal.textLight}>
-            {cancelBtnText ?? <Trans context="action">Cancel</Trans>}
-          </Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 10,
-    paddingBottom: isWeb ? 0 : 60,
-  },
-  title: {
-    textAlign: 'center',
-    marginBottom: 12,
-  },
-  description: {
-    textAlign: 'center',
-    paddingHorizontal: 22,
-    marginBottom: 10,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 32,
-    padding: 14,
-    marginTop: 22,
-    marginHorizontal: 44,
-    backgroundColor: colors.blue3,
-  },
-  btnCancel: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 32,
-    padding: 14,
-    marginHorizontal: 20,
-  },
-})

src/view/com/modals/Modal.tsx

@@ -6,7 +6,6 @@ import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
 import {usePalette} from 'lib/hooks/usePalette'
 
 import {useModals, useModalControls} from '#/state/modals'
-import * as ConfirmModal from './Confirm'
 import * as EditProfileModal from './EditProfile'
 import * as RepostModal from './Repost'
 import * as SelfLabelModal from './SelfLabel'
@@ -66,10 +65,7 @@ export function ModalsContainer() {
 
   let snapPoints: (string | number)[] = DEFAULT_SNAPPOINTS
   let element
-  if (activeModal?.name === 'confirm') {
-    snapPoints = ConfirmModal.snapPoints
-    element = <ConfirmModal.Component {...activeModal} />
-  } else if (activeModal?.name === 'edit-profile') {
+  if (activeModal?.name === 'edit-profile') {
     snapPoints = EditProfileModal.snapPoints
     element = <EditProfileModal.Component {...activeModal} />
   } else if (activeModal?.name === 'report') {

src/view/com/modals/Modal.web.tsx

@@ -7,7 +7,6 @@ import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 
 import {useModals, useModalControls} from '#/state/modals'
 import type {Modal as ModalIface} from '#/state/modals'
-import * as ConfirmModal from './Confirm'
 import * as EditProfileModal from './EditProfile'
 import * as ReportModal from './report/Modal'
 import * as AppealLabelModal from './AppealLabel'
@@ -78,9 +77,7 @@ function Modal({modal}: {modal: ModalIface}) {
   }
 
   let element
-  if (modal.name === 'confirm') {
-    element = <ConfirmModal.Component {...modal} />
-  } else if (modal.name === 'edit-profile') {
+  if (modal.name === 'edit-profile') {
     element = <EditProfileModal.Component {...modal} />
   } else if (modal.name === 'report') {
     element = <ReportModal.Component {...modal} />