Revert "Input text styling" (6a9c8de0e4).

Signed-off-by: Igor Mandrigin <i@mandrigin.ru>

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]

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})
 

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
+   :height           (min (max min-input-height content-height) max-input-height)})
-   :max-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
+   :height         (if single-line-input?
-   :max-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

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-top-color colors/gray-light
-   :border-bottom-width 1})
+   :border-top-width 1})
+

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

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}]