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

Various styling fixes for wallet 

[bugfix] transaction details background should be white

[bugfix] button styling in unsigned transactions

[bugfix] make whole item touchable in transactions history and unsigned

[bugfix] correction of icons styling in transactions history

[bugfix] error message should not touch the toolbar in wallet

[bugfix] add asset icon and text are different on ios and android

PR review fixes
This commit is contained in:
Eric Dvorsak 2017-09-28 13:53:49 +02:00 committed by Roman Volosovskyi
parent 69a6baf09b
commit db7614f8f7
7 changed files with 90 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/status_im/components/button/view.cljs
View File

@ -3,21 +3,32 @@
[status-im.components.react :as react]
[status-im.utils.platform :as platform]))
(defn- button [{:keys [on-press style text text-style disabled?]}]
[react/touchable-highlight (merge {:style button.styles/button-container :underlay-color button.styles/border-color-high} (when (and on-press (not disabled?)) {:on-press on-press}))
(defn- button [{:keys [on-press style text text-style disabled? fit-to-text?]}]
[react/touchable-highlight (merge {:underlay-color button.styles/border-color-high}
(when-not fit-to-text?
{:style button.styles/button-container})
(when (and on-press
(not disabled?))
{:on-press on-press}))
[react/view {:style (merge (button.styles/button disabled?)
style)}
[react/text {:style (merge (button.styles/button-text disabled?)
text-style)
:font :medium
:uppercase? platform/android?}
:font :medium
:uppercase? platform/android?}
text]]])
(defn primary-button [m]
(button (merge {:style button.styles/primary-button :text-style button.styles/primary-button-text} m)))
(defn primary-button [{:keys [style text-style] :as m}]
(button (assoc m
:fit-to-text? true
:style (merge button.styles/primary-button style)
:text-style (merge button.styles/primary-button-text text-style))))
(defn secondary-button [m]
(button (merge {:style button.styles/secondary-button :text-style button.styles/secondary-button-text} m)))
(defn secondary-button [{:keys [style text-style] :as m}]
(button (assoc m
:fit-to-text? true
:style (merge button.styles/secondary-button style)
:text-style (merge button.styles/secondary-button-text text-style))))
(defn- position [i v]
(cond
@ -30,6 +41,8 @@
([{:keys [style button-text-style]} v]
[react/view {:style (merge button.styles/buttons-container style)}
(doall
(map-indexed
(fn [i m] ^{:key i} [button (merge m {:style (button.styles/button-bar (position i v)) :text-style button-text-style})])
v))]))
(map-indexed
(fn [i m] ^{:key i} [button (merge m
{:style (button.styles/button-bar (position i v))
:text-style button-text-style})])
v))]))

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

@ -3,19 +3,25 @@
(:require [status-im.components.styles :as styles]
[status-im.utils.platform :as platform]))
(def error-container
;; Errors
(defstyle error-container
{:align-self :center
:justify-content :center
:border-radius 20
:flex-direction :row
:ios {:border-radius 20
:margin-top 6}
:android {:border-radius 4
:margin-top 18}
:background-color styles/color-blue5})
(def error-message
{:color styles/color-white
:padding-top 3
:padding-right 10
:font-size 13})
;; Toolbar
(def toolbar-title-container
{:flex-direction :row
:padding-left 24})
@ -32,9 +38,8 @@
(def toolbar-title-icon
(merge toolbar-icon {:opacity 0.4}))
;;;;;;;;;;;;;;;;;;
;; Main section ;;
;;;;;;;;;;;;;;;;;;
;; Main section
(def main-section
{:background-color styles/color-blue4})
@ -104,9 +109,7 @@
:padding-horizontal nil
:android {:letter-spacing 0.46}})
;;;;;;;;;;;;;;;;;;;;
;; Assets section ;;
;;;;;;;;;;;;;;;;;;;;
;; Assets section
(def asset-section
{:flex 1
@ -127,18 +130,19 @@
{:font-size 16
:color styles/color-black})
(def add-asset-icon
(defstyle add-asset-icon
{:flex 1
:justify-content :center
:align-items :center
:width 40
:height 40
:border-radius 32
:background-color styles/color-blue4-transparent})
:ios {:background-color styles/color-blue4-transparent}})
(def add-asset-text
(defstyle add-asset-text
{:font-size 16
:color styles/color-blue4})
:ios {:color styles/color-blue4}
:android {:color styles/color-black}})
(def asset-item-currency
{:font-size 16

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

@ -61,7 +61,8 @@
(defn main-section [usd-value change error-message]
[react/view {:style styles/main-section}
(when error-message [wallet.views/error-message-view styles/error-container styles/error-message])
(when error-message
[wallet.views/error-message-view styles/error-container styles/error-message])
[react/view {:style styles/total-balance-container}
[react/view {:style styles/total-balance}
[react/text {:style styles/total-balance-value} usd-value]
@ -74,7 +75,7 @@
[{:text (i18n/label :t/wallet-send)
:on-press #(do (rf/dispatch [:navigate-to :wallet-send-transaction])
(when platform/android?
(rf/dispatch [:request-permissions [:camera]])))
(rf/dispatch [:request-permissions [:camera]])))
:disabled? (not config/wallet-wip-enabled?)}
{:text (i18n/label :t/wallet-request)
:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])

46
src/status_im/ui/screens/wallet/styles.cljs
View File

@ -1,28 +1,36 @@
(ns status-im.ui.screens.wallet.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.components.styles :as st]
[status-im.components.styles :as styles]))
(:require [status-im.components.styles :as styles]))
;; errors
(defstyle error-container
{:flex-direction :row
:align-items :center
:ios {:padding-top 8
:padding-bottom 8}
:android {:padding-top 10
:padding-bottom 10}})
(def error-exclamation
{:background-color styles/color-red-2
:border-radius 100
:width 16
:height 16
:margin-left 12
:margin-right 6
:margin-top 2})
;; wallet
(def wallet-container
{:flex 1})
(defstyle toolbar
{:ios {:background-color styles/color-blue4}
:android {:background-color styles/color-blue5
:elevation 0}})
(def wallet-exclamation-container
{:background-color st/color-red-2
:justify-content :center
:margin-top 5
:margin-left 10
:margin-right 7
:margin-bottom 5
:border-radius 100})
(def wallet-error-exclamation
{:width 16
:height 16})
{:ios {:background-color styles/color-blue4}
:android {:background-color styles/color-blue5
:elevation 0}})
(def buttons-container
{:margin-vertical 15
@ -61,4 +69,4 @@
{:margin-left 8})
(def choose-currency
{:width 116})
{:width 116})

3
src/status_im/ui/screens/wallet/transactions/styles.cljs
View File

@ -83,8 +83,7 @@
{:background-color :transparent})
(defn transaction-icon-background [color]
{:flex 1
:justify-content :center
{:justify-content :center
:align-items :center
:width 40
:height 40

27
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

@ -72,7 +72,7 @@
(defn action-buttons [m]
[react/view {:style transactions.styles/action-buttons}
[button/primary-button {:text (i18n/label :t/transactions-sign)
:style {:margin-right 12}
:on-press #(re-frame/dispatch [:navigate-to-modal :wallet-transactions-sign-all])}]
[button/secondary-button {:text (i18n/label :t/delete) :on-press #(on-delete-transaction m)}]])
@ -93,18 +93,19 @@
(throw (str "Unknown transaction type: " k))))
(defn render-transaction [{:keys [hash to from type value symbol] :as m}]
[list/item
[list/item-icon (transaction-type->icon (keyword type))]
[list/item-content
(str value " " symbol)
(if (inbound? type)
(str (i18n/label :t/from) " " from)
(str (i18n/label :t/to) " " to))
(when (unsigned? type)
[action-buttons m])]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:show-transaction-details hash])}
[react/view
[list/touchable-item #(re-frame/dispatch [:show-transaction-details hash])
[react/view
[list/item
[list/item-icon (transaction-type->icon (keyword type))]
[list/item-content
(str value " " symbol)
(if (inbound? type)
(str (i18n/label :t/from) " " from)
(str (i18n/label :t/to) " " to))
(when (unsigned? type)
[action-buttons m])]
[list/item-icon {:icon :icons/forward
:style {:margin-top 10}
:icon-opts transactions.styles/forward}]]]])
;; TODO(yenda) hook with re-frame
@ -262,7 +263,7 @@
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/transaction-details)]
[toolbar/actions (details-action hash url)]]
[react/scroll-view
[react/scroll-view {:style transactions.styles/main-section}
[transaction-details-header transaction-details]
[transaction-details-confirmations confirmations confirmations-progress]
[react/view {:style transactions.styles/transaction-details-separator}]

6
src/status_im/ui/screens/wallet/views.cljs
View File

@ -6,7 +6,7 @@
(defn error-message-view [error-container-style error-message-style]
[react/view {:style error-container-style}
[react/view {:style styles/wallet-exclamation-container}
[react/view {:style styles/error-container}
[vector-icons/icon :icons/exclamation_mark {:color :white
:container-style styles/wallet-error-exclamation}]]
[react/text {:style error-message-style} (i18n/label :t/wallet-error)]])
:container-style styles/error-exclamation}]
[react/text {:style error-message-style} (i18n/label :t/wallet-error)]]])