adding profile details to settings

app/client/mobile/src/access/Access.tsx

@@ -2,7 +2,6 @@ import React, {useState} from 'react';
 import {
   Platform,
   KeyboardAvoidingView,
-  ScrollView,
   View,
   Image,
 } from 'react-native';

app/client/mobile/src/settings/Settings.styled.ts

@@ -2,11 +2,10 @@ import {StyleSheet} from 'react-native';
 
 export const styles = StyleSheet.create({
   settings: {
+    position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: 8,
-    gap: 2,
   },
   header: {
     fontSize: 22,
@@ -19,8 +18,8 @@ export const styles = StyleSheet.create({
     position: 'relative',
     width: '90%',
     maxWidth: 250,
-    marginTop: 8,
+    marginTop: 16,
-    marginBottom: 24,
+    marginBottom: 8,
   },
   logo: {
     aspectRatio: 1,
@@ -37,9 +36,65 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  editLogo: {
+  setLogo: {
     fontSize: 18,
     borderRadius: 8,
     backgroundColor: '#44444444',
   },
+  unsetLogo: {
+    color: '#888888',
+    fontSize: 18,
+  },
+  editDivider: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 32,
+  },
+  divider: {
+    flexGrow: 1,
+  },
+  nameSet: {
+    fontSize: 28,
+    width: '100%',
+    paddingLeft: 32,
+    paddingRight: 32,
+  },
+  nameUnset: {
+    fontSize: 28,
+    width: '100%',
+    paddingLeft: 32,
+    paddingRight: 32,
+    fontStyle: 'italic',
+  },
+  attributes: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    width: '100%',
+  },
+  attribute: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItem: 'center',
+    justifyContent: 'center',
+    paddingLeft: 32,
+    paddingRight: 32,
+  },
+  icon: {
+    width: 32,
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  labelUnset: {
+    fontSize: 18,
+    fontStyle: 'italic',
+    flexGrow: 1,
+  },
+  labelSet: {
+    fontSize: 18,
+    flexGrow: 1,
+  },
 })

app/client/mobile/src/settings/Settings.tsx

@@ -1,28 +1,80 @@
 import React, {useContext} from 'react';
-import {Button, Text} from 'react-native-paper';
+import {Button, Text, Divider, Icon} from 'react-native-paper';
-import {SafeAreaView, View, Image} from 'react-native';
+import {SafeAreaView, TouchableOpacity, View, Image, ScrollView} from 'react-native';
 import {styles} from './Settings.styled';
 import {useSettings} from './useSettings.hook';
 
 export function Settings() {
   const { state, actions } = useSettings();
 
-console.log("HERE");
+  const SelectImage = async () => {
+  }
 
   return (
-    <SafeAreaView style={styles.settings}>
+    <ScrollView>
-      <Text style={styles.header}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
+      <SafeAreaView style={styles.settings}>
-      <View style={styles.image}>
+        <Text style={styles.header}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
-        <Image style={styles.logo} resizeMode={'contain'} source={{ uri: state.imageUrl }} />
+        { state.profile.imageSet && (
-        <View style={styles.editBar}>
+          <View style={styles.image}>
-          <Button style={styles.editLogo} mode="text">{state.strings.edit}</Button>
+            <Image style={styles.logo} resizeMode={'contain'} source={{ uri: state.imageUrl }} />
+            <View style={styles.editBar}>
+              <Button style={styles.setLogo} mode="text" onPress={SelectImage}>{state.strings.edit}</Button>
+            </View>
+          </View>
+        )}
+        { !state.profile.imageSet && (
+          <TouchableOpacity style={styles.image} onPress={SelectImage}>
+            <Image style={styles.logo} resizeMode={'contain'} source={{ uri: state.imageUrl }} />
+            <View style={styles.editBar}>
+              <Text style={styles.unsetLogo}>{state.strings.edit}</Text>
+            </View>
+          </TouchableOpacity>
+        )}
+
+        <View style={styles.editDivider}>
+          <Divider style={styles.divider} bold={true} />
+          <Button style={styles.editDetails} mode="text">{state.strings.edit}</Button>
         </View>
-      </View>
 
+        <View style={styles.attributes}>
+          {!state.profile.name && (
+            <Text style={styles.nameUnset}>{state.strings.name}</Text>
+          )}
+          {state.profile.name && (
+            <Text style={styles.nameSet}>{state.profile.name}</Text>
+          )}
+          <View style={styles.attribute}>
+            <View style={styles.icon}>
+              <Icon size={24} source="map-marker-outline" />
+            </View>
+            {!state.profile.location && (
+              <Text style={styles.labelUnset}>{state.strings.location}</Text>
+            )}
+            {state.profile.location && (
+              <Text style={styles.labelSet}>{state.profile.location}</Text>
+            )}
+          </View>
+          <View style={styles.attribute}>
+            <View style={styles.icon}>
+              <Icon size={24} source="book-open-outline" />
+            </View>
+            {!state.profile.description && (
+              <Text style={styles.labelUnset}>{state.strings.description}</Text>
+            )}
+            {state.profile.description && (
+              <Text style={styles.labelSet}>{state.profile.description}</Text>
+            )}
+          </View>
+        </View>
 
-      <Button mode="contained" onPress={actions.logout}>
+        <View style={styles.editDivider}>
-        Logout
+          <Divider style={styles.divider} bold={true} />
-      </Button>
+        </View>
-    </SafeAreaView>
+
+        <Button mode="contained" onPress={actions.logout}>
+          Logout
+        </Button>
+      </SafeAreaView>
+    </ScrollView>
   );
 }