status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#6786] restyle main wallet screen 

Signed-off-by: Jakub Sokołowski <jakub@status.im>
This commit is contained in:
Bruce Hauman 2018-11-19 21:59:51 -05:00 committed by Jakub Sokołowski
parent 5dd345fe49
commit f7c9f8631d
No known key found for this signature in database
GPG Key ID: 4EF064D0E6D63020
9 changed files with 63 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/icons/angle_arrow_left.svg Executable file
View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 12C7.55225 12 8 11.5523 8 11C8 10.4478 7.55225 10 7 10H3.41406L11.707 1.70718C12.0977 1.31656 12.0977 0.683502 11.707 0.292877C11.3167 -0.0976257 10.6833 -0.0976257 10.293 0.292877L2 8.58585V5.00003C2 4.44778 1.55225 4.00003 1 4.00003C0.447754 4.00003 0 4.44778 0 5.00003V11C0 11.5523 0.447754 12 1 12H7Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 436 B

3
resources/icons/angle_arrow_right.svg Executable file
View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 0C4.44775 -4.82789e-08 4 0.447754 4 1C4 1.55225 4.44775 2 5 2L8.58594 2L0.292969 10.2928C-0.0976562 10.6835 -0.0976563 11.3165 0.292969 11.7072C0.683349 12.0977 1.31665 12.0977 1.70703 11.7072L10 3.41419L10 7C10 7.55225 10.4478 8 11 8C11.5522 8 12 7.55225 12 7L12 1C12 0.447755 11.5522 5.72816e-07 11 5.24537e-07L5 0Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 449 B

3
resources/icons/list_page.svg Executable file
View File

@ -0,0 +1,3 @@
<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C1.34315 0 0 1.34315 0 3V15C0 16.6569 1.34315 18 3 18H13C14.6569 18 16 16.6569 16 15V3C16 1.34315 14.6569 0 13 0H3ZM2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V15C14 15.5523 13.5523 16 13 16H3C2.44772 16 2 15.5523 2 15V3ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6H11C11.5523 6 12 5.55228 12 5C12 4.44772 11.5523 4 11 4H5ZM4 9C4 8.44772 4.44772 8 5 8H11C11.5523 8 12 8.44772 12 9C12 9.55229 11.5523 10 11 10H5C4.44772 10 4 9.55229 4 9ZM5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12H5Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

3
src/status_im/ui/components/icons/vector_icons.cljs
View File

@ -119,7 +119,10 @@
:icons/add-wallet (components.svg/slurp-svg "./resources/icons/add_wallet.svg") :icons/add-wallet (components.svg/slurp-svg "./resources/icons/add_wallet.svg")
:icons/address (components.svg/slurp-svg "./resources/icons/address.svg") :icons/address (components.svg/slurp-svg "./resources/icons/address.svg")
:icons/arrow-left (components.svg/slurp-svg "./resources/icons/arrow_left.svg") :icons/arrow-left (components.svg/slurp-svg "./resources/icons/arrow_left.svg")
:icons/angle-arrow-left (components.svg/slurp-svg "./resources/icons/angle_arrow_left.svg")
:icons/arrow-right (components.svg/slurp-svg "./resources/icons/arrow_right.svg") :icons/arrow-right (components.svg/slurp-svg "./resources/icons/arrow_right.svg")
:icons/angle-arrow-right (components.svg/slurp-svg "./resources/icons/angle_arrow_right.svg")
:icons/list-page (components.svg/slurp-svg "./resources/icons/list_page.svg")
:icons/flash-active (components.svg/slurp-svg "./resources/icons/flash_active.svg") :icons/flash-active (components.svg/slurp-svg "./resources/icons/flash_active.svg")
:icons/flash-inactive (components.svg/slurp-svg "./resources/icons/flash_inactive.svg") :icons/flash-inactive (components.svg/slurp-svg "./resources/icons/flash_inactive.svg")
:icons/attach (components.svg/slurp-svg "./resources/icons/attach.svg") :icons/attach (components.svg/slurp-svg "./resources/icons/attach.svg")

16
src/status_im/ui/components/list/styles.cljs
View File

@ -3,8 +3,9 @@
(:require [status-im.ui.components.colors :as colors])) (:require [status-im.ui.components.colors :as colors]))
(def item (def item
{:flex-direction :row {:flex-direction :row
:justify-content :center}) :justify-content :center
:padding-horizontal 16})
(def item-content-view (def item-content-view
{:flex 1 {:flex 1
@ -52,22 +53,17 @@
{:width icon-size {:width icon-size
:height icon-size}) :height icon-size})
(def horizontal-margin 12)
(def vertical-margin 12)
(def left-item-wrapper (def left-item-wrapper
{:justify-content :center {:justify-content :center
:margin-left horizontal-margin :margin-vertical 12})
:margin-vertical vertical-margin})
(def content-item-wrapper (def content-item-wrapper
{:flex 1 {:flex 1
:justify-content :center :justify-content :center
:margin-horizontal horizontal-margin}) :margin-horizontal 16})
(def right-item-wrapper (def right-item-wrapper
{:justify-content :center {:justify-content :center})
:margin-right 12})
(def base-separator (def base-separator
{:height 1 {:height 1

7
src/status_im/ui/components/list/views.cljs
View File

@ -98,7 +98,8 @@
(def item-icon-forward (def item-icon-forward
[item-icon {:icon :icons/forward [item-icon {:icon :icons/forward
:icon-opts {:color colors/white-transparent}}]) :style {:width 12}
:icon-opts {:color colors/white}}])
(defn- wrap-render-fn [f] (defn- wrap-render-fn [f]
(fn [data] (fn [data]
@ -189,8 +190,8 @@
{:sections (clj->js (map wrap-per-section-render-fn sections)) {:sections (clj->js (map wrap-per-section-render-fn sections))
:renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)})]) :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)})])
(defn- render-action [{:keys [label accessibility-label icon action disabled?]} (defn render-action [{:keys [label accessibility-label icon action disabled?]}
{:keys [action-style action-label-style icon-opts]}] {:keys [action-style action-label-style icon-opts]}]
[react/touchable-highlight {:on-press action} [react/touchable-highlight {:on-press action}
[react/view {:accessibility-label accessibility-label} [react/view {:accessibility-label accessibility-label}
[item [item

31
src/status_im/ui/screens/wallet/main/styles.cljs
View File

@ -46,27 +46,26 @@
(def total-balance-container (def total-balance-container
{:align-items :center {:align-items :center
:justify-content :center}) :justify-content :center
:padding-top 49
:padding-bottom 38})
(def total-balance (def total-balance
{:flex-direction :row}) {:flex-direction :row})
(def total-balance-value (def total-balance-value
{:font-size 37 {:font-size 32
:color colors/white}) :font-weight :bold
:color colors/white})
(def total-value
{:color colors/white-transparent})
(def total-balance-tilde (def total-balance-tilde
{:color colors/white-transparent}) {:color colors/white-transparent})
(defstyle total-balance-currency (defstyle total-balance-currency
{:font-size 37 {:font-size 32
:margin-left 9 :font-weight :bold
:color colors/white-transparent :margin-left 6
:android {:letter-spacing 1.5} :color colors/white-transparent})
:ios {:letter-spacing 1.16}})
(def snackbar-container (def snackbar-container
{:background-color colors/gray}) {:background-color colors/gray})
@ -100,9 +99,17 @@
(def asset-section (def asset-section
{:flex 1 {:flex 1
:padding-top 16 :padding-top 5
:padding-bottom 20
:background-color colors/white}) :background-color colors/white})
(def asset-section-header
{:font-size 15
:color colors/gray
:margin-left 16
:margin-top 7
:margin-bottom 3})
(def asset-item-container (def asset-item-container
{:flex 1 {:flex 1
:flex-direction :row :flex-direction :row

30
src/status_im/ui/screens/wallet/main/views.cljs
View File

@ -3,6 +3,7 @@
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
@ -48,9 +49,7 @@
value] value]
[react/text {:style styles/total-balance-currency [react/text {:style styles/total-balance-currency
:accessibility-label :total-amount-currency-text} :accessibility-label :total-amount-currency-text}
(:code currency)]] (:code currency)]]]])
[react/i18n-text {:style styles/total-value
:key :wallet-total-value}]]])
(defn- backup-seed-phrase [] (defn- backup-seed-phrase []
[react/view styles/section [react/view styles/section
@ -64,17 +63,17 @@
[vector-icons/icon :icons/forward {:color :white}]]]]) [vector-icons/icon :icons/forward {:color :white}]]]])
(def actions (def actions
[{:label (i18n/label :t/send-transaction) [{:label (i18n/label :t/wallet-send)
:accessibility-label :send-transaction-button :accessibility-label :send-transaction-button
:icon :icons/arrow-right :icon :icons/angle-arrow-right
:action #(re-frame/dispatch [:navigate-to :wallet-send-transaction])} :action #(re-frame/dispatch [:navigate-to :wallet-send-transaction])}
{:label (i18n/label :t/receive-transaction) {:label (i18n/label :t/wallet-deposit)
:accessibility-label :receive-transaction-button :accessibility-label :receive-transaction-button
:icon :icons/arrow-left :icon :icons/angle-arrow-left
:action #(re-frame/dispatch [:navigate-to :wallet-request-transaction])} :action #(re-frame/dispatch [:navigate-to :wallet-request-transaction])}
{:label (i18n/label :t/transaction-history) {:label (i18n/label :t/transaction-history)
:accessibility-label :transaction-history-button :accessibility-label :transaction-history-button
:icon :icons/transaction-history :icon :icons/list-page
:action #(re-frame/dispatch [:navigate-to :transactions-history])}]) :action #(re-frame/dispatch [:navigate-to :transactions-history])}])
(defn- render-asset [currency] (defn- render-asset [currency]
@ -100,6 +99,7 @@
(def item-icon-forward (def item-icon-forward
[list/item-icon {:icon :icons/forward [list/item-icon {:icon :icons/forward
:style {:width 12}
:icon-opts {:color :gray}}]) :icon-opts {:color :gray}}])
(defn- render-collectible [address-hex {:keys [symbol name icon amount] :as collectible} modal?] (defn- render-collectible [address-hex {:keys [symbol name icon amount] :as collectible} modal?]
@ -131,9 +131,12 @@
(let [{:keys [tokens nfts]} (group-assets assets)] (let [{:keys [tokens nfts]} (group-assets assets)]
[react/view styles/asset-section [react/view styles/asset-section
[list/section-list [list/section-list
{:default-separator? true {:scroll-enabled false
:scroll-enabled false
:key-fn (comp str :symbol) :key-fn (comp str :symbol)
:render-section-header-fn (fn [{:keys [title data]}]
(when (not-empty data)
[react/text {:style styles/asset-section-header}
title]))
:sections [{:title (i18n/label :t/wallet-assets) :sections [{:title (i18n/label :t/wallet-assets)
:key :assets :key :assets
:data tokens :data tokens
@ -183,8 +186,11 @@
:accessibility-label :address-text :accessibility-label :address-text
:selectable true} :selectable true}
address-hex]] address-hex]]
[list/action-list actions [react/view (merge {:background-color colors/blue} styles/action-section)
{:container-style styles/action-section}]) [list/flat-list
{:data actions
:key-fn (fn [_ i] (str i))
:render-fn #(list/render-action % {:action-label-style {:font-size 17}})}]])
[asset-section assets currency address-hex modal?] [asset-section assets currency address-hex modal?]
;; Hack to allow different colors for bottom scroll view (iOS only) ;; Hack to allow different colors for bottom scroll view (iOS only)
[react/view {:style styles/scroll-bottom}]])])) [react/view {:style styles/scroll-bottom}]])]))

3
translations/en.json
View File

@ -372,7 +372,7 @@
"command-button-send": "Send", "command-button-send": "Send",
"currency-display-name-hkd": "Hong Kong Dollar", "currency-display-name-hkd": "Hong Kong Dollar",
"your-recovery-phrase": "Your recovery phrase", "your-recovery-phrase": "Your recovery phrase",
"transaction-history": "Transaction History", "transaction-history": "Transaction history",
"send-transaction": "Send transaction", "send-transaction": "Send transaction",
"currency-display-name-ltl": "Lithuanian Litas", "currency-display-name-ltl": "Lithuanian Litas",
"step-i-of-n": "Step {{step}} of {{number}}", "step-i-of-n": "Step {{step}} of {{number}}",
@ -414,6 +414,7 @@
"request-transaction": "Request transaction", "request-transaction": "Request transaction",
"notifications-new-message-title": "Status", "notifications-new-message-title": "Status",
"wallet-send": "Send", "wallet-send": "Send",
"wallet-deposit": "Deposit",
"invalid-key-title": "We detected a problem with the encryption key", "invalid-key-title": "We detected a problem with the encryption key",
"notifications": "Notifications", "notifications": "Notifications",
"currency-display-name-czk": "Czech Koruna", "currency-display-name-czk": "Czech Koruna",