More aesthetic and perf improvements to the menu drawer

2 files changed, 79 insertions, 54 deletions

diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx
index 173f9563c..793b05276 100644
--- a/src/view/shell/mobile/Menu.tsx
+++ b/src/view/shell/mobile/Menu.tsx
@@ -32,7 +32,8 @@ export const Menu = ({
   useEffect(() => {
     if (visible) {
       // trigger a refresh in case memberships have changed recently
-      store.me.refreshMemberships()
+      // TODO this impacts performance, need to find the right time to do this
+      // store.me.refreshMemberships()
     }
   }, [store, visible])
 
@@ -98,33 +99,36 @@ export const Menu = ({
   return (
     <View style={styles.view}>
       <TouchableOpacity
+        onPress={() => onNavigate(`/profile/${store.me.handle}`)}
+        style={styles.profileCard}>
+        <UserAvatar
+          size={60}
+          displayName={store.me.displayName}
+          handle={store.me.handle}
+          avatar={store.me.avatar}
+        />
+        <View style={s.flex1}>
+          <Text style={styles.profileCardDisplayName}>
+            {store.me.displayName}
+          </Text>
+          <Text style={styles.profileCardHandle}>{store.me.handle}</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity
         style={styles.searchBtn}
         onPress={() => onNavigate('/search')}>
         <MagnifyingGlassIcon
           style={{color: colors.gray5} as StyleProp<ViewStyle>}
-          size={21}
+          size={25}
         />
         <Text style={styles.searchBtnLabel}>Search</Text>
       </TouchableOpacity>
       <View style={styles.section}>
         <MenuItem
           icon={
-            <UserAvatar
-              size={24}
-              displayName={store.me.displayName}
-              handle={store.me.handle}
-              avatar={store.me.avatar}
-            />
-          }
-          label={store.me.displayName || store.me.handle}
-          bold
-          url={`/profile/${store.me.handle}`}
-        />
-        <MenuItem
-          icon={
             <HomeIcon
-              style={{color: colors.gray5} as StyleProp<ViewStyle>}
-              size="24"
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="26"
             />
           }
           label="Home"
@@ -133,45 +137,24 @@ export const Menu = ({
         <MenuItem
           icon={
             <BellIcon
-              style={{color: colors.gray5} as StyleProp<ViewStyle>}
-              size="24"
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="28"
             />
           }
           label="Notifications"
           url="/notifications"
           count={store.me.notificationCount}
         />
-        <MenuItem
-          icon={
-            <CogIcon
-              style={{color: colors.gray6} as StyleProp<ViewStyle>}
-              size="24"
-              strokeWidth={2}
-            />
-          }
-          label="Settings"
-          url="/settings"
-        />
       </View>
       <View style={styles.section}>
         <Text style={styles.heading}>Scenes</Text>
-        <MenuItem
-          icon={
-            <UserGroupIcon
-              style={{color: colors.gray6} as StyleProp<ViewStyle>}
-              size="24"
-            />
-          }
-          label="Create a scene"
-          onPress={onPressCreateScene}
-        />
         {store.me.memberships
           ? store.me.memberships.memberships.map((membership, i) => (
               <MenuItem
                 key={i}
                 icon={
                   <UserAvatar
-                    size={24}
+                    size={34}
                     displayName={membership.displayName}
                     handle={membership.handle}
                     avatar={membership.avatar}
@@ -183,6 +166,29 @@ export const Menu = ({
             ))
           : undefined}
       </View>
+      <View style={styles.section}>
+        <MenuItem
+          icon={
+            <UserGroupIcon
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="30"
+            />
+          }
+          label="Create a scene"
+          onPress={onPressCreateScene}
+        />
+        <MenuItem
+          icon={
+            <CogIcon
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="30"
+              strokeWidth={2}
+            />
+          }
+          label="Settings"
+          url="/settings"
+        />
+      </View>
       <View style={styles.footer}>
         <Text style={s.gray4}>
           Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion}
@@ -212,6 +218,24 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
   },
 
+  profileCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 10,
+    marginBottom: 6,
+  },
+  profileCardDisplayName: {
+    marginLeft: 12,
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: colors.gray7,
+  },
+  profileCardHandle: {
+    marginLeft: 12,
+    fontSize: 18,
+    color: colors.gray6,
+  },
+
   searchBtn: {
     flexDirection: 'row',
     backgroundColor: colors.gray1,
@@ -223,7 +247,7 @@ const styles = StyleSheet.create({
   },
   searchBtnLabel: {
     marginLeft: 8,
-    fontSize: 18,
+    fontSize: 19,
     color: colors.gray6,
   },
 
@@ -231,17 +255,17 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 8,
-    paddingHorizontal: 2,
+    paddingHorizontal: 6,
   },
   menuItemIconWrapper: {
-    width: 30,
-    height: 30,
+    width: 36,
+    height: 36,
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: 10,
+    marginRight: 12,
   },
   menuItemLabel: {
-    fontSize: 17,
+    fontSize: 19,
     color: colors.gray7,
   },
   menuItemLabelBold: {
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index 1506b52e6..ef980066c 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -245,18 +245,19 @@ export const MobileShell: React.FC = observer(() => {
     ? {transform: [{translateX: swipeTranslateX}]}
     : undefined
   let menuTranslateX
+  const menuDrawerWidth = winDim.width - 100
   if (isMenuActive) {
     // menu is active, interpret swipes as closes
-    menuTranslateX = Animated.multiply(swipeGestureInterp, winDim.width * -1)
+    menuTranslateX = Animated.multiply(swipeGestureInterp, menuDrawerWidth * -1)
   } else if (!store.nav.tab.canGoBack) {
     // at back of history, interpret swipes as opens
     menuTranslateX = Animated.subtract(
-      winDim.width * -1,
-      Animated.multiply(swipeGestureInterp, winDim.width),
+      menuDrawerWidth * -1,
+      Animated.multiply(swipeGestureInterp, menuDrawerWidth),
     )
   } else {
     // not at back of history, leave off screen
-    menuTranslateX = winDim.width * -1
+    menuTranslateX = menuDrawerWidth * -1
   }
   const menuSwipeTransform = {
     transform: [{translateX: menuTranslateX}],
@@ -369,7 +370,7 @@ export const MobileShell: React.FC = observer(() => {
               },
             )}
           </ScreenContainer>
-          {menuSwipingDirection !== 0 ? (
+          {isMenuActive || menuSwipingDirection !== 0 ? (
             <Animated.View style={[styles.screenMask, menuSwipeOpacity]} />
           ) : undefined}
           <Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
@@ -500,14 +501,14 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     backgroundColor: '#000',
-    opacity: 0.5,
+    opacity: 0.6,
   },
   menuDrawer: {
     position: 'absolute',
     top: 0,
     bottom: 0,
     left: 0,
-    right: 0,
+    right: 100,
   },
   topBarProtector: {
     position: 'absolute',