updated ui for accounts, login and recover screens

ios/StatusIm/Images.xcassets/icon_add_white.imageset/Contents.json

@@ -2,7 +2,7 @@
   "images" : [
     {
       "idiom" : "universal",
-      "filename" : "icon_add.png",
+      "filename" : "icon_add_white.png",
       "scale" : "1x"
     },
     {

ios/StatusIm/Images.xcassets/icon_dots_horizontal_white.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_dots_horizontal_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

src/status_im/accounts/handlers.cljs

@@ -188,10 +188,3 @@
             messages (processed-messages/get-filtered (str "ttl > " now))]
         (cache/init! messages)
         (processed-messages/delete (str "ttl <=" now))))))
-
-(defmethod nav/preload-data! :qr-code-view
-  [{:keys [current-account-id] :as db} [_ _ {:keys [contact qr-source amount?]}]]
-  (assoc db :qr-modal {:contact   (or contact
-                                      (get-in db [:accounts current-account-id]))
-                       :qr-source qr-source
-                       :amount?   amount?}))

src/status_im/accounts/login/handlers.cljs

@@ -18,6 +18,12 @@
 
 (register-handler :set-login-from-qr set-login-from-qr)
 
+(register-handler
+  :open-login
+  (after #(dispatch [:navigate-to :login]))
+  (fn [db [_ address photo-path name]]
+    (update db :login assoc :address address :photo-path photo-path :name name)))
+
 (defn initialize-account
   [address new-account?]
   (dispatch [:set :login {}])

src/status_im/accounts/login/screen.cljs

@@ -1,80 +1,45 @@
 (ns status-im.accounts.login.screen
   (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+  (:require [re-frame.core :refer [dispatch dispatch-sync]]
+            [status-im.accounts.styles :as ast]
+            [status-im.accounts.screen :refer [account-bage]]
+            [status-im.components.text-input-with-label.view :refer [text-input-with-label]]
+            [status-im.components.status-bar :refer [status-bar]]
+            [status-im.components.toolbar-new.view :refer [toolbar]]
+            [status-im.components.toolbar-new.actions :as act]
+            [status-im.accounts.login.styles :as st]
             [status-im.components.react :refer [view
                                                 text
-                                                image
+                                                touchable-highlight]]
-                                                linear-gradient
+            [status-im.i18n :as i18n]))
-                                                touchable-highlight
-                                                get-dimensions]]
-            [status-im.components.status-bar :refer [status-bar]]
-            [status-im.components.toolbar.view :refer [toolbar]]
-            [status-im.components.toolbar.actions :as act]
-            [status-im.components.toolbar.styles :refer [toolbar-title-container
-                                                         toolbar-title-text]]
-            [status-im.components.text-field.view :refer [text-field]]
-            [status-im.components.styles :refer [color-white
-                                                 icon-search
-                                                 button-input]]
-            [status-im.i18n :refer [label]]
-            [status-im.accounts.login.styles :as st]))
 
-(defn toolbar-title []
+(defn login-toolbar []
-  [view toolbar-title-container
+  [toolbar {:background-color :transparent
-   [text {:style (merge toolbar-title-text {:color color-white})
+            :hide-border?     true
-          :font  :medium}
+            :title-style      {:color :white}
-    (label :t/login)]])
+            :nav-action       (act/back-white #(dispatch [:navigate-back]))
-
+            :actions          [{:image :blank}]
-(defview address-input [address]
+            :title            (i18n/label :t/sign-in-to-status)}])
-  [view
-   [text-field
-    {:value          address
-     :editable       false
-     :label          (label :t/address)
-     :label-color    "#ffffff80"
-     :line-color     :white
-     :input-style    st/input-style
-     :on-change-text #(dispatch [:set-in [:login :address] %])}]])
-
-(defview password-input [error]
-  [view
-   [text-field
-    {:editable          true
-     :error             (when (pos? (count error)) (label :t/wrong-password))
-     :error-color       :white
-     :label             (label :t/password)
-     :secure-text-entry true
-     :label-color       "#ffffff80"
-     :line-color        :white
-     :input-style       st/input-style
-     :auto-capitalize   :none
-     :on-change-text    #(do
-                          (dispatch [:set-in [:login :password] %])
-                          (dispatch [:set-in [:login :error] ""]))}]])
 
 (defview login []
-  [{:keys [address password error]} [:get :login]
+  [{:keys [address photo-path name password error]} [:get :login]]
-   keyboard-height [:get :keyboard-height]]
+  [view ast/accounts-container
-  [view (st/screen-container (- (:height (get-dimensions "window"))
-                                keyboard-height))
-   [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}]
    [status-bar {:type :transparent}]
-   [toolbar {:background-color :transparent
+   [login-toolbar]
-             :nav-action       (act/back-white #(dispatch [:navigate-back]))
+   [view st/login-view
-             :custom-content   [toolbar-title]
+    [view st/login-badge-container
-             :actions          [{:image   {:style icon-search}
+     [account-bage address photo-path name]
-                                 :handler #()}]}]
+     [view {:height 8}]
-   [view st/form-container
+     [text-input-with-label {:label             (i18n/label :t/password)
-    [view st/form-container-inner
+                             :auto-capitalize   :none
-     [address-input (or address "")]
+                             :hide-underline?   true
-     [password-input error]]]
+                             :on-change-text    #(do
-   [view st/bottom-actions-container
+                                                   (dispatch [:set-in [:login :password] %])
-    [view st/connect-button-container
+                                                   (dispatch [:set-in [:login :error] ""]))
+                             :auto-focus        true
+                             :secure-text-entry true
+                             :error             (when (pos? (count error)) (i18n/label :t/wrong-password))}]]
+    [view {:margin-top 16}
      [touchable-highlight {:on-press #(dispatch [:login-account address password])}
-      [view st/connect-button
+      [view st/sign-in-button
-       [text {:style             st/connect-button-text}
+       [text {:style st/sign-it-text} (i18n/label :t/sign-in)]]]]]])
-        (label :t/connect)]]]]]])

src/status_im/accounts/login/styles.cljs

@@ -1,55 +1,34 @@
 (ns status-im.accounts.login.styles
-  (:require [status-im.components.styles :refer [color-white
+  (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
-                                                 color-blue]]))
+  (:require [status-im.components.styles :as common]))
 
+(defstyle login-view
+  {:flex              1
+   :ios               {:margin-top    10
+                       :margin-bottom 10}
+   :android           {:margin-top    16
+                       :margin-bottom 16}
+   :margin-horizontal 16})
 
-(defn screen-container [height]
+(defstyle login-badge-container
-  {:height height})
+  {:background-color :white
+   :ios              {:border-radius 8
+                      :padding-top   16
+                      :height        150}
+   :android          {:border-radius 4
+                      :padding-top   12
+                      :height        144}})
 
-(def gradient-background
+(defstyle sign-it-text
-  {:position :absolute
+  {:color   :white
-   :top      0
+   :ios     {:font-size 17
-   :right    0
+             :letter-spacing -0.2}
-   :bottom   0
+   :android {:font-size 16}})
-   :left     0})
 
-(def form-container
+(defstyle sign-in-button
-  {:flex            1
+  {:background-color common/color-blue3
-   :flex-direction  "row"
+   :align-items      :center
-   :align-items     "center"
+   :justify-content  :center
-   :justifyContent  "center"})
+   :height           52
-
+   :ios              {:border-radius 8}
-(def form-container-inner
+   :android          {:border-radius 4}})
-  {:flex           1
-   :padding-bottom 100
-   :margin-left    16})
-
-(def bottom-actions-container
-  {:position :absolute
-   :left     0
-   :right    0
-   :bottom   0})
-
-(def connect-button-container
-  {:flex 1})
-
-(def connect-button
-  {:backgroundColor   color-white
-   :flex 1
-   :alignItems :center
-   :paddingVertical   16
-   :paddingHorizontal 28})
-
-(def connect-button-text
-  {:color    color-blue
-   :fontSize 16})
-
-(def input-style
-  {:color :white
-   :font-size 12})
-
-(def scan-label
-  {:color :white})
-
-(def address-input-wrapper
-  {})

src/status_im/accounts/recover/handlers.cljs

@@ -7,7 +7,8 @@
             [clojure.string :as str]
             [status-im.utils.handlers :as u]
             [status-im.utils.gfycat.core :refer [generate-gfy]]
-            [status-im.protocol.core :as protocol]))
+            [status-im.protocol.core :as protocol]
+            [status-im.navigation.handlers :as nav]))
 
 (defn account-recovered [result]
   (let [_          (log/debug result)
@@ -37,3 +38,7 @@
     account-recovered))
 
 (register-handler :recover-account (u/side-effect! recover-account))
+
+(defmethod nav/preload-data! :recover
+  [db]
+  (update db :recover dissoc :password :passphrase))

src/status_im/accounts/recover/screen.cljs

@@ -1,103 +1,56 @@
 (ns status-im.accounts.recover.screen
   (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+  (:require [re-frame.core :refer [dispatch]]
+            [status-im.components.text-input-with-label.view :refer [text-input-with-label]]
             [status-im.components.react :refer [view
                                                 text
                                                 image
-                                                linear-gradient
+                                                keyboard-avoiding-view
                                                 touchable-highlight]]
+            [status-im.components.sticky-button :refer [sticky-button]]
             [status-im.components.status-bar :refer [status-bar]]
-            [status-im.components.text-field.view :refer [text-field]]
+            [status-im.components.toolbar-new.view :refer [toolbar]]
-            [status-im.components.toolbar.view :refer [toolbar]]
+            [status-im.components.toolbar-new.actions :as act]
-            [status-im.components.toolbar.actions :as act]
+            [status-im.i18n :as i18n]
-            [status-im.components.toolbar.styles :refer [toolbar-gradient
-                                                         toolbar-title-container
-                                                         toolbar-title-text]]
-            [status-im.components.styles :refer [color-blue
-                                                 color-gray
-                                                 separator-color
-                                                 button-input]]
-            [status-im.components.react :refer [linear-gradient]]
-            [status-im.i18n :refer [label]]
             [status-im.accounts.recover.styles :as st]
             [status-im.accounts.recover.validations :as v]
-            [cljs.spec :as s]
+            [cljs.spec :as spec]
-            [clojure.string :as str]
+            [clojure.string :as str]))
-            [taoensso.timbre :as log]))
-
-(defn toolbar-title []
-  [view toolbar-title-container
-   [text {:style toolbar-title-text
-          :font  :medium}
-    (label :t/recover-from-passphrase)]])
 
 (defview passphrase-input [passphrase]
   [error [:get-in [:recover :passphrase-error]]]
-  (let [error (if (str/blank? passphrase) "" error)
+  [view {:margin-top 10}
-        error (if (s/valid? ::v/passphrase passphrase)
+   [text-input-with-label {:label             (i18n/label :t/passphrase)
-                error
+                           :description       (i18n/label :t/twelve-words-in-correct-order)
-                (label :t/enter-valid-passphrase))]
+                           :multiline         true
-    [view
+                           :auto-expanding    true
-     [text-field
+                           :max-height        st/passphrase-input-max-height
-      {:value           passphrase
+                           :default-value     passphrase
-       :error           error
+                           :auto-capitalize   :none
-       :error-color     color-blue
+                           :on-change-text    #(dispatch [:set-in [:recover :passphrase] %])
-       :label           (label :t/passphrase)
+                           :error             error}]])
-       :label-color     color-gray
-       :line-color      separator-color
-       :input-style     st/input-style
-       :auto-capitalize :none
-       :wrapper-style   (merge button-input st/address-input-wrapper)
-       :on-change-text  #(dispatch [:set-in [:recover :passphrase] %])}]]))
 
 (defview password-input [password]
   [error [:get-in [:recover :password-error]]]
-  (let [error (if (str/blank? password) "" error)
+  [view {:margin-top 10}
-        error (if (s/valid? ::v/password password)
+   [text-input-with-label {:label             (i18n/label :t/password)
-                error
+                           :default-value     password
-                (label :t/enter-valid-password))]
+                           :auto-capitalize   :none
-    [view
+                           :on-change-text    #(dispatch [:set-in [:recover :password] %])
-     [text-field
+                           :secure-text-entry true
-      {:value             password
+                           :error             error}]])
-       :secure-text-entry true
-       :error             error
-       :error-color       color-blue
-       :label             (label :t/password)
-       :label-color       color-gray
-       :line-color        separator-color
-       :input-style       st/input-style
-       :on-change-text    #(dispatch [:set-in [:recover :password] %])}]]))
 
 (defview recover []
-  [{:keys [passphrase password passphrase-error password-error]} [:get :recover]]
+  [{:keys [passphrase password]} [:get :recover]]
   (let [valid-form? (and
-                      (s/valid? ::v/passphrase passphrase)
+                      (spec/valid? ::v/passphrase passphrase)
-                      (s/valid? ::v/password password))
+                      (spec/valid? ::v/password password))]
-        gradient-colors ["rgba(24, 52, 76, 0.165)"
+    [keyboard-avoiding-view {:style st/screen-container}
-                         "rgba(24, 52, 76, 0.085)"
+     [status-bar]
-                         "rgba(24, 52, 76, 0)"]
+     [toolbar {:actions [{:image :blank}]
-        _ (log/debug passphrase " - " password)]
+               :title   (i18n/label :t/recover-access)}]
-  [view st/screen-container
-   [status-bar {:type :transparent}]
-   [toolbar {:background-color :transparent
-             :nav-action       (act/back #(dispatch [:navigate-back]))
-             :custom-content   [toolbar-title]}]
-   [linear-gradient {:locations [0 0.6 1]
-                     :colors    gradient-colors
-                     :style     toolbar-gradient}]
-   [view st/recover-explain-container
-    [text {:style st/recover-explain-text
-           :font  :medium}
-     (label :t/recover-explain)]]
-   [view st/form-container
-    [view st/form-container-inner
      [passphrase-input (or passphrase "")]
-     [password-input (or password "")]]]
+     [password-input (or password "")]
-   [view st/bottom-actions-container
+     [view {:flex 1}]
-    [view st/recover-button-container
+     (when valid-form?
-     [touchable-highlight
+       [sticky-button (i18n/label :t/recover-access) #(dispatch [:recover-account passphrase password])])]))
-      {:on-press #(when valid-form?
-                   (dispatch [:recover-account passphrase password]))}
-      [view (st/recover-button valid-form?)
-       [text {:style st/recover-button-text}
-        (label :t/recover)]]]]]]))

src/status_im/accounts/recover/styles.cljs

@@ -1,69 +1,10 @@
 (ns status-im.accounts.recover.styles
-  (:require [status-im.components.styles :refer [color-white
+  (:require [status-im.components.styles :as common]
-                                                 color-gray
+            [status-im.utils.platform :refer [ios?]]))
-                                                 color-blue]]))
-
 
 (def screen-container
   {:flex             1
-   :color            :white
+   :background-color common/color-white})
-   :background-color color-white})
 
-(def gradient-background
+(def passphrase-input-max-height
-  {:position :absolute
+  (if ios? 78 72))
-   :top      0
-   :right    0
-   :bottom   0
-   :left     0})
-
-(def recover-explain-container
-  {:padding-horizontal 35
-   :padding-top        20
-   :justify-content    :center})
-
-(def recover-explain-text
-  {:color       color-gray
-   :font-size   16
-   :line-height 20
-   :text-align  :center})
-
-(def form-container
-  {:flex           1
-   :flex-direction "row"
-   :justifyContent "center"})
-
-(def form-container-inner
-  {:flex           1
-   :padding-bottom 100
-   :margin-left    16})
-
-(def bottom-actions-container
-  {:position :absolute
-   :left     0
-   :right    0
-   :bottom   0})
-
-(def recover-button-container
-  {:flex 1})
-
-(defn recover-button [valid-form?]
-  {:backgroundColor   (if valid-form? color-blue :gray)
-   :color             :white
-   :flex              1
-   :alignItems        :center
-   :paddingVertical   16
-   :paddingHorizontal 28})
-
-(def recover-button-text
-  {:color    color-white
-   :fontSize 16})
-
-(def input-style
-  {:color     "#323232"
-   :font-size 12})
-
-(def scan-label
-  {:color :white})
-
-(def address-input-wrapper
-  {})

src/status_im/accounts/screen.cljs

@@ -1,84 +1,61 @@
 (ns status-im.accounts.screen
   (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+  (:require [re-frame.core :refer [dispatch dispatch-sync]]
+            [status-im.accounts.styles :as st]
+            [status-im.components.text-input-with-label.view :refer [text-input-with-label]]
+            [status-im.components.status-bar :refer [status-bar]]
+            [status-im.components.toolbar-new.actions :as act]
+            [status-im.components.common.common :as common]
+            [status-im.components.action-button.action-button :refer [action-button]]
+            [status-im.utils.listview :as lw]
+            [status-im.constants :refer [console-chat-id]]
             [status-im.components.react :refer [view
-                                                scroll-view
                                                 text
                                                 list-view
                                                 list-item
                                                 image
-                                                linear-gradient
                                                 touchable-highlight]]
-            [status-im.components.status-bar :refer [status-bar]]
+            [status-im.i18n :as i18n]
-            [status-im.components.toolbar.view :refer [toolbar]]
+            [clojure.string :as str]))
-            [status-im.components.toolbar.actions :as act]
-            [status-im.components.styles :refer [color-white
-                                                 icon-search
-                                                 icon-plus
-                                                 white-form-text-input]]
-            [status-im.components.toolbar.styles :refer [toolbar-title-container
-                                                         toolbar-title-text]]
-            [status-im.utils.listview :as lw]
-            [status-im.accounts.views.account :refer [account-view]]
-            [status-im.i18n :refer [label]]
-            [status-im.accessibility-ids :as id]
-            [status-im.accounts.styles :as st]
-            [status-im.constants :refer [console-chat-id]]))
 
-(defn toolbar-title []
+(defn account-bage [address photo-path name]
-  (let [style (merge toolbar-title-text {:color color-white})]
+  [view st/account-bage
-    [view toolbar-title-container
+   [image {:source {:uri (if (str/blank? photo-path) :avatar photo-path)}
-     [text {:style style
+           :style  st/photo-image}]
-            :font  :medium}
+   [view st/account-bage-text-view
-      (label :t/switch-users)]]))
+    [text {:style st/account-bage-text
+           :numberOfLines 1}
+     (or name address)]]])
 
-(defn render-row [row _ _]
+(defn account-view [{:keys [address photo-path name] :as account}]
-  (list-item [account-view row]))
+  [view
+   [touchable-highlight {:on-press #(dispatch [:open-login address photo-path name])}
+    [view st/account-view
+     [account-bage address photo-path name]]]])
 
-(defn create-account [_]
+(defn- create-account [_]
   (dispatch-sync [:reset-app])
   (dispatch [:navigate-to :chat console-chat-id]))
 
 (defview accounts []
-  [accounts [:get :accounts]
+  [accounts [:get :accounts]]
-   stack [:get :navigation-stack]]
+  [view st/accounts-container
-  (let [accounts          (vals accounts)
+   [status-bar {:type :transparent}]
-        show-back?        (> (count stack) 1)]
+   [view st/account-title-conatiner
-    [view st/screen-container
+    [text {:style st/account-title-text
-     [linear-gradient {:colors    ["rgba(182, 116, 241, 1)"
+           :font :toolbar-title}
-                                   "rgba(107, 147, 231, 1)"
+     (i18n/label :t/sign-in-to-status)]]
-                                   "rgba(43, 171, 238, 1)"]
+   [view st/accounts-list-container
-                       :start     [0, 0]
+    [list-view {:dataSource      (lw/to-datasource (vals accounts))
-                       :end       [0.5, 1]
+                :renderSeparator #(list-item ^{:key %2} [view {:height 10}])
-                       :locations [0, 0.8, 1]
+                :renderRow       #(list-item [account-view %])}]]
-                       :style     st/gradient-background}
+   [view st/bottom-actions-container
-      [status-bar {:type :transparent}]
+    [action-button (i18n/label :t/create-new-account)
-      [toolbar {:background-color :transparent
+                   :add_white
-                :nav-action       (if show-back?
+                   create-account
-                                    (act/back-white #(dispatch [:navigate-back]))
+                   st/accounts-action-button]
-                                    act/nothing)
+    [common/separator st/accounts-separator st/accounts-separator-wrapper]
-                :custom-content   [toolbar-title]
+    [action-button (i18n/label :t/recover-access)
-                :actions          [{:image   {:style icon-search}
+                   :dots_horizontal_white
-                                    :handler #()}]}]]
+                   #(dispatch [:navigate-to :recover])
-     [list-view {:dataSource            (lw/to-datasource accounts)
+                   st/accounts-action-button]]])
-                 :enableEmptySections   true
-                 :renderRow             render-row
-                 :bounces               false
-                 :style                 st/account-list
-                 :contentContainerStyle (st/account-list-content (count accounts))}]
-     [view st/bottom-actions-container
-      [view st/recover-button-container
-       [touchable-highlight
-        {:on-press #(dispatch [:navigate-to :recover])}
-        [view st/recover-button
-         [text {:style st/recover-button-text}
-          (label :t/recover-access)]]]]
-      [view st/add-account-button-container
-       [touchable-highlight {:on-press            create-account
-                             :accessibility-label id/accounts-create-button}
-        [view st/add-account-button
-         [image {:source {:uri :icon_add_white}
-                 :style  st/icon-plus}]
-         [text {:style st/add-account-text
-                :font  :default}
-          (label :t/add-account)]]]]]]))

src/status_im/accounts/styles.cljs

@@ -1,184 +1,68 @@
 (ns status-im.accounts.styles
-  (:require [status-im.components.styles :refer [color-white]]
+  (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
-            [status-im.components.react :as r]))
+  (:require [status-im.components.styles :as common]))
 
-
+(def accounts-container
-(def screen-container
+  {:flex             1
-  {:flex  1
+   :background-color common/color-blue2})
-   :color :white})
-
-(def gradient-background
-  {:position       :absolute
-   :top            0
-   :bottom         0
-   :left           0
-   :right          0
-   :padding-bottom 84})
-
-(defn account-list-content [cnt]
-  (merge {:justifyContent :center}
-         ;; todo this will not work with landscape and looks bad
-         (when (< (* 69 (+ 2 cnt)) (:height (r/get-dimensions "window")))
-           {:flex-grow 1})))
-
-(def account-list
-  {:margin-top    75
-   :margin-bottom 110})
-
-(def row-separator
-  {:borderBottomWidth 1
-   :borderBottomColor "#bababa"})
-
-(def account-container
-  {:flex            1
-   :flexDirection   :row
-   :height          69
-   :backgroundColor "rgba(255, 255, 255, 0.1)"
-   :alignItems      :center
-   :justifyContent  :center})
-
-(def photo-container
-  {:flex           0.2
-   :flexDirection  :column
-   :alignItems     :center
-   :justifyContent :center})
-
-(def account-photo-container
-  {:flex           1
-   :width          36
-   :height         36
-   :alignItems     :center
-   :justifyContent :center})
-
-(def qr-photo-container
-  (merge photo-container
-         {:margin-left  8
-          :margin-right 4}))
-
-(defn qr-code-container [dimensions]
-  {:background-color "white"
-   :width            (:width dimensions)
-   :align-items      :center
-   :justify-content  :center
-   :padding          40})
-
-(def photo-image
-  {:width         36
-   :height        36
-   :border-radius 18})
-
-(def name-container
-  {:flex          1
-   :flexDirection :column})
-
-(def name-text
-  {:color    color-white
-   :fontSize 16})
-
-(def address-text
-  {:color    color-white
-   :fontSize 12})
-
-(def online-container
-  {:flex           0.2
-   :flexDirection  :column
-   :alignItems     :center
-   :justifyContent :center})
-
-(def online-image-container
-  {:width           40
-   :height          40
-   :margin-right    4
-   :align-items     :center
-   :justify-content :center})
 
 (def bottom-actions-container
-  {:position :absolute
+  {:margin-bottom 16})
-   :left     0
-   :right    0
-   :bottom   0})
 
-(def add-account-button-container
+(def photo-image
+  {:height        40
+   :width         40
+   :border-radius 20})
+
+(defstyle account-title-conatiner
+  {:justify-content :center
+   :align-items     :center
+   :ios             {:height 56}
+   :android         {:height 55}})
+
+(defstyle account-title-text
+  {:color     :white
+   :font-size 17
+   :ios       {:letter-spacing -0.2}})
+
+(defstyle accounts-list-container
   {:flex              1
-   :paddingVertical   16
+   :margin-horizontal 16
-   :paddingHorizontal 28
+   :ios               {:margin-top    10
-   :justifyContent    :center
+                       :margin-bottom 10}
-   :alignItems        :center})
+   :android           {:margin-top    16
+                       :margin-bottom 16}})
 
-(def add-account-button
+(def accounts-action-button
-  {:flexDirection :row})
+  {:label-style  {:color :white}
+   :cyrcle-color "#ffffff33"})
 
-(def icon-plus
+(def accounts-separator
-  {:flexDirection :column
+  {:background-color "#7482eb"
-   :paddingTop    2
+   :opacity          1
-   :width         20
+   :margin-left      72})
-   :height        20})
 
-(def add-account-text
+(def accounts-separator-wrapper
-  {:flexDirection :column
+  {:background-color common/color-blue2})
-   :color         :white
-   :fontSize      16
-   :marginLeft    8})
 
-(def recover-button-container
+(defstyle account-view
-  {:flex 1})
+  {:background-color :white
-
-(def recover-button
-  {:flex              1
-   :alignItems        :center
-   :paddingVertical   16
-   :paddingHorizontal 28})
-
-(def recover-button-text
-  {:flex     1
-   :color    color-white
-   :fontSize 16})
-
-;wallet-qr-code.cljs
-
-(def wallet-qr-code
-  {:flex-grow      1
-   :flex-direction :column})
-
-(def account-toolbar
-  {:background-color "#2f3031"})
-
-(def wallet-account-container
-  {:flex-grow      1
-   :flexDirection  :row
-   :height         69
-   :alignItems     :center
-   :justifyContent :center})
-
-(def qr-code
-  {:background-color "#2f3031"
-   :flex-grow        1
-   :align-items      :center
-   :justify-content  :center})
-
-(def footer
-  {:background-color "#2f3031"})
-
-(def wallet-info
-  {:align-items    :center
-   :padding-bottom 20
-   :padding-top    20})
-
-(def wallet-name-text
-  {:color          color-white
-   :padding-bottom 5})
-
-(def wallet-address-text
-  {:color "#999999"
-   })
-
-(def done-button
-  {:flex-grow        1
-   :flex-direction   :column
-   :align-items      :center
    :justify-content  :center
-   :height           51
+   :height           64
-   :background-color "#7597e4"})
+   :ios              {:border-radius 8}
+   :android          {:border-radius 4}})
 
-(def done-button-text
+(def account-bage
-  {:color color-white})
+  {:flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 16})
+
+(def account-bage-text-view
+  {:margin-left 16
+   :flex-shrink 1})
+
+(defstyle account-bage-text
+  {:ios     {:font-size      17
+             :letter-spacing -0.2}
+   :android {:font-size 16
+             :color     common/color-black}})

src/status_im/accounts/views/account.cljs

@@ -1,38 +0,0 @@
-(ns status-im.accounts.views.account
-  (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [clojure.string :as s]
-            [status-im.components.react :refer [view
-                                                text
-                                                image
-                                                touchable-highlight]]
-            [re-frame.core :refer [dispatch subscribe]]
-            [status-im.components.styles :refer [icon-ok
-                                                 icon-plus]]
-            [status-im.accounts.styles :as st]))
-
-(defn on-press [address]
-  (dispatch [:navigate-to :login address])
-  (dispatch [:set-in [:login :address] address]))
-
-(defview account-view [{:keys [address photo-path name] :as account}]
-  [current-account [:get-current-account]]
-  [touchable-highlight
-   {:onPress #(on-press address)}
-    [view st/account-container
-     [view st/photo-container
-      [view st/account-photo-container
-       (if (not= address "0x0")
-         [image {:source {:uri (if (s/blank? photo-path) :avatar photo-path)}
-                 :style  st/photo-image}]
-         [image {:source {:uri :icon_plus}
-                 :style  icon-plus}])]]
-     [view st/name-container
-      [text {:style st/name-text
-             :numberOfLines 1} (or name address)]
-      (when (not= address "0x0")
-        [text {:style st/address-text
-               :numberOfLines 1} address])]
-     [view st/online-container
-      (when (= address (:address current-account))
-        [image {:source {:uri :icon_ok}
-                :style  icon-ok}])]]])

src/status_im/android/core.cljs

@@ -47,7 +47,7 @@
             [status-im.components.status :as status]
             [status-im.components.styles :as st]
             [status-im.chat.styles.screen :as chat-st]
-            [status-im.accounts.views.qr-code :refer [qr-code-view]]))
+            [status-im.profile.qr-code.screen :refer [qr-code-view]]))
 
 (defn init-back-button-handler! []
   (let [new-listener (fn []

src/status_im/android/platform.cljs

@@ -11,7 +11,7 @@
                            :gray        {:height    0
                                          :bar-style "dark-content"
                                          :color     styles/color-light-gray}
-                           :transparent {:height       20
+                           :transparent {:height       25
                                          :bar-style    "light-content"
                                          :translucent? true
                                          :color        styles/color-transparent}

src/status_im/components/action_button/action_button.cljs

@@ -6,13 +6,13 @@
                                                 icon
                                                 touchable-highlight]]))
 
-(defn action-button [label icon-key on-press]
+(defn action-button [label icon-key on-press & [{:keys [label-style cyrcle-color]}]]
   [touchable-highlight {:on-press on-press}
    [view st/action-button
-    [view st/action-button-icon-container
+    [view (st/action-button-icon-container cyrcle-color)
      [icon icon-key]]
     [view st/action-button-label-container
-     [text {:style st/action-button-label}
+     [text {:style (merge st/action-button-label label-style)}
       label]]]])
 
 (defn action-button-disabled [label icon-key]

src/status_im/components/action_button/styles.cljs

@@ -1,5 +1,5 @@
 (ns status-im.components.action-button.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle]])
+  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.utils.platform :as p]
             [status-im.components.styles :refer [color-white
                                                  color-light-blue-transparent
@@ -15,13 +15,13 @@
    :ios            {:height 63}
    :android        {:height 56}})
 
-(defstyle action-button-icon-container
+(defnstyle action-button-icon-container [cyrcle-color]
   {:border-radius    50
    :width            40
    :height           40
    :align-items      :center
    :justify-content  :center
-   :ios              {:background-color color-light-blue-transparent}})
+   :ios              {:background-color (or cyrcle-color color-light-blue-transparent)}})
 
 (def action-button-label-container
   {:padding-left 16})

src/status_im/components/styles.cljs

@@ -2,6 +2,8 @@
 
 (def color-transparent "transparent")
 (def color-blue "#7099e6")
+(def color-blue2 "#5b6dee")
+(def color-blue3 "#424fae")
 (def color-blue-transparent "#7099e632")
 (def color-black "#000000")
 (def color-purple "#a187d5")

src/status_im/components/text_input_with_label/styles.cljs

@@ -3,16 +3,16 @@
   (:require [status-im.utils.platform :refer [ios?]]
             [status-im.components.styles :as common]))
 
-(defstyle text-input
+(defnstyle text-input [content-height]
   {:placeholder  ""
-   :android      {:height         24
+   :android      {:height         (or content-height 24)
                   :padding-top    0
                   :padding-bottom 0
                   :padding-left   0
                   :margin-top     26
                   :margin-bottom  4
                   :font-size      16}
-   :ios          {:height         26
+   :ios          {:height         (or content-height 26)
                   :margin-top     24
                   :margin-bottom  6
                   :font-size      17
@@ -41,10 +41,8 @@
 (defstyle error-text
    {:color   common/color-red2
     :android {:margin-top     6
-              :height         14
               :font-size      12}
     :ios     {:margin-top     4
-              :height         16
               :font-size      14
               :letter-spacing -0.2}})
 

src/status_im/components/text_input_with_label/view.cljs

@@ -27,6 +27,7 @@
       :label-font-size-top    st/label-font-size-top
       :label-font-size-bottom st/label-font-size-bottom
       :underline-max-height   st/underline-max-height
+      :content-height*        (r/atom nil)
       :input-ref*             (r/atom nil)
       :value*                 (r/atom default-value)
       :underline-max-width*   (r/atom 0)}))
@@ -38,10 +39,16 @@
   (animate-label text props)
   (reset! (:value* props) text))
 
-(defn text-input-handlers [{:keys [on-focus on-blur on-change-text on-submit-editing ref]} props]
+(defn text-input-handlers [{:keys [on-focus on-blur on-change-text on-change on-submit-editing
+                                   auto-expanding multiline max-height ref]} props]
   {:ref               #(do
                          (reset! (:input-ref* props) %)
                          (when ref (ref %)))
+   :on-change         #(do
+                         (when (and auto-expanding multiline)
+                           (reset! (:content-height* props) (min (.-height (.-contentSize (.-nativeEvent %)))
+                                                                 max-height)))
+                         (when on-change (on-change %)))
    :on-submit-editing #(do
                          (.blur @(:input-ref* props))
                          (when on-submit-editing (on-submit-editing)))
@@ -57,18 +64,19 @@
 
 (defn text-input-with-label [options]
   (let [props (get-init-props options)]
-    (fn [{:keys [label description error] :as options}]
+    (fn [{:keys [label description error hide-underline?] :as options}]
       [view st/component-container
        [animated-text {:style (st/label-animated-text props)} label]
-       [text-input (merge st/text-input
+       [text-input (merge (st/text-input @(:content-height* props))
-                          (dissoc options :label :description :error)
+                          (dissoc options :label :description :error :hide-underline?)
                           (text-input-handlers options props))]
-       [view {:style (st/underline-blured error)
+       (when-not hide-underline?
-              :on-layout #(reset! (:underline-max-width* props) (get-width %))}
+         [view {:style (st/underline-blured error)
-        [animated-view {:style (st/underline-focused
+                :on-layout #(reset! (:underline-max-width* props) (get-width %))}
-                                 (:underline-width props)
+          [animated-view {:style (st/underline-focused
-                                 (:underline-height props)
+                                   (:underline-width props)
-                                 error)}]]
+                                   (:underline-height props)
+                                   error)}]])
        (cond error
              [text {:style st/error-text} error]
              description

src/status_im/components/toolbar_new/view.cljs

@@ -26,6 +26,7 @@
                 custom-content       :custom-content
                 hide-border?         :hide-border?
                 border-style         :border-style
+                title-style          :title-style
                 style                :style}]
   (let [style (merge (st/toolbar-wrapper background-color) style)]
     [view {:style style}
@@ -43,7 +44,7 @@
                      :style  icon-default}]]]))]
       (or custom-content
           [view {:style st/toolbar-title-container}
-           [text {:style st/toolbar-title-text
+           [text {:style (merge st/toolbar-title-text title-style)
                   :font  :toolbar-title}
             title]])
       [view (st/toolbar-actions-container (count actions) custom-action)

src/status_im/ios/core.cljs

@@ -43,7 +43,7 @@
             status-im.data-store.core
             [taoensso.timbre :as log]
             [status-im.chat.styles.screen :as st]
-            [status-im.accounts.views.qr-code :refer [qr-code-view]]
+            [status-im.profile.qr-code.screen :refer [qr-code-view]]
             [status-im.components.status :as status]))
 
 (defn orientation->keyword [o]

src/status_im/profile/handlers.cljs

@@ -6,7 +6,8 @@
             [status-im.i18n :refer [label]]
             [status-im.utils.handlers :as u :refer [get-hashtags]]
             [taoensso.timbre :as log]
-            [status-im.constants :refer [console-chat-id]]))
+            [status-im.constants :refer [console-chat-id]]
+            [status-im.navigation.handlers :as nav]))
 
 (defn message-user [identity]
   (when identity
@@ -64,3 +65,10 @@
   :open-edit-my-profile
   (-> prepare-edit-profile
       ((after open-edit-profile))))
+
+(defmethod nav/preload-data! :qr-code-view
+  [{:keys [current-account-id] :as db} [_ _ {:keys [contact qr-source amount?]}]]
+  (assoc db :qr-modal {:contact   (or contact
+                                      (get-in db [:accounts current-account-id]))
+                       :qr-source qr-source
+                       :amount?   amount?}))

src/status_im/profile/qr_code/screen.cljs

@@ -1,4 +1,4 @@
-(ns status-im.accounts.views.qr-code
+(ns status-im.profile.qr-code.screen
   (:require-macros [status-im.utils.views :refer [defview]])
   (:require [status-im.components.react :refer [view
                                                 text
@@ -9,7 +9,7 @@
             [status-im.components.styles :refer [icon-close]]
             [status-im.components.qr-code :refer [qr-code]]
             [re-frame.core :refer [dispatch subscribe]]
-            [status-im.accounts.styles :as st]
+            [status-im.profile.qr-code.styles :as st]
             [status-im.i18n :refer [label]]
             [clojure.string :as s]))
 
@@ -19,7 +19,6 @@
    {:keys [amount]} [:get :contacts-click-params]]
   [view st/wallet-qr-code
    [status-bar {:type :modal}]
-
    [view st/account-toolbar
     [view st/wallet-account-container
      [view st/qr-photo-container
@@ -34,11 +33,10 @@
        [view st/online-image-container
         [image {:source {:uri :icon_close_white}
                 :style  icon-close}]]]]]]
-
    [view {:style     st/qr-code
           :on-layout #(let [layout (.. % -nativeEvent -layout)]
-                       (dispatch [:set-in [:qr-modal :dimensions] {:width  (.-width layout)
+                        (dispatch [:set-in [:qr-modal :dimensions] {:width  (.-width layout)
-                                                                   :height (.-height layout)}]))}
+                                                                    :height (.-height layout)}]))}
     (when (:width dimensions)
       [view {:style (st/qr-code-container dimensions)}
        [qr-code {:value (if amount?
@@ -48,7 +46,6 @@
                  :size  (- (min (:width dimensions)
                                 (:height dimensions))
                            80)}]])]
-
    [view st/footer
     [view st/wallet-info
      [text {:style st/wallet-name-text} (label :t/main-wallet)]
@@ -58,3 +55,4 @@
      [view st/done-button
       [text {:style st/done-button-text} (label :t/done)]]]]])
 
+

src/status_im/profile/qr_code/styles.cljs

@@ -0,0 +1,104 @@
+(ns status-im.profile.qr-code.styles
+  (:require [status-im.components.styles :refer [color-white]]
+            [status-im.components.react :as r]))
+
+(def photo-container
+  {:flex           0.2
+   :flexDirection  :column
+   :alignItems     :center
+   :justifyContent :center})
+
+(def account-photo-container
+  {:flex           1
+   :width          36
+   :height         36
+   :alignItems     :center
+   :justifyContent :center})
+
+(def qr-photo-container
+  (merge photo-container
+         {:margin-left  8
+          :margin-right 4}))
+
+(defn qr-code-container [dimensions]
+  {:background-color "white"
+   :width            (:width dimensions)
+   :align-items      :center
+   :justify-content  :center
+   :padding          40})
+
+(def photo-image
+  {:width         36
+   :height        36
+   :border-radius 18})
+
+(def name-container
+  {:flex          1
+   :flexDirection :column})
+
+(def name-text
+  {:color    color-white
+   :fontSize 16})
+
+(def address-text
+  {:color    color-white
+   :fontSize 12})
+
+(def online-container
+  {:flex           0.2
+   :flexDirection  :column
+   :alignItems     :center
+   :justifyContent :center})
+
+(def online-image-container
+  {:width           40
+   :height          40
+   :margin-right    4
+   :align-items     :center
+   :justify-content :center})
+
+(def wallet-qr-code
+  {:flex-grow      1
+   :flex-direction :column})
+
+(def account-toolbar
+  {:background-color "#2f3031"})
+
+(def wallet-account-container
+  {:flex-grow      1
+   :flexDirection  :row
+   :height         69
+   :alignItems     :center
+   :justifyContent :center})
+
+(def qr-code
+  {:background-color "#2f3031"
+   :flex-grow        1
+   :align-items      :center
+   :justify-content  :center})
+
+(def footer
+  {:background-color "#2f3031"})
+
+(def wallet-info
+  {:align-items    :center
+   :padding-bottom 20
+   :padding-top    20})
+
+(def wallet-name-text
+  {:color          color-white
+   :padding-bottom 5})
+
+(def wallet-address-text
+  {:color "#999999"})
+
+(def done-button
+  {:flex-grow        1
+   :flex-direction   :column
+   :align-items      :center
+   :justify-content  :center
+   :height           51
+   :background-color "#7597e4"})
+
+(def done-button-text
+  {:color color-white})

src/status_im/translations/en.cljs

@@ -247,6 +247,8 @@
    :address                               "Address"
    :password                              "Password"
    :login                                 "Login"
+   :sign-in-to-status                     "Sign in to Status"
+   :sign-in                               "Sign in"
    :wrong-password                        "Wrong password"
 
    ;recover
@@ -256,10 +258,12 @@
    :recover                               "Recover"
    :enter-valid-passphrase                "Please enter a passphrase"
    :enter-valid-password                  "Please enter a password"
+   :twelve-words-in-correct-order         "12 words in correct order"
 
    ;accounts
    :recover-access                        "Recover access"
    :add-account                           "Add account"
+   :create-new-account                    "Create new account"
 
    ;wallet-qr-code
    :done                                  "Done"