fix wrong letter and background color of the channel/group avatar (#19972)

src/quo/components/avatars/channel_avatar/style.cljs

@@ -7,6 +7,7 @@
 (defn outer-container
   [{:keys [size customization-color theme]}]
   (let [container-size (case size
+                         :size-80 80
                          :size-64 64
                          :size-32 32
                          24)]
@@ -21,6 +22,7 @@
   [size]
   {:text-align :center
    :font-size  (case size
+                 :size-80 36
                  :size-64 24
                  :size-32 15
                  11)})

src/quo/components/avatars/channel_avatar/view.cljs

@@ -11,14 +11,14 @@
 
 (defn- initials
   [{:keys [full-name size customization-color theme]}]
-  (let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
+  (let [amount-initials (if (#{:size-32 :size-64 :size-80} size) 2 1)
         channel-name    (utils.string/safe-replace full-name "#" "")]
     [text/text
      (cond-> {:accessibility-label :initials
               :style               {:color (colors/resolve-color customization-color theme)}
               :size                :paragraph-2
               :weight              :semi-bold}
-       (= size :size-64) (assoc :size   :heading-1
+       (#{:size-64 :size-80} size) (assoc :size   :heading-1
                                           :weight :medium))
      (utils.string/get-initials channel-name amount-initials)]))
 

src/quo/components/avatars/group_avatar/view.cljs

@@ -1,6 +1,5 @@
 (ns quo.components.avatars.group-avatar.view
   (:require
-    [clojure.string :as string]
     [quo.components.avatars.group-avatar.style :as style]
     [quo.components.icon :as icon]
     [quo.components.markdown.text :as text]
@@ -22,7 +21,7 @@
              :container 80}})
 
 (defn view
-  [{:keys [size customization-color picture icon-name emoji chat-name]
+  [{:keys [size customization-color picture icon-name emoji]
     :or   {size                :size-20
            customization-color :blue
            picture             nil
@@ -50,14 +49,6 @@
             {:size  :paragraph-1
              :style (dissoc (style/avatar-identifier theme) :font-size)}
             emoji])
-         chat-name
-         (if (= size :size-80)
-           [rn/text
-            {:style (style/avatar-identifier theme)}
-            ((comp first string/upper-case) chat-name)]
-           [text/text
-            {:size :paragraph-1}
-            ((comp first string/upper-case) chat-name)])
          :else
          [icon/icon icon-name
           {:size  icon-size

src/status_im/contexts/chat/messenger/messages/list/style.cljs

@@ -51,6 +51,7 @@
    {:position         :absolute
     :border-width     4
     :border-radius    50
+    :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
     :border-color     (colors/theme-colors colors/white colors/neutral-95 theme)}))
 
 (defn user-name-container

src/status_im/contexts/chat/messenger/messages/list/view.cljs

@@ -133,15 +133,21 @@
         community-channel? (= chat-type constants/community-chat-type)]
     [reanimated/view
      {:style (style/header-image scale top left theme)}
-     (if group-chat
+     (cond
+       community-channel?
+       [quo/channel-avatar
+        {:size                :size-80
+         :full-name           chat-name
+         :customization-color color
+         :emoji               (when-not (string/blank? emoji)
+                                (string/trim emoji))}]
+       group-chat
        [quo/group-avatar
         {:customization-color color
          :size                :size-80
          :picture             profile-picture
-         :emoji               (when (and (not (string/blank? emoji))
-                                         community-channel?)
-                                (string/trim emoji))
          :chat-name           chat-name}]
+       :else
        [quo/user-avatar
         {:full-name       display-name
          :online?         online?