diff --git a/src/status_im/ui/screens/chat/input/input.cljs b/src/status_im/ui/screens/chat/input/input.cljs index fce608a892..d9bfbe9c1f 100644 --- a/src/status_im/ui/screens/chat/input/input.cljs +++ b/src/status_im/ui/screens/chat/input/input.cljs @@ -157,8 +157,12 @@ (letsubs [{:keys [username]} [:contacts/contact-name-by-identity from] current-public-key [:multiaccount/public-key]] [react/scroll-view {:style style/reply-message-content} - (chat-utils/format-reply-author from alias username current-public-key style/reply-message-author) - [react/text {:style (message-style/style-message-text false)} message-text]])) + [react/view {:style style/reply-message-to-container} + [vector-icons/tiny-icon :tiny-icons/tiny-reply {:container-style style/reply-icon + :width 20 + :color colors/gray}] + (chat-utils/format-reply-author from alias username current-public-key style/reply-message-author)] + [react/text {:style (assoc (message-style/style-message-text false) :font-size 14) :number-of-lines 3} message-text]])) (defview reply-message-view [] (letsubs [{:keys [content from alias] :as message} [:chats/reply-message]] @@ -166,14 +170,16 @@ [react/view {:style style/reply-message-container} [react/view {:style style/reply-message} [photos/member-photo from] - [reply-message from alias (:text content)]] - [react/touchable-highlight - {:style style/cancel-reply-highlight - :on-press #(re-frame/dispatch [:chat.ui/cancel-message-reply]) - :accessibility-label :cancel-message-reply} - [react/view {:style style/cancel-reply-container} - [vector-icons/icon :main-icons/close {:container-style style/cancel-reply-icon - :color colors/white}]]]]))) + [reply-message from alias (:text content)] + [react/touchable-highlight + {:style style/cancel-reply-highlight + :on-press #(re-frame/dispatch [:chat.ui/cancel-message-reply]) + :accessibility-label :cancel-message-reply} + [react/view {:style style/cancel-reply-container} + [vector-icons/icon :main-icons/close {:container-style style/cancel-reply-icon + :width 19 + :height 19 + :color colors/white}]]]]]))) (defview input-container [] (letsubs [margin [:chats/input-margin] diff --git a/src/status_im/ui/screens/chat/styles/input/input.cljs b/src/status_im/ui/screens/chat/styles/input/input.cljs index 585489f5bf..42a488b477 100644 --- a/src/status_im/ui/screens/chat/styles/input/input.cljs +++ b/src/status_im/ui/screens/chat/styles/input/input.cljs @@ -13,49 +13,67 @@ :margin-bottom margin-bottom :flex-direction :column :border-top-width border-height - :border-top-color colors/black-transparent - :elevation 2}) + :border-top-color colors/gray-lighter}) (def reply-message {:flex-direction :row :align-items :flex-start - :border-width 1 - :border-radius 10 - :border-color colors/black-transparent - :padding-top 10 - :padding-bottom 10 - :padding-right 14 - :padding-left 7 - :margin-top 12 - :margin-left 12 - :margin-right 12}) + :justify-content :space-between + :padding-top 8 + :padding-bottom 8 + :padding-right 8 + :padding-left 8}) (def reply-message-content {:flex-direction :column - :padding-left 7 + :padding-left 8 + :padding-right 8 :max-height 140}) (defn reply-message-author [chosen?] (assoc (message-author-name chosen?) - :padding-bottom 6)) + :flex-shrink 1 + ;; NOTE: overriding the values from the definition of message-author-name + :padding-left 0 + :padding-top 0 + :padding-bottom 0 + :margin 0 + :height 18 + :include-font-padding false)) (def reply-message-container {:flex-direction :column-reverse}) +(def reply-message-to-container + {:flex-direction :row + :height 18 + :padding-top 0 + :padding-bottom 0 + :padding-right 8 + :justify-content :flex-start}) + +(def reply-icon + {:width 20 + :margin-top 1 + :margin-bottom 1 + :margin-right 0}) + (def cancel-reply-highlight - {:position :absolute - :z-index 5 - :top 0 - :right 0 - :height 26}) + {:align-self :flex-start + :width 19 + :height 19}) (def cancel-reply-container {:flex-direction :row :justify-content :flex-end - :margin-right 12}) + :height "100%"}) (def cancel-reply-icon {:background-color colors/gray + :width 21 + :height 21 + :align-items :center + :justify-content :center :border-radius 12}) (def input-container diff --git a/src/status_im/ui/screens/chat/utils.cljs b/src/status_im/ui/screens/chat/utils.cljs index dd01f6a1a3..d62f8ffe8f 100644 --- a/src/status_im/ui/screens/chat/utils.cljs +++ b/src/status_im/ui/screens/chat/utils.cljs @@ -12,11 +12,12 @@ [status-im.utils.http :as http])) (defn format-author [alias style name] - (if (ens/is-valid-eth-name? name) - [react/text {:style {:color colors/blue :font-size 13 :font-weight "500"}} - (str "@" (or (stateofus/username name) name))] - [react/text {:style {:color colors/gray :font-size 12 :font-weight "400"}} - alias])) + (let [additional-styles (style false)] + (if (ens/is-valid-eth-name? name) + [react/text {:style (merge {:color colors/blue :font-size 13 :font-weight "500"} additional-styles)} + (str "@" (or (stateofus/username name) name))] + [react/text {:style (merge {:color colors/gray :font-size 12 :font-weight "400"} additional-styles)} + alias]))) (defn format-reply-author [from alias username current-public-key style] (or (and (= from current-public-key)