From 7c9b811ca6e47879ce51667f046aece2d00213ad Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Wed, 20 Sep 2023 17:59:45 -0700
Subject: [PATCH] implementing refactored contact view for drawers

---
 app/mobile/src/session/Session.jsx            |   2 +-
 app/mobile/src/session/contact/Contact.jsx    | 494 +++++++-----------
 .../src/session/contact/Contact.styled.js     | 106 +++-
 app/mobile/src/session/profile/Profile.jsx    |   6 +-
 4 files changed, 291 insertions(+), 317 deletions(-)

diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx
index 394d1691..73e7ecc2 100644
--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@@ -301,7 +301,7 @@ function ContactDrawerScreen({ navParams }) {
     <ContactDrawer.Navigator screenOptions={{ ...drawerParams, drawerStyle: { width: '44%' } }} drawerContent={(props) => (
         <ScrollView style={styles.drawer}>
           <SafeAreaView edges={['top', 'bottom', 'right']}>
-            <Contact contact={contact} />
+            <Contact contact={contact} drawer={true} back={props.navigation.goBack} />
           </SafeAreaView>
         </ScrollView>
       )}>
diff --git a/app/mobile/src/session/contact/Contact.jsx b/app/mobile/src/session/contact/Contact.jsx
index 27f64678..6a04afdf 100644
--- a/app/mobile/src/session/contact/Contact.jsx
+++ b/app/mobile/src/session/contact/Contact.jsx
@@ -11,299 +11,6 @@ import FntIcons from 'react-native-vector-icons/FontAwesome5';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons'; 
 import MtrIcons from 'react-native-vector-icons/MaterialIcons'; 
 
-export function ContactHeader({ contact }) {
-  const handle = contact?.node ? `${contact?.handle}@${contact?.node}` : contact?.handle;
-  return (
-    <Text style={styles.headerText}>{ handle }</Text>
-  )
-}
-
-export function ContactBody({ contact }) {
-
-  const { state, actions } = useContact(contact);
-
-  const getStatusText = (status) => {
-    if (status === 'confirmed') {
-      return 'saved';
-    }
-    if (status === 'pending') {
-      return 'unknown contact request';
-    }
-    if (status === 'connecting') {
-      return 'request sent';
-    }
-    if (status === 'connected') {
-      return 'connected';
-    }
-    if (status === 'requested') {
-      return 'request received';
-    }
-    return 'unsaved';
-  }
-
-  const setContact = async (action) => {
-    try {
-      await action();
-    }
-    catch (err) {
-      console.log(err);
-      Alert.alert(
-        'Failed to Update Contact',
-        'Please try again.',
-      );
-    }
-  }
-
-  const cancelRequest = () => {
-    Alert.alert(
-      "Closing Request",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Close", onPress: () => {
-          setContact(actions.disconnectContact);
-        }}
-      ]
-    );
-  }
-
-  const disconnectContact = () => {
-    Alert.alert(
-      "Disconnecting Contact",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Disconnect", onPress: () => {
-          setContact(actions.disconnectContact);
-        }}
-      ]
-    );
-  }
-
-  const saveAndConnect = () => {
-    setContact(actions.saveAndConnect);
-  }
-
-  const confirmAndConnect = () => {
-    setContact(actions.confirmAndConnect);
-  }
-  
-  const saveContact = () => {
-    setContact(actions.saveContact);
-  }
- 
-  const confirmContact = () => {
-    setContact(actions.confirmContact);
-  }
-
-  const ignoreContact = () => {
-    setContact(actions.ignoreContact);
-  }
-
-  const deleteContact = () => {
-    Alert.alert(
-      "Deleting Contact",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Delete", onPress: () => {
-          setContact(actions.deleteContact);
-        }}
-      ]
-    );
-  }
-
-  const closeDelete = () => {
-    Alert.alert(
-      "Deleting Contact",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Delete", onPress: () => {
-          setContact(actions.closeDelete);
-        }}
-      ]
-    );
-  }
-
-  const blockContact = () => {
-    Alert.alert(
-      "Blocking Contact",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Block", onPress: () => {
-          setContact(actions.blockContact);
-        }}
-      ]
-    );
-  }
-
-  const reportContact = () => {
-    Alert.alert(
-      "Report Contact",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Report", onPress: () => {
-          setContact(actions.reportContact);
-        }}
-      ]
-    );
-  }
-
-  const connectContact = () => {
-    setContact(actions.connectContact);
-  }
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.status}>{ `[${getStatusText(state.status)}]` }</Text> 
-      <View style={{ width: 128 }}>
-        <Logo src={state.logo} width={128} height={128} radius={8} />
-      </View>
-      <View style={styles.detail}>
-        <View style={styles.attribute}>
-          <Text style={styles.nametext}>{ state.name }</Text>
-        </View>
-        <View style={styles.attribute}>
-          <View style={styles.glyph}>
-            <Ionicons name="enviromento" size={14} color={Colors.text} />
-          </View>
-          <Text style={styles.locationtext}>{ state.location }</Text>
-        </View>
-        <View style={styles.attribute}>
-          <View style={styles.glyph}>
-            <Ionicons name="book" size={14} color={Colors.text} />
-          </View>
-          <Text style={styles.descriptiontext}>{ state.description }</Text>
-        </View>
-      </View>
-      <View style={styles.controls}>
-        { state.status === 'connected' && (
-          <>
-            <TouchableOpacity style={styles.button} onPress={disconnectContact}>
-              <Text style={styles.buttonText}>Disconnect</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={closeDelete}>
-              <Text style={styles.buttonText}>Delete Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={blockContact}>
-              <Text style={styles.buttonText}>Block Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={reportContact}>
-              <Text style={styles.buttonText}>Report Contact</Text>
-            </TouchableOpacity>
-            { state.offsync && (
-              <TouchableOpacity style={styles.alert} onPress={actions.resync}>
-                <Text>Resync Contact</Text>
-              </TouchableOpacity>
-            )}
-          </>
-        )}
-        { state.status === 'connecting' && (
-          <>
-            <TouchableOpacity style={styles.button} onPress={cancelRequest}>
-              <Text style={styles.buttonText}>Close Request</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={closeDelete}>
-              <Text style={styles.buttonText}>Delete Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={blockContact}>
-              <Text style={styles.buttonText}>Block Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={reportContact}>
-              <Text style={styles.buttonText}>Report Contact</Text>
-            </TouchableOpacity>
-          </>
-        )}
-        { state.status === 'confirmed' && (
-          <>
-            <TouchableOpacity style={styles.button} onPress={connectContact}>
-              <Text style={styles.buttonText}>Request Connection</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={deleteContact}>
-              <Text style={styles.buttonText}>Delete Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={blockContact}>
-              <Text style={styles.buttonText}>Block Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={reportContact}>
-              <Text style={styles.buttonText}>Report Contact</Text>
-            </TouchableOpacity>
-          </>
-        )}
-        { state.status === 'pending' && (
-          <>
-            <TouchableOpacity style={styles.button} onPress={confirmAndConnect}>
-              <Text style={styles.buttonText}>Save and Connect</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={confirmContact}>
-              <Text style={styles.buttonText}>Save Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={deleteContact}>
-              <Text style={styles.buttonText}>Ignore Request</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={blockContact}>
-              <Text style={styles.buttonText}>Block Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={reportContact}>
-              <Text style={styles.buttonText}>Report Contact</Text>
-            </TouchableOpacity>
-          </>
-        )}
-        { state.status === 'requested' && (
-          <>
-            <TouchableOpacity style={styles.button} onPress={connectContact}>
-              <Text style={styles.buttonText}>Accept Connection</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={ignoreContact}>
-              <Text style={styles.buttonText}>Ignore Request</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={disconnectContact}>
-              <Text style={styles.buttonText}>Deny Request</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={deleteContact}>
-              <Text style={styles.buttonText}>Delete Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={blockContact}>
-              <Text style={styles.buttonText}>Block Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={reportContact}>
-              <Text style={styles.buttonText}>Report Contact</Text>
-            </TouchableOpacity>
-          </>
-        )}
-        { state.status == null && (
-          <>
-            <TouchableOpacity style={styles.button} onPress={saveAndConnect}>
-              <Text style={styles.buttonText}>Save and Connect</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={saveContact}>
-              <Text style={styles.buttonText}>Save Contact</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.button} onPress={reportContact}>
-              <Text style={styles.buttonText}>Report Contact</Text>
-            </TouchableOpacity>
-          </>
-        )}
-      </View>
-    </View>
-  );
-}
-
 export function Contact({ contact, drawer, back }) {
 
   const [busy, setBusy] = useState(false);
@@ -353,7 +60,176 @@ export function Contact({ contact, drawer, back }) {
   return (
     <>
       { drawer && (
-        <Text>CONTACT DRAWER</Text>
+        <View style={styles.drawerContainer}>
+          <Text style={styles.drawerHeader} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.username }</Text>
+          <View style={styles.drawerFrame}>
+            <Image source={state.imageSource} style={styles.drawerLogo} resizeMode={'contain'} />
+          </View>
+          <View style={styles.drawerStatus}>
+            { state.status === 'offsync' && (
+              <View style={styles.statusOffsync}>
+                <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.offsync }</Text>
+              </View>
+            )}
+            { state.status === 'connected' && (
+              <View style={styles.statusConnected}>
+                <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.connected }</Text>
+              </View>
+            )}
+            { state.status === 'connecting' && (
+              <View style={styles.statusConnecting}>
+                <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.connecting }</Text>
+              </View>
+            )}
+            { state.status === 'requested' && (
+              <View style={styles.statusRequested}>
+                <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.requested }</Text>
+              </View>
+            )}
+            { state.status === 'received' && (
+              <View style={styles.statusReceived}>
+                <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.received }</Text>
+              </View>
+            )}
+            { state.status === 'pending' && (
+              <View style={styles.statusPending}>
+                <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.pending }</Text>
+              </View>
+            )}
+            { state.status === 'confirmed' && (
+              <View style={styles.statusConfirmed}>
+                <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.confirmed }</Text>
+              </View>
+            )}
+            { state.status === 'unsaved' && (
+              <View style={styles.statusUnsaved}>
+                <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.unsaved }</Text>
+              </View>
+            )}
+          </View>
+          <View style={styles.drawerName}>
+            { state.name && (
+              <Text style={styles.drawerNameSet} numberOfLines={1} adjustsFontSizeToFit={true}>{ state.name }</Text>
+            )}
+            { !state.name && (
+              <Text style={styles.drawerNameUnset}>{ state.strings.name }</Text>
+            )}
+          </View>
+          <View style={styles.drawerEntry}>
+            <AntIcons name="enviromento" style={styles.drawerIcon} size={20} color={Colors.text} />
+            { state.location && (
+              <Text style={styles.locationSet}>{ state.location }</Text>
+            )}
+            { !state.location && (
+              <Text style={styles.locationUnset}>Location</Text>
+            )}
+          </View>
+          <View style={styles.drawerEntry}>
+            <MatIcons name="book-open-outline" style={styles.drawerDescriptionIcon} size={20} color={Colors.text} />
+            { state.description && (
+              <Text style={styles.descriptionSet}>{ state.description }</Text>
+            )}
+            { !state.description && (
+              <Text style={styles.descriptionUnset}>Description</Text>
+            )}
+          </View>
+          <View style={styles.drawerDivider} />
+          { busy && (
+            <ActivityIndicator animating={true} color={Colors.text} size={'large'} />
+          )}
+          { !busy && (
+            <View style={styles.drawerActions}>
+              { state.status === 'offsync' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={actions.resync}>
+                  <MatIcons name="sync" style={styles.actionIcon} size={44} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionResync }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'unsaved' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveAndConnect)}>
+                  <FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={32} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'confirmed' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}>
+                  <FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={32} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'received' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}>
+                  <MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'pending' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmAndConnect)}>
+                  <MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'received' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}>
+                  <MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'pending' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.ignoreContact)}>
+                  <MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'connected' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.disconnectPrompt, actions.disconnectContact)}>
+                  <MatIcons name="account-cancel-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={42} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionDisconnect }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'connecting' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}>
+                  <MtrIcons name="cancel-schedule-send" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionCancel }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'pending' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmContact)}>
+                  <IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionSave }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'unsaved' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveContact)}>
+                  <IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionSave }</Text>
+                </TouchableOpacity>
+              )}
+              { (state.status === 'connected' || state.status === 'connecting' || state.status === 'received') && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.closeDelete)}>
+                  <MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status === 'confirmed' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.deleteContact)}>
+                  <MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text>
+                </TouchableOpacity>
+              )}
+              { state.status !== 'unsaved' && state.status !== 'pending' && (
+                <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.blockPrompt, actions.blockContact)}>
+                  <MatIcons name="block-helper" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} color={Colors.linkText} />
+                  <Text style={styles.actionLabel}>{ state.strings.actionBlock }</Text>
+                </TouchableOpacity>
+              )}
+              <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.reportPrompt, actions.reportContact)}>
+                <MatIcons name="account-alert-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={40} color={Colors.linkText} />
+                <Text style={styles.actionLabel}>{ state.strings.actionReport }</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+        </View>
       )}
       { !drawer && (
         <View style={styles.container}>
@@ -450,90 +326,90 @@ export function Contact({ contact, drawer, back }) {
                   <ScrollView horizontal={true} contentContainerStyle={styles.actionList}>
                     { state.status === 'offsync' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={actions.resync}>
-                        <MatIcons name="sync" style={styles.actionIcon} size={44} color={Colors.linkText} />
+                        <MatIcons name="sync" style={styles.actionIcon} size={40} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionResync }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'unsaved' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveAndConnect)}>
-                        <FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={32} color={Colors.linkText} />
+                        <FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={28} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'confirmed' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}>
-                        <FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={32} color={Colors.linkText} />
+                        <FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={28} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'received' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}>
-                        <MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
+                        <MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'pending' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmAndConnect)}>
-                        <MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
+                        <MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'received' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}>
-                        <MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
+                        <MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'pending' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.ignoreContact)}>
-                        <MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
+                        <MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'connected' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.disconnectPrompt, actions.disconnectContact)}>
-                        <MatIcons name="account-cancel-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={42} color={Colors.linkText} />
+                        <MatIcons name="account-cancel-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionDisconnect }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'connecting' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}>
-                        <MtrIcons name="cancel-schedule-send" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
+                        <MtrIcons name="cancel-schedule-send" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={36} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionCancel }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'pending' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmContact)}>
-                        <IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} />
+                        <IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionSave }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'unsaved' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveContact)}>
-                        <IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} />
+                        <IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionSave }</Text>
                       </TouchableOpacity>
                     )}
                     { (state.status === 'connected' || state.status === 'connecting' || state.status === 'received') && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.closeDelete)}>
-                        <MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
+                        <MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={36} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status === 'confirmed' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.deleteContact)}>
-                        <MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
+                        <MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={36} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text>
                       </TouchableOpacity>
                     )}
                     { state.status !== 'unsaved' && state.status !== 'pending' && (
                       <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.blockPrompt, actions.blockContact)}>
-                        <MatIcons name="block-helper" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} color={Colors.linkText} />
+                        <MatIcons name="block-helper" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={30} color={Colors.linkText} />
                         <Text style={styles.actionLabel}>{ state.strings.actionBlock }</Text>
                       </TouchableOpacity>
                     )}
                     <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.reportPrompt, actions.reportContact)}>
-                      <MatIcons name="account-alert-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
+                      <MatIcons name="account-alert-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={36} color={Colors.linkText} />
                       <Text style={styles.actionLabel}>{ state.strings.actionReport }</Text>
                     </TouchableOpacity>
                   </ScrollView>
diff --git a/app/mobile/src/session/contact/Contact.styled.js b/app/mobile/src/session/contact/Contact.styled.js
index 98018cbe..96e21607 100644
--- a/app/mobile/src/session/contact/Contact.styled.js
+++ b/app/mobile/src/session/contact/Contact.styled.js
@@ -2,6 +2,102 @@ import { StyleSheet } from 'react-native';
 import { Colors } from 'constants/Colors';
 
 export const styles = StyleSheet.create({
+  drawerContainer: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  drawerHeader: {
+    fontFamily: 'roboto',
+    color: Colors.text,
+    fontSize: 20,
+    padding: 16,
+  },
+  drawerFrame: {
+    width: '80%',
+    maxWidth: 400,
+    paddingBottom: 32,
+  },
+  drawerLogo: {
+    aspectRatio: 1,
+    resizeMode: 'contain',
+    borderRadius: 8,
+    width: null,
+    height: null,
+  },
+  drawerLogoEdit: {
+    position: 'absolute',
+    top: 0,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'center',
+    backgroundColor: Colors.drawerBase,
+    paddingLeft: 8,
+    paddingRight: 8,
+    borderBottomLeftRadius: 6,
+    borderBottomRightRadius: 6,
+  },
+  drawerEditDivider: {
+    width: '80%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  drawerLine: {
+    borderWidth: 1,
+    borderColor: Colors.areaBase,
+    flexGrow: 1,
+  },
+  drawerDivider: {
+    width: '80%',
+    borderWidth: 1,
+    borderColor: Colors.areaBase,
+    marginTop: 16,
+    marginBottom: 32,
+  },
+  drawerName: {
+    width: '80%',
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  drawerNameSet: {
+    color: Colors.text,
+    fontFamily: 'roboto',
+    fontSize: 48,
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  drawerNameUnset: {
+    color: Colors.inputPlaceholder,
+    fontFamily: 'roboto',
+    fontSize: 48,
+    fontStyle: 'italic',
+    flexGrow: 1,
+  },
+  drawerNameEdit: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  drawerEntry: {
+    width: '80%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 8,
+  },
+  drawerActions: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  drawerStatus: {
+    paddingBottom: 8,
+  },
   container: { 
     width: '100%',
     height: '100%',
@@ -150,7 +246,7 @@ export const styles = StyleSheet.create({
     borderRadius: 8,
     backgroundColor: Colors.unsaved,
   },
-  statusOffysnc: {
+  statusOffsync: {
     paddingLeft: 8,
     paddingRight: 8,
     paddingTop: 2,
@@ -160,6 +256,7 @@ export const styles = StyleSheet.create({
   },
   statusLabel: {
     color: Colors.text,
+    fontSize: 16,
   },
   attributes: {
     marginLeft: 16,
@@ -173,12 +270,12 @@ export const styles = StyleSheet.create({
   actions: {
     marginLeft: 16,
     marginRight: 16,
-    paddingLeft: 16,
+    paddingLeft: 4,
     paddingRight: 16,
     backgroundColor: Colors.areaBase,
     borderRadius: 8,
     marginTop: 24,
-    height: 80,
+    height: 72,
   },
   actionList: {
     alignItems: 'flex-end',
@@ -186,7 +283,8 @@ export const styles = StyleSheet.create({
   action: {
     display: 'flex',
     alignItems: 'center',
-    paddingRight: 24,
+    paddingRight: 12,
+    paddingLeft: 12,
     paddingBottom: 12,
   },
   actionIcon: {
diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx
index c562b9fe..7455281d 100644
--- a/app/mobile/src/session/profile/Profile.jsx
+++ b/app/mobile/src/session/profile/Profile.jsx
@@ -74,7 +74,7 @@ export function Profile({ drawer }) {
     <>
       { drawer && (
         <View style={styles.drawerContainer}>
-          <Text style={styles.drawerHeader} adjustsFontSizeToFit={true}>{ state.username }</Text>
+          <Text style={styles.drawerHeader} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.username }</Text>
           <View style={styles.drawerFrame}>
             <Image source={state.imageSource} style={styles.drawerLogo} resizeMode={'contain'} />
             <TouchableOpacity activeOpacity={1} style={styles.drawerLogoEdit} onPress={onGallery}>
@@ -120,8 +120,8 @@ export function Profile({ drawer }) {
             <TouchableOpacity activeOpacity={1} onPress={() => setVisible(!state.searchable)}>
               <Text style={styles.visibleLabel}>{ state.strings.visibleRegistry }</Text>
             </TouchableOpacity>
-            <Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
-                trackColor={styles.track} onValueChange={setVisible} />
+            <Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip}
+                ios_backgroundColor={Colors.disabledIndicator} trackColor={styles.track} onValueChange={setVisible} />
           </TouchableOpacity>
         </View>
       )}