UI Fix: wallet graph gradient (#17093)

* fix: wallet graph gradient

src/quo2/components/graph/wallet_graph/style.cljs

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

src/quo2/components/graph/wallet_graph/view.cljs

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

src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs

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