preparing admin dashboard modals

app/mobile/src/dashboard/Dashboard.jsx

@@ -16,10 +16,10 @@ export function Dashboard(props) {
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
         <Text style={styles.headerLabel}>Accounts</Text>
-        <Ionicons style={styles.icon} name={'reload1'} size={24} />        
-        <Ionicons style={styles.icon} name={'setting'} size={24} />
+        <Ionicons style={styles.icon} name={'reload1'} size={20} />        
+        <Ionicons style={styles.icon} name={'setting'} size={20} />
         <TouchableOpacity onPress={actions.logout}>
-          <Ionicons style={styles.icon} name={'logout'} size={24} /> 
+          <Ionicons style={styles.icon} name={'logout'} size={20} /> 
         </TouchableOpacity>
         <View style={styles.end}>       
           <Ionicons style={styles.icon} name={'adduser'} size={24} /> 
@@ -31,7 +31,7 @@ export function Dashboard(props) {
           keyExtractor={item => item.accountId}
           renderItem={({ item }) => (
             <View style={styles.account}>
-              <Logo src={item.logo} width={48} height={48} radius={6} />
+              <Logo src={item.logo} width={32} height={32} radius={4} />
               <View style={styles.details}>
                 <Text style={styles.name}>{ item.name }</Text>
                 <Text style={styles.handle}>{ item.handle }</Text>

app/mobile/src/dashboard/Dashboard.styled.js

@@ -20,7 +20,7 @@ export const styles = StyleSheet.create({
   },
   headerLabel: {
     paddingLeft: 16,
-    fontSize: 24,
+    fontSize: 20,
     color: Colors.text,
   },
   icon: {
@@ -43,12 +43,14 @@ export const styles = StyleSheet.create({
   },
   account: {
     width: '100%',
-    height: 64,
+    height: 48,
     display: 'flex',
     flexDirection: 'row',
     paddingLeft: 24,
     paddingRight: 24,
     alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: Colors.divider,
   },
   details: {
     paddingLeft: 16,
@@ -59,11 +61,11 @@ export const styles = StyleSheet.create({
     paddingTop: 8,
   },
   name: {
-    fontSize: 16,
+    fontSize: 14,
     color: Colors.text,
   },
   handle: {
-    fontSize: 16,
+    fontSize: 14,
     color: Colors.text,
   },
   control: {

app/mobile/src/dashboard/useDashboard.hook.js

@@ -12,6 +12,9 @@ export function useDashboard(config, server, token) {
   const [state, setState] = useState({
     config: null,
     accounts: [],
+    editConfig: false,
+    addUser: false,
+    accessUser: false,
   });
 
   const navigate = useNavigate();
@@ -46,6 +49,24 @@ export function useDashboard(config, server, token) {
     logout: () => {
       navigate('/admin');
     },
+    showEditConfig: () => {
+      updateState({ editConfig: true });
+    },
+    hideEditConfig: () => {
+      updateState({ editConfig: false });
+    },
+    showAddUser: () => {
+      updateState({ addUser: true });
+    },
+    hideAddUser: () => {
+      updateState({ addUser: false });
+    },
+    showAccessUser: () => {
+      updateState({ accessUser: true });
+    },
+    hideAccessUser: () => {
+      updateState({ accessUser: false });
+    },
   };
 
   return { state, actions };