Update appearance of chat when blocked (#10582)

src/components/dms/MessagesListBlockedFooter.tsx

@@ -1,38 +1,37 @@
 import {useCallback, useMemo} from 'react'
 import {View} from 'react-native'
+import {LinearGradient} from 'expo-linear-gradient'
 import {type ModerationDecision} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useProfileBlockMutationQueue} from '#/state/queries/profile'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
-import {Divider} from '#/components/Divider'
 import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog'
 import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
 import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt'
+import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
+import {Flag_Stroke2_Corner0_Rounded as FlagIcon} from '#/components/icons/Flag'
+import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheckIcon} from '#/components/icons/Person'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
 
 export function MessagesListBlockedFooter({
   recipient: initialRecipient,
   convoId,
-  hasMessages,
   moderation,
 }: {
   recipient: bsky.profile.AnyProfileView
   convoId: string
-  hasMessages: boolean
   moderation: ModerationDecision
 }) {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const recipient = useProfileShadow(initialRecipient)
-  const [__, queueUnblock] = useProfileBlockMutationQueue(recipient)
+  const [_queueBlock, queueUnblock] = useProfileBlockMutationQueue(recipient)
 
   const leaveConvoControl = useDialogControl()
   const reportControl = useDialogControl()
@@ -55,82 +54,78 @@ export function MessagesListBlockedFooter({
     if (listBlocks.length) {
       blockedByListControl.open()
     } else {
-      queueUnblock()
+      void queueUnblock()
     }
   }, [blockedByListControl, listBlocks, queueUnblock])
 
   return (
-    <View style={[hasMessages && a.pt_md, a.pb_xl, a.gap_lg]}>
-      <Divider />
-      <Text style={[a.text_md, a.font_semi_bold, a.text_center]}>
-        {isBlocking ? (
-          <Trans>You have blocked this user</Trans>
-        ) : (
-          <Trans>This user has blocked you</Trans>
-        )}
+    <View style={[a.gap_lg, a.p_2xl, t.atoms.bg]}>
+      <LinearGradient
+        colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.08)']}
+        style={[a.absolute, {top: -16, left: 0, right: 0, height: 16}]}
+        pointerEvents="none"
+      />
+      <Text style={[a.text_lg, a.font_semi_bold, a.text_center]}>
+        {isBlocking
+          ? l`You are blocking this user`
+          : l`This user is blocking you`}
       </Text>
-
-      <View style={[a.flex_row, a.justify_between, a.gap_lg, a.px_md]}>
+      <View style={[a.flex_row, a.justify_between, a.gap_md]}>
         <Button
-          label={_(msg`Leave chat`)}
-          color="secondary"
-          variant="solid"
-          size="small"
+          label={l`Report chat`}
+          color="negative_subtle"
+          size="large"
           style={[a.flex_1]}
-          onPress={leaveConvoControl.open}>
-          <ButtonText style={{color: t.palette.negative_500}}>
-            <Trans>Leave chat</Trans>
+          onPress={reportControl.open}>
+          <ButtonIcon icon={FlagIcon} />
+          <ButtonText>
+            <Trans>Report chat</Trans>
           </ButtonText>
         </Button>
         <Button
-          label={_(msg`Report`)}
+          label={l`Delete chat`}
           color="secondary"
-          variant="solid"
-          size="small"
+          size="large"
           style={[a.flex_1]}
-          onPress={reportControl.open}>
-          <ButtonText style={{color: t.palette.negative_500}}>
-            <Trans>Report</Trans>
+          onPress={leaveConvoControl.open}>
+          <ButtonIcon icon={LeaveIcon} />
+          <ButtonText>
+            <Trans>Delete chat</Trans>
           </ButtonText>
         </Button>
         {isBlocking && gtMobile && (
           <Button
-            label={_(msg`Unblock`)}
+            label={l`Unblock user`}
             color="secondary"
-            variant="solid"
-            size="small"
+            size="large"
             style={[a.flex_1]}
             onPress={onUnblockPress}>
-            <ButtonText style={{color: t.palette.primary_500}}>
-              <Trans>Unblock</Trans>
+            <ButtonIcon icon={PersonCheckIcon} />
+            <ButtonText>
+              <Trans>Unblock user</Trans>
             </ButtonText>
           </Button>
         )}
       </View>
       {isBlocking && !gtMobile && (
-        <View style={[a.flex_row, a.justify_center, a.px_md]}>
-          <Button
-            label={_(msg`Unblock`)}
-            color="secondary"
-            variant="solid"
-            size="small"
-            style={[a.flex_1]}
-            onPress={onUnblockPress}>
-            <ButtonText style={{color: t.palette.primary_500}}>
-              <Trans>Unblock</Trans>
-            </ButtonText>
-          </Button>
-        </View>
+        <Button
+          label={l`Unblock user`}
+          color="secondary"
+          size="large"
+          style={[a.flex_1]}
+          onPress={onUnblockPress}>
+          <ButtonIcon icon={PersonCheckIcon} />
+          <ButtonText>
+            <Trans>Unblock user</Trans>
+          </ButtonText>
+        </Button>
       )}
-
       <LeaveConvoPrompt
         control={leaveConvoControl}
         currentScreen="conversation"
         convoId={convoId}
       />
-
       <ReportConversationPrompt control={reportControl} />
-
       <BlockedByListDialog
         control={blockedByListControl}
         listBlocks={listBlocks}