updated new contact screen; some code cleaning

Former-commit-id: e0ce4217bb

src/status_im/components/styles.cljs

@@ -19,6 +19,7 @@
 (def text1-color color-black)
 (def text2-color color-gray)
 (def text3-color color-blue)
+(def text4-color color-white)
 (def online-color color-blue)
 (def new-messages-count-color color-blue-transparent)
 (def chat-background color-light-gray)
@@ -37,7 +38,7 @@
   {:width  16
    :height 12})
 
-(def search-icon
+(def icon-search
   {:width  17
    :height 17})
 
@@ -46,11 +47,55 @@
    :height   22
    :color    :white})
 
-(def import-qr-icon
+(def icon-back
-  {:margin 4})
+  {:width  8
+   :height 14})
+
+(def icon-add
+  {:width  14
+   :height 14})
+
+(def icon-ok
+  {:width  18
+   :height 14})
+
+(def icon-qr
+  {:width  23
+   :height 22})
+
+(def icon-plus
+  {:width 18
+   :height 18})
 
 (def form-text-input
   {:marginLeft -4
    :fontSize   14
    :fontFamily font
    :color      text1-color})
+
+(def white-form-text-input
+  {:marginLeft -4
+   :fontSize   14
+   :fontFamily font
+   :color      color-white})
+
+(def toolbar-title-container
+  {:flex           1
+   :alignItems     :center
+   :justifyContent :center})
+
+(def toolbar-title-text
+  {:marginTop  -2.5
+   :color      text1-color
+   :fontSize   16
+   :fontFamily font})
+
+(def button-input-container
+  {:flex          1
+   :flexDirection :row
+   :height        50})
+
+(def button-input
+  {:flex          1
+   :flexDirection :column
+   :height        50})

src/status_im/components/toolbar.cljs

@@ -13,6 +13,9 @@
                                                  text1-color
                                                  text2-color
                                                  toolbar-background1
+                                                 toolbar-title-container
+                                                 toolbar-title-text
+                                                 icon-back
                                                  toolbar-height]]
             [status-im.components.realm :refer [list-view]]
             [reagent.core :as r]))
@@ -34,20 +37,14 @@
            [image (:image nav-action)]]]
          [touchable-highlight {:on-press #(dispatch [:navigate-back])}
           [view {:width  56
-                 :height 56}
+                 :height 56
-           [image {:source {:uri :icon_back}
-                   :style  {:marginTop  21
-                            :marginLeft 23
-                            :width      8
-                            :height     14}}]]]))
-     (or custom-content
-         [view {:style {:flex           1
                  :alignItems     :center
-                        :justifyContent :center}}
+                 :justifyContent :center}
-          [text {:style {:marginTop  -2.5
+           [image {:source {:uri :icon_back}
-                         :color      text1-color
+                   :style  icon-back}]]]))
-                         :fontSize   16
+     (or custom-content
-                         :fontFamily font}}
+         [view {:style toolbar-title-container}
+          [text {:style toolbar-title-text}
            title]])
      custom-action
      (when action

src/status_im/contacts/screen.cljs

@@ -15,7 +15,7 @@
             [status-im.components.icons.ionicons :refer [icon]]
             [status-im.components.styles :refer [color-blue
                                                  hamburger-icon
-                                                 search-icon
+                                                 icon-search
                                                  create-icon
                                                  toolbar-background2]]
             [status-im.contacts.styles :as st]
@@ -32,7 +32,7 @@
             :title            (label :t/contacts)
             :background-color toolbar-background2
             :action           {:image   {:source {:uri :icon_search}
-                                         :style  search-icon}
+                                         :style  icon-search}
                                :handler (fn [])}}])
 
 (defview contact-list []

src/status_im/contacts/styles.cljs

@@ -67,22 +67,19 @@
    :fontFamily font
    :color      text1-color})
 
-(def import-qr-button
+; new contact
-  {:flex            1
-   :height          50
-   :alignItems      :center
-   :backgroundColor "#EFF4F6"})
-
-(def import-qr-button-content
-  {:flex            1
-   :flexDirection   :row
-   :height          50
-   :alignItems      :center
-   :alignSelf       :center})
-
-(def import-qr-text
-  {:flexDirection :column})
 
 (def contact-form-container
   {:flex  1
-   :backgroundColor :white})
+   :color :white})
+
+(def gradient-background
+  {:position :absolute
+   :top      0
+   :right    0
+   :bottom   0
+   :left     0})
+
+(def form-container
+  {:marginLeft 16
+   :margin-top 50})

src/status_im/contacts/views/new_contact.cljs

@@ -4,56 +4,75 @@
             [status-im.components.react :refer [view
                                                 text
                                                 text-input
+                                                image
+                                                linear-gradient
                                                 touchable-highlight]]
             [status-im.components.toolbar :refer [toolbar]]
             [status-im.components.drawer.view :refer [drawer-view open-drawer]]
-            [status-im.components.icons.ionicons :refer [icon]]
             [status-im.components.styles :refer [color-purple
-                                                 search-icon
+                                                 color-white
-                                                 import-qr-icon
+                                                 icon-search
+                                                 icon-back
+                                                 icon-qr
                                                  toolbar-background1
-                                                 form-text-input]]
+                                                 toolbar-title-container
+                                                 toolbar-title-text
+                                                 button-input-container
+                                                 button-input
+                                                 white-form-text-input]]
+            [status-im.qr-scanner.views.import-button :refer [import-button]]
             [status-im.i18n :refer [label]]
             [status-im.contacts.styles :as st]))
 
-(defn import-qr-button []
+
-  [touchable-highlight
+
-   {:on-press #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])}
+(def toolbar-title
-   [view st/import-qr-button
+  [view toolbar-title-container
-    [view st/import-qr-button-content
+   [text {:style (merge toolbar-title-text {:color color-white})}
-     [icon {:name  :qr-scanner
+    (label :t/new-contact)]])
-            :style import-qr-icon}]
-     [text {:style st/import-qr-text} (label :t/import-qr)]]]])
 
 (defview contact-name-input [name]
   []
   [text-input
-   {:underlineColorAndroid color-purple
+   {:underlineColorAndroid color-white
-    :style                 form-text-input
+    :placeholderTextColor  color-white
+    :style                 white-form-text-input
     :autoFocus             true
     :placeholder           (label :t/contact-name)
     :onChangeText          #(dispatch [:set-in [:new-contact :name] %])}
    name])
 
-(defview contact-address-input [address]
+(defview contact-whisper-id-input [whisper-identity]
+  [view button-input-container
    [text-input
-   {:underlineColorAndroid color-purple
+    {:underlineColorAndroid color-white
-    :style                 form-text-input
+     :placeholderTextColor  color-white
+     :style                 (merge white-form-text-input button-input)
      :autoFocus             true
-    :placeholder           (label :t/contact-address)
+     :placeholder           (label :t/whisper-identity)
-    :onChangeText          #(dispatch [:set-in [:new-contact :address] %])}
+     :onChangeText          #(dispatch [:set-in [:new-contact :whisper-identity] %])}
-   address])
+    whisper-identity]
+   [import-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])]])
 
 (defview new-contact []
-  [{:keys [name address whisper-identity phone-number] :as new-contact} [:get :new-contact]]
+  [{:keys [name whisper-identity phone-number] :as new-contact} [:get :new-contact]]
   [drawer-view
    [view st/contact-form-container
-    [toolbar {:title            (label :t/new-contact)
+    [linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"]
-              :background-color toolbar-background1
+                      :start [0, 0]
-              :action           {:image   {:source {:uri :icon_add_gray}
+                      :end [0.5, 1]
-                                           :style  search-icon}
+                      :locations [0, 0.8 ,1]
+                      :style  st/gradient-background}]
+
+    [toolbar {:background-color :transparent
+              :nav-action     {:image   {:source {:uri :icon_back_white}
+                                         :style  icon-back}
+                               :handler  #(dispatch [:navigate-back])}
+              :custom-content   toolbar-title
+              :action           {:image   {:source {:uri :icon_add}
+                                           :style  icon-search}
                                  :handler #(dispatch [:add-new-contact new-contact])}}]
-    [import-qr-button]
+    [view st/form-container
+     [contact-whisper-id-input whisper-identity]
      [contact-name-input name]
-    [contact-address-input address]
+     ]]])
-    [text (str "Whisper identity: " whisper-identity)]]])

src/status_im/qr_scanner/screen.cljs

@@ -5,7 +5,7 @@
                                                 image]]
             [status-im.components.camera :refer [camera]]
             [status-im.components.styles :refer [toolbar-background1
-                                                 search-icon]]
+                                                 icon-search]]
             [status-im.components.toolbar :refer [toolbar]]
             [status-im.qr-scanner.styles :as st]
             [status-im.utils.types :refer [json->clj]]))
@@ -14,7 +14,7 @@
   [toolbar {:title            title
             :background-color toolbar-background1
             :action           {:image   {:source {:uri :icon_lock_white}
-                                         :style  search-icon}
+                                         :style  icon-search}
                                :handler #()}}])
 
 (defview qr-scanner []

src/status_im/qr_scanner/styles.cljs

@@ -1,5 +1,6 @@
 (ns status-im.qr-scanner.styles
-  (:require [status-im.components.styles :refer [toolbar-height]]))
+  (:require [status-im.components.styles :refer [toolbar-height
+                                                 color-white]]))
 
 (def barcode-scanner-container
   {:flex            1
@@ -54,6 +55,22 @@
    :width    56
    :height   56})
 
+(def import-button
+  {:position   :absolute
+   :right      16
+   :flex       1
+   :height     50
+   :alignItems :center})
 
-;:width 56
+(def import-button-content
-;:height 56
+  {:flex          1
+   :flexDirection :row
+   :height        50
+   :alignItems    :center
+   :alignSelf     :center})
+
+(def import-text
+  {:flex          1
+   :flexDirection :column
+   :color         color-white
+   :margin-left   8})

src/status_im/qr_scanner/views/import-qr-button.cljs

@@ -0,0 +1,23 @@
+(ns status-im.qr-scanner.views.import-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-qr]]
+            [status-im.i18n :refer [label]]
+            [status-im.qr-scanner.styles :as st]))
+
+
+(defview import-button [handler]
+  []
+  [view st/import-button
+   [touchable-highlight
+    {:on-press handler}
+    [view st/import-button-content
+     [image {:source {:uri :icon_qr}
+             :style  icon-qr}]
+     [text {:style st/import-text} (label :t/import-qr)]]]])

src/status_im/translations/en.cljs

@@ -115,8 +115,18 @@
    :You                                   "You"
 
    ;new-contact
-   :import-qr                             "Import from QR"
+   :import-qr                             "Import"
    :contact-name                          "Contact Name"
-   :contact-address                       "Contact Address"
+   :whisper-identity                      "Whisper Identity"
+
+   ;login
+   :recover-from-passphrase               "Recover from passphrase"
+   :connect                               "Connect"
+   :address                               "Address"
+   :password                              "Password"
+   :login                                 "Login"
+
+   ;users
+   :add-account                                 "Add account"
 
    })