From 43d7c4f5ec3946013e148661df320bbc06f4dadf Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Thu, 5 Oct 2023 13:35:06 -0700
Subject: [PATCH] styling for android

---
 app/mobile/src/constants/Colors.js            | 15 ++--
 app/mobile/src/session/Session.jsx            | 11 +--
 app/mobile/src/session/Session.styled.js      |  6 +-
 app/mobile/src/session/cards/Cards.jsx        | 83 ++++++++-----------
 app/mobile/src/session/cards/Cards.styled.js  |  2 +-
 app/mobile/src/session/cards/useCards.hook.js |  8 ++
 app/mobile/src/session/channels/Channels.jsx  |  6 +-
 .../src/session/channels/Channels.styled.js   |  2 +-
 .../src/session/contact/Contact.styled.js     |  2 +-
 .../src/session/conversation/Conversation.jsx |  2 +-
 .../conversation/Conversation.styled.js       |  1 +
 .../src/session/profile/Profile.styled.js     |  6 +-
 .../profileSettings/ProfileSettings.styled.js |  2 +-
 .../src/session/settings/Settings.styled.js   |  4 +-
 14 files changed, 71 insertions(+), 79 deletions(-)

diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js
index 3a629e25..fb2d3d94 100644
--- a/app/mobile/src/constants/Colors.js
+++ b/app/mobile/src/constants/Colors.js
@@ -4,7 +4,7 @@ const LightColors = {
   theme: 'light',
   overlay: 'dark',
   statusBar: 'dark-content',
-  tabBar: '#448866',
+  tabBar: '#888888',
   activeTabIcon: '#448866',
   idleTabIcon: '#888888',
   activeBorder: '#338866',
@@ -20,7 +20,8 @@ const LightColors = {
   text: '#444444',
   screenBase: '#cccccc',
   drawerBase: '#bbbbbb',
-  areaBase: '#ffffff',
+  areaBase: '#dddddd',
+  contentBase: '#f0f0f0',
   modalBase: '#ffffff',
   modalBorder: '#555555',
   modalOverlay: 'rgba(52,52,52,0.8)',
@@ -35,7 +36,7 @@ const LightColors = {
   dangerButtonText: '#ffffff',
   closeButton: '#bbbbbb',
   closeButtonText: '#444444',
-  inputBase: '#eeeeee',
+  inputBase: '#dddddd',
   inputPlaceholder: '#888888',
   inputText: '#444444',
   statusText: '#ffffff',
@@ -48,7 +49,7 @@ const LightColors = {
   errorIndicator: '#ffaaaa',
   horizontalDivider: '#bbbbbb',
   verticalDivider: '#aaaaaa',
-  itemDivider: '#eeeeee',
+  itemDivider: '#cccccc',
   unreadIndicator: '#00aa00',
   enabledIndicator: '#8fbea7',
   disabledIndicator: '#eeeeee',
@@ -68,7 +69,7 @@ const DarkColors = {
   theme: 'dark',
   overlay: 'dark',
   statusBar: 'light-content',
-  tabBar: '#118811',
+  tabBar: '#888888',
   activeTabIcon: '#dddddd',
   idleTabIcon: '#aaaaaa',
   activeBorder: '#aaaaaa',
@@ -85,6 +86,7 @@ const DarkColors = {
   screenBase: '#222222',
   drawerBase: '#333333',
   areaBase: '#444444',
+  contentBase: '#000000',
   modalBase: '#1b1b1b',
   modalBorder: '#555555',
   modalOverlay: 'rgba(88,88,88,0.8)',
@@ -100,7 +102,7 @@ const DarkColors = {
   closeButton: '#777777',
   closeButtonText: '#ffffff',
   inputBase: '#777777',
-  inputPlaceholder: '#aaaaaa',
+  inputPlaceholder: '#cccccc',
   inputText: '#eeeeee',
   statusText: '#ffffff',
   connectedIndicator: '#00cc00',
@@ -150,6 +152,7 @@ export const Colors = {
   text: getColor('text'),
   screenBase: getColor('screenBase'),
   drawerBase: getColor('drawerBase'),
+  contentBase: getColor('contentBase'),
   areaBase: getColor('areaBase'),
   modalBorder: getColor('modalBorder'), 
   modalOverlay: getColor('modalOverlay'),
diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx
index 9abdb1db..19b4522b 100644
--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@@ -12,7 +12,7 @@ import { styles } from './Session.styled';
 import Colors from 'constants/Colors';
 import { Profile } from './profile/Profile';
 import { ProfileSettings } from './profileSettings/ProfileSettings';
-import { CardsHeader, CardsBody, Cards } from './cards/Cards';
+import { Cards } from './cards/Cards';
 import { RegistryHeader, RegistryBody, Registry } from './registry/Registry';
 import { Contact } from './contact/Contact';
 import { Details } from './details/Details';
@@ -141,9 +141,6 @@ function ContactStackScreen({ addChannel }) {
   const [handle, setHandle] = useState();
   const [server, setServer] = useState();
 
-  const [filter, setFilter] = useState();
-  const [sort, setSort] = useState(false);
-
   const openContact = (navigation, contact) => {
     setContact(contact);
     navigation.navigate('contact')
@@ -159,10 +156,8 @@ function ContactStackScreen({ addChannel }) {
     <SafeAreaView edges={['left', 'right']} style={styles.body}>
       <ContactStack.Navigator screenOptions={({ route }) => (screenParams)} initialRouteName="cards">
 
-        <ContactStack.Screen name="cards" options={{ ...stackParams, cardStyle: {backgroundColor: Colors.screenBase}, headerTitle: (props) => (
-            <CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
-          )}}>
-          {(props) => <CardsBody filter={filter} sort={sort} openContact={(contact) => openContact(props.navigation, contact)} addChannel={addChannel} />}
+        <ContactStack.Screen name="cards" options={stackParams}>
+          {(props) => <Cards navigation={props.navigation} openContact={(contact) => openContact(props.navigation, contact)} openRegistry={openRegistry} addChannel={addChannel} />}
         </ContactStack.Screen>
 
         <ContactStack.Screen name="contact" options={{ headerShown: false }}>
diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js
index 1d3febca..8836fd2d 100644
--- a/app/mobile/src/session/Session.styled.js
+++ b/app/mobile/src/session/Session.styled.js
@@ -82,12 +82,12 @@ export const styles = StyleSheet.create({
     height: '100%',
     width: '33%',
     maxWidth: 500,
-    backgroundColor: Colors.screenBase,
+    borderRightWidth: 1,
     borderColor: Colors.verticalDivider,
   },
   conversation: {
     width: '67%',
-    backgroundColor: Colors.areaBase,
+    backgroundColor: Colors.contentBase,
   },
   drawer: {
     width: '100%',
@@ -95,7 +95,7 @@ export const styles = StyleSheet.create({
     paddingTop: 8,
     paddingLeft: 8,
     paddingRight: 8,
-    backgroundColor: Colors.drawerBase,
+    backgroundColor: Colors.contentBase,
   },
   options: {
     display: 'flex',
diff --git a/app/mobile/src/session/cards/Cards.jsx b/app/mobile/src/session/cards/Cards.jsx
index 09cc9404..47cccd5f 100644
--- a/app/mobile/src/session/cards/Cards.jsx
+++ b/app/mobile/src/session/cards/Cards.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Alert, FlatList, ScrollView, View, TextInput, TouchableOpacity, Text } from 'react-native';
 import { styles } from './Cards.styled';
 import { useCards } from './useCards.hook';
@@ -7,41 +7,40 @@ import AntIcons from 'react-native-vector-icons/AntDesign';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { Colors } from 'constants/Colors';
 import { CardItem } from './cardItem/CardItem';
-import { useNavigation } from '@react-navigation/native';
-import { getLanguageStrings } from 'constants/Strings';
 
-export function CardsHeader({ filter, setFilter, sort, setSort, openRegistry }) {
-  const navigation = useNavigation();
-  const strings = getLanguageStrings();
+export function Cards({ navigation, openContact, openRegistry, addChannel }) {
+  const { state, actions } = useCards();
 
-  return (
-    <View style={styles.title}>
-      { sort && (
-        <TouchableOpacity style={styles.sort} onPress={() => setSort(false)}>
-          <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={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)}>
-        <AntIcons name={'adduser'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
-        <Text style={styles.newtext}>{ strings.add }</Text>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-export function CardsBody({ filter, sort, openContact, addChannel }) {
-  const { state, actions } = useCards(filter, sort);
+  useEffect(() => {
+    if (navigation) {
+      navigation.setOptions({
+        headerTitle: () => (
+          <View style={styles.title}>
+            { state.sort && (
+              <TouchableOpacity style={styles.sort} onPress={() => actions.setSort(false)}>
+                <MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.text} />
+              </TouchableOpacity>
+            )}
+            { !state.sort && (
+              <TouchableOpacity style={styles.sort} onPress={() => actions.setSort(true)}>
+                <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={ state.strings.contactFilter } placeholderTextColor={Colors.inputPlaceholder} value={state.filter}
+                  style={styles.inputfield} autoCapitalize={'none'} spellCheck={false} onChangeText={actions.setFilter} />
+              <View style={styles.space} />
+            </View>
+            <TouchableOpacity style={styles.add} onPress={() => openRegistry(navigation)}>
+              <AntIcons name={'adduser'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
+              <Text style={styles.newtext}>{ state.strings.add }</Text>
+            </TouchableOpacity>
+          </View>
+        ),
+      });
+    }
+  }, [navigation]);
 
   const call = async (contact) => {
     try {
@@ -57,7 +56,7 @@ export function CardsBody({ filter, sort, openContact, addChannel }) {
   }
 
   return (
-    <>
+    <View style={styles.container}>
       { state.cards.length == 0 && (
         <View style={styles.notfound}>
           <Text style={styles.notfoundtext}>{ state.strings.noContacts }</Text>
@@ -72,20 +71,6 @@ export function CardsBody({ filter, sort, openContact, addChannel }) {
           keyExtractor={item => item.cardId}
         />
       )}
-    </>
-  );
-}
-
-export function Cards({ openRegistry, openContact, addChannel }) {
-  const [filter, setFilter] = useState();
-  const [sort, setSort] = useState(false);
-
-  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>
   );
 }
diff --git a/app/mobile/src/session/cards/Cards.styled.js b/app/mobile/src/session/cards/Cards.styled.js
index a3af12f2..2561cd25 100644
--- a/app/mobile/src/session/cards/Cards.styled.js
+++ b/app/mobile/src/session/cards/Cards.styled.js
@@ -7,7 +7,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: Colors.screenBase,
+    backgroundColor: Colors.contentBase,
   },
   drawer: {
     flexGrow: 1,
diff --git a/app/mobile/src/session/cards/useCards.hook.js b/app/mobile/src/session/cards/useCards.hook.js
index 49f9bf3f..9bcb6855 100644
--- a/app/mobile/src/session/cards/useCards.hook.js
+++ b/app/mobile/src/session/cards/useCards.hook.js
@@ -11,6 +11,8 @@ export function useCards(filter, sort) {
     cards: [],
     enableIce: false,
     strings: getLanguageStrings(),
+    sort: false,
+    filter: null,
   });
 
   const profile = useContext(ProfileContext);
@@ -105,6 +107,12 @@ export function useCards(filter, sort) {
       const server = node ? node : profile.state.server;
       await ring.actions.call(cardId, server, `${guid}.${token}`);
     },
+    setFilter: (filter) => {
+      updateState({ filter });
+    },
+    setSort: (sort) => {
+      updateState({ sort });
+    },
   };
 
   return { state, actions };
diff --git a/app/mobile/src/session/channels/Channels.jsx b/app/mobile/src/session/channels/Channels.jsx
index d2dbfcdb..c926c37d 100644
--- a/app/mobile/src/session/channels/Channels.jsx
+++ b/app/mobile/src/session/channels/Channels.jsx
@@ -46,12 +46,12 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
         headerTitle: () => (
           <View style={styles.title}>
             <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
+              <Ionicons style={styles.icon} name="search1" size={16} color={Colors.inputPlaceholder} />
               <TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
-                  autoCapitalize="none" placeholderTextColor={Colors.disabled}  placeholder={ state.strings.topics} />
+                  autoCapitalize="none" placeholderTextColor={Colors.inputPlaceholder}  placeholder={ state.strings.topics} />
             </View>
             <TouchableOpacity style={styles.addtop} onPress={actions.showAdding}>
-              <Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
+              <Ionicons name={'message1'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
               <Text style={styles.addtext}>{ state.strings.new }</Text>
             </TouchableOpacity>
           </View>
diff --git a/app/mobile/src/session/channels/Channels.styled.js b/app/mobile/src/session/channels/Channels.styled.js
index 22b842bb..e95b165a 100644
--- a/app/mobile/src/session/channels/Channels.styled.js
+++ b/app/mobile/src/session/channels/Channels.styled.js
@@ -7,7 +7,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: Colors.screenBase,
+    backgroundColor: Colors.contentBase,
   },
   title: {
     display: 'flex',
diff --git a/app/mobile/src/session/contact/Contact.styled.js b/app/mobile/src/session/contact/Contact.styled.js
index 9fe017ba..9113e95b 100644
--- a/app/mobile/src/session/contact/Contact.styled.js
+++ b/app/mobile/src/session/contact/Contact.styled.js
@@ -125,7 +125,7 @@ export const styles = StyleSheet.create({
     minHeight: 32,
     borderTopRightRadius: 32,
     borderTopLeftRadius: 32,
-    backgroundColor: Colors.screenBase,
+    backgroundColor: Colors.contentBase,
     borderTopWidth: 1,
     borderColor: Colors.areaBorder,
     borderLeftWidth: 0.2,
diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx
index 16736541..5f8f3393 100644
--- a/app/mobile/src/session/conversation/Conversation.jsx
+++ b/app/mobile/src/session/conversation/Conversation.jsx
@@ -67,7 +67,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
 
   return (
     
-  <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={72}>
+  <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
     <View style={styles.container}>
       { !navigation && (
         <View style={styles.header}>
diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js
index fbfb6b79..964fc741 100644
--- a/app/mobile/src/session/conversation/Conversation.styled.js
+++ b/app/mobile/src/session/conversation/Conversation.styled.js
@@ -52,6 +52,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'column',
     flexGrow: 1,
     height: '100%',
+    backgroundColor: Colors.contentBase,
   },
   thread: {
     display: 'flex',
diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js
index 0a6798f4..0f4393e4 100644
--- a/app/mobile/src/session/profile/Profile.styled.js
+++ b/app/mobile/src/session/profile/Profile.styled.js
@@ -106,7 +106,7 @@ export const styles = StyleSheet.create({
   details: {
     borderTopRightRadius: 32,
     borderTopLeftRadius: 32,
-    backgroundColor: Colors.screenBase,
+    backgroundColor: Colors.contentBase,
     borderTopWidth: 1,
     borderColor: Colors.areaBorder,
     borderLeftWidth: 0.2,
@@ -126,7 +126,7 @@ export const styles = StyleSheet.create({
   edit: {
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
-    backgroundColor: Colors.screenBase,
+    backgroundColor: Colors.contentBase,
     paddingLeft: 16,
     paddingRight: 16,
     paddingTop: 2,
@@ -190,7 +190,7 @@ export const styles = StyleSheet.create({
   divider: {
     width: '100%',
     height: 3, 
-    backgroundColor: Colors.screenBase,
+    backgroundColor: Colors.contentBase,
   },
   entry: {
     width: '100%',
diff --git a/app/mobile/src/session/profileSettings/ProfileSettings.styled.js b/app/mobile/src/session/profileSettings/ProfileSettings.styled.js
index e5a3030b..1e143254 100644
--- a/app/mobile/src/session/profileSettings/ProfileSettings.styled.js
+++ b/app/mobile/src/session/profileSettings/ProfileSettings.styled.js
@@ -5,7 +5,7 @@ export const styles = StyleSheet.create({
   drawer: {
     width: '100%',
     height: '100%',
-    backgroundColor: Colors.drawerBase,
+    backgroundColor: Colors.contentBase,
   },
   container: {
     display: 'flex',
diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js
index 102efa75..5656b72b 100644
--- a/app/mobile/src/session/settings/Settings.styled.js
+++ b/app/mobile/src/session/settings/Settings.styled.js
@@ -22,7 +22,7 @@ export const styles = StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
     paddingTop: 8,
-    backgroundColor: Colors.screenBase,
+    backgroundColor: Colors.contentBase,
   },
   label: {
     color: Colors.labelText,
@@ -66,7 +66,7 @@ export const styles = StyleSheet.create({
   divider: {
     width: '100%',
     height: 3,
-    backgroundColor: Colors.screenBase,
+    backgroundColor: Colors.contentBase,
   },
   entry: {
     width: '100%',