updated design for login input fields

Former-commit-id: af3f21629b

src/status_im/components/text_field/view.cljs

@@ -18,7 +18,7 @@
 (def config {:label-top                16
              :label-bottom             37
              :label-font-large         16
-             :label-font-small         12
+             :label-font-small         13
              :label-animation-duration 200})
 
 (def default-props {:wrapperStyle   {}

src/status_im/contacts/views/new_contact.cljs

@@ -57,7 +57,8 @@
      :wrapperStyle                 (merge button-input)
      :label           (label :t/address)
      :onChangeText          #(dispatch [:set-in [:new-contact :whisper-identity] %])}]
-   [scan-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])]]))
+   [scan-button {:showLabel (zero? (count whisper-identity))
+                 :handler #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])}]]))
 
 (defview new-contact []
   [{:keys [name whisper-identity phone-number] :as new-contact} [:get :new-contact]]

src/status_im/login/screen.cljs

@@ -8,6 +8,7 @@
                                                 linear-gradient
                                                 touchable-highlight]]
             [status-im.components.toolbar :refer [toolbar]]
+            [status-im.components.text-field.view :refer [text-field]]
             [status-im.components.styles :refer [color-purple
                                                  color-white
                                                  icon-search
@@ -19,7 +20,7 @@
                                                  button-input-container
                                                  button-input
                                                  white-form-text-input]]
-            [status-im.qr-scanner.views.import-button :refer [import-button]]
+            [status-im.qr-scanner.views.scan-button :refer [scan-button]]
             [status-im.i18n :refer [label]]
             [status-im.login.styles :as st]))
 
@@ -30,26 +31,27 @@
 
 (defview address-input [address]
   [view button-input-container
-   [text-input
+   [text-field
-    {:underlineColorAndroid color-white
+    {:value        address
-     :placeholderTextColor  color-white
+     :label        (label :t/address)
-     :style                 (merge white-form-text-input button-input)
+     :labelColor   "#ffffff80"
-     :autoFocus             true
+     :lineColor    :white
-     :placeholder           (label :t/address)
+     :inputStyle   st/input-style
-     :onChangeText          #(dispatch [:set-in [:login :address] %])}
+     :wrapperStyle (merge button-input st/address-input-wrapper)
-    address]
+     :onChangeText #(dispatch [:set-in [:login :address] %])}]
-   [import-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/login)} :set-address-from-qr])]])
+   [scan-button {:labelStyle st/scan-label
+                 :icon :icon_scan_white
+                 :showLabel (zero? (count address))
+                 :handler #(dispatch [:scan-qr-code {:toolbar-title (label :t/login)} :set-address-from-qr])}]])
 
 (defview password-input []
-  []
+  [text-field
-  [text-input
+   {:value        ""
-   {:underlineColorAndroid color-white
+    :label        (label :t/password)
-    :placeholderTextColor  color-white
+    :labelColor   "#ffffff80"
-    :style                 white-form-text-input
+    :lineColor    :white
-    :autoFocus             true
+    :inputStyle st/input-style
-    :placeholder           (label :t/password)
+    :onChangeText          #(dispatch [:set-in [:login :password] %])}])
-    :onChangeText          #(dispatch [:set-in [:login :password] %])}
-   ""])
 
 (defview login []
   [{:keys [address password]} [:get :login]]

src/status_im/login/styles.cljs

@@ -51,4 +51,14 @@
 
 (def connect-button-text
   {:color    "#7099e6"
-   :fontSize 16})
+   :fontSize 16})
+
+(def input-style
+  {:color :white
+   :font-size 12})
+
+(def scan-label
+  {:color :white})
+
+(def address-input-wrapper
+  {})

src/status_im/qr_scanner/views/scan-button.cljs

@@ -12,12 +12,13 @@
             [status-im.qr-scanner.styles :as st]))
 
 
-(defview scan-button [handler]
+(defview scan-button [{:keys [showLabel icon labelStyle handler]}]
-  []
+  (let [showLabel (if (nil? showLabel) true showLabel)]
-  [view st/scan-button
+    [view st/scan-button
-   [touchable-highlight
+     [touchable-highlight
-    {:on-press handler}
+      {:on-press handler}
-    [view st/scan-button-content
+      [view st/scan-button-content
-     [image {:source {:uri :scan_blue}
+       [image {:source {:uri (or icon :scan_blue)}
-             :style  icon-scan}]
+               :style  icon-scan}]
-     [text {:style st/scan-text} (label :t/scan-qr)]]]])
+       (when showLabel [text {:style (merge st/scan-text labelStyle)}
+                                  (label :t/scan-qr)])]]]))