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

UI Fix: wallet graph gradient (#17093) 

* fix: wallet graph gradient
This commit is contained in:
Omar Basem 2023-08-23 20:19:19 +04:00 committed by GitHub
parent 821e39a562
commit 914604bbe4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/quo2/components/graph/wallet_graph/style.cljs
View File

@ -2,8 +2,11 @@
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(def gradient-background (def gradient-background
{:height 294 {:height 294
:justify-content :flex-end}) :position :absolute
:left 0
:right 0
:bottom 0})
(def x-axis-label-text-style ; We need this to remove unnecessary bottom spacing from graph (def x-axis-label-text-style ; We need this to remove unnecessary bottom spacing from graph
{:margin-bottom -3 {:margin-bottom -3

11
src/quo2/components/graph/wallet_graph/view.cljs
View File

@ -37,11 +37,12 @@
:style style/illustration} :style style/illustration}
[text/text {:style {:color colors/white}} [text/text {:style {:color colors/white}}
"Illustration here"]] "Illustration here"]]
[linear-gradient/linear-gradient [rn/view
{:colors gradient-colors [linear-gradient/linear-gradient
:start {:x 0 :y 1} {:colors gradient-colors
:end {:x 0 :y 0} :start {:x 0 :y 1}
:style style/gradient-background} :end {:x 0 :y 0}
:style style/gradient-background}]
[rn/view {:accessibility-label :line-chart} [rn/view {:accessibility-label :line-chart}
[charts/line-chart [charts/line-chart
{:height 96 {:height 96

9
src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs
View File

@ -69,10 +69,11 @@
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[quo/wallet-graph [rn/view {:margin-top 300}
{:data (generate-data (:time-frame @state)) [quo/wallet-graph
:state (:state @state) {:data (generate-data (:time-frame @state))
:time-frame (:time-frame @state)}]]]))) :state (:state @state)
:time-frame (:time-frame @state)}]]]])))
(defn preview-wallet-graph (defn preview-wallet-graph
[] []