From 96b09eb862ee6f85c599dc4a8993aaea8c4ea9f1 Mon Sep 17 00:00:00 2001
From: Parvesh Monu <parvesh.dhullmonu@gmail.com>
Date: Mon, 22 Apr 2024 20:29:29 +0530
Subject: [PATCH] UI in the upper section of the chat differs from the lower
 section (#19679)

---
 .../chat/messenger/messages/list/style.cljs   | 27 ++++++---
 .../chat/messenger/messages/list/view.cljs    | 56 ++++++++++---------
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/src/status_im/contexts/chat/messenger/messages/list/style.cljs b/src/status_im/contexts/chat/messenger/messages/list/style.cljs
index e78cfe7488..fe1de20d19 100644
--- a/src/status_im/contexts/chat/messenger/messages/list/style.cljs
+++ b/src/status_im/contexts/chat/messenger/messages/list/style.cljs
@@ -20,16 +20,27 @@
     :right            0
     :height           (+ top-margin messages.constants/header-container-radius)}))
 
-(defn header-bottom-part
-  [bottom theme top-margin]
+(defn header-bottom-container
+  [bottom top-margin]
   (reanimated/apply-animations-to-style
    {:bottom bottom}
-   (merge
-    (shadows/get 2 theme :inverted)
-    {:background-color   (colors/theme-colors colors/white colors/neutral-95 theme)
-     :padding-horizontal 20
-     :border-radius      20
-     :margin-top         top-margin})))
+   {:margin-top top-margin}))
+
+(defn header-bottom-part
+  [theme]
+  {:background-color   (colors/theme-colors colors/white colors/neutral-95 theme)
+   :padding-horizontal 20
+   :border-radius      20})
+
+(defn header-bottom-shadow
+  [theme]
+  (assoc
+   (shadows/get 2 theme :inverted)
+   :left          0
+   :right         0
+   :height        40
+   :position      :absolute
+   :border-radius 20))
 
 (defn header-image
   [scale top left theme]
diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs
index 515c7624a5..1baa30da6b 100644
--- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs
+++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs
@@ -260,33 +260,35 @@
     [:<>
      [reanimated/view
       {:style (style/background-container background-color background-opacity top-margin)}]
-     [reanimated/view {:style (style/header-bottom-part bottom theme top-margin)}
-      [list-footer-avatar
-       {:distance-from-list-top distance-from-list-top
-        :display-name           display-name
-        :online?                online?
-        :theme                  theme
-        :profile-picture        photo-path
-        :group-chat             group-chat
-        :color                  color
-        :emoji                  emoji
-        :chat-type              chat-type
-        :chat-name              chat-name
-        :last-message           last-message}]
-      [chat-display-name
-       {:distance-from-list-top distance-from-list-top
-        :display-name           display-name
-        :theme                  theme
-        :contact                contact
-        :group-chat             group-chat
-        :last-message           last-message}]
-      [bio-and-actions
-       {:distance-from-list-top distance-from-list-top
-        :bio                    bio
-        :chat-id                chat-id
-        :customization-color    customization-color
-        :description            description
-        :last-message           last-message}]]]))
+     [reanimated/view {:style (style/header-bottom-container bottom top-margin)}
+      [rn/view {:style (style/header-bottom-shadow theme)}]
+      [rn/view {:style (style/header-bottom-part theme)}
+       [list-footer-avatar
+        {:distance-from-list-top distance-from-list-top
+         :display-name           display-name
+         :online?                online?
+         :theme                  theme
+         :profile-picture        photo-path
+         :group-chat             group-chat
+         :color                  color
+         :emoji                  emoji
+         :chat-type              chat-type
+         :chat-name              chat-name
+         :last-message           last-message}]
+       [chat-display-name
+        {:distance-from-list-top distance-from-list-top
+         :display-name           display-name
+         :theme                  theme
+         :contact                contact
+         :group-chat             group-chat
+         :last-message           last-message}]
+       [bio-and-actions
+        {:distance-from-list-top distance-from-list-top
+         :bio                    bio
+         :chat-id                chat-id
+         :customization-color    customization-color
+         :description            description
+         :last-message           last-message}]]]]))
 
 (defn list-footer
   [props]