styling conversation for dark mode

2025-02-11 19:19:16 +00:00 · 2023-10-02 16:30:37 -07:00 · 2023-10-02 16:30:37 -07:00 · 405e6c2b76
commit 405e6c2b76
parent c3c979ad72
13 changed files with 43 additions and 45 deletions
--- 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',
--- 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',
--- 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,
--- 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>
      )}
--- 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,
--- 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>
--- 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,
--- 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' && (
--- 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,
--- 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;
        }
      }
--- 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%',
--- 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>
--- 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',
  },