diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 090c2b16ca..a6f9dd071a 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -17,6 +17,7 @@ [status-im.chat.views.message.options :as message-options] [status-im.chat.views.message.datemark :as message-datemark] [status-im.chat.views.message.message :as message] + [status-im.chat.views.input.input :as input] [status-im.chat.views.toolbar-content :as toolbar-content] [status-im.ui.components.animation :as animation] [status-im.ui.components.list.views :as list] diff --git a/src/status_im/chat/styles/animations.cljs b/src/status_im/chat/styles/animations.cljs index f62bedca5b..33020e680a 100644 --- a/src/status_im/chat/styles/animations.cljs +++ b/src/status_im/chat/styles/animations.cljs @@ -1,6 +1,7 @@ (ns status-im.chat.styles.animations (:require [status-im.ui.components.styles :as common])) +(def color-root-border "rgba(192, 198, 202, 0.28)") (def header-draggable-icon "rgba(73, 84, 93, 0.23)") (def overlap-container @@ -17,6 +18,8 @@ :right 0 :bottom bottom :position :absolute + :border-top-color color-root-border + :border-top-width 1 :elevation 2 :max-height max-height}) diff --git a/src/status_im/chat/styles/input/input.cljs b/src/status_im/chat/styles/input/input.cljs index 1711fb80f2..10ac985f6d 100644 --- a/src/status_im/chat/styles/input/input.cljs +++ b/src/status_im/chat/styles/input/input.cljs @@ -5,12 +5,14 @@ (def min-input-height 36) (def padding-vertical 8) (def border-height 1) -(def max-input-height (* 5 min-input-height)) +(def max-input-height (* 4 min-input-height)) (defnstyle root [margin-bottom] {:background-color colors/white :margin-bottom margin-bottom :flex-direction :column + :border-top-width border-height + :border-top-color colors/gray-light :elevation 2}) (def input-container @@ -23,24 +25,21 @@ :padding-bottom padding-vertical :flex 1}) -(def input-animated +(defn input-animated [content-height] {:align-items :flex-start :flex-direction :row :flex-grow 1 - :min-height min-input-height - :max-height max-input-height}) + :height (min (max min-input-height content-height) max-input-height)}) -(defnstyle input-view [single-line-input?] +(defnstyle input-view [content-height single-line-input?] {:flex 1 :font-size 15 - :line-height 22 :padding-top 9 :padding-bottom 5 :padding-right 12 - :min-height min-input-height - :max-height (if single-line-input? + :height (if single-line-input? min-input-height - max-input-height) + (+ (min (max min-input-height content-height) max-input-height))) :android {:padding-top 3}}) (def invisible-input-text diff --git a/src/status_im/chat/styles/input/parameter_box.cljs b/src/status_im/chat/styles/input/parameter_box.cljs index bcb3e50b02..db9578c8da 100644 --- a/src/status_im/chat/styles/input/parameter_box.cljs +++ b/src/status_im/chat/styles/input/parameter_box.cljs @@ -4,5 +4,6 @@ (def root {:background-color common/color-white - :border-bottom-color colors/gray-light - :border-bottom-width 1}) + :border-top-color colors/gray-light + :border-top-width 1}) + diff --git a/src/status_im/chat/styles/input/suggestions.cljs b/src/status_im/chat/styles/input/suggestions.cljs index 6cc8b54ef3..fb6a314713 100644 --- a/src/status_im/chat/styles/input/suggestions.cljs +++ b/src/status_im/chat/styles/input/suggestions.cljs @@ -16,9 +16,10 @@ {:flex-direction :row :align-items :center :height item-height - :padding-horizontal 14 + :margin-left 14 + :padding-right 14 :border-bottom-color colors/gray-light - :border-bottom-width border-height}) + :border-bottom-width (if last? 0 border-height)}) (def item-suggestion-name {:color common/color-black diff --git a/src/status_im/chat/views/input/input.cljs b/src/status_im/chat/views/input/input.cljs index 19199ba79d..ecf8399250 100644 --- a/src/status_im/chat/views/input/input.cljs +++ b/src/status_im/chat/views/input/input.cljs @@ -70,7 +70,7 @@ (.-selection)) end (.-end s)] (re-frame/dispatch [:update-text-selection end])) - :style (style/input-view single-line-input?) + :style (style/input-view height single-line-input?) :placeholder-text-color colors/gray :auto-capitalize :sentences} (when cooldown-enabled? @@ -151,7 +151,7 @@ set-container-width-fn #(reagent/set-state component {:container-width %}) {:keys [width height container-width]} (reagent/state component)] [react/view {:style style/input-root} - [react/animated-view {:style style/input-animated} + [react/animated-view {:style (style/input-animated height)} [invisible-input {:set-layout-width-fn set-layout-width-fn}] [invisible-input-height {:set-layout-height-fn set-layout-height-fn :container-width container-width}]