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]