diff --git a/src/quo/components/community/community_list_view.cljs b/src/quo/components/community/community_list_view.cljs index 2fc3a594bc..5e359006d8 100644 --- a/src/quo/components/community/community_list_view.cljs +++ b/src/quo/components/community/community_list_view.cljs @@ -81,12 +81,20 @@ :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 +116,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 +132,4 @@ :customization-color customization-color :muted? muted :unread-mentions-count unviewed-mentions-count - :unread-messages? (pos? unviewed-messages-count)}])]]])) + :unread-messages? unread-messages?}])]]])) diff --git a/src/status_im/contexts/chat/home/chat_list_item/view.cljs b/src/status_im/contexts/chat/home/chat_list_item/view.cljs index 83f75b3448..a46a258414 100644 --- a/src/status_im/contexts/chat/home/chat_list_item/view.cljs +++ b/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