From 405e6c2b76e828b75f15ba0f955eb49e207759f2 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Mon, 2 Oct 2023 16:30:37 -0700
Subject: [PATCH] styling conversation for dark mode

---
 app/mobile/src/constants/Colors.js            | 10 +++++-----
 app/mobile/src/constants/Strings.js           |  4 ++--
 .../src/session/channels/Channels.styled.js   |  6 +++---
 .../src/session/conversation/Conversation.jsx | 10 +++++-----
 .../conversation/Conversation.styled.js       |  2 +-
 .../conversation/addTopic/AddTopic.jsx        | 18 +++++++++---------
 .../conversation/addTopic/AddTopic.styled.js  | 19 ++++++++-----------
 .../conversation/topicItem/TopicItem.jsx      |  2 +-
 .../topicItem/TopicItem.styled.js             |  5 +++--
 .../topicItem/useTopicItem.hook.js            |  6 ++++--
 .../src/session/settings/Settings.styled.js   |  2 +-
 app/mobile/src/session/welcome/Welcome.jsx    |  2 --
 .../src/session/welcome/Welcome.styled.js     |  2 +-
 13 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js
index 41ac7796..f7156b7b 100644
--- a/app/mobile/src/constants/Colors.js
+++ b/app/mobile/src/constants/Colors.js
@@ -19,7 +19,7 @@ const LightColors = {
   descriptionText: '#888888',
   text: '#444444',
   screenBase: '#dddddd',
-  drawerBase: '#eeeeee',
+  drawerBase: '#bbbbbb',
   areaBase: '#ffffff',
   modalBase: '#ffffff',
   modalBorder: '#555555',
@@ -28,7 +28,7 @@ const LightColors = {
   primaryButton: '#448866',
   primaryButtonText: '#ffffff',
   cancelButton: '#888888',
-  cancelButtonText: '#ffffff',
+  cancelButtonText: '#888888',
   disabledButton: '#dddddd',
   disabledButtonText: '#aaaaaa',
   dangerButton: '#ff5555',
@@ -55,10 +55,10 @@ const LightColors = {
   sliderGrip: '#eeeeee',
   areaBorder: '#ffffff',
   connected: '#4488FF',
-  connecting: '#dd88ff',
+  connecting: '#dd44ff',
   requested: '#448844',
   pending: '#ffaa22',
-  confirmed: '#aaaaaa',
+  confirmed: '#999999',
   offsync: '#ff4444',
   unsaved: '#888888',
 };
@@ -108,7 +108,7 @@ const DarkColors = {
   confirmedIndicator: '#88bb00',
   unknownIndicator: '#dddddd',
   errorIndicator: '#ffaaaa',
-  horizontalDivider: '#888888',
+  horizontalDivider: '#999999',
   verticalDivider: '#aaaaaa',
   itemDivider: '#555555',
   unreadIndicator: '#00aa00',
diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js
index bf123179..1fa88be4 100644
--- a/app/mobile/src/constants/Strings.js
+++ b/app/mobile/src/constants/Strings.js
@@ -94,9 +94,9 @@ const Strings = [
     confirmReport: 'Report',
     confirmed: 'Saved',
     pending: 'Unknown',
-    connecting: 'Requested',
+    connecting: 'Request Sent',
     connected: 'Connected',
-    requested: 'Received',
+    requested: 'Request Received',
     unsaved: 'Unsaved',
     offsync: 'Offsync',
     actionResync: 'Resync',
diff --git a/app/mobile/src/session/channels/Channels.styled.js b/app/mobile/src/session/channels/Channels.styled.js
index 3c499d67..bf192503 100644
--- a/app/mobile/src/session/channels/Channels.styled.js
+++ b/app/mobile/src/session/channels/Channels.styled.js
@@ -98,14 +98,14 @@ export const styles = StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 16,
     borderTopWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.horizontalDivider,
   },
   columntop: {
     paddingLeft: 24,
     paddingRight: 16,
     paddingBottom: 8,
     borderBottomWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.horizontalDivider,
   },
   addWrapper: {
     display: 'flex',
@@ -143,7 +143,7 @@ export const styles = StyleSheet.create({
   },
   cancel: {
     borderWidth: 1,
-    borderColor: Colors.lightgrey,
+    borderColor: Colors.cancelButton,
     borderRadius: 4,
     padding: 4,
     marginRight: 8,
diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx
index f1b05baf..5f8f3393 100644
--- a/app/mobile/src/session/conversation/Conversation.jsx
+++ b/app/mobile/src/session/conversation/Conversation.jsx
@@ -66,20 +66,20 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
   }, []);
 
   return (
-<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={72}
-          enabled={Platform.OS === 'ios' ? state.keyboard : false}>
+    
+  <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
     <View style={styles.container}>
       { !navigation && (
         <View style={styles.header}>
           { state.loaded && (
-            <TouchableOpacity style={styles.headertitle} onPress={openDetails}>
+            <TouchableOpacity style={styles.headertitle} onPress={openDetails} activeOpacity={1}>
               <Logo src={state.logo} width={32} height={32} radius={2} />
               <Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
-              <Ionicons name={'setting'} size={24} color={Colors.primary} style={styles.titlebutton} />
+              <Ionicons name={'setting'} size={24} color={Colors.linkText} style={styles.titlebutton} />
             </TouchableOpacity>
           )}
           <TouchableOpacity style={styles.headerclose} onPress={closeConversation}>
-            <Ionicons name={'close'} size={22} color={Colors.grey} style={styles.titlebutton} />
+            <Ionicons name={'close'} size={22} color={Colors.descriptionText} style={styles.titlebutton} />
           </TouchableOpacity>
         </View>
       )}
diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js
index 4855cb71..fbfb6b79 100644
--- a/app/mobile/src/session/conversation/Conversation.styled.js
+++ b/app/mobile/src/session/conversation/Conversation.styled.js
@@ -18,7 +18,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     borderBottomWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.horizontalDivider,
     height: 48,
     marginLeft: 16,
     marginRight: 16,
diff --git a/app/mobile/src/session/conversation/addTopic/AddTopic.jsx b/app/mobile/src/session/conversation/addTopic/AddTopic.jsx
index 41f66118..195ba64c 100644
--- a/app/mobile/src/session/conversation/addTopic/AddTopic.jsx
+++ b/app/mobile/src/session/conversation/addTopic/AddTopic.jsx
@@ -159,7 +159,7 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
         <View style={{ height: 0, width: `${state.progress}%`, borderColor: Colors.background, borderWidth: 1 }} />
       )}
       { !state.uploadError && !state.progress && (
-        <View style={{ height: 0, width: '100%', borderColor: Colors.formBackground, borderWidth: 1 }} />
+        <View style={{ height: 0, width: '100%', borderColor: Colors.horizontalDivider, borderWidth: 1 }} />
       )}
       { state.uploadError && (
         <View style={{ height: 0, width: '100%', borderColor: Colors.alert, borderWidth: 1 }} />
@@ -178,28 +178,28 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
       <View style={styles.addButtons}>
         { state.enableImage && (
           <TouchableOpacity style={styles.addButton} onPress={addImage}>
-            <AntIcons name="picture" size={20} color={Colors.text} />
+            <AntIcons name="picture" size={24} color={Colors.text} />
           </TouchableOpacity>
         )}
         { state.enableVideo && (
           <TouchableOpacity style={styles.addButton} onPress={addVideo}>
-            <MatIcons name="video-outline" size={24} color={Colors.text} />
+            <MatIcons name="video-outline" size={26} color={Colors.text} />
           </TouchableOpacity>
         )}
         { state.enableAudio && (
           <TouchableOpacity style={styles.addButton} onPress={addAudio}>
-            <MatIcons name="music-box-outline" size={20} color={Colors.text} />
+            <MatIcons name="music-note" size={24} color={Colors.text} />
           </TouchableOpacity>
         )}
         <TouchableOpacity style={styles.addButton} onPress={addBinary}>
-          <MatIcons name="all-inclusive-box-outline" size={20} color={Colors.text} />
+          <MatIcons name="file-outline" size={24} color={Colors.text} />
         </TouchableOpacity>
         <View style={styles.divider} />
         <TouchableOpacity style={styles.addButton} onPress={actions.showFontSize}>
-          <MatIcons name="format-size" size={20} color={Colors.text} />
+          <MatIcons name="format-size" size={24} color={Colors.text} />
         </TouchableOpacity>
         <TouchableOpacity style={styles.addButton} onPress={actions.showFontColor}>
-          <MatIcons name="palette-outline" size={20} color={Colors.text} />
+          <MatIcons name="palette-outline" size={24} color={Colors.text} />
         </TouchableOpacity>
         <View style={styles.space} />
         <TouchableOpacity style={styles.addButton} onPress={sendMessage}>
@@ -210,13 +210,13 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
             <MatIcons name="send-outline" size={20} color={Colors.alert} />
           )}
           { !state.conflict && state.locked && !contentKey && (
-            <MatIcons name="lock" size={20} color={Colors.lightgrey} />
+            <MatIcons name="lock" size={20} color={Colors.disabledButtonText} />
           )}
           { !state.conflict && !state.busy && (!state.locked || contentKey) && (state.message || state.assets.length > 0) && (
             <MatIcons name="send-outline" size={20} color={Colors.text} />
           )}
           { !state.conflict && !state.busy && (!state.locked || contentKey) && !(state.message || state.assets.length > 0) && (
-            <MatIcons name="send-outline" size={20} color={Colors.lightgrey} />
+            <MatIcons name="send-outline" size={20} color={Colors.disabledButtonText} />
           )}
         </TouchableOpacity>
       </View>
diff --git a/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js b/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js
index abe7ff3c..04d48336 100644
--- a/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js
+++ b/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js
@@ -4,7 +4,7 @@ import { Colors } from 'constants/Colors';
 export const styles = StyleSheet.create({
   add: {
     borderTopWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
     display: 'flex',
     flexDirection: 'column',
   },
@@ -18,15 +18,12 @@ export const styles = StyleSheet.create({
   addButton: {
     width: 36,
     height: 36,
-    backgroundColor: Colors.white,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: Colors.divider,
-    borderRadius: 2,
-    marginLeft: 4,
-    marginRight: 4,
+    borderRadius: 4,
+    marginLeft: 8,
+    marginRight: 8,
   },
   input: {
     marginLeft: 16,
@@ -36,8 +33,8 @@ export const styles = StyleSheet.create({
     padding: 8,
     borderRadius: 4,
     borderWidth: 1,
-    borderColor: Colors.divider,
-    backgroundColor: Colors.white,
+    borderColor: Colors.itemDivider,
+    backgroundColor: Colors.inputBase,
     maxHeight: 96,
     minHeight: 52,
   },
@@ -45,9 +42,9 @@ export const styles = StyleSheet.create({
     height: 32,
     flexGrow: 1,
   },
-  divider: {
+  itemDivider: {
     borderWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
     height: 32,
     marginLeft: 8,
     marginRight: 8,
diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
index 8bd16c4e..dc6019d6 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
@@ -141,7 +141,7 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
           { (state.logo === 'avatar' || !state.logo) && (
             <Image source={avatar} style={{ width: 28, height: 28, borderRadius: 6 }} />
           )}
-          <Text style={{ ...styles.name, color: state.nameSet ? Colors.text : Colors.grey }}>{ state.name }</Text>
+          <Text style={{ ...styles.name, fontStyle: state.nameSet ? 'normal' : 'italic' }}>{ state.name }</Text>
           <Text style={styles.timestamp}>{ state.timestamp }</Text>
         </TouchableOpacity>
         { state.status === 'confirmed' && (
diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
index 26b18d88..0b475b35 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
@@ -7,7 +7,7 @@ export const styles = StyleSheet.create({
   },
   item: {
     borderTopWidth: 1,
-    borderColor: Colors.white,
+    borderColor: Colors.itemDivider,
     paddingTop: 8,
   },
   header: {
@@ -17,12 +17,13 @@ export const styles = StyleSheet.create({
   },
   name: {
     paddingLeft: 8,
+    color: Colors.descriptionText,
   },
   timestamp: {
     paddingLeft: 8,
     fontSize: 11,
     paddingTop: 2,
-    color: Colors.grey,
+    color: Colors.descriptionText,
   },
   carousel: {
     paddingLeft: 52,
diff --git a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
index e3e3c8fe..fb5d3b33 100644
--- a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
@@ -108,9 +108,11 @@ export function useTopicItem(item, hosting, remove, contentKey) {
       known = true;
       if (identity.name) {
         name = identity.name;
+        nameSet = true;
       }
       else {
-        name = identity.node ? `${identity.handle}@${identity.node}` : identity.handle;
+        name = identity.node ? `${identity.handle}/${identity.node}` : identity.handle;
+        nameSet = false;
       }
       const img = profile.state.imageUrl;
       if (img) {
@@ -132,7 +134,7 @@ export function useTopicItem(item, hosting, remove, contentKey) {
         }
         else {
           const { node, handle } = contact.profile || {};
-          name = node ? `${handle}@${node}` : handle;
+          name = node ? `${handle}/${node}` : handle;
           nameSet = false;
         }
       }
diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js
index e59539b0..517f872e 100644
--- a/app/mobile/src/session/settings/Settings.styled.js
+++ b/app/mobile/src/session/settings/Settings.styled.js
@@ -66,7 +66,7 @@ export const styles = StyleSheet.create({
   divider: {
     width: '100%',
     height: 2,
-    backgroundColor: Colors.screenBase,
+    backgroundColor: Colors.areaBase,
   },
   entry: {
     width: '100%',
diff --git a/app/mobile/src/session/welcome/Welcome.jsx b/app/mobile/src/session/welcome/Welcome.jsx
index df390701..b1b9682d 100644
--- a/app/mobile/src/session/welcome/Welcome.jsx
+++ b/app/mobile/src/session/welcome/Welcome.jsx
@@ -10,8 +10,6 @@ import dark from 'images/darksess.png';
 
 export function Welcome() {
 
-console.log(Colors.theme);
-
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.header}>Databag</Text>
diff --git a/app/mobile/src/session/welcome/Welcome.styled.js b/app/mobile/src/session/welcome/Welcome.styled.js
index f9f6d427..548299a3 100644
--- a/app/mobile/src/session/welcome/Welcome.styled.js
+++ b/app/mobile/src/session/welcome/Welcome.styled.js
@@ -4,7 +4,7 @@ import { Colors } from 'constants/Colors';
 export const styles = StyleSheet.create({
   container: {
     height: '100%',
-    backgroundColor: Colors.background,
+    backgroundColor: Colors.drawerBase,
     display: 'flex',
     flexDirection: 'column',
   },