From 5b5db51ad3e035826b54692ff9898de46e94376e Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sat, 23 Sep 2023 10:26:08 -0700
Subject: [PATCH] rendering color mode for registy

---
 app/mobile/src/session/Session.jsx            |  2 +-
 app/mobile/src/session/Session.styled.js      |  2 +-
 app/mobile/src/session/cards/Cards.jsx        | 10 ++--
 app/mobile/src/session/cards/Cards.styled.js  |  7 +++
 .../src/session/cards/cardItem/CardItem.jsx   | 50 +++++++++++--------
 .../session/cards/cardItem/CardItem.styled.js |  3 ++
 app/mobile/src/session/registry/Registry.jsx  |  6 ++-
 .../src/session/registry/Registry.styled.js   | 31 +++++++-----
 .../registry/registryItem/RegistryItem.jsx    |  6 +--
 .../registryItem/RegistryItem.styled.js       | 38 ++------------
 .../src/session/registry/useRegistry.hook.js  |  3 +-
 11 files changed, 78 insertions(+), 80 deletions(-)

diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx
index 811cf145..0c161283 100644
--- a/app/mobile/src/session/Session.jsx
+++ b/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);
   
diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js
index ab752969..b83a5fa8 100644
--- a/app/mobile/src/session/Session.styled.js
+++ b/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',
diff --git a/app/mobile/src/session/cards/Cards.jsx b/app/mobile/src/session/cards/Cards.jsx
index d8e16760..09cc9404 100644
--- a/app/mobile/src/session/cards/Cards.jsx
+++ b/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>
-      <CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
+      <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>
   );
diff --git a/app/mobile/src/session/cards/Cards.styled.js b/app/mobile/src/session/cards/Cards.styled.js
index 385a2c20..4b1c7b36 100644
--- a/app/mobile/src/session/cards/Cards.styled.js
+++ b/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: {
diff --git a/app/mobile/src/session/cards/cardItem/CardItem.jsx b/app/mobile/src/session/cards/cardItem/CardItem.jsx
index 42c2d390..30d02c7e 100644
--- a/app/mobile/src/session/cards/cardItem/CardItem.jsx
+++ b/app/mobile/src/session/cards/cardItem/CardItem.jsx
@@ -20,47 +20,53 @@ 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}>
-                { item.status === 'connected' && item.offsync && (
-                  <MatIcons name={'dots-horizontal'} size={32} color={Colors.offysnc} />
-                )}
-                { item.status === 'connected' && !item.offsync && (
-                  <MatIcons name={'dots-horizontal'} size={32} color={Colors.connected} />
-                )}
+                <View style={styles.more}>
+                  { item.status === 'connected' && item.offsync && (
+                    <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 === 'requested' && (
-            <MatIcons name={'dots-horizontal'} size={32} color={Colors.requested} />
-          )}
-          { item.status === 'connecting' && (
-            <MatIcons name={'dots-horizontal'} size={32} color={Colors.connecting} />
-          )}
-          { item.status === 'pending' && (
-            <MatIcons name={'dots-horizontal'} size={32} color={Colors.pending} />
-          )}
-          { item.status === 'confirmed' && (
-            <MatIcons name={'dots-horizontal'} size={32} color={Colors.confirmed} />
+          { item.status !== 'connected' && (
+            <TouchableOpacity style={styles.more} onPress={select}>
+              { item.status === 'requested' && (
+                <MatIcons name={'dots-horizontal'} size={32} color={Colors.requested} />
+              )}
+              { item.status === 'connecting' && (
+                <MatIcons name={'dots-horizontal'} size={32} color={Colors.connecting} />
+              )}
+              { item.status === 'pending' && (
+                <MatIcons name={'dots-horizontal'} size={32} color={Colors.pending} />
+              )}
+              { item.status === 'confirmed' && (
+                <MatIcons name={'dots-horizontal'} size={32} color={Colors.confirmed} />
+              )}
+            </TouchableOpacity>
           )}
         </View>
       )}
diff --git a/app/mobile/src/session/cards/cardItem/CardItem.styled.js b/app/mobile/src/session/cards/cardItem/CardItem.styled.js
index f8ac575b..d001a5aa 100644
--- a/app/mobile/src/session/cards/cardItem/CardItem.styled.js
+++ b/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,
   },
diff --git a/app/mobile/src/session/registry/Registry.jsx b/app/mobile/src/session/registry/Registry.jsx
index 5f6b8346..0249fc12 100644
--- a/app/mobile/src/session/registry/Registry.jsx
+++ b/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>
-      <RegistryHeader search={search} setSearch={setSearch} handle={handle} setHandle={setHandle} server={server} setServer={setServer} />
+      <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>
   );
diff --git a/app/mobile/src/session/registry/Registry.styled.js b/app/mobile/src/session/registry/Registry.styled.js
index dbe37108..8ecf2604 100644
--- a/app/mobile/src/session/registry/Registry.styled.js
+++ b/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,
   }
 })
diff --git a/app/mobile/src/session/registry/registryItem/RegistryItem.jsx b/app/mobile/src/session/registry/registryItem/RegistryItem.jsx
index 07f8cb9b..2905ca49 100644
--- a/app/mobile/src/session/registry/registryItem/RegistryItem.jsx
+++ b/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.handle} numberOfLines={1} ellipsizeMode={'tail'}>{ handle }</Text>
+            <Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.name }</Text>
+            <Text style={styles.handle} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.username }</Text>
           </View>
         </TouchableOpacity>
       )}
diff --git a/app/mobile/src/session/registry/registryItem/RegistryItem.styled.js b/app/mobile/src/session/registry/registryItem/RegistryItem.styled.js
index 91b94788..76aa6a55 100644
--- a/app/mobile/src/session/registry/registryItem/RegistryItem.styled.js
+++ b/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,
-  },
-  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,
+    fontSize: 16,
+    flexShrink: 1,
   },
 })
 
diff --git a/app/mobile/src/session/registry/useRegistry.hook.js b/app/mobile/src/session/registry/useRegistry.hook.js
index 3c2637d1..f4cf77ae 100644
--- a/app/mobile/src/session/registry/useRegistry.hook.js
+++ b/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 = {};