diff --git a/resources/icons/angle_arrow_left.svg b/resources/icons/angle_arrow_left.svg new file mode 100755 index 0000000000..7bf9d0b787 --- /dev/null +++ b/resources/icons/angle_arrow_left.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/angle_arrow_right.svg b/resources/icons/angle_arrow_right.svg new file mode 100755 index 0000000000..468ed6435e --- /dev/null +++ b/resources/icons/angle_arrow_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/list_page.svg b/resources/icons/list_page.svg new file mode 100755 index 0000000000..4451d9842e --- /dev/null +++ b/resources/icons/list_page.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index f5aa3bef2d..41932316ed 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -119,7 +119,10 @@ :icons/add-wallet (components.svg/slurp-svg "./resources/icons/add_wallet.svg") :icons/address (components.svg/slurp-svg "./resources/icons/address.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/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-inactive (components.svg/slurp-svg "./resources/icons/flash_inactive.svg") :icons/attach (components.svg/slurp-svg "./resources/icons/attach.svg") diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index 4e1adaa56a..d9f4e3422f 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -3,8 +3,9 @@ (:require [status-im.ui.components.colors :as colors])) (def item - {:flex-direction :row - :justify-content :center}) + {:flex-direction :row + :justify-content :center + :padding-horizontal 16}) (def item-content-view {:flex 1 @@ -52,22 +53,17 @@ {:width icon-size :height icon-size}) -(def horizontal-margin 12) -(def vertical-margin 12) - (def left-item-wrapper {:justify-content :center - :margin-left horizontal-margin - :margin-vertical vertical-margin}) + :margin-vertical 12}) (def content-item-wrapper {:flex 1 :justify-content :center - :margin-horizontal horizontal-margin}) + :margin-horizontal 16}) (def right-item-wrapper - {:justify-content :center - :margin-right 12}) + {:justify-content :center}) (def base-separator {:height 1 @@ -135,4 +131,4 @@ {:flex 1 :width delete-button-width :justify-content :center - :align-items :center}) \ No newline at end of file + :align-items :center}) diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index 23a653e97e..a6b377b336 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -98,7 +98,8 @@ (def item-icon-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] (fn [data] @@ -189,8 +190,8 @@ {:sections (clj->js (map wrap-per-section-render-fn sections)) :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)})]) -(defn- render-action [{:keys [label accessibility-label icon action disabled?]} - {:keys [action-style action-label-style icon-opts]}] +(defn render-action [{:keys [label accessibility-label icon action disabled?]} + {:keys [action-style action-label-style icon-opts]}] [react/touchable-highlight {:on-press action} [react/view {:accessibility-label accessibility-label} [item @@ -234,4 +235,4 @@ [react/touchable-highlight {:style styles/delete-icon-highlight :on-press on-delete} [react/view {:style styles/delete-icon-container} - [vector-icons/icon :icons/delete {:color colors/red}]]]]]))) \ No newline at end of file + [vector-icons/icon :icons/delete {:color colors/red}]]]]]))) diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs index 4733df9cf2..6b4eb1aecb 100644 --- a/src/status_im/ui/screens/wallet/main/styles.cljs +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -46,27 +46,26 @@ (def total-balance-container {:align-items :center - :justify-content :center}) + :justify-content :center + :padding-top 49 + :padding-bottom 38}) (def total-balance {:flex-direction :row}) (def total-balance-value - {:font-size 37 - :color colors/white}) - -(def total-value - {:color colors/white-transparent}) + {:font-size 32 + :font-weight :bold + :color colors/white}) (def total-balance-tilde {:color colors/white-transparent}) (defstyle total-balance-currency - {:font-size 37 - :margin-left 9 - :color colors/white-transparent - :android {:letter-spacing 1.5} - :ios {:letter-spacing 1.16}}) + {:font-size 32 + :font-weight :bold + :margin-left 6 + :color colors/white-transparent}) (def snackbar-container {:background-color colors/gray}) @@ -100,9 +99,17 @@ (def asset-section {:flex 1 - :padding-top 16 + :padding-top 5 + :padding-bottom 20 :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 {:flex 1 :flex-direction :row diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index 6fc52c8770..657cedbf62 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -3,6 +3,7 @@ (:require [reagent.core :as reagent] [re-frame.core :as re-frame] [status-im.i18n :as i18n] + [status-im.ui.components.colors :as colors] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.toolbar.view :as toolbar] @@ -48,9 +49,7 @@ value] [react/text {:style styles/total-balance-currency :accessibility-label :total-amount-currency-text} - (:code currency)]] - [react/i18n-text {:style styles/total-value - :key :wallet-total-value}]]]) + (:code currency)]]]]) (defn- backup-seed-phrase [] [react/view styles/section @@ -64,17 +63,17 @@ [vector-icons/icon :icons/forward {:color :white}]]]]) (def actions - [{:label (i18n/label :t/send-transaction) + [{:label (i18n/label :t/wallet-send) :accessibility-label :send-transaction-button - :icon :icons/arrow-right + :icon :icons/angle-arrow-right :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 - :icon :icons/arrow-left + :icon :icons/angle-arrow-left :action #(re-frame/dispatch [:navigate-to :wallet-request-transaction])} {:label (i18n/label :t/transaction-history) :accessibility-label :transaction-history-button - :icon :icons/transaction-history + :icon :icons/list-page :action #(re-frame/dispatch [:navigate-to :transactions-history])}]) (defn- render-asset [currency] @@ -100,6 +99,7 @@ (def item-icon-forward [list/item-icon {:icon :icons/forward + :style {:width 12} :icon-opts {:color :gray}}]) (defn- render-collectible [address-hex {:keys [symbol name icon amount] :as collectible} modal?] @@ -131,9 +131,12 @@ (let [{:keys [tokens nfts]} (group-assets assets)] [react/view styles/asset-section [list/section-list - {:default-separator? true - :scroll-enabled false + {:scroll-enabled false :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) :key :assets :data tokens @@ -183,8 +186,11 @@ :accessibility-label :address-text :selectable true} address-hex]] - [list/action-list actions - {:container-style styles/action-section}]) + [react/view (merge {:background-color colors/blue} 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?] ;; Hack to allow different colors for bottom scroll view (iOS only) [react/view {:style styles/scroll-bottom}]])])) diff --git a/translations/en.json b/translations/en.json index 2c3b7089b0..d80e5d2722 100644 --- a/translations/en.json +++ b/translations/en.json @@ -372,7 +372,7 @@ "command-button-send": "Send", "currency-display-name-hkd": "Hong Kong Dollar", "your-recovery-phrase": "Your recovery phrase", - "transaction-history": "Transaction History", + "transaction-history": "Transaction history", "send-transaction": "Send transaction", "currency-display-name-ltl": "Lithuanian Litas", "step-i-of-n": "Step {{step}} of {{number}}", @@ -414,6 +414,7 @@ "request-transaction": "Request transaction", "notifications-new-message-title": "Status", "wallet-send": "Send", + "wallet-deposit": "Deposit", "invalid-key-title": "We detected a problem with the encryption key", "notifications": "Notifications", "currency-display-name-czk": "Czech Koruna",