diff --git a/resources/images/ui2/onboarding-bg-1@2x.png b/resources/images/ui2/onboarding-bg-1@2x.png new file mode 100644 index 0000000000..b462414da6 Binary files /dev/null and b/resources/images/ui2/onboarding-bg-1@2x.png differ diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 1f9ec57032..b136b1ab60 100644 --- a/src/quo2/foundations/colors.cljs +++ b/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 diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index ab71d2da9b..a3148ad22b 100644 --- a/src/status_im2/common/resources.cljs +++ b/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") diff --git a/src/status_im2/contexts/onboarding/common/background.cljs b/src/status_im2/contexts/onboarding/common/background.cljs new file mode 100644 index 0000000000..e3540443ab --- /dev/null +++ b/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}])]) diff --git a/src/status_im2/contexts/onboarding/common/style.cljs b/src/status_im2/contexts/onboarding/common/style.cljs new file mode 100644 index 0000000000..8eabb5139f --- /dev/null +++ b/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}) diff --git a/src/status_im2/contexts/onboarding/profiles/view.cljs b/src/status_im2/contexts/onboarding/profiles/view.cljs new file mode 100644 index 0000000000..f013f086eb --- /dev/null +++ b/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]]) diff --git a/src/status_im2/navigation/roots.cljs b/src/status_im2/navigation/roots.cljs index 6fe7ae22df..73a3912c8b 100644 --- a/src/status_im2/navigation/roots.cljs +++ b/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}})}}]}}}})) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index d1370f858e..e1736329a0 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/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)