fix: avatar alignment (#19073)

Co-authored-by: balogunofafrica <balogunakanbi.k@gmail.com>

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

@@ -8,10 +8,6 @@
   {:flex    1
    :z-index 2})
 
-(def chat-actions-container
-  {:margin-top     16
-   :padding-bottom 20})
-
 (defn background-container
   [background-color background-opacity top-margin]
   (reanimated/apply-animations-to-style
@@ -24,12 +20,12 @@
     :height           (+ top-margin messages.constants/header-container-radius)}))
 
 (defn header-bottom-part
-  [border-radius theme top-margin]
+  [bottom theme top-margin]
   (reanimated/apply-animations-to-style
-   {:border-top-left-radius  border-radius
+   {:bottom bottom}
-    :border-top-right-radius border-radius}
    {:background-color   (colors/theme-colors colors/white colors/neutral-95 theme)
     :padding-horizontal 20
+    :border-radius      20
     :margin-top         top-margin}))
 
 (defn header-image
@@ -43,5 +39,20 @@
     :border-radius 50
     :border-color  (colors/theme-colors colors/white colors/neutral-95 theme)}))
 
-(def bio
+(defn user-name-container
-  {:margin-top 8})
+  [top left]
+  (reanimated/apply-animations-to-style
+   {:top  top
+    :left left}
+   {:z-index -1}))
+
+(def user-name
+  {:align-items    :center
+   :flex-direction :row
+   :margin-top     52})
+
+(defn bio-and-actions
+  [top]
+  (reanimated/apply-animations-to-style
+   {:top top}
+   {:row-gap 16}))

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

@@ -64,8 +64,7 @@
   [{:keys [ens-verified added?]} theme]
   (when (or ens-verified added?)
     [rn/view
-     {:style {:margin-left 4
+     {:style {:margin-left 4}}
-              :margin-top  8}}
      (if ens-verified
        [quo/icon :i/verified
         {:no-color true
@@ -112,27 +111,55 @@
                  (- 70 (:bottom insets)))]
     [rn/view {:style {:height height}}]))
 
-(defn f-list-footer-avatar
+(defn list-footer-avatar
-  [{:keys [distance-from-list-top display-name online? profile-picture theme]}]
+  [{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color]}]
   (let [scale (reanimated/interpolate distance-from-list-top
                                       [0 messages.constants/header-container-top-margin]
                                       [1 0.4]
                                       messages.constants/default-extrapolation-option)
         top   (reanimated/interpolate distance-from-list-top
                                       [0 messages.constants/header-container-top-margin]
-                                      [-44 -8]
+                                      [-44 -12]
                                       messages.constants/default-extrapolation-option)
         left  (reanimated/interpolate distance-from-list-top
                                       [0 messages.constants/header-container-top-margin]
-                                      [16 -4]
+                                      [16 -8]
                                       messages.constants/default-extrapolation-option)]
     [reanimated/view
      {:style (style/header-image scale top left theme)}
+     (if group-chat
+       [quo/group-avatar
+        {:customization-color color
+         :size                :size-80
+         :picture             profile-picture
+         :override-theme      :dark}]
        [quo/user-avatar
         {:full-name       display-name
          :online?         online?
          :profile-picture profile-picture
-       :size            :big}]]))
+         :size            :big}])]))
+
+(defn chat-display-name
+  [{:keys [distance-from-list-top display-name contact theme]}]
+  (let [top  (reanimated/interpolate distance-from-list-top
+                                     [0 messages.constants/header-container-top-margin]
+                                     [0 -35]
+                                     messages.constants/default-extrapolation-option)
+        left (reanimated/interpolate distance-from-list-top
+                                     [0 messages.constants/header-container-top-margin]
+                                     [0 40]
+                                     messages.constants/default-extrapolation-option)]
+    [reanimated/view
+     {:style (style/user-name-container top left)}
+     [rn/view
+      {:style style/user-name}
+      [quo/text
+       {:weight          :semi-bold
+        :size            :heading-1
+        :style           {:flex-shrink 1}
+        :number-of-lines 1}
+       display-name]
+      [contact-icon contact theme]]]))
 
 (defn actions
   [chat-id cover-bg-color]
@@ -143,9 +170,9 @@
         muted?                               (and muted (some? muted-till))
         mute-chat-label                      (if community-channel? :t/mute-channel :t/mute-chat)
         unmute-chat-label                    (if community-channel? :t/unmute-channel :t/unmute-chat)]
+
     [quo/channel-actions
-     {:container-style style/chat-actions-container
+     {:actions [{:accessibility-label :action-button-pinned
-      :actions         [{:accessibility-label :action-button-pinned
                  :big?                true
                  :label               (or latest-pin-text (i18n/label :t/no-pinned-messages))
                  :customization-color cover-bg-color
@@ -167,10 +194,24 @@
                                                                          chat-type
                                                                          muted?)))}]}]))
 
-(defn f-list-footer
+(defn bio-and-actions
+  [{:keys [distance-from-list-top bio chat-id customization-color]}]
+  (let [has-bio (seq bio)
+        top     (reanimated/interpolate
+                 distance-from-list-top
+                 [0 messages.constants/header-container-top-margin]
+                 [(if has-bio 8 16) (if has-bio -28 -20)]
+                 messages.constants/default-extrapolation-option)]
+    [reanimated/view
+     {:style (style/bio-and-actions top)}
+     (when has-bio
+       [quo/text bio])
+     [actions chat-id customization-color]]))
+
+(defn footer-component
   [{:keys [chat distance-from-list-top theme customization-color]}]
   (let [{:keys [chat-id chat-name emoji chat-type
-                group-chat]} chat
+                group-chat color]} chat
         display-name               (cond
                                      (= chat-type constants/one-to-one-chat-type)
                                      (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
@@ -184,15 +225,16 @@
         photo-path                 (rf/sub [:chats/photo-path chat-id])
         top-margin                 (+ (safe-area/get-top)
                                       messages.constants/top-bar-height
-                                messages.constants/header-container-top-margin)
+                                      messages.constants/header-container-top-margin
+                                      32)
         background-color           (colors/theme-colors
                                     (colors/resolve-color customization-color theme 20)
                                     (colors/resolve-color customization-color theme 40)
                                     theme)
-        border-radius        (reanimated/interpolate
+        bottom                     (reanimated/interpolate
                                     distance-from-list-top
                                     [0 messages.constants/header-container-top-margin]
-                              [20 0]
+                                    [32 -4]
                                     messages.constants/default-extrapolation-option)
         background-opacity         (reanimated/interpolate
                                     distance-from-list-top
@@ -204,28 +246,26 @@
     [:<>
      [reanimated/view
       {:style (style/background-container background-color background-opacity top-margin)}]
-     [reanimated/view {:style (style/header-bottom-part border-radius theme top-margin)}
+     [reanimated/view {:style (style/header-bottom-part bottom theme top-margin)}
-      (when-not group-chat
+      [list-footer-avatar
-        [:f> f-list-footer-avatar
        {:distance-from-list-top distance-from-list-top
         :display-name           display-name
         :online?                online?
         :theme                  theme
-          :profile-picture        photo-path}])
+        :profile-picture        photo-path
-      [rn/view
+        :group-chat             group-chat
-       {:style {:flex-direction :row
+        :color                  color}]
-                :margin-top     (if group-chat 94 52)}}
+      [chat-display-name
-       [quo/text
+       {:distance-from-list-top distance-from-list-top
-        {:weight          :semi-bold
+        :display-name           display-name
-         :size            :heading-1
+        :theme                  theme
-         :style           {:flex-shrink 1}
+        :contact                contact
-         :number-of-lines 1}
+        :group-chat             group-chat}]
-        display-name]
+      [bio-and-actions
-       [contact-icon contact theme]]
+       {:distance-from-list-top distance-from-list-top
-      (when (seq bio)
+        :bio                    bio
-        [quo/text {:style style/bio}
+        :chat-id                chat-id
-         bio])
+        :customization-color    customization-color}]]]))
-      [actions chat-id customization-color]]]))
 
 (defn list-footer
   [props]
@@ -235,7 +275,7 @@
     [:<>
      (if (or loading-messages? (not all-loaded?))
        [loading-view chat-id props]
-       [:f> f-list-footer props])]))
+       [footer-component props])]))
 
 (defn list-group-chat-header
   [{:keys [chat-id invitation-admin]}]
@@ -285,7 +325,7 @@
       (reset! layout-height-atom layout-height))
     (reset! distance-atom new-distance)))
 
-(defn f-messages-list-content
+(defn messages-list-content
   [{: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)

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

@@ -18,10 +18,10 @@
     [utils.worklets.chat.messenger.messages :as messages.worklets]
     [utils.worklets.chat.messenger.navigation :as worklets]))
 
-(defn f-header-content-container
+(defn header-content-container
   [{:keys [chat distance-from-list-top all-loaded? chat-screen-layout-calculations-complete?]}]
   (let [{:keys [chat-id group-chat chat-type chat-name
-                emoji]} chat
+                emoji color]} chat
         display-name          (cond
                                 (= chat-type constants/one-to-one-chat-type)
                                 (first (rf/sub
@@ -48,7 +48,12 @@
                                  messages.constants/content-animation-start-position-android))]
     [reanimated/view
      {:style (style/header-content-container header-opacity header-position)}
-     (when-not group-chat
+     (if group-chat
+       [quo/group-avatar
+        {:customization-color color
+         :size                :size-32
+         :picture             photo-path
+         :override-theme      :dark}]
        [quo/user-avatar
         {:full-name       display-name
          :online?         online?
@@ -70,7 +75,7 @@
          (i18n/label
           (if online? :t/online :t/offline))])]]))
 
-(defn f-animated-background-and-pinned-banner
+(defn animated-background-and-pinned-banner
   [{:keys [chat-id navigation-view-height distance-from-list-top all-loaded?]}]
   (let [animation-distance messages.constants/header-animation-distance
         props              {:distance-from-list-top distance-from-list-top
@@ -122,7 +127,7 @@
                    [all-loaded-sub])
     [rn/view
      {:style (style/navigation-view navigation-view-height messages.constants/pinned-banner-height)}
-     [:f> f-animated-background-and-pinned-banner
+     [animated-background-and-pinned-banner
       {:chat-id                chat-id
        :navigation-view-height navigation-view-height
        :distance-from-list-top distance-from-list-top
@@ -137,7 +142,7 @@
          :accessibility-label :back-button
          :on-press            #(rf/dispatch [:navigate-back])}
         (if (= chat-type constants/community-chat-type) :i/arrow-left :i/close)]]
-      [:f> f-header-content-container
+      [header-content-container
        {:chat                                      chat
         :distance-from-list-top                    distance-from-list-top
         :all-loaded?                               all-loaded?

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

@@ -13,7 +13,7 @@
 ;; NOTE(parvesh) - I am working on refactoring/optimization of the chat screen for performance
 ;; improvement. Please avoid refactoring these files. Also if you are not already working on bug
 ;; fixes related to the composer, please skip them. And ping me, so I can address them while refactoring
-(defn- f-chat-screen
+(defn- chat-screen
   [chat-screen-layout-calculations-complete?]
   (let [insets                 (safe-area/get-insets)
         content-height         (atom 0)
@@ -27,7 +27,7 @@
      [messages.navigation/view
       {:distance-from-list-top                    distance-from-list-top
        :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}]
-     [:f> list.view/f-messages-list-content
+     [list.view/messages-list-content
       {:insets                                    insets
        :layout-height                             layout-height
        :content-height                            content-height
@@ -46,15 +46,11 @@
     (when-not screen-loaded?
       (reanimated/set-shared-value chat-screen-layout-calculations-complete? false))
     (when screen-loaded?
-      [:f> f-chat-screen chat-screen-layout-calculations-complete?])))
+      [chat-screen chat-screen-layout-calculations-complete?])))
 
-(defn- f-chat
+(defn chat
   []
   (let [chat-screen-layout-calculations-complete? (reanimated/use-shared-value false)]
     [:<>
      [lazy-chat-screen chat-screen-layout-calculations-complete?]
-     [:f> placeholder.view/f-view chat-screen-layout-calculations-complete?]]))
+     [placeholder.view/view chat-screen-layout-calculations-complete?]]))
-
-(defn chat
-  []
-  [:f> f-chat])

src/status_im/contexts/chat/messenger/placeholder/view.cljs

@@ -14,7 +14,7 @@
     :parent-height (:height (rn/get-window))
     :animated?     false}])
 
-(defn f-view
+(defn view
   [chat-screen-layout-calculations-complete?]
   (let [top     (safe-area/get-top)
         opacity (worklets/placeholder-opacity chat-screen-layout-calculations-complete?)