diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs index 3383e9343c..e3d9071177 100644 --- a/src/status_im/ui/screens/wallet/main/styles.cljs +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -3,23 +3,6 @@ (:require [status-im.components.styles :as styles] [status-im.utils.platform :as platform])) -;; Errors - -(defstyle error-container - {:align-self :center - :justify-content :center - :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-right 10 - :font-size 13}) - - ;; Toolbar (def toolbar-title-container @@ -37,7 +20,6 @@ (def toolbar-title-icon (merge toolbar-icon {:opacity 0.4})) - ;; Main section (def main-section diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index 025cdf6ce5..3e6edd7d8b 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -65,9 +65,9 @@ (defn main-section [usd-value change syncing? error-message] [react/view {:style styles/main-section} (if syncing? - [wallet.views/wallet-syncing styles/error-container styles/error-message] + wallet.views/wallet-syncing (when error-message - [wallet.views/error-message-view styles/error-container styles/error-message])) + wallet.views/error-message-view)) [react/view {:style styles/total-balance-container} [react/view {:style styles/total-balance} [react/text {:style styles/total-balance-value} usd-value] diff --git a/src/status_im/ui/screens/wallet/styles.cljs b/src/status_im/ui/screens/wallet/styles.cljs index ce8ac371c3..9d762b1653 100644 --- a/src/status_im/ui/screens/wallet/styles.cljs +++ b/src/status_im/ui/screens/wallet/styles.cljs @@ -5,21 +5,32 @@ ;; errors (defstyle error-container - {:flex-direction :row - :align-items :center - :ios {:padding-top 8 - :padding-bottom 8} - :android {:padding-top 10 - :padding-bottom 10}}) + {:align-self :center + :justify-content :center + :ios {:border-radius 20 + :margin-top 6} + :android {:border-radius 4 + :margin-top 18} + :background-color styles/color-blue5}) + +(defstyle error-message-container + {:flex-direction :row + :align-items :center + :padding-horizontal 15 + :ios {:padding-vertical 8} + :android {:padding-vertical 10}}) + (defnstyle exclamation [color] {:background-color color :border-radius 100 :width 16 :height 16 - :margin-left 12 - :margin-right 6 - :margin-top 2}) + :margin-right 6}) + +(def error-message + {:color styles/color-white + :font-size 13}) (def error-exclamation (exclamation styles/color-red-2)) diff --git a/src/status_im/ui/screens/wallet/views.cljs b/src/status_im/ui/screens/wallet/views.cljs index ce8550346a..07542aa16f 100644 --- a/src/status_im/ui/screens/wallet/views.cljs +++ b/src/status_im/ui/screens/wallet/views.cljs @@ -4,15 +4,14 @@ [status-im.components.icons.vector-icons :as vector-icons] [status-im.i18n :as i18n])) -(defn message-view [error-container-style error-message-style icon-container-style label] - [react/view {:style error-container-style} - [react/view {:style styles/error-container} +(defn- message-view [icon-container-style label] + [react/view {:style styles/error-container} + [react/view {:style styles/error-message-container} [vector-icons/icon :icons/exclamation_mark {:color :white :container-style icon-container-style}] - [react/text {:style error-message-style} label]]]) + [react/text {:style styles/error-message} + label]]]) -(defn error-message-view [error-container-style error-message-style] - [message-view error-container-style error-message-style styles/error-exclamation (i18n/label :t/wallet-error)]) +(def error-message-view [message-view styles/error-exclamation (i18n/label :t/wallet-error)]) -(defn wallet-syncing [error-container-style error-message-style] - [message-view error-container-style error-message-style styles/warning-exclamation (i18n/label :t/sync-in-progress)]) +(def wallet-syncing [message-view styles/warning-exclamation (i18n/label :t/sync-in-progress)])