fix contrast between Chats and Communities with new messages

Author: Parveshdhull

src/quo/components/community/community_list_view.cljs

@@ -38,55 +38,20 @@
      unread-messages?
      [unread-grey-dot :unviewed-messages-public])])
 
-(defn communities-list-view-item
-  [{:keys [customization-color] :as props}
-   {:keys [name locked? status muted unread-messages? unread-mentions-count community-icon tokens]}]
-  (let [theme (quo.theme/use-theme)]
-    [rn/view
-     {:style (merge (style/community-card 16 theme)
-                    {:margin-bottom 12})}
-     [rn/touchable-highlight
-      (merge {:style {:height        56
-                      :border-radius 16}}
-             props)
-      [rn/view {:style style/detail-container}
-       [rn/view (style/list-info-container)
-        [community-icon/community-icon
-         {:images community-icon} 32]
-        [rn/view
-         {:flex              1
-          :margin-horizontal 12}
-         [text/text
-          {:weight              :semi-bold
-           :size                :paragraph-1
-           :accessibility-label :community-name-text
-           :number-of-lines     1
-           :ellipsize-mode      :tail
-           :style               {:color (when muted
-                                          (colors/theme-colors
-                                           colors/neutral-40
-                                           colors/neutral-60
-                                           theme))}}
-          name]
-         [community-view/community-stats-column
-          {:type :list-view}]]
-        (if (= status :gated)
-          [community-view/permission-tag-container
-           {:locked? locked?
-            :tokens  tokens}]
-          [notification-view
-           {:customization-color   customization-color
-            :theme                 theme
-            :muted?                muted
-            :unread-mentions-count unread-mentions-count
-            :unread-messages?      unread-messages?}])]]]]))
+(defn- title-color
+  [unread-messages? muted theme]
+  (cond
+    muted            (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+    unread-messages? (colors/theme-colors colors/neutral-100 colors/white theme)
+    :else            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
 
 (defn communities-membership-list-item
   [{:keys [customization-color] :as props}
    bottom-sheet?
    {:keys [name muted unviewed-messages-count unviewed-mentions-count status
            images tokens locked? style]}]
-  (let [theme (quo.theme/use-theme)]
+  (let [theme            (quo.theme/use-theme)
+        unread-messages? (pos? unviewed-messages-count)]
     [rn/touchable-highlight
      (merge {:underlay-color (colors/theme-colors
                               colors/neutral-5
@@ -108,11 +73,7 @@
          :ellipsize-mode      :tail
          :weight              :semi-bold
          :size                :paragraph-1
-         :style               (when muted
-                                {:color (colors/theme-colors
-                                         colors/neutral-40
-                                         colors/neutral-60
-                                         theme)})}
+         :style               {:color (title-color unread-messages? muted theme)}}
         name]]
 
       [rn/view
@@ -128,4 +89,4 @@
            :customization-color   customization-color
            :muted?                muted
            :unread-mentions-count unviewed-mentions-count
-           :unread-messages?      (pos? unviewed-messages-count)}])]]]))
+           :unread-messages?      unread-messages?}])]]]))

src/status_im/contexts/chat/home/chat_list_item/view.cljs

@@ -146,9 +146,16 @@
           "")]
     (subs preview-text 0 (min (count preview-text) max-subheader-length))))
 
+(defn- last-message-color
+  [unread-messages? muted theme]
+  (cond
+    muted            (colors/theme-colors colors/neutral-50 colors/neutral-60 theme)
+    unread-messages? (colors/theme-colors colors/neutral-100 colors/white theme)
+    :else            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
+
 (defn last-message-preview
   "Render the preview of a last message to a maximum of max-subheader-length characters"
-  [group-chat {:keys [deleted? outgoing from deleted-for-me?] :as message}]
+  [group-chat {:keys [deleted? outgoing from deleted-for-me?] :as message} muted unread-messages?]
   (let [theme            (quo.theme/use-theme)
         [primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from])
         preview-text     (if deleted-for-me?
@@ -162,9 +169,7 @@
                              (preview-text-from-content group-chat primary-name message)))]
     [quo/text
      {:size                :paragraph-2
-      :style               {:color (colors/theme-colors colors/neutral-50
-                                                        colors/neutral-40
-                                                        theme)
+      :style               {:color (last-message-color unread-messages? muted theme)
                             :flex  1}
       :number-of-lines     1
       :ellipsize-mode      :tail
@@ -231,14 +236,16 @@
         unviewed-messages-count]])))
 
 (defn chat-item
-  [{:keys [chat-id group-chat color name last-message timestamp muted image]
+  [{:keys [chat-id group-chat color name last-message timestamp muted image
+           unviewed-messages-count]
     :as   item}]
   (let [[primary-name secondary-name]
         (if group-chat
           [name ""]
           (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
         {:keys [ens-verified added?] :as contact} (when-not group-chat
-                                                    (rf/sub [:contacts/contact-by-address chat-id]))]
+                                                    (rf/sub [:contacts/contact-by-address chat-id]))
+        unread-messages? (pos? unviewed-messages-count)]
     [rn/view {:style {:flex-direction :row}}
      [avatar-view
       {:contact   contact
@@ -258,7 +265,7 @@
          :muted?         muted
          :time-str       (datetime/to-short-str timestamp)
          :style          {:flex-shrink 1}}]
-       [last-message-preview group-chat last-message muted]]]
+       [last-message-preview group-chat last-message muted unread-messages?]]]
      [notification item]]))
 
 (defn chat-user