rendering color mode for registy

app/mobile/src/session/Session.jsx

@@ -129,7 +129,7 @@ function ProfileStackScreen() {
 
 function ContactStackScreen({ addChannel }) {
   const stackParams = { headerStyle: { backgroundColor: Colors.screenBase }, headerBackTitleVisible: false };
-  const screenParams = { headerShown: true };
+  const screenParams = { headerShown: true, headerTintColor: Colors.primary };
 
   const profile = useContext(ProfileContext);
   

app/mobile/src/session/Session.styled.js

@@ -95,7 +95,7 @@ export const styles = StyleSheet.create({
     paddingTop: 8,
     paddingLeft: 8,
     paddingRight: 8,
-    backgroundColor: Colors.drawerBase,
+    backgroundColor: Colors.screenBase,
   },
   options: {
     display: 'flex',

app/mobile/src/session/cards/Cards.jsx

@@ -18,20 +18,18 @@ export function CardsHeader({ filter, setFilter, sort, setSort, openRegistry })
     <View style={styles.title}>
       { sort && (
         <TouchableOpacity style={styles.sort} onPress={() => setSort(false)}>
-          <MatIcons style={styles.icon} name="sort-ascending" size={18} color={Colors.text} />
+          <MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.text} />
         </TouchableOpacity>
       )}
       { !sort && (
         <TouchableOpacity style={styles.sort} onPress={() => setSort(true)}>
-          <MatIcons style={styles.icon} name="sort-ascending" size={18} color={Colors.unsetText} />
+          <MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.unsetText} />
         </TouchableOpacity>
       )}
       <View style={styles.inputwrapper}>
         <AntIcons style={styles.icon} name="search1" size={16} color={Colors.inputPlaceholder} />
-
         <TextInput placeholder={ strings.contactFilter } placeholderTextColor={Colors.inputPlaceholder} value={filter}
             style={styles.inputfield} autoCapitalize={'none'} spellCheck={false} onChangeText={setFilter} />
-
         <View style={styles.space} />
       </View>
       <TouchableOpacity style={styles.add} onPress={() => openRegistry(navigation)}>
@@ -84,7 +82,9 @@ export function Cards({ openRegistry, openContact, addChannel }) {
 
   return (
     <View>
+      <View style={styles.header}>
         <CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
+      </View>
       <CardsBody filter={filter} sort={sort} openContact={openContact} addChannel={addChannel} />
     </View>
   );

app/mobile/src/session/cards/Cards.styled.js

@@ -18,6 +18,12 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  header: {
+    width: '100%',
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderColor: Colors.itemDivider,
+  },
   topbar: {
     borderTopWidth: 1,
     borderBottomWidth: 1,
@@ -75,6 +81,7 @@ export const styles = StyleSheet.create({
     width: '100%',
     paddingLeft: 16,
     paddingRight: 16,
+    paddingTop: 8,
     backgroundColor: Colors.screenBase,
   },
   addbottom: {

app/mobile/src/session/cards/cardItem/CardItem.jsx

@@ -20,36 +20,40 @@ export function CardItem({ item, openContact, enableIce, call, message }) {
     <View>
       { item.cardId && (
         <View style={styles.container}>
-          <View style={styles.profile}>
+          <TouchableOpacity style={styles.profile} activeOpacity={1} onPress={select}>
             <Logo src={item.logo} width={48} height={48} radius={6} />
             <View style={styles.detail}>
               <Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.name }</Text>
               <Text style={styles.handle} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.username }</Text>
             </View>
-          </View>
+          </TouchableOpacity>
           { item.status === 'connected' && (
             <Menu>
               <MenuTrigger customStyles={styles.trigger}>
+                <View style={styles.more}>
                   { item.status === 'connected' && item.offsync && (
-                  <MatIcons name={'dots-horizontal'} size={32} color={Colors.offysnc} />
+                    <MatIcons name={'dots-horizontal'} size={32} color={Colors.offsync} />
                   )}
                   { item.status === 'connected' && !item.offsync && (
                     <MatIcons name={'dots-horizontal'} size={32} color={Colors.connected} />
                   )}
+                </View>
               </MenuTrigger>
               <MenuOptions optionsContainerStyle={{ width: 'auto' }} style={styles.options}>
-                <MenuOption onSelect={() => {}}>
+                <MenuOption onSelect={select}>
                   <Text style={styles.option}>{ strings.viewProfile }</Text>
                 </MenuOption>
-                <MenuOption onSelect={() => {}}>
+                <MenuOption onSelect={message}>
                   <Text style={styles.option}>{ strings.messageContact }</Text>
                 </MenuOption>
-                <MenuOption onSelect={() => {}}>
+                <MenuOption onSelect={call}>
                   <Text style={styles.option}>{ strings.callContact }</Text>
                 </MenuOption>
               </MenuOptions>
             </Menu>
           )}
+          { item.status !== 'connected' && (
+            <TouchableOpacity style={styles.more} onPress={select}>
               { item.status === 'requested' && (
                 <MatIcons name={'dots-horizontal'} size={32} color={Colors.requested} />
               )}
@@ -62,6 +66,8 @@ export function CardItem({ item, openContact, enableIce, call, message }) {
               { item.status === 'confirmed' && (
                 <MatIcons name={'dots-horizontal'} size={32} color={Colors.confirmed} />
               )}
+            </TouchableOpacity>
+          )}
         </View>
       )}
       { !item.cardId && (

app/mobile/src/session/cards/cardItem/CardItem.styled.js

@@ -25,6 +25,9 @@ export const styles = StyleSheet.create({
     flexShrink: 1,
     flexGrow: 1,
   },
+  more: {
+    paddingLeft: 16,
+  },
   space: {
     height: 64,
   },

app/mobile/src/session/registry/Registry.jsx

@@ -37,7 +37,7 @@ export function RegistryBody({ search, handle, server, openContact }) {
     <View style={styles.accounts}>
       { state.searching && (
         <View style={styles.empty}>
-          <ActivityIndicator size={'large'} color={Colors.backgrougd} />
+          <ActivityIndicator size={'large'} color={Colors.text} />
         </View>
       )}
       { !state.searching && state.accounts.length === 0 && (
@@ -70,7 +70,9 @@ export function Registry({ closeRegistry, openContact }) {
 
   return (
     <View>
+      <View style={styles.header}>
         <RegistryHeader search={search} setSearch={setSearch} handle={handle} setHandle={setHandle} server={server} setServer={setServer} />
+      </View>
       <RegistryBody search={search} handle={handle} server={server} openContact={openContact} />
     </View>
   );

app/mobile/src/session/registry/Registry.styled.js

@@ -7,7 +7,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: Colors.formBackground,
+    backgroundColor: Colors.screenBase,
     paddingLeft: 16,
     paddingRight: 16,
     paddingTop: 8,
@@ -18,10 +18,16 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  header: {
+    width: '100%',
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderColor: Colors.itemDivider,
+  },
   topbar: {
     borderTopWidth: 1,
     borderBottomWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
     paddingTop: 6,
     paddingBottom: 6,
     paddingLeft: 16,
@@ -33,7 +39,7 @@ export const styles = StyleSheet.create({
   },
   searcharea: {
     borderBottomWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
   },
   searchbar: {
     display: 'flex',
@@ -47,7 +53,7 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.inputBase,
     alignItems: 'center',
     paddingTop: 4,
     paddingBottom: 4,
@@ -57,20 +63,20 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.inputBase,
     alignItems: 'center',
     flexGrow: 1,
     flexShrink: 1,
     marginRight: 8,
+    marginLeft: 8,
     paddingTop: 4,
     paddingBottom: 4,
-    marginLeft: 8,
   },
   inputfield: {
     flex: 1,
     textAlign: 'center',
     padding: 4,
-    color: Colors.text,
+    color: Colors.inputText,
     fontSize: 14,
   },
   icon: {
@@ -82,6 +88,7 @@ export const styles = StyleSheet.create({
     width: '100%',
     paddingLeft: 16,
     minHeight: 0,
+    backgroundColor: Colors.screenBase,
   },
   empty: {
     flexGrow: 1,
@@ -92,7 +99,7 @@ export const styles = StyleSheet.create({
     marginTop: 32,
   },
   emptyText: {
-    color: Colors.grey,
+    color: Colors.unsetText,
     fontSize: 18,
   },
   addbottom: {
@@ -105,11 +112,11 @@ export const styles = StyleSheet.create({
     borderRadius: 4,
   },
   bottomText: {
-    color: Colors.primary,
+    color: Colors.primaryButtonText,
     paddingLeft: 8,
   },
   search: {
-    backgroundColor: Colors.primary,
+    backgroundColor: Colors.primaryButton,
     marginLeft: 8,
     display: 'flex',
     flexDirection: 'row',
@@ -125,10 +132,10 @@ export const styles = StyleSheet.create({
     padding: 8,
     borderRadius: 4,
     paddingLeft: 8,
-    color: Colors.white,
+    color: Colors.text,
   },
   findarea: {
     borderTopWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
   }
 })

app/mobile/src/session/registry/registryItem/RegistryItem.jsx

@@ -18,10 +18,10 @@ export function RegistryItem({ item, openContact }) {
     <View>
       { item.guid && (
         <TouchableOpacity style={styles.container} activeOpacity={1} onPress={select}>
-          <Logo src={item.logo} width={32} height={32} radius={6} />
+          <Logo src={item.logo} width={48} height={48} radius={6} />
           <View style={styles.detail}>
-            <Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.name }</Text>
+            <Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.name }</Text>
-            <Text style={styles.handle} numberOfLines={1} ellipsizeMode={'tail'}>{ handle }</Text>
+            <Text style={styles.handle} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.username }</Text>
           </View>
         </TouchableOpacity>
       )}

app/mobile/src/session/registry/registryItem/RegistryItem.styled.js

@@ -6,7 +6,7 @@ export const styles = StyleSheet.create({
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    height: 48,
+    height: 64,
     alignItems: 'center',
     borderBottomWidth: 1,
     borderColor: Colors.itemDivider,
@@ -24,41 +24,13 @@ export const styles = StyleSheet.create({
   },
   name: {
     color: Colors.text,
-    fontSize: 14,
+    fontSize: 18,
+    flexShrink: 1,
   },
   handle: {
     color: Colors.text,
-    fontSize: 12,
+    fontSize: 16,
-  },
+    flexShrink: 1,
-  connected: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: Colors.connected,
-  },
-  requested: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: Colors.requested,
-  },
-  connecting: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: Colors.connecting,
-  },
-  pending: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: Colors.pending,
-  },
-  confirmed: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: Colors.confirmed,
   },
 })
 

app/mobile/src/session/registry/useRegistry.hook.js

@@ -47,7 +47,8 @@ export function useRegistry(search, handle, server) {
     const { guid, name, handle, node, location, description, imageSet } = item;
     const server = node ? node : profile.state.server;
     const logo = imageSet ? getListingImageUrl(server, guid) : 'avatar';
-    return { guid, name, handle, node: server, location, description, guid, imageSet, logo };
+    const username = `${handle}/${node}`;
+    return { guid, name, handle, username, node: server, location, description, guid, imageSet, logo };
   };
 
   const actions = {};