Input text styling

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

src/status_im/chat/screen.cljs

@@ -17,7 +17,6 @@
             [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,7 +1,6 @@
 (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
@@ -18,8 +17,6 @@
    :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,14 +5,12 @@
 (def min-input-height 36)
 (def padding-vertical 8)
 (def border-height 1)
-(def max-input-height (* 4 min-input-height))
+(def max-input-height (* 5 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
@@ -25,21 +23,24 @@
    :padding-bottom padding-vertical
    :flex           1})
 
-(defn input-animated [content-height]
+(def input-animated
   {:align-items      :flex-start
    :flex-direction   :row
    :flex-grow        1
-   :height           (min (max min-input-height content-height) max-input-height)})
+   :min-height       min-input-height
+   :max-height       max-input-height})
 
-(defnstyle input-view [content-height single-line-input?]
+(defnstyle input-view [single-line-input?]
   {:flex           1
    :font-size      15
+   :line-height    22
    :padding-top    9
    :padding-bottom 5
    :padding-right  12
-   :height         (if single-line-input?
+   :min-height     min-input-height
+   :max-height     (if single-line-input?
                      min-input-height
-                     (+ (min (max min-input-height content-height) max-input-height)))
+                     max-input-height)
    :android        {:padding-top 3}})
 
 (def invisible-input-text

src/status_im/chat/styles/input/parameter_box.cljs

@@ -4,6 +4,5 @@
 
 (def root
   {:background-color common/color-white
-   :border-top-color colors/gray-light
+   :border-bottom-color colors/gray-light
-   :border-top-width 1})
+   :border-bottom-width 1})
-

src/status_im/chat/styles/input/suggestions.cljs

@@ -16,10 +16,9 @@
   {:flex-direction      :row
    :align-items         :center
    :height              item-height
-   :margin-left         14
+   :padding-horizontal  14
-   :padding-right       14
    :border-bottom-color colors/gray-light
-   :border-bottom-width (if last? 0 border-height)})
+   :border-bottom-width border-height})
 
 (def item-suggestion-name
   {:color     common/color-black

src/status_im/chat/views/input/input.cljs

@@ -67,7 +67,7 @@
                                            (.-selection))
                                      end (.-end s)]
                                  (re-frame/dispatch [:update-text-selection end]))
-      :style                  (style/input-view height single-line-input?)
+      :style                  (style/input-view single-line-input?)
       :placeholder-text-color colors/gray
       :auto-capitalize        :sentences}]))
 
@@ -146,7 +146,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 height)}
+       [react/animated-view {:style style/input-animated}
         [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}]