Add gradient background support in bottom sheet (#16986)

This commit adds Gradient Background in the bottom sheet which will be used in Wallet Account Actions, and Switcher bottom sheet.

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

src/status_im2/common/bottom_sheet/style.cljs

@@ -14,7 +14,7 @@
    :margin-vertical  8})
 
 (defn sheet
-  [{:keys [top bottom]} window-height theme padding-bottom-override shell?]
+  [{:keys [top bottom]} window-height theme padding-bottom-override selected-item shell?]
   {:position                :absolute
    :max-height              (- window-height top)
    :z-index                 1
@@ -23,13 +23,19 @@
    :right                   0
    :border-top-left-radius  20
    :border-top-right-radius 20
-   :overflow                (when shell? :hidden)
+   :overflow                (when-not selected-item :hidden)
    :flex                    1
    :padding-bottom          (or padding-bottom-override (+ bottom 8))
    :background-color        (if shell?
                               :transparent
                               (colors/theme-colors colors/white colors/neutral-95 theme))})
 
+(def gradient-bg
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0})
+
 (def shell-bg
   {:position         :absolute
    :background-color (if platform/ios? colors/white-opa-5 colors/neutral-100-opa-90)

src/status_im2/common/bottom_sheet/view.cljs

@@ -1,7 +1,8 @@
 (ns status-im2.common.bottom-sheet.view
   (:require [oops.core :as oops]
+            [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [react-native.gesture :as gesture]
@@ -57,7 +58,8 @@
   [_ _]
   (let [sheet-height (reagent/atom 0)]
     (fn [{:keys [hide? insets theme]}
-         {:keys [content selected-item padding-bottom-override on-close shell?]}]
+         {:keys [content selected-item padding-bottom-override on-close shell?
+                 gradient-cover? customization-color]}]
       (let [{window-height :height} (rn/get-window)
             bg-opacity              (reanimated/use-shared-value 0)
             translate-y             (reanimated/use-shared-value window-height)
@@ -88,8 +90,12 @@
                                      window-height
                                      theme
                                      padding-bottom-override
+                                     selected-item
                                      shell?))
             :on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
+           (when gradient-cover?
+             [rn/view {:style style/gradient-bg}
+              [quo/gradient-cover {:customization-color customization-color}]])
            (when shell?
              [blur/ios-view {:style style/shell-bg}])
            (when selected-item
@@ -106,4 +112,4 @@
   [args sheet]
   [:f> f-view args sheet])
 
-(def view (theme/with-theme internal-view))
+(def view (quo.theme/with-theme internal-view))

src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs

@@ -1,21 +1,44 @@
 (ns status-im2.contexts.quo-preview.gradient.gradient-cover
-  (:require [quo2.components.colors.color-picker.view :as color-picker]
+  (:require [quo2.core :as quo]
-            [quo2.components.gradient.gradient-cover.view :as gradient-cover]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as quo.theme]
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [utils.re-frame :as rf]))
+
+(defn render-action-sheet
+  []
+  [:<>
+   [rn/view {:style {:align-items :center}}
+    [quo/summary-info
+     {:type          :status-account
+      :networks?     false
+      :account-props {:customization-color :purple
+                      :size                32
+                      :emoji               "🍑"
+                      :type                :default
+                      :name                "Collectibles vault"
+                      :address             "0x0ah...78b"}}]]
+   [quo/action-drawer
+    [[{:icon     :i/edit
+       :label    "Edit account"
+       :on-press #(js/alert "Edit account")}
+      {:icon     :i/copy
+       :label    "Copy address"
+       :on-press #(js/alert "Copy address")}
+      {:icon     :i/share
+       :label    "Share account"
+       :on-press #(js/alert "Share account")}
+      {:icon     :i/delete
+       :label    "Remove account"
+       :danger?  true
+       :on-press #(js/alert "Remove account")}]]]])
 
 (def descriptor
-  [{:label   "Customization color:"
+  [(preview/customization-color-option)
-    :key     :customization-color
-    :type    :select
-    :options (mapv (fn [color]
-                     {:key color :value color})
-                   color-picker/color-list)}
    {:label "Blur (dark only)?"
     :key   :blur?
     :type  :boolean}])
@@ -51,14 +74,21 @@
                        :bottom           0
                        :padding-vertical 40}
            :blur-type :dark}
-          [gradient-cover/view @state]]]
+          [quo/gradient-cover @state]]]
         [rn/view
          {:style {:padding-vertical   20
                   :padding-horizontal 16}}
-         [color-picker/view
+         [quo/color-picker
           {:blur?     @blur?
            :selected  @customization-color
-           :on-change #(reset! customization-color %)}]]])]))
+           :on-change #(reset! customization-color %)}]]
+        [quo/button
+         {:container-style {:margin-horizontal 40}
+          :on-press        #(rf/dispatch [:show-bottom-sheet
+                                          {:content             (fn [] [render-action-sheet])
+                                           :gradient-cover?     true
+                                           :customization-color @customization-color}])}
+         "See in bottom sheet"]])]))
 
 (defn preview-gradient-cover
   []