diff --git a/android/app/src/main/res/drawable-hdpi/icon_add_white.png b/android/app/src/main/res/drawable-hdpi/icon_add_white.png index 60ab6e1281..f62379f4bd 100644 Binary files a/android/app/src/main/res/drawable-hdpi/icon_add_white.png and b/android/app/src/main/res/drawable-hdpi/icon_add_white.png differ diff --git a/android/app/src/main/res/drawable-hdpi/icon_dots_horizontal_white.png b/android/app/src/main/res/drawable-hdpi/icon_dots_horizontal_white.png new file mode 100644 index 0000000000..e1de2bfe71 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_dots_horizontal_white.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_add_white.png b/android/app/src/main/res/drawable-mdpi/icon_add_white.png new file mode 100644 index 0000000000..372f431217 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_add_white.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_dots_horizontal_white.png b/android/app/src/main/res/drawable-mdpi/icon_dots_horizontal_white.png new file mode 100644 index 0000000000..0afa8924df Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_dots_horizontal_white.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_add_white.png b/android/app/src/main/res/drawable-xhdpi/icon_add_white.png index be85af38f4..21f8a38791 100644 Binary files a/android/app/src/main/res/drawable-xhdpi/icon_add_white.png and b/android/app/src/main/res/drawable-xhdpi/icon_add_white.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_dots_horizontal_white.png b/android/app/src/main/res/drawable-xhdpi/icon_dots_horizontal_white.png new file mode 100644 index 0000000000..b1c599688a Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_dots_horizontal_white.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_add_white.png b/android/app/src/main/res/drawable-xxhdpi/icon_add_white.png index 2780585768..53e75041ee 100644 Binary files a/android/app/src/main/res/drawable-xxhdpi/icon_add_white.png and b/android/app/src/main/res/drawable-xxhdpi/icon_add_white.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_dots_horizontal_white.png b/android/app/src/main/res/drawable-xxhdpi/icon_dots_horizontal_white.png new file mode 100644 index 0000000000..5006a7dc6b Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_dots_horizontal_white.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_add_white.png b/android/app/src/main/res/drawable-xxxhdpi/icon_add_white.png index 97b4682acb..d80fbf20be 100644 Binary files a/android/app/src/main/res/drawable-xxxhdpi/icon_add_white.png and b/android/app/src/main/res/drawable-xxxhdpi/icon_add_white.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_dots_horizontal_white.png b/android/app/src/main/res/drawable-xxxhdpi/icon_dots_horizontal_white.png new file mode 100644 index 0000000000..41a814f985 Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_dots_horizontal_white.png differ diff --git a/ios/StatusIm/Images.xcassets/icon_add_white.imageset/Contents.json b/ios/StatusIm/Images.xcassets/icon_add_white.imageset/Contents.json index 32c01ec112..56e9fea993 100644 --- a/ios/StatusIm/Images.xcassets/icon_add_white.imageset/Contents.json +++ b/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" }, { diff --git a/ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add.png b/ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add.png deleted file mode 100644 index 2780585768..0000000000 Binary files a/ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add.png and /dev/null differ diff --git a/ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add_white.png b/ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add_white.png new file mode 100644 index 0000000000..21f8a38791 Binary files /dev/null and b/ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add_white.png differ diff --git a/ios/StatusIm/Images.xcassets/icon_dots_horizontal_white.imageset/Contents.json b/ios/StatusIm/Images.xcassets/icon_dots_horizontal_white.imageset/Contents.json new file mode 100644 index 0000000000..4a425b4616 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/ios/StatusIm/Images.xcassets/icon_dots_horizontal_white.imageset/icon_dots_horizontal_white.png b/ios/StatusIm/Images.xcassets/icon_dots_horizontal_white.imageset/icon_dots_horizontal_white.png new file mode 100644 index 0000000000..b1c599688a Binary files /dev/null and b/ios/StatusIm/Images.xcassets/icon_dots_horizontal_white.imageset/icon_dots_horizontal_white.png differ diff --git a/src/status_im/accounts/handlers.cljs b/src/status_im/accounts/handlers.cljs index 6421cefc20..4c67abe434 100644 --- a/src/status_im/accounts/handlers.cljs +++ b/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?})) diff --git a/src/status_im/accounts/login/handlers.cljs b/src/status_im/accounts/login/handlers.cljs index 469c31cb0b..8eed1806c6 100644 --- a/src/status_im/accounts/login/handlers.cljs +++ b/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 {}]) diff --git a/src/status_im/accounts/login/screen.cljs b/src/status_im/accounts/login/screen.cljs index d298b924bb..e6041d31f5 100644 --- a/src/status_im/accounts/login/screen.cljs +++ b/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 - linear-gradient - 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])) + touchable-highlight]] + [status-im.i18n :as i18n])) -(defn toolbar-title [] - [view toolbar-title-container - [text {:style (merge toolbar-title-text {:color color-white}) - :font :medium} - (label :t/login)]]) - -(defview address-input [address] - [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] ""]))}]]) +(defn login-toolbar [] + [toolbar {:background-color :transparent + :hide-border? true + :title-style {:color :white} + :nav-action (act/back-white #(dispatch [:navigate-back])) + :actions [{:image :blank}] + :title (i18n/label :t/sign-in-to-status)}]) (defview login [] - [{:keys [address password error]} [:get :login] - keyboard-height [:get :keyboard-height]] - [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}] + [{:keys [address photo-path name password error]} [:get :login]] + [view ast/accounts-container [status-bar {:type :transparent}] - [toolbar {:background-color :transparent - :nav-action (act/back-white #(dispatch [:navigate-back])) - :custom-content [toolbar-title] - :actions [{:image {:style icon-search} - :handler #()}]}] - [view st/form-container - [view st/form-container-inner - [address-input (or address "")] - [password-input error]]] - [view st/bottom-actions-container - [view st/connect-button-container + [login-toolbar] + [view st/login-view + [view st/login-badge-container + [account-bage address photo-path name] + [view {:height 8}] + [text-input-with-label {:label (i18n/label :t/password) + :auto-capitalize :none + :hide-underline? true + :on-change-text #(do + (dispatch [:set-in [:login :password] %]) + (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 - [text {:style st/connect-button-text} - (label :t/connect)]]]]]]) + [view st/sign-in-button + [text {:style st/sign-it-text} (i18n/label :t/sign-in)]]]]]]) diff --git a/src/status_im/accounts/login/styles.cljs b/src/status_im/accounts/login/styles.cljs index 988aaa4992..1126c94628 100644 --- a/src/status_im/accounts/login/styles.cljs +++ b/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 - color-blue]])) + (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) + (: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] - {:height height}) +(defstyle login-badge-container + {:background-color :white + :ios {:border-radius 8 + :padding-top 16 + :height 150} + :android {:border-radius 4 + :padding-top 12 + :height 144}}) -(def gradient-background - {:position :absolute - :top 0 - :right 0 - :bottom 0 - :left 0}) +(defstyle sign-it-text + {:color :white + :ios {:font-size 17 + :letter-spacing -0.2} + :android {:font-size 16}}) -(def form-container - {:flex 1 - :flex-direction "row" - :align-items "center" - :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 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 - {}) +(defstyle sign-in-button + {:background-color common/color-blue3 + :align-items :center + :justify-content :center + :height 52 + :ios {:border-radius 8} + :android {:border-radius 4}}) diff --git a/src/status_im/accounts/recover/handlers.cljs b/src/status_im/accounts/recover/handlers.cljs index d4cc7fd866..5408308ea8 100644 --- a/src/status_im/accounts/recover/handlers.cljs +++ b/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)) diff --git a/src/status_im/accounts/recover/screen.cljs b/src/status_im/accounts/recover/screen.cljs index e4982cce72..7638d78195 100644 --- a/src/status_im/accounts/recover/screen.cljs +++ b/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.view :refer [toolbar]] - [status-im.components.toolbar.actions :as act] - [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.components.toolbar-new.view :refer [toolbar]] + [status-im.components.toolbar-new.actions :as act] + [status-im.i18n :as i18n] [status-im.accounts.recover.styles :as st] [status-im.accounts.recover.validations :as v] - [cljs.spec :as s] - [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)]]) + [cljs.spec :as spec] + [clojure.string :as str])) (defview passphrase-input [passphrase] [error [:get-in [:recover :passphrase-error]]] - (let [error (if (str/blank? passphrase) "" error) - error (if (s/valid? ::v/passphrase passphrase) - error - (label :t/enter-valid-passphrase))] - [view - [text-field - {:value passphrase - :error error - :error-color color-blue - :label (label :t/passphrase) - :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] %])}]])) + [view {:margin-top 10} + [text-input-with-label {:label (i18n/label :t/passphrase) + :description (i18n/label :t/twelve-words-in-correct-order) + :multiline true + :auto-expanding true + :max-height st/passphrase-input-max-height + :default-value passphrase + :auto-capitalize :none + :on-change-text #(dispatch [:set-in [:recover :passphrase] %]) + :error error}]]) (defview password-input [password] [error [:get-in [:recover :password-error]]] - (let [error (if (str/blank? password) "" error) - error (if (s/valid? ::v/password password) - error - (label :t/enter-valid-password))] - [view - [text-field - {:value password - :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] %])}]])) + [view {:margin-top 10} + [text-input-with-label {:label (i18n/label :t/password) + :default-value password + :auto-capitalize :none + :on-change-text #(dispatch [:set-in [:recover :password] %]) + :secure-text-entry true + :error error}]]) (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) - (s/valid? ::v/password password)) - gradient-colors ["rgba(24, 52, 76, 0.165)" - "rgba(24, 52, 76, 0.085)" - "rgba(24, 52, 76, 0)"] - _ (log/debug passphrase " - " password)] - [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 + (spec/valid? ::v/passphrase passphrase) + (spec/valid? ::v/password password))] + [keyboard-avoiding-view {:style st/screen-container} + [status-bar] + [toolbar {:actions [{:image :blank}] + :title (i18n/label :t/recover-access)}] [passphrase-input (or passphrase "")] - [password-input (or password "")]]] - [view st/bottom-actions-container - [view st/recover-button-container - [touchable-highlight - {: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)]]]]]])) + [password-input (or password "")] + [view {:flex 1}] + (when valid-form? + [sticky-button (i18n/label :t/recover-access) #(dispatch [:recover-account passphrase password])])])) \ No newline at end of file diff --git a/src/status_im/accounts/recover/styles.cljs b/src/status_im/accounts/recover/styles.cljs index 1637012d5d..476ade2b94 100644 --- a/src/status_im/accounts/recover/styles.cljs +++ b/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 - color-gray - color-blue]])) - + (:require [status-im.components.styles :as common] + [status-im.utils.platform :refer [ios?]])) (def screen-container {:flex 1 - :color :white - :background-color color-white}) + :background-color common/color-white}) -(def gradient-background - {:position :absolute - :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 - {}) +(def passphrase-input-max-height + (if ios? 78 72)) diff --git a/src/status_im/accounts/screen.cljs b/src/status_im/accounts/screen.cljs index bb39c9b635..6a8202ef75 100644 --- a/src/status_im/accounts/screen.cljs +++ b/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.components.toolbar.view :refer [toolbar]] - [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]])) + [status-im.i18n :as i18n] + [clojure.string :as str])) -(defn toolbar-title [] - (let [style (merge toolbar-title-text {:color color-white})] - [view toolbar-title-container - [text {:style style - :font :medium} - (label :t/switch-users)]])) +(defn account-bage [address photo-path name] + [view st/account-bage + [image {:source {:uri (if (str/blank? photo-path) :avatar photo-path)} + :style st/photo-image}] + [view st/account-bage-text-view + [text {:style st/account-bage-text + :numberOfLines 1} + (or name address)]]]) -(defn render-row [row _ _] - (list-item [account-view row])) +(defn account-view [{:keys [address photo-path name] :as account}] + [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] - stack [:get :navigation-stack]] - (let [accounts (vals accounts) - show-back? (> (count stack) 1)] - [view st/screen-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} - [status-bar {:type :transparent}] - [toolbar {:background-color :transparent - :nav-action (if show-back? - (act/back-white #(dispatch [:navigate-back])) - act/nothing) - :custom-content [toolbar-title] - :actions [{:image {:style icon-search} - :handler #()}]}]] - [list-view {:dataSource (lw/to-datasource accounts) - :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)]]]]]])) + [accounts [:get :accounts]] + [view st/accounts-container + [status-bar {:type :transparent}] + [view st/account-title-conatiner + [text {:style st/account-title-text + :font :toolbar-title} + (i18n/label :t/sign-in-to-status)]] + [view st/accounts-list-container + [list-view {:dataSource (lw/to-datasource (vals accounts)) + :renderSeparator #(list-item ^{:key %2} [view {:height 10}]) + :renderRow #(list-item [account-view %])}]] + [view st/bottom-actions-container + [action-button (i18n/label :t/create-new-account) + :add_white + create-account + st/accounts-action-button] + [common/separator st/accounts-separator st/accounts-separator-wrapper] + [action-button (i18n/label :t/recover-access) + :dots_horizontal_white + #(dispatch [:navigate-to :recover]) + st/accounts-action-button]]]) \ No newline at end of file diff --git a/src/status_im/accounts/styles.cljs b/src/status_im/accounts/styles.cljs index e50cd0f9f9..6c1c282394 100644 --- a/src/status_im/accounts/styles.cljs +++ b/src/status_im/accounts/styles.cljs @@ -1,184 +1,68 @@ (ns status-im.accounts.styles - (:require [status-im.components.styles :refer [color-white]] - [status-im.components.react :as r])) + (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) + (:require [status-im.components.styles :as common])) - -(def screen-container - {:flex 1 - :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 accounts-container + {:flex 1 + :background-color common/color-blue2}) (def bottom-actions-container - {:position :absolute - :left 0 - :right 0 - :bottom 0}) + {:margin-bottom 16}) -(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 - :paddingHorizontal 28 - :justifyContent :center - :alignItems :center}) + :margin-horizontal 16 + :ios {:margin-top 10 + :margin-bottom 10} + :android {:margin-top 16 + :margin-bottom 16}}) -(def add-account-button - {:flexDirection :row}) +(def accounts-action-button + {:label-style {:color :white} + :cyrcle-color "#ffffff33"}) -(def icon-plus - {:flexDirection :column - :paddingTop 2 - :width 20 - :height 20}) +(def accounts-separator + {:background-color "#7482eb" + :opacity 1 + :margin-left 72}) -(def add-account-text - {:flexDirection :column - :color :white - :fontSize 16 - :marginLeft 8}) +(def accounts-separator-wrapper + {:background-color common/color-blue2}) -(def recover-button-container - {:flex 1}) - -(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 +(defstyle account-view + {:background-color :white :justify-content :center - :height 51 - :background-color "#7597e4"}) + :height 64 + :ios {:border-radius 8} + :android {:border-radius 4}}) -(def done-button-text - {:color color-white}) +(def account-bage + {: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}}) diff --git a/src/status_im/accounts/views/account.cljs b/src/status_im/accounts/views/account.cljs deleted file mode 100644 index cc836c3fd7..0000000000 --- a/src/status_im/accounts/views/account.cljs +++ /dev/null @@ -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}])]]]) diff --git a/src/status_im/android/core.cljs b/src/status_im/android/core.cljs index 13ba9bac22..32c4fbb0c1 100644 --- a/src/status_im/android/core.cljs +++ b/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 [] diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index fb400a89d3..b079ed5964 100644 --- a/src/status_im/android/platform.cljs +++ b/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} diff --git a/src/status_im/components/action_button/action_button.cljs b/src/status_im/components/action_button/action_button.cljs index ee86737d69..e9f2b0eca2 100644 --- a/src/status_im/components/action_button/action_button.cljs +++ b/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] diff --git a/src/status_im/components/action_button/styles.cljs b/src/status_im/components/action_button/styles.cljs index fd1cd4c17a..6b34b8d718 100644 --- a/src/status_im/components/action_button/styles.cljs +++ b/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}) diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 2bc04149dc..e5a49755da 100644 --- a/src/status_im/components/styles.cljs +++ b/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") diff --git a/src/status_im/components/text_input_with_label/styles.cljs b/src/status_im/components/text_input_with_label/styles.cljs index 874002017a..b385ea9367 100644 --- a/src/status_im/components/text_input_with_label/styles.cljs +++ b/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}}) diff --git a/src/status_im/components/text_input_with_label/view.cljs b/src/status_im/components/text_input_with_label/view.cljs index 21c567aab1..5275810d5a 100644 --- a/src/status_im/components/text_input_with_label/view.cljs +++ b/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 - (dissoc options :label :description :error) + [text-input (merge (st/text-input @(:content-height* props)) + (dissoc options :label :description :error :hide-underline?) (text-input-handlers options props))] - [view {:style (st/underline-blured error) - :on-layout #(reset! (:underline-max-width* props) (get-width %))} - [animated-view {:style (st/underline-focused - (:underline-width props) - (:underline-height props) - error)}]] + (when-not hide-underline? + [view {:style (st/underline-blured error) + :on-layout #(reset! (:underline-max-width* props) (get-width %))} + [animated-view {:style (st/underline-focused + (:underline-width props) + (:underline-height props) + error)}]]) (cond error [text {:style st/error-text} error] description diff --git a/src/status_im/components/toolbar_new/view.cljs b/src/status_im/components/toolbar_new/view.cljs index a7b78f4488..c5d700b749 100644 --- a/src/status_im/components/toolbar_new/view.cljs +++ b/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) diff --git a/src/status_im/ios/core.cljs b/src/status_im/ios/core.cljs index a4368bfcf7..75d1b09dbf 100644 --- a/src/status_im/ios/core.cljs +++ b/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] diff --git a/src/status_im/profile/handlers.cljs b/src/status_im/profile/handlers.cljs index 31e0199608..27ab94c80f 100644 --- a/src/status_im/profile/handlers.cljs +++ b/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?})) diff --git a/src/status_im/accounts/views/qr_code.cljs b/src/status_im/profile/qr_code/screen.cljs similarity index 91% rename from src/status_im/accounts/views/qr_code.cljs rename to src/status_im/profile/qr_code/screen.cljs index 656a55170c..d055dd8de3 100644 --- a/src/status_im/accounts/views/qr_code.cljs +++ b/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) - :height (.-height layout)}]))} + (dispatch [:set-in [:qr-modal :dimensions] {:width (.-width 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)]]]]]) + diff --git a/src/status_im/profile/qr_code/styles.cljs b/src/status_im/profile/qr_code/styles.cljs new file mode 100644 index 0000000000..4292dd0ed6 --- /dev/null +++ b/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}) diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 789a968a7f..b765274e65 100644 --- a/src/status_im/translations/en.cljs +++ b/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"