diff --git a/src/status_im/chat/constants.cljs b/src/status_im/chat/constants.cljs index ee4fff2019..8a7499dd48 100644 --- a/src/status_im/chat/constants.cljs +++ b/src/status_im/chat/constants.cljs @@ -4,7 +4,7 @@ (def max-input-height 66) (def min-input-height 22) (def input-spacing-top 16) -(def input-spacing-bottom 16) +(def input-spacing-bottom 18) (def request-info-height 61) (def response-height-normal 211) diff --git a/src/status_im/chat/styles/message_input.cljs b/src/status_im/chat/styles/message_input.cljs index a7cb57913a..711480f515 100644 --- a/src/status_im/chat/styles/message_input.cljs +++ b/src/status_im/chat/styles/message_input.cljs @@ -10,29 +10,31 @@ (def input-container {:flex-direction :column}) -(def input-view +(defn input-view [content-height] {:flex-direction :row :align-items :center :justify-content :center - :height 56 + :height (+ (min (max min-input-height content-height) max-input-height) + input-spacing-top + input-spacing-bottom) :background-color color-white}) -(def message-input-container - {:height 16.5 - :margin-top 20 - :margin-bottom 19.5 - :flex 1 - :flex-direction :column - :margin-right 0}) +(defn message-input-container [content-height] + {:height (min (max min-input-height content-height) max-input-height) + :margin-top input-spacing-top + :margin-bottom input-spacing-bottom + :flex 1 + :flex-direction "column" + :margin-right 0}) (def send-wrapper - {:margin-bottom 10 + {:margin-top 10 :margin-right 10 :width 36 :flex 1 :flex-direction "column" :align-items :center - :justify-content :flex-end}) + :justify-content :flex-start}) (def send-container {:width 36 diff --git a/src/status_im/chat/styles/plain_message.cljs b/src/status_im/chat/styles/plain_message.cljs index bd80860850..4d44152937 100644 --- a/src/status_im/chat/styles/plain_message.cljs +++ b/src/status_im/chat/styles/plain_message.cljs @@ -51,7 +51,7 @@ :font-size 14 :line-height 20 :color text1-color - :padding-top (when p/ios? -6)}) + :padding-top 0}) (def smile-icon {:width 20 diff --git a/src/status_im/chat/views/message_input.cljs b/src/status_im/chat/views/message_input.cljs index 3ea0fb05c9..9460afa57b 100644 --- a/src/status_im/chat/views/message_input.cljs +++ b/src/status_im/chat/views/message_input.cljs @@ -93,9 +93,9 @@ (fn [{:keys [input-options]}] (let [{:keys [height]} (r/state component)] [view st/input-container - [view st/input-view + [view (st/input-view height) [plain-message/commands-button height #(set-layout-size 0)] - [view st/message-input-container + [view (st/message-input-container height) (if @command? [command-input input-options @command] [message-input input-options set-layout-size])] diff --git a/src/status_im/chat/views/plain_message.cljs b/src/status_im/chat/views/plain_message.cljs index a8a3b770dc..699d02e531 100644 --- a/src/status_im/chat/views/plain_message.cljs +++ b/src/status_im/chat/views/plain_message.cljs @@ -102,5 +102,5 @@ ) :disabled @command?} [animated-view {:style (st/message-input-button-touchable container-width height)} - [animated-view {:style (st/message-input-button buttons-scale 15)} + [animated-view {:style (st/message-input-button buttons-scale 16)} [icon :smile st/smile-icon]]]])})))