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

wallet overview: design review fixes (#17046)

This commit is contained in:
erikseppanen 2023-08-21 19:38:04 -04:00 committed by GitHub
parent cace2a32a0
commit bdedccdda6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/quo2/components/wallet/wallet_overview/style.cljs
View File

@ -12,6 +12,10 @@
{:flex-direction :row {:flex-direction :row
:justify-content :space-between}) :justify-content :space-between})
(def container-info-bottom
{:flex-direction :row
:padding-top 4})
(def network-dropdown (def network-dropdown
{:border-color colors/neutral-50 {:border-color colors/neutral-50
:border-width 1 :border-width 1
@ -20,8 +24,10 @@
:height 32}) :height 32})
(defn color-metrics (defn color-metrics
[metrics] [metrics theme]
(if (= metrics :positive) colors/success-50 colors/danger-50)) (if (= metrics :positive)
(colors/theme-colors colors/success-50 colors/success-60 theme)
(colors/theme-colors colors/danger-50 colors/danger-60 theme)))
(defn color-text-heading (defn color-text-heading
[theme] [theme]
@ -40,8 +46,8 @@
{:color (color-text-paragraph theme)}) {:color (color-text-paragraph theme)})
(defn dot-separator (defn dot-separator
[metrics] [metrics theme]
{:background-color (color-metrics metrics) {:background-color (color-metrics metrics theme)
:margin-horizontal 4 :margin-horizontal 4
:width 2 :width 2
:height 2}) :height 2})

20
src/quo2/components/wallet/wallet_overview/view.cljs
View File

@ -42,38 +42,38 @@
[network-dropdown-temporary]]) [network-dropdown-temporary]])
(defn- view-metrics (defn- view-metrics
[metrics currency-change percentage-change] [{:keys [metrics currency-change percentage-change theme]}]
[rn/view [rn/view
{:style {:flex-direction :row {:style {:flex-direction :row
:align-items :center}} :align-items :center}}
[text/text [text/text
{:weight :medium {:weight :medium
:size :paragraph-2 :size :paragraph-2
:style {:color (style/color-metrics metrics)}} :style {:color (style/color-metrics metrics theme)}}
percentage-change] percentage-change]
[rn/view [rn/view
{:style (style/dot-separator metrics)}] {:style (style/dot-separator metrics theme)}]
[text/text [text/text
{:weight :medium {:weight :medium
:size :paragraph-2 :size :paragraph-2
:style {:color (style/color-metrics metrics) :style {:color (style/color-metrics metrics theme)
:margin-right 4}} :margin-right 4}}
currency-change] currency-change]
[icons/icon [icons/icon
(if (= metrics :positive) :i/positive :i/negative) (if (= metrics :positive) :i/positive :i/negative)
{:color (style/color-metrics metrics) {:color (style/color-metrics metrics theme)
:size 16}]]) :size 16}]])
(defn- view-info-bottom (defn- view-info-bottom
[{:keys [state time-frame metrics date begin-date end-date [{:keys [state time-frame metrics date begin-date end-date
currency-change percentage-change theme]}] currency-change percentage-change theme]}]
[rn/view {:flex-direction :row} [rn/view {:style style/container-info-bottom}
(when (= state :loading) (when (= state :loading)
[rn/view [rn/view
{:style {:flex-direction :row {:style {:flex-direction :row
:align-items :center}} :align-items :center}}
(loading-bars [{:width 32 :height 10 :margin 8} (loading-bars [{:width 32 :height 10 :margin 8}
{:width 32 :height 10 :margin 4} {:width 32 :height 10 :margin 2}
{:width 62 :height 10 :margin 4} {:width 62 :height 10 :margin 4}
{:width 10 :height 10 :margin 0}] {:width 10 :height 10 :margin 0}]
theme)]) theme)])
@ -107,7 +107,11 @@
:margin-right 8}} :margin-right 8}}
(time-frame time-frames)] (time-frame time-frames)]
(when (and (= state :default) (not= metrics :none)) (when (and (= state :default) (not= metrics :none))
[view-metrics metrics currency-change percentage-change])])]) [view-metrics
{:metrics metrics
:currency-change currency-change
:percentage-change percentage-change
:theme theme}])])])
(defn- view-internal (defn- view-internal
[props] [props]