diff --git a/android/app/src/main/res/drawable-hdpi/avatar.png b/android/app/src/main/res/drawable-hdpi/avatar.png new file mode 100644 index 0000000000..b1c2c64e3d Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/avatar.png differ diff --git a/android/app/src/main/res/drawable-hdpi/icon_plus.png b/android/app/src/main/res/drawable-hdpi/icon_plus.png new file mode 100644 index 0000000000..19e2a45b57 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_plus.png differ diff --git a/android/app/src/main/res/drawable-mdpi/avatar.png b/android/app/src/main/res/drawable-mdpi/avatar.png new file mode 100644 index 0000000000..f208650ddb Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/avatar.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_plus.png b/android/app/src/main/res/drawable-mdpi/icon_plus.png new file mode 100644 index 0000000000..a26e891239 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_plus.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/avatar.png b/android/app/src/main/res/drawable-xhdpi/avatar.png new file mode 100644 index 0000000000..8cc91adff5 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/avatar.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_plus.png b/android/app/src/main/res/drawable-xhdpi/icon_plus.png new file mode 100644 index 0000000000..00f6f9cdb8 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_plus.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/avatar.png b/android/app/src/main/res/drawable-xxhdpi/avatar.png new file mode 100644 index 0000000000..7fb2d0b42b Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/avatar.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_plus.png b/android/app/src/main/res/drawable-xxhdpi/icon_plus.png new file mode 100644 index 0000000000..dad95d1814 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_plus.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/avatar.png b/android/app/src/main/res/drawable-xxxhdpi/avatar.png new file mode 100644 index 0000000000..c33ac67619 Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/avatar.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_plus.png b/android/app/src/main/res/drawable-xxxhdpi/icon_plus.png new file mode 100644 index 0000000000..4474449b88 Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_plus.png differ diff --git a/src/status_im/login/handlers.cljs b/src/status_im/login/handlers.cljs new file mode 100644 index 0000000000..62315642bd --- /dev/null +++ b/src/status_im/login/handlers.cljs @@ -0,0 +1,23 @@ +(ns status-im.login.handlers + (:require [re-frame.core :refer [register-handler after dispatch]] + [status-im.utils.handlers :as u])) + + +(defn set-login-from-qr + [{:keys [login] :as db} [_ _ login-info]] + (assoc db :login (merge login login-info))) + +(register-handler :set-login-from-qr set-login-from-qr) + + +(defn go-back + [_ _] + (dispatch [:navigate-back])) + +(defn login + [{:keys [login] :as db} [_ _]] + (assoc db :current-account {:address (:address login)})) + +(register-handler :login-account + (-> login + ((after go-back)))) \ No newline at end of file diff --git a/src/status_im/login/screen.cljs b/src/status_im/login/screen.cljs new file mode 100644 index 0000000000..e8974cffff --- /dev/null +++ b/src/status_im/login/screen.cljs @@ -0,0 +1,83 @@ +(ns status-im.login.screen + (:require-macros [status-im.utils.views :refer [defview]]) + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [status-im.components.react :refer [view + text + text-input + image + linear-gradient + touchable-highlight]] + [status-im.components.toolbar :refer [toolbar]] + [status-im.components.styles :refer [color-purple + color-white + icon-search + icon-back + icon-qr + toolbar-background1 + 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.login.styles :as st])) + +(def toolbar-title + [view toolbar-title-container + [text {:style (merge toolbar-title-text {:color color-white})} + (label :t/login)]]) + +(defview address-input [address] + [view button-input-container + [text-input + {:underlineColorAndroid color-white + :placeholderTextColor color-white + :style (merge white-form-text-input button-input) + :autoFocus true + :placeholder (label :t/address) + :onChangeText #(dispatch [:set-in [:login :address] %])} + address] + [import-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/login)} :set-address-from-qr])]]) + +(defview password-input [] + [] + [text-input + {:underlineColorAndroid color-white + :placeholderTextColor color-white + :style white-form-text-input + :autoFocus true + :placeholder (label :t/password) + :onChangeText #(dispatch [:set-in [:login :password] %])} + ""]) + +(defview login [] + [{:keys [address]} [:get :login]] + [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}] + + [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 {:style icon-search} + :handler #()}}] + [view st/form-container + [address-input (or address "")] + [password-input] + ] + [view st/bottom-actions-container + [view st/recover-text-container + [touchable-highlight + {:on-press #()} + [text {:style st/recover-text} (label :t/recover-from-passphrase)]]] + [view st/connect-button-container + [touchable-highlight + {:on-press #(dispatch [:login-account])} + [view st/connect-button + [text {:style st/connect-button-text} (label :t/connect)]]]]]]) diff --git a/src/status_im/login/styles.cljs b/src/status_im/login/styles.cljs new file mode 100644 index 0000000000..677c3e7799 --- /dev/null +++ b/src/status_im/login/styles.cljs @@ -0,0 +1,54 @@ +(ns status-im.login.styles + (:require [status-im.components.styles :refer [font + title-font + text1-color + color-white + toolbar-background2 + online-color]])) + + +(def screen-container + {:flex 1 + :color :white}) + +(def gradient-background + {:position :absolute + :top 0 + :right 0 + :bottom 0 + :left 0}) + +(def form-container + {:marginLeft 16 + :margin-top 70}) + +(def bottom-actions-container + {:position :absolute + :left 0 + :right 0 + :bottom 16}) + +(def recover-text-container + {:flex 1 + :flexWrap :nowrap + :padding 16}) + +(def recover-text + {:flex 1 + :color color-white}) + +(def connect-button-container + {:position :absolute + :right 16 + :top 0}) + +(def connect-button + {:backgroundColor color-white + :borderRadius 55 + :paddingVertical 16 + :paddingHorizontal 28 + }) + +(def connect-button-text + {:color "#7099e6" + :fontSize 16}) \ No newline at end of file diff --git a/src/status_im/users/handlers.cljs b/src/status_im/users/handlers.cljs new file mode 100644 index 0000000000..7aa5f85efa --- /dev/null +++ b/src/status_im/users/handlers.cljs @@ -0,0 +1 @@ +(ns status-im.users.handlers) \ No newline at end of file diff --git a/src/status_im/users/screen.cljs b/src/status_im/users/screen.cljs new file mode 100644 index 0000000000..b40e29a30d --- /dev/null +++ b/src/status_im/users/screen.cljs @@ -0,0 +1,68 @@ +(ns status-im.users.screen + (:require-macros [status-im.utils.views :refer [defview]]) + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [status-im.components.react :refer [view + text + list-view + list-item + image + linear-gradient + touchable-highlight]] + [status-im.components.toolbar :refer [toolbar]] + [status-im.components.styles :refer [color-purple + color-white + icon-search + icon-back + icon-qr + toolbar-background1 + toolbar-title-container + toolbar-title-text + button-input-container + button-input + white-form-text-input]] + [status-im.utils.listview :as lw] + [status-im.users.views.user :refer [user-view]] + [status-im.i18n :refer [label]] + [status-im.users.styles :as st])) + +(def toolbar-title + [view toolbar-title-container + [text {:style (merge toolbar-title-text {:color color-white})} + (label :t/switch-users)]]) + +(defn render-row [row _ _] + (list-item [user-view row])) + +(defn render-separator [_ row-id _] + (list-item [view {:style st/row-separator + :key row-id}])) + +(defview users [] + [accounts [:get :accounts]] + (let [accounts (conj accounts {:name (label :t/add-account) + :address "0x0" + :photo-path :icon_plus})] + [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}] + + [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 {:style icon-search} + :handler #()}}] + + [view st/user-list-container + [list-view {:dataSource (lw/to-datasource accounts) + :enableEmptySections true + :renderRow render-row + :renderSeparator render-separator + :style st/user-list}]]])) + + +;(re-frame.core/dispatch [:set :view-id :users]) \ No newline at end of file diff --git a/src/status_im/users/styles.cljs b/src/status_im/users/styles.cljs new file mode 100644 index 0000000000..1c580d8f73 --- /dev/null +++ b/src/status_im/users/styles.cljs @@ -0,0 +1,83 @@ +(ns status-im.users.styles + (:require [status-im.components.styles :refer [font + title-font + text1-color + color-white + toolbar-background2 + online-color]])) + + +(def screen-container + {:flex 1 + :color :white}) + +(def gradient-background + {:position :absolute + :top 0 + :right 0 + :bottom 0 + :left 0}) + +(def user-list-container1 + {:position :absolute + :top 56 + :right 0 + :bottom 0 + :left 0 + :justifyContent :center}) + +(def user-list-container + {:flex 1 + :flexDirection :column + :justifyContent :center}) + +(def user-list + {}) + +(def row-separator + {:borderBottomWidth 1 + :borderBottomColor "#bababa"}) + +(def user-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 user-photo-container + {:flex 1 + :backgroundColor "rgba(255, 255, 255, 0.2)" + :borderRadius 50 + :width 36 + :height 36 + :alignItems :center + :justifyContent :center}) + +(def photo-image + {:borderRadius 50 + :width 36 + :height 36}) + +(def name-container + {:flex 1 + :flexDirection :column}) + +(def name-text + {:color color-white}) + +(def address-text + {:color color-white}) + +(def online-container + {:flex 0.2 + :flexDirection :column + :alignItems :center + :justifyContent :center}) diff --git a/src/status_im/users/subs.cljs b/src/status_im/users/subs.cljs new file mode 100644 index 0000000000..805245ffd2 --- /dev/null +++ b/src/status_im/users/subs.cljs @@ -0,0 +1 @@ +(ns status-im.users.subs) \ No newline at end of file diff --git a/src/status_im/users/views/user.cljs b/src/status_im/users/views/user.cljs new file mode 100644 index 0000000000..3ff295ed10 --- /dev/null +++ b/src/status_im/users/views/user.cljs @@ -0,0 +1,39 @@ +(ns status-im.users.views.user + (:require-macros [status-im.utils.views :refer [defview]]) + (:require [clojure.string :as s] + [status-im.resources :as res] + [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.users.styles :as st])) + +(defn on-press [address] + (dispatch [:navigate-to :login address]) + (dispatch [:set-in [:login :address] address])) + +(defview user-view [{:keys [address photo-path name ] :as account}] + [current-account [:get :current-account]] + [touchable-highlight + {:onPress #(on-press address)} + [view st/user-container + [view st/photo-container + [view st/user-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} name] + (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}])]]])