laying out drawer profile for tablet

app/mobile/src/session/profile/Profile.jsx

@@ -82,6 +82,40 @@ export function Profile({ drawer }) {
               <MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
             </View>
           </View>
+          <View style={styles.drawerEditDivider}>
+            <View style={styles.drawerLine} />
+            <TouchableOpacity style={styles.drawerNameEdit} activeOpacity={1} onPress={actions.showDetails}>
+              <Text style={styles.editLabel}>{ state.strings.edit }</Text>
+              <MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
+            </TouchableOpacity>
+          </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.icon} 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.descriptionIcon} 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} />
         </View>
       )}
       { !drawer && (

app/mobile/src/session/profile/Profile.styled.js

@@ -14,9 +14,9 @@ export const styles = StyleSheet.create({
     padding: 16,
   },
   drawerFrame: {
-    width: '50%',
+    width: '80%',
     maxWidth: 400,
-    paddingBottom: 16,
+    paddingBottom: 32,
   },
   drawerLogo: {
     aspectRatio: 1,
@@ -32,13 +32,62 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     alignSelf: 'center',
-    backgroundColor: 'rgba(255,255,255,0.6)',
+    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,
+  },
+  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,
+  },
   container: {
     width: '100%',
     height: '100%',