mirror of
https://github.com/status-im/status-react.git
synced 2025-01-11 19:44:47 +00:00
[BUG #2251] Added proper margin around warning text
This commit is contained in:
parent
95d2a6b1ee
commit
e80db63ede
@ -3,23 +3,6 @@
|
|||||||
(:require [status-im.components.styles :as styles]
|
(:require [status-im.components.styles :as styles]
|
||||||
[status-im.utils.platform :as platform]))
|
[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
|
;; Toolbar
|
||||||
|
|
||||||
(def toolbar-title-container
|
(def toolbar-title-container
|
||||||
@ -37,7 +20,6 @@
|
|||||||
(def toolbar-title-icon
|
(def toolbar-title-icon
|
||||||
(merge toolbar-icon {:opacity 0.4}))
|
(merge toolbar-icon {:opacity 0.4}))
|
||||||
|
|
||||||
|
|
||||||
;; Main section
|
;; Main section
|
||||||
|
|
||||||
(def main-section
|
(def main-section
|
||||||
|
@ -65,9 +65,9 @@
|
|||||||
(defn main-section [usd-value change syncing? error-message]
|
(defn main-section [usd-value change syncing? error-message]
|
||||||
[react/view {:style styles/main-section}
|
[react/view {:style styles/main-section}
|
||||||
(if syncing?
|
(if syncing?
|
||||||
[wallet.views/wallet-syncing styles/error-container styles/error-message]
|
wallet.views/wallet-syncing
|
||||||
(when error-message
|
(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-container}
|
||||||
[react/view {:style styles/total-balance}
|
[react/view {:style styles/total-balance}
|
||||||
[react/text {:style styles/total-balance-value} usd-value]
|
[react/text {:style styles/total-balance-value} usd-value]
|
||||||
|
@ -5,21 +5,32 @@
|
|||||||
;; errors
|
;; errors
|
||||||
|
|
||||||
(defstyle error-container
|
(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})
|
||||||
|
|
||||||
|
(defstyle error-message-container
|
||||||
{:flex-direction :row
|
{:flex-direction :row
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:ios {:padding-top 8
|
:padding-horizontal 15
|
||||||
:padding-bottom 8}
|
:ios {:padding-vertical 8}
|
||||||
:android {:padding-top 10
|
:android {:padding-vertical 10}})
|
||||||
:padding-bottom 10}})
|
|
||||||
|
|
||||||
(defnstyle exclamation [color]
|
(defnstyle exclamation [color]
|
||||||
{:background-color color
|
{:background-color color
|
||||||
:border-radius 100
|
:border-radius 100
|
||||||
:width 16
|
:width 16
|
||||||
:height 16
|
:height 16
|
||||||
:margin-left 12
|
:margin-right 6})
|
||||||
:margin-right 6
|
|
||||||
:margin-top 2})
|
(def error-message
|
||||||
|
{:color styles/color-white
|
||||||
|
:font-size 13})
|
||||||
|
|
||||||
(def error-exclamation
|
(def error-exclamation
|
||||||
(exclamation styles/color-red-2))
|
(exclamation styles/color-red-2))
|
||||||
|
@ -4,15 +4,14 @@
|
|||||||
[status-im.components.icons.vector-icons :as vector-icons]
|
[status-im.components.icons.vector-icons :as vector-icons]
|
||||||
[status-im.i18n :as i18n]))
|
[status-im.i18n :as i18n]))
|
||||||
|
|
||||||
(defn message-view [error-container-style error-message-style icon-container-style label]
|
(defn- message-view [icon-container-style label]
|
||||||
[react/view {:style error-container-style}
|
|
||||||
[react/view {:style styles/error-container}
|
[react/view {:style styles/error-container}
|
||||||
|
[react/view {:style styles/error-message-container}
|
||||||
[vector-icons/icon :icons/exclamation_mark {:color :white
|
[vector-icons/icon :icons/exclamation_mark {:color :white
|
||||||
:container-style icon-container-style}]
|
: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]
|
(def error-message-view [message-view styles/error-exclamation (i18n/label :t/wallet-error)])
|
||||||
[message-view error-container-style error-message-style styles/error-exclamation (i18n/label :t/wallet-error)])
|
|
||||||
|
|
||||||
(defn wallet-syncing [error-container-style error-message-style]
|
(def wallet-syncing [message-view styles/warning-exclamation (i18n/label :t/sync-in-progress)])
|
||||||
[message-view error-container-style error-message-style styles/warning-exclamation (i18n/label :t/sync-in-progress)])
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user