Add accounts menu to shell

src/view/lib/styles.ts

@@ -44,6 +44,9 @@ export const colors = {
 
 export const gradients = {
   primary: {start: '#db00ff', end: '#ff007a'},
+  purple: {start: colors.pink3, end: colors.purple3},
+  blue: {start: colors.purple3, end: colors.blue3},
+  green: {start: colors.blue3, end: colors.green3},
 }
 
 export const s = StyleSheet.create({

src/view/screens/Home.tsx

@@ -5,6 +5,7 @@ import {FAB} from '../com/util/FloatingActionButton'
 import {useStores} from '../../state'
 import {FeedViewModel} from '../../state/models/feed-view'
 import {ScreenParams} from '../routes'
+import {s} from '../lib/styles'
 
 export function Home({visible}: ScreenParams) {
   const [hasSetup, setHasSetup] = useState<boolean>(false)
@@ -32,7 +33,7 @@ export function Home({visible}: ScreenParams) {
   }
 
   return (
-    <View>
+    <View style={s.flex1}>
       {feedView && <Feed feed={feedView} />}
       <FAB icon="pen-nib" onPress={onComposePress} />
     </View>

src/view/shell/mobile/accounts-menu.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+import RootSiblings from 'react-native-root-siblings'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {AVIS} from '../../lib/assets'
+import {s, colors} from '../../lib/styles'
+
+export function createAccountsMenu(): RootSiblings {
+  const onPressItem = (_index: number) => {
+    sibling.destroy()
+  }
+  const onOuterPress = () => sibling.destroy()
+  const sibling = new RootSiblings(
+    (
+      <>
+        <TouchableWithoutFeedback onPress={onOuterPress}>
+          <View style={styles.bg} />
+        </TouchableWithoutFeedback>
+        <View style={[styles.menu]}>
+          <TouchableOpacity
+            style={[styles.menuItem]}
+            onPress={() => onPressItem(0)}>
+            <Image style={styles.avi} source={AVIS['alice.com']} />
+            <Text style={[styles.label, s.bold]}>Alice</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.menuItem, styles.menuItemBorder]}
+            onPress={() => onPressItem(0)}>
+            <FontAwesomeIcon style={styles.icon} icon="plus" />
+            <Text style={styles.label}>New Account</Text>
+          </TouchableOpacity>
+        </View>
+      </>
+    ),
+  )
+  return sibling
+}
+
+const styles = StyleSheet.create({
+  bg: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: '#000',
+    opacity: 0.1,
+  },
+  menu: {
+    position: 'absolute',
+    left: 4,
+    top: 70,
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    opacity: 1,
+    paddingVertical: 2,
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingLeft: 10,
+    paddingRight: 30,
+  },
+  menuItemBorder: {
+    borderTopWidth: 1,
+    borderTopColor: colors.gray1,
+  },
+  avi: {
+    width: 28,
+    height: 28,
+    marginRight: 8,
+    borderRadius: 14,
+  },
+  icon: {
+    marginLeft: 6,
+    marginRight: 6,
+  },
+  label: {
+    fontSize: 16,
+  },
+})

src/view/shell/mobile/index.tsx

@@ -18,6 +18,7 @@ import {match, MatchResult} from '../../routes'
 import {TabsSelectorModal} from './tabs-selector'
 import {LocationMenu} from './location-menu'
 import {createBackMenu, createForwardMenu} from './history-menu'
+import {createAccountsMenu} from './accounts-menu'
 import {colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
 
@@ -96,6 +97,7 @@ export const MobileShell: React.FC = observer(() => {
   const [isLocationMenuActive, setLocationMenuActive] = useState(false)
   const screenRenderDesc = constructScreenRenderDesc(stores.nav)
 
+  const onPressAvi = () => createAccountsMenu()
   const onPressLocation = () => setLocationMenuActive(true)
   const onNavigateLocationMenu = (url: string) => {
     setLocationMenuActive(false)
@@ -119,7 +121,9 @@ export const MobileShell: React.FC = observer(() => {
   return (
     <View style={styles.outerContainer}>
       <View style={styles.topBar}>
+        <TouchableOpacity onPress={onPressAvi}>
           <Image style={styles.avi} source={AVIS['alice.com']} />
+        </TouchableOpacity>
         <Location
           icon={screenRenderDesc.icon}
           title={stores.nav.tab.current.title}

src/view/shell/mobile/location-menu.tsx

@@ -1,16 +1,9 @@
 import React, {useState, useRef} from 'react'
-import {
+import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
-  SafeAreaView,
+import LinearGradient from 'react-native-linear-gradient'
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
-import {s, colors} from '../../lib/styles'
+import {s, gradients, colors} from '../../lib/styles'
 
 export function LocationMenu({
   url,
@@ -37,19 +30,23 @@ export function LocationMenu({
     icon,
     label,
     url,
-    color,
+    gradient,
   }: {
     icon: IconProp
     label: string
     url: string
-    color: string
+    gradient: keyof typeof gradients
   }) => (
     <TouchableOpacity
       style={styles.fatMenuItem}
       onPress={() => onNavigate(url)}>
-      <View style={[styles.fatMenuItemIconWrapper, {backgroundColor: color}]}>
+      <LinearGradient
+        style={[styles.fatMenuItemIconWrapper]}
+        colors={[gradients[gradient].start, gradients[gradient].end]}
+        start={{x: 0, y: 0}}
+        end={{x: 1, y: 1}}>
         <FontAwesomeIcon icon={icon} style={styles.fatMenuItemIcon} size={24} />
-      </View>
+      </LinearGradient>
       <Text style={styles.fatMenuItemLabel}>{label}</Text>
     </TouchableOpacity>
   )
@@ -84,25 +81,20 @@ export function LocationMenu({
       </View>
       <View style={styles.menuItemsContainer}>
         <View style={styles.fatMenuItems}>
-          <FatMenuItem icon="house" label="Feed" url="/" color={colors.red3} />
+          <FatMenuItem icon="house" label="Feed" url="/" gradient="primary" />
           <FatMenuItem
             icon="bell"
             label="Notifications"
             url="/notifications"
-            color={colors.pink3}
+            gradient="purple"
           />
           <FatMenuItem
             icon={['far', 'user']}
             label="My Profile"
             url="/"
-            color={colors.purple3}
+            gradient="blue"
-          />
-          <FatMenuItem
-            icon="gear"
-            label="Settings"
-            url="/"
-            color={colors.blue3}
           />
+          <FatMenuItem icon="gear" label="Settings" url="/" gradient="blue" />
         </View>
         <View style={styles.thinMenuItems}>
           <ThinMenuItem label="Send us feedback" url="/" />
@@ -142,13 +134,14 @@ const styles = StyleSheet.create({
   },
   menuItemsContainer: {
     paddingVertical: 30,
+    paddingHorizontal: 8,
   },
   fatMenuItems: {
     flexDirection: 'row',
     marginBottom: 20,
   },
   fatMenuItem: {
-    width: 90,
+    width: 86,
     alignItems: 'center',
     marginRight: 6,
   },