Onboarding add background screen (#15231)

src/quo2/foundations/colors.cljs

@@ -58,11 +58,6 @@
 (def neutral-95 "#0D1625")
 (def neutral-100 "#09101C")
 
-;;Blur
-(def neutral-5-opa-70 (alpha neutral-5 0.7))
-(def neutral-80-blur-opa-80 "rgba(25,36,56,0.8)")
-(def neutral-90-opa-70 (alpha neutral-90 0.7))
-
 ;;80 with transparency
 (def neutral-80-opa-5 (alpha neutral-80 0.05))
 (def neutral-80-opa-10 (alpha neutral-80 0.1))
@@ -115,6 +110,14 @@
 (def white-opa-90 (alpha white 0.9))
 (def white-opa-95 (alpha white 0.95))
 
+;;;;Blur
+(def white-70-blur (alpha white 0.7))
+(def neutral-5-opa-70-blur (alpha neutral-5 0.7))
+(def neutral-80-opa-80-blur (alpha "#192438" 0.8))
+(def neutral-90-opa-70-blur (alpha neutral-90 0.7))
+(def neutral-95-opa-70-blur neutral-95-opa-70)
+(def neutral-100-opa-70-blur neutral-100-opa-70)
+
 ;;;;Black
 
 ;;Solid

src/status_im2/common/resources.cljs

@@ -5,7 +5,8 @@
    :lifestyle       (js/require "../resources/images/ui2/lifestyle.png")
    :music           (js/require "../resources/images/ui2/music.png")
    :podcasts        (js/require "../resources/images/ui2/podcasts.png")
-   :sync-device     (js/require "../resources/images/ui2/sync-new-device-cover-background.png")})
+   :sync-device     (js/require "../resources/images/ui2/sync-new-device-cover-background.png")
+   :onboarding-bg-1 (js/require "../resources/images/ui2/onboarding-bg-1.png")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")

src/status_im2/contexts/onboarding/common/background.cljs

@@ -0,0 +1,26 @@
+(ns status-im2.contexts.onboarding.common.background
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [status-im2.common.resources :as resources]
+            [react-native.linear-gradient :as linear-gradient]
+            [status-im2.contexts.onboarding.common.style :as style]))
+
+(defn view
+  [dark-overlay?]
+  [rn/view
+   {:style style/background-container}
+   ;; Todo - add carousel component as background once ready
+   ;; https://github.com/status-im/status-mobile/issues/15012
+   [rn/image
+    {:blur-radius (if dark-overlay? 13 0)
+     :style       {:flex 1}
+     :source      (resources/get-image :onboarding-bg-1)}]
+   [linear-gradient/linear-gradient
+    {:colors [(if dark-overlay? (colors/custom-color :yin 50) "#000716")
+              (if dark-overlay? (colors/custom-color :yin 50 0) "#000716")]
+     :start  {:x 0 :y 0}
+     :end    {:x 0 :y 1}
+     :style  (style/background-gradient-overlay dark-overlay?)}]
+   (when dark-overlay?
+     [rn/view
+      {:style style/background-blur-overlay}])])

src/status_im2/contexts/onboarding/common/style.cljs

@@ -0,0 +1,23 @@
+(ns status-im2.contexts.onboarding.common.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def background-container
+  {:background-color colors/neutral-95
+   :flex-direction   :row})
+
+(defn background-gradient-overlay
+  [dark-overlay?]
+  {:position :absolute
+   :height   (if dark-overlay? 240 136)
+   :top      0
+   :left     0
+   :right    0
+   :bottom   0})
+
+(def background-blur-overlay
+  {:position         :absolute
+   :left             0
+   :top              0
+   :bottom           0
+   :right            0
+   :background-color colors/neutral-80-opa-80-blur})

src/status_im2/contexts/onboarding/profiles/view.cljs

@@ -0,0 +1,7 @@
+(ns status-im2.contexts.onboarding.profiles.view
+  (:require [status-im2.contexts.onboarding.common.background :as background]))
+
+(defn views
+  []
+  [:<>
+   [background/view true]])

src/status_im2/navigation/roots.cljs

@@ -154,4 +154,12 @@
                     :children [{:component {:name    :shell-stack
                                             :id      :shell-stack
                                             :options (merge (status-bar-options)
-                                                            {:topBar {:visible false}})}}]}}}}))
+                                                            {:topBar {:visible false}})}}]}}}
+          :profiles
+          {:root
+           {:stack {:id       :profiles
+                    :children [{:component {:name    :profiles
+                                            :id      :profiles
+                                            :options (merge
+                                                      (status-bar-options)
+                                                      {:topBar {:visible false}})}}]}}}}))

src/status_im2/navigation/screens.cljs

@@ -14,7 +14,8 @@
             [quo.design-system.colors :as colors]
             [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector]
             [react-native.platform :as platform]
-            [status-im2.contexts.chat.photo-selector.view :as photo-selector]))
+            [status-im2.contexts.chat.photo-selector.view :as photo-selector]
+            [status-im2.contexts.onboarding.profiles.view :as profiles]))
 
 (def components
   [])
@@ -76,7 +77,12 @@
     {:name      :settings-syncing
      :insets    {:bottom true}
      :options   {:topBar {:title {:text (i18n/label :t/syncing)}}}
-     :component settings-syncing/views}]
+     :component settings-syncing/views}
+
+    ;; Onboarding
+    {:name      :profiles
+     :insets    {:top false}
+     :component profiles/views}]
 
    (when config/quo-preview-enabled?
      quo.preview/screens)