From c20f8937cb256a8e11c8b1bc890a746a50698e11 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Tue, 13 Jun 2023 21:24:57 +0300
Subject: [PATCH] UX: account deletion dialogue does not tell me which account
 I'm deleting (#835)

* fix: account deletion dialogue does not tell me which account I'm deleting

* update styles and display name
---
 src/view/com/modals/DeleteAccount.tsx | 49 +++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx
index 724cefee..72939ec2 100644
--- a/src/view/com/modals/DeleteAccount.tsx
+++ b/src/view/com/modals/DeleteAccount.tsx
@@ -16,6 +16,7 @@ import {useTheme} from 'lib/ThemeContext'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {cleanError} from 'lib/strings/errors'
 import {resetToTab} from '../../../Navigation'
+import {isDesktopWeb} from 'platform/detection'
 
 export const snapPoints = ['60%']
 
@@ -63,12 +64,31 @@ export function Component({}: {}) {
     store.shell.closeModal()
   }
   return (
-    <View
-      style={[styles.container, {backgroundColor: pal.colors.backgroundLight}]}>
+    <View style={[styles.container, pal.view]}>
       <View style={[styles.innerContainer, pal.view]}>
-        <Text type="title-xl" style={[styles.title, pal.text]}>
-          Delete account
-        </Text>
+        <View style={[styles.titleContainer, pal.view]}>
+          <Text type="title-xl" style={[s.textCenter, pal.text]}>
+            Delete account
+          </Text>
+          <View style={[pal.view, s.flexRow]}>
+            <Text type="title-xl" style={[pal.text, s.bold]}>
+              {' "'}
+            </Text>
+            <Text
+              type="title-xl"
+              numberOfLines={1}
+              style={[
+                isDesktopWeb ? styles.titleDesktop : styles.titleMobile,
+                pal.text,
+                s.bold,
+              ]}>
+              {store.me.handle}
+            </Text>
+            <Text type="title-xl" style={[pal.text, s.bold]}>
+              {'"'}
+            </Text>
+          </View>
+        </View>
         {!isEmailSent ? (
           <>
             <Text type="lg" style={[styles.description, pal.text]}>
@@ -203,10 +223,25 @@ const styles = StyleSheet.create({
   innerContainer: {
     paddingBottom: 20,
   },
-  title: {
-    textAlign: 'center',
+  titleContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
     marginTop: 12,
     marginBottom: 12,
+    marginLeft: 20,
+    marginRight: 20,
+  },
+  titleMobile: {
+    textAlign: 'center',
+  },
+  titleDesktop: {
+    textAlign: 'center',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    maxWidth: '400px',
   },
   description: {
     textAlign: 'center',