Fix chat UI element colors (#18941)

* chore: add community color subscription * fix: use configured chat color for chat ui and fallback to community color * test: ensure community-color subscription returns the community color * tidy: use resolve-color function instead of custom-color function * revise: rename community-color to customization-color and default non-community channel color to turquoise
status-im · Mar 1, 2024 · 1aef310 · 1aef310
1 parent a4b9739
commit 1aef310
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs
@@ -167,7 +167,7 @@
                                                                          muted?)))}]}]))
 
 (defn f-list-footer
-  [{:keys [chat distance-from-list-top cover-bg-color theme]}]
+  [{:keys [chat distance-from-list-top theme customization-color]}]
   (let [{:keys [chat-id chat-name emoji chat-type
                 group-chat]} chat
         display-name         (cond
@@ -185,8 +185,8 @@
                                 messages.constants/top-bar-height
                                 messages.constants/header-container-top-margin)
         background-color     (colors/theme-colors
-                              (colors/custom-color cover-bg-color 50 20)
-                              (colors/custom-color cover-bg-color 50 40)
+                              (colors/resolve-color customization-color theme 20)
+                              (colors/resolve-color customization-color theme 40)
                               theme)
         border-radius        (reanimated/interpolate
                               distance-from-list-top
@@ -224,7 +224,7 @@
       (when bio
         [quo/text {:style style/bio}
          bio])
-      [actions chat-id cover-bg-color]]]))
+      [actions chat-id customization-color]]]))
 
 (defn list-footer
   [props]
@@ -285,10 +285,15 @@
     (reset! distance-atom new-distance)))
 
 (defn f-messages-list-content
-  [{:keys [insets distance-from-list-top content-height layout-height cover-bg-color distance-atom
+  [{:keys [insets distance-from-list-top content-height layout-height distance-atom
            chat-screen-layout-calculations-complete? chat-list-scroll-y]}]
   (let [theme                    (quo.theme/use-theme-value)
         chat                     (rf/sub [:chats/current-chat-chat-view])
+        community-channel?       (= constants/community-chat-type (:chat-type chat))
+        customization-color      (if community-channel?
+                                   (or (:color chat)
+                                       (rf/sub [:communities/community-color (:community-id chat)]))
+                                   :turquoise)
         {:keys [keyboard-shown]} (hooks/use-keyboard)
         {window-height :height}  (rn/get-window)
         context                  (rf/sub [:chats/current-chat-message-list-view-context])
@@ -310,7 +315,7 @@
                                              :chat                   chat
                                              :window-height          window-height
                                              :distance-from-list-top distance-from-list-top
-                                             :cover-bg-color         cover-bg-color}]
+                                             :customization-color    customization-color}]
         :data                              messages
         :render-data                       {:theme           theme
                                             :context         context

diff --git a/src/status_im/contexts/chat/messenger/messages/view.cljs b/src/status_im/contexts/chat/messenger/messages/view.cljs
@@ -34,8 +34,7 @@
        :distance-atom                             distance-atom
        :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?
        :distance-from-list-top                    distance-from-list-top
-       :chat-list-scroll-y                        chat-list-scroll-y
-       :cover-bg-color                            :turquoise}]
+       :chat-list-scroll-y                        chat-list-scroll-y}]
      [composer.view/composer
       {:insets                                    insets
        :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?

diff --git a/src/status_im/subs/communities.cljs b/src/status_im/subs/communities.cljs
@@ -36,6 +36,12 @@
  (fn [communities [_ id]]
    (get-in communities [id :chats])))
 
+(re-frame/reg-sub
+ :communities/community-color
+ :<- [:communities]
+ (fn [communities [_ id]]
+   (get-in communities [id :color])))
+
 (re-frame/reg-sub
  :communities/community-members
  :<- [:communities]

diff --git a/src/status_im/subs/communities_test.cljs b/src/status_im/subs/communities_test.cljs
@@ -496,3 +496,12 @@
                   :network-preferences-names #{}
                   :name                      "account3"}]
                 (rf/sub [sub-name community-id])))))
+
+(h/deftest-sub :communities/community-color
+  [sub-name]
+  (testing "returns the community color"
+    (let [community-color "#FEFEFE"]
+      (swap! rf-db/app-db assoc
+        :communities
+        {community-id {:color community-color}})
+      (is (match? community-color (rf/sub [sub-name community-id]))))))