UI in the upper section of the chat differs from the lower section

status-im · Apr 22, 2024 · 738a3b5 · 738a3b5
1 parent 34930a7
commit 738a3b5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 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
@@ -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
+  []
+  (merge
+   (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
@@ -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)}]
+      [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]