applied new design

src/status_im/components/styles.cljs

@@ -63,6 +63,10 @@
   {:width  23
    :height 22})
 
+(def icon-scan
+  {:width  18
+   :height 18})
+
 (def icon-plus
   {:width 18
    :height 18})
@@ -92,10 +96,8 @@
 
 (def button-input-container
   {:flex          1
-   :flexDirection :row
-   :height        50})
+   :flexDirection :row})
 
 (def button-input
   {:flex          1
-   :flexDirection :column
-   :height        50})
+   :flexDirection :column})

src/status_im/contacts/styles.cljs

@@ -71,7 +71,8 @@
 
 (def contact-form-container
   {:flex  1
-   :color :white})
+   :color :white
+   :backgroundColor :white})
 
 (def gradient-background
   {:position :absolute
@@ -82,4 +83,13 @@
 
 (def form-container
   {:marginLeft 16
-   :margin-top 50})
+   :margin-top 16})
+
+(def address-explication-container
+  {:flex 1
+   :paddingLeft 16
+   :paddingRight 16})
+
+(def address-explication
+  {:textAlign :center
+   :color "#838c93de"})

src/status_im/contacts/views/new_contact.cljs

@@ -19,8 +19,8 @@
                                                  toolbar-title-text
                                                  button-input-container
                                                  button-input
-                                                 white-form-text-input]]
-            [status-im.qr-scanner.views.import-button :refer [import-button]]
+                                                 form-text-input]]
+            [status-im.qr-scanner.views.scan-button :refer [scan-button]]
             [status-im.i18n :refer [label]]
             [status-im.contacts.styles :as st]))
 
@@ -28,51 +28,46 @@
 
 (def toolbar-title
   [view toolbar-title-container
-   [text {:style (merge toolbar-title-text {:color color-white})}
-    (label :t/new-contact)]])
+   [text {:style toolbar-title-text}
+    (label :t/add-new-contact)]])
 
 (defview contact-name-input [name]
   []
   [text-input
-   {:underlineColorAndroid color-white
-    :placeholderTextColor  color-white
-    :style                 white-form-text-input
+   {:underlineColorAndroid "#0000001f"
+    :placeholderTextColor  "#838c93de"
+    :style                 form-text-input
     :autoFocus             true
-    :placeholder           (label :t/contact-name)
+    :placeholder           (label :t/name)
     :onChangeText          #(dispatch [:set-in [:new-contact :name] %])}
    name])
 
 (defview contact-whisper-id-input [whisper-identity]
   [view button-input-container
    [text-input
-    {:underlineColorAndroid color-white
-     :placeholderTextColor  color-white
-     :style                 (merge white-form-text-input button-input)
+    {:underlineColorAndroid "#0000001f"
+     :placeholderTextColor  "#838c93de"
+     :style                 (merge form-text-input button-input)
      :autoFocus             true
-     :placeholder           (label :t/whisper-identity)
+     :placeholder           (label :t/address)
      :onChangeText          #(dispatch [:set-in [:new-contact :whisper-identity] %])}
     whisper-identity]
-   [import-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])]])
+   [scan-button #(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]]
   [drawer-view
    [view st/contact-form-container
-    [linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"]
-                      :start [0, 0]
-                      :end [0.5, 1]
-                      :locations [0, 0.8 ,1]
-                      :style  st/gradient-background}]
-
-    [toolbar {:background-color :transparent
-              :nav-action     {:image   {:source {:uri :icon_back_white}
+    [toolbar {:background-color :white
+              :nav-action     {:image   {:source {:uri :icon_back}
                                          :style  icon-back}
                                :handler  #(dispatch [:navigate-back])}
               :custom-content   toolbar-title
-              :action           {:image   {:source {:uri :icon_add}
+              :action           {:image   {:source {:uri :icon_ok_blue}
                                            :style  icon-search}
                                  :handler #(dispatch [:add-new-contact new-contact])}}]
     [view st/form-container
-     [contact-whisper-id-input whisper-identity]
      [contact-name-input name]
-     ]]])
+     [contact-whisper-id-input whisper-identity]]
+    [view st/address-explication-container
+     [text {:style st/address-explication} (label :t/address-explication)]]]])

src/status_im/qr_scanner/styles.cljs

@@ -74,3 +74,25 @@
    :flexDirection :column
    :color         color-white
    :margin-left   8})
+
+
+(def scan-button
+  {:position   :absolute
+   :top        5
+   :right      16
+   :flex       1
+   :height     50
+   :alignItems :center})
+
+(def scan-button-content
+  {:flex          1
+   :flexDirection :row
+   :height        50
+   :alignItems    :center
+   :alignSelf     :center})
+
+(def scan-text
+  {:flex          1
+   :flexDirection :column
+   :color         "#7099e6"
+   :margin-left   8})

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

@@ -0,0 +1,23 @@
+(ns status-im.qr-scanner.views.scan-button
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [status-im.components.react :refer [view
+                                                text
+                                                image
+                                                touchable-highlight]]
+            [status-im.components.toolbar :refer [toolbar]]
+            [status-im.components.drawer.view :refer [drawer-view open-drawer]]
+            [status-im.components.styles :refer [icon-scan]]
+            [status-im.i18n :refer [label]]
+            [status-im.qr-scanner.styles :as st]))
+
+
+(defview scan-button [handler]
+  []
+  [view st/scan-button
+   [touchable-highlight
+    {:on-press handler}
+    [view st/scan-button-content
+     [image {:source {:uri :scan_blue}
+             :style  icon-scan}]
+     [text {:style st/scan-text} (label :t/scan-qr)]]]])

src/status_im/translations/en.cljs

@@ -115,9 +115,12 @@
    :You                                   "You"
 
    ;new-contact
+   :add-new-contact                       "Add new contact"
    :import-qr                             "Import"
-   :contact-name                          "Contact Name"
+   :scan-qr                               "Scan QR"
+   :name                                  "Name"
    :whisper-identity                      "Whisper Identity"
+   :address-explication                   "Maybe here should be some text explaining what an address is and where to look for it"
 
    ;login
    :recover-from-passphrase               "Recover from passphrase"
@@ -127,6 +130,6 @@
    :login                                 "Login"
 
    ;users
-   :add-account                                 "Add account"
+   :add-account                           "Add account"
 
    })