diff --git a/resources/images/ui2/intro-1@2x.png b/resources/images/ui2/intro-1@2x.png deleted file mode 100644 index 3323782472..0000000000 Binary files a/resources/images/ui2/intro-1@2x.png and /dev/null differ diff --git a/resources/images/ui2/intro-1@3x.png b/resources/images/ui2/intro-1@3x.png deleted file mode 100644 index ebd1bef7e9..0000000000 Binary files a/resources/images/ui2/intro-1@3x.png and /dev/null differ diff --git a/resources/images/ui2/intro-2@2x.png b/resources/images/ui2/intro-2@2x.png deleted file mode 100644 index 317dc591b0..0000000000 Binary files a/resources/images/ui2/intro-2@2x.png and /dev/null differ diff --git a/resources/images/ui2/intro-2@3x.png b/resources/images/ui2/intro-2@3x.png deleted file mode 100644 index 2e6974a98f..0000000000 Binary files a/resources/images/ui2/intro-2@3x.png and /dev/null differ diff --git a/resources/images/ui2/intro-3@2x.png b/resources/images/ui2/intro-3@2x.png deleted file mode 100644 index d6b26d8164..0000000000 Binary files a/resources/images/ui2/intro-3@2x.png and /dev/null differ diff --git a/resources/images/ui2/intro-3@3x.png b/resources/images/ui2/intro-3@3x.png deleted file mode 100644 index 0bc6bf7039..0000000000 Binary files a/resources/images/ui2/intro-3@3x.png and /dev/null differ diff --git a/resources/images/ui2/intro-4@2x.png b/resources/images/ui2/intro-4@2x.png deleted file mode 100644 index 27b2e655ea..0000000000 Binary files a/resources/images/ui2/intro-4@2x.png and /dev/null differ diff --git a/resources/images/ui2/intro-4@3x.png b/resources/images/ui2/intro-4@3x.png deleted file mode 100644 index f282096570..0000000000 Binary files a/resources/images/ui2/intro-4@3x.png and /dev/null differ diff --git a/resources/images/ui2/onboarding-bg-1@2x.png b/resources/images/ui2/onboarding-bg-1@2x.png deleted file mode 100644 index b462414da6..0000000000 Binary files a/resources/images/ui2/onboarding-bg-1@2x.png and /dev/null differ diff --git a/resources/images/ui2/onboarding_blur_bg@2x.png b/resources/images/ui2/onboarding_blur_bg@2x.png deleted file mode 100644 index 9d59f544d4..0000000000 Binary files a/resources/images/ui2/onboarding_blur_bg@2x.png and /dev/null differ diff --git a/resources/images/ui2/onboarding_blur_bg@3x.png b/resources/images/ui2/onboarding_blur_bg@3x.png deleted file mode 100644 index 8103e36f34..0000000000 Binary files a/resources/images/ui2/onboarding_blur_bg@3x.png and /dev/null differ diff --git a/resources/images/ui2/onboarding_illustration@2x.png b/resources/images/ui2/onboarding_illustration@2x.png new file mode 100644 index 0000000000..3f8f259249 Binary files /dev/null and b/resources/images/ui2/onboarding_illustration@2x.png differ diff --git a/resources/images/ui2/onboarding_illustration@3x.png b/resources/images/ui2/onboarding_illustration@3x.png new file mode 100644 index 0000000000..c48db8d367 Binary files /dev/null and b/resources/images/ui2/onboarding_illustration@3x.png differ diff --git a/src/js/worklets/onboarding_carousel.js b/src/js/worklets/onboarding_carousel.js new file mode 100644 index 0000000000..f54ee48267 --- /dev/null +++ b/src/js/worklets/onboarding_carousel.js @@ -0,0 +1,47 @@ +import { useDerivedValue, withTiming, Easing } from 'react-native-reanimated'; + +const slideAnimationDuration = 300; + +const easeOut = { + duration: slideAnimationDuration, + easing: Easing.bezier(0, 0, 0.58, 1), +} + +// Derived Values +export function dynamicProgressBarWidth(staticProgressBarWidth, progress) { + return useDerivedValue( + function () { + 'worklet' + return staticProgressBarWidth * (progress.value || 0) / 100; + } + ); +} + +export function carouselLeftPosition(windowWidth, progress) { + return useDerivedValue( + function () { + 'worklet' + const progressValue = progress.value; + switch (true) { + case (progressValue < 25): + return 0; + case (progressValue === 25): + return withTiming(-windowWidth, easeOut); + case (progressValue < 50): + return -windowWidth; + case (progressValue === 50): + return withTiming(-2 * windowWidth, easeOut); + case (progressValue < 75): + return -2 * windowWidth; + case (progressValue === 75): + return withTiming(-3 * windowWidth, easeOut); + case (progressValue < 100): + return -3 * windowWidth; + case (progressValue === 100): + return withTiming(-4 * windowWidth, easeOut); + default: + return 0; + } + }); +} + diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index ba63a7008e..2b975c1a28 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -293,7 +293,10 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return ( :createNativeWrapper identity :default #js {}}) -(def react-native-redash #js {:clamp nil}) +(def react-native-redash + #js + {:clamp nil + :withPause (fn [])}) (def react-native-languages (clj->js {:default {:language "en" @@ -370,6 +373,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return ( "react-native-screens" (clj->js {}) "react-native-reanimated" react-native-reanimated "react-native-redash/lib/module/v1" react-native-redash + "react-native-redash" react-native-redash "react-native-fetch-polyfill" fetch "react-native-status-keycard" status-keycard "react-native-keychain" keychain @@ -407,6 +411,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return ( "../src/js/worklets/bottom_sheet.js" #js {} "../src/js/worklets/record_audio.js" #js {} "../src/js/worklets/scroll_view.js" #js {} + "../src/js/worklets/onboarding_carousel.js" #js {} "../src/js/worklets/lightbox.js" #js {} "./fleets.js" default-fleets "@walletconnect/client" wallet-connect-client diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 078b8dce37..480eea9c94 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -127,6 +127,7 @@ ;;Solid (def black "#000000") +(def onboarding-header-black "#000716") ;;;;Primary diff --git a/src/react_native/reanimated.cljs b/src/react_native/reanimated.cljs index 8b2f23c685..9ddae70f75 100644 --- a/src/react_native/reanimated.cljs +++ b/src/react_native/reanimated.cljs @@ -9,6 +9,7 @@ withDelay withSpring withRepeat + withSequence withDecay Easing Keyframe @@ -17,8 +18,8 @@ SlideOutUp LinearTransition)] [reagent.core :as reagent] + ["react-native-redash" :refer (withPause)] [react-native.flat-list :as rn-flat-list] - [utils.collection] [utils.worklets.core :as worklets.core])) (def ^:const default-duration 300) @@ -59,6 +60,8 @@ (def with-decay withDecay) (def key-frame Keyframe) (def with-repeat withRepeat) +(def with-sequence withSequence) +(def with-pause withPause) (def cancel-animation cancelAnimation) ;; Easings diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index c82e259c87..b440a72d2f 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -1,20 +1,15 @@ (ns status-im2.common.resources) (def ui - {:add-new-contact (js/require "../resources/images/ui2/add-contact.png") - :intro-1 (js/require "../resources/images/ui2/intro-1.png") - :intro-2 (js/require "../resources/images/ui2/intro-2.png") - :intro-3 (js/require "../resources/images/ui2/intro-3.png") - :intro-4 (js/require "../resources/images/ui2/intro-4.png") - :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") - :onboarding-bg-1 (js/require "../resources/images/ui2/onboarding-bg-1.png") - :onboarding-blur-bg (js/require "../resources/images/ui2/onboarding_blur_bg.png") - :generate-keys (js/require "../resources/images/ui2/generate_keys.png") - :ethereum-address (js/require "../resources/images/ui2/ethereum_address.png") - :use-keycard (js/require "../resources/images/ui2/keycard.png")}) + {:add-new-contact (js/require "../resources/images/ui2/add-contact.png") + :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") + :generate-keys (js/require "../resources/images/ui2/generate_keys.png") + :ethereum-address (js/require "../resources/images/ui2/ethereum_address.png") + :use-keycard (js/require "../resources/images/ui2/keycard.png") + :onboarding-illustration (js/require "../resources/images/ui2/onboarding_illustration.png")}) (def mock-images {:coinbase (js/require "../resources/images/mock2/coinbase.png") diff --git a/src/status_im2/contexts/onboarding/common/background/style.cljs b/src/status_im2/contexts/onboarding/common/background/style.cljs index 066009e847..de3f246792 100644 --- a/src/status_im2/contexts/onboarding/common/background/style.cljs +++ b/src/status_im2/contexts/onboarding/common/background/style.cljs @@ -5,20 +5,12 @@ {:background-color colors/neutral-95 :flex-direction :row :position :absolute + :overflow :hidden :top 0 :bottom 0 :left 0 :right 0}) -(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 diff --git a/src/status_im2/contexts/onboarding/common/background/view.cljs b/src/status_im2/contexts/onboarding/common/background/view.cljs index a5e869dcaa..571485a6be 100644 --- a/src/status_im2/contexts/onboarding/common/background/view.cljs +++ b/src/status_im2/contexts/onboarding/common/background/view.cljs @@ -1,26 +1,22 @@ (ns status-im2.contexts.onboarding.common.background.view (: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.background.style :as style])) + [react-native.blur :as blur] + [status-im2.contexts.onboarding.common.carousel.view :as carousel] + [status-im2.contexts.onboarding.common.background.style :as style] + [status-im2.contexts.onboarding.common.carousel.animation :as carousel.animation])) (defn view [dark-overlay?] - [rn/view - {:style style/background-container} - [rn/image - {:blur-radius (if dark-overlay? 13 0) - :style {:height "100%" - :width "100%"} - ;; Todo - get background image from sub using carousel index on landing page - :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? + [:f> + (fn [] + (carousel.animation/initialize-animation) [rn/view - {:style style/background-blur-overlay}])]) \ No newline at end of file + {:style style/background-container} + [carousel/view dark-overlay?] + (when dark-overlay? + [blur/view + {:style style/background-blur-overlay + :blur-amount 30 + :blur-radius 25 + :blur-type :transparent + :overlay-color :transparent}])])]) diff --git a/src/status_im2/contexts/onboarding/common/carousel/animation.cljs b/src/status_im2/contexts/onboarding/common/carousel/animation.cljs new file mode 100644 index 0000000000..61535c2478 --- /dev/null +++ b/src/status_im2/contexts/onboarding/common/carousel/animation.cljs @@ -0,0 +1,50 @@ +(ns status-im2.contexts.onboarding.common.carousel.animation + (:require + [react-native.reanimated :as reanimated] + [utils.worklets.onboarding-carousel :as worklets.onboarding-carousel])) + +(def progress (atom nil)) +(def paused (atom nil)) + +(def ^:const progress-bar-animation-delay 300) +(def ^:const progress-bar-animation-duration 4000) + +(defn slide-animation + [progress-percentage & [delay duration]] + (reanimated/with-delay + (or delay progress-bar-animation-delay) + (reanimated/with-timing + progress-percentage + (js-obj "duration" (or duration progress-bar-animation-duration) + "easing" (:linear reanimated/easings))))) + +(defn animate-progress + [progress paused] + (reanimated/set-shared-value + progress + (reanimated/with-pause + (reanimated/with-repeat + (reanimated/with-sequence + (slide-animation 25) + (slide-animation 50) + (slide-animation 75) + (slide-animation 100) + (slide-animation 0 300 0)) + -1) + paused))) + +(defn initialize-animation + [] + (when-not @progress + (reset! progress (reanimated/use-shared-value 0)) + (reset! paused (reanimated/use-shared-value false)) + (animate-progress @progress @paused))) + +;; Derived Values +(defn carousel-left-position + [window-width] + (worklets.onboarding-carousel/carousel-left-position window-width @progress)) + +(defn dynamic-progress-bar-width + [progress-bar-width] + (worklets.onboarding-carousel/dynamic-progress-bar-width progress-bar-width @progress)) diff --git a/src/status_im2/contexts/onboarding/common/carousel/style.cljs b/src/status_im2/contexts/onboarding/common/carousel/style.cljs new file mode 100644 index 0000000000..bd323ab9fb --- /dev/null +++ b/src/status_im2/contexts/onboarding/common/carousel/style.cljs @@ -0,0 +1,73 @@ +(ns status-im2.contexts.onboarding.common.carousel.style + (:require + [quo2.foundations.colors :as colors] + [react-native.reanimated :as reanimated])) + +(defn header-container + [status-bar-height content-width index] + {:position :absolute + :top 0 + :left (* content-width index) + :padding-top (+ 30 status-bar-height) + :width content-width + :height (+ 96 status-bar-height) + :flex-direction :row + :background-color colors/onboarding-header-black}) + +(defn header-text-view + [window-width] + {:flex-direction :column + :width window-width + :padding-left 20}) + +(def carousel-text + {:color colors/white}) + +(def carousel-sub-text + {:color colors/white + :margin-top 2}) + +(defn background-image + [content-width] + {:resize-mode :stretch + :width content-width}) + +(defn progress-bar-item + [static? end?] + {:height 2 + :flex 1 + :background-color (if static? colors/white-opa-10 colors/white) + :margin-right (if end? 0 8) + :border-radius 4}) + +(defn progress-bar + [width] + {:position :absolute + :top 0 + :width width + :flex-direction :row}) + +(defn dynamic-progress-bar + [width] + (reanimated/apply-animations-to-style + {:width width} + {:height 2 + :border-radius 4 + :overflow :hidden})) + +(defn progress-bar-container + [progress-bar-width status-bar-height] + {:position :absolute + :width progress-bar-width + :margin-left 20 + :top (+ 12 status-bar-height)}) + +(defn carousel-container + [left] + (reanimated/apply-animations-to-style + {:left left} + {:position :absolute + :right 0 + :top 0 + :bottom 0 + :flex-direction :row})) diff --git a/src/status_im2/contexts/onboarding/common/carousel/view.cljs b/src/status_im2/contexts/onboarding/common/carousel/view.cljs new file mode 100644 index 0000000000..7f33370df8 --- /dev/null +++ b/src/status_im2/contexts/onboarding/common/carousel/view.cljs @@ -0,0 +1,95 @@ +(ns status-im2.contexts.onboarding.common.carousel.view + (:require [quo2.core :as quo] + [utils.i18n :as i18n] + [utils.re-frame :as rf] + [react-native.core :as rn] + [react-native.navigation :as navigation] + [react-native.reanimated :as reanimated] + [status-im2.common.resources :as resources] + [status-im2.contexts.onboarding.common.carousel.style :as style] + [status-im2.contexts.onboarding.common.carousel.animation :as animation])) + +(def header-text + [{:text (i18n/label :t/join-decentralised-communities) + :sub-text (i18n/label :t/participate-in-the-metaverse)} + {:text (i18n/label :t/chat-with-friends) + :sub-text (i18n/label :t/with-full-encryption)} + {:text (i18n/label :t/own-your-crypto) + :sub-text (i18n/label :t/use-the-multichain-wallet)} + {:text (i18n/label :t/discover-web3) + :sub-text (i18n/label :t/explore-the-decentralized-web)}]) + +(defn header-text-view + [index window-width] + [rn/view {:style (style/header-text-view window-width)} + [quo/text + {:style style/carousel-text + :weight :semi-bold + :size :heading-2} + (get-in header-text [index :text])] + [quo/text + {:style style/carousel-sub-text + :size :paragraph-1} + (get-in header-text [index :sub-text])]]) + +(defn content-view + [{:keys [window-width status-bar-height index]}] + (let [content-width (* 4 window-width)] + [:<> + [rn/image + {:style (style/background-image content-width) + :source (resources/get-image :onboarding-illustration)}] + [rn/view {:style (style/header-container status-bar-height content-width index)} + (for [index (range 4)] + ^{:key index} + [header-text-view index window-width])]])) + +(defn progress-bar + [{:keys [static? progress-bar-width]}] + [rn/view + {:style (style/progress-bar progress-bar-width)} + [rn/view {:style (style/progress-bar-item static? false)}] + [rn/view {:style (style/progress-bar-item static? false)}] + [rn/view {:style (style/progress-bar-item static? false)}] + [rn/view {:style (style/progress-bar-item static? true)}]]) + +(defn dynamic-progress-bar + [progress-bar-width] + [:f> + (fn [] + (let [width (animation/dynamic-progress-bar-width progress-bar-width)] + [reanimated/view {:style (style/dynamic-progress-bar width)} + [progress-bar + {:static? false + :progress-bar-width progress-bar-width}]]))]) + +(defn view + [] + [:f> + (fn [] + (let [window-width (rf/sub [:dimensions/window-width]) + view-id (rf/sub [:view-id]) + status-bar-height (:status-bar-height @navigation/constants) + progress-bar-width (- window-width 40) + carousel-left (animation/carousel-left-position window-width)] + (rn/use-effect + (fn [] + (reanimated/set-shared-value @animation/paused (not= view-id :intro))) + [view-id]) + [:<> + [reanimated/view {:style (style/carousel-container carousel-left)} + (for [index (range 2)] + ^{:key index} + [content-view + {:window-width window-width + :status-bar-height status-bar-height + :index index}])] + [rn/view + {:style (style/progress-bar-container + progress-bar-width + status-bar-height)} + [progress-bar + {:static? true + :progress-bar-width progress-bar-width}] + [dynamic-progress-bar progress-bar-width]]]))]) + diff --git a/src/status_im2/contexts/onboarding/common/intro/view.cljs b/src/status_im2/contexts/onboarding/common/intro/view.cljs deleted file mode 100644 index 1b7337007f..0000000000 --- a/src/status_im2/contexts/onboarding/common/intro/view.cljs +++ /dev/null @@ -1,88 +0,0 @@ -(ns status-im2.contexts.onboarding.common.intro.view - (:require [utils.i18n :as i18n] - [quo2.core :as quo] - [react-native.core :as rn] - [reagent.core :as reagent] - [utils.re-frame :as rf] - [status-im2.contexts.onboarding.common.intro.style :as style] - [status-im2.common.resources :as resources])) - -(def carousels - [{:image (resources/get-image :intro-1) - :text (i18n/label :t/join-decentralised-communities) - :sub-text (i18n/label :t/participate-in-the-metaverse)} - {:image (resources/get-image :intro-2) - :text (i18n/label :t/chat-with-friends) - :sub-text (i18n/label :t/with-full-encryption)} - {:image (resources/get-image :intro-3) - :text (i18n/label :t/own-your-crypto) - :sub-text (i18n/label :t/use-the-multichain-wallet)} - {:image (resources/get-image :intro-4) - :text (i18n/label :t/discover-web3) - :sub-text (i18n/label :t/explore-the-decentralized-web)}]) - -(defn progress-bar - [index] - [rn/view style/progress-bar-container - [rn/view {:style (style/progress-bar-item index 0 false)}] - [rn/view {:style (style/progress-bar-item index 1 false)}] - [rn/view {:style (style/progress-bar-item index 2 false)}] - [rn/view {:style (style/progress-bar-item index 3 true)}]]) - -;; TODO: carousel component is to be correctly implemented as quo2 component with animations etc in: -;; https://github.com/status-im/status-mobile/issues/15012 -(defn carousel - [index] - [rn/view {:style style/carousel} - [progress-bar index] - [quo/text - {:style style/carousel-text - :weight :semi-bold - :size :heading-2} - (get-in carousels [index :text])] - [quo/text - {:style style/carousel-text - :size :paragraph-1} - (get-in carousels [index :sub-text])]]) - -(defn set-index - [old-index] - (mod (inc old-index) 4)) - -(defn view - [] - (reagent/with-let [carousel-index (reagent/atom 0) - interval-id (js/setInterval #(swap! carousel-index set-index) - 1500)] - [rn/view {:style style/page-container} - [carousel @carousel-index] - [rn/image - {:style style/page-image - :source (get-in carousels [@carousel-index :image])}] - [quo/drawer-buttons - {:top-card {:on-press (fn [] - (rf/dispatch [:navigate-to :sign-in]) - (rf/dispatch [:hide-terms-of-services-opt-in-screen])) - :heading (i18n/label :t/sign-in) - :accessibility-label :already-use-status-button} - :bottom-card {:on-press (fn [] - (rf/dispatch [:navigate-to :new-to-status]) - (rf/dispatch [:hide-terms-of-services-opt-in-screen])) - :heading (i18n/label :t/new-to-status) - :accessibility-label :new-to-status-button}} - (i18n/label :t/you-already-use-status) - [quo/text - {:style style/text-container} - [quo/text - {:size :paragraph-2 - :style style/plain-text - :weight :semi-bold} - (i18n/label :t/by-continuing-you-accept)] - [quo/text - {:on-press #(rf/dispatch [:open-modal :privacy-policy]) - :size :paragraph-2 - :style style/highlighted-text - :weight :semi-bold} - (i18n/label :t/terms-of-service)]]]] - (finally - (js/clearInterval interval-id)))) diff --git a/src/status_im2/contexts/onboarding/common/intro/style.cljs b/src/status_im2/contexts/onboarding/intro/style.cljs similarity index 96% rename from src/status_im2/contexts/onboarding/common/intro/style.cljs rename to src/status_im2/contexts/onboarding/intro/style.cljs index 44f0d02b7c..15fe499eab 100644 --- a/src/status_im2/contexts/onboarding/common/intro/style.cljs +++ b/src/status_im2/contexts/onboarding/intro/style.cljs @@ -1,4 +1,4 @@ -(ns status-im2.contexts.onboarding.common.intro.style +(ns status-im2.contexts.onboarding.intro.style (:require [react-native.platform :as platform] [quo2.foundations.colors :as colors])) diff --git a/src/status_im2/contexts/onboarding/intro/view.cljs b/src/status_im2/contexts/onboarding/intro/view.cljs new file mode 100644 index 0000000000..c26853d535 --- /dev/null +++ b/src/status_im2/contexts/onboarding/intro/view.cljs @@ -0,0 +1,37 @@ +(ns status-im2.contexts.onboarding.intro.view + (:require [quo2.core :as quo] + [utils.i18n :as i18n] + [utils.re-frame :as rf] + [react-native.core :as rn] + [status-im2.contexts.onboarding.intro.style :as style] + [status-im2.contexts.onboarding.common.background.view :as background])) + +(defn view + [] + [rn/view {:style style/page-container} + [background/view false] + [quo/drawer-buttons + {:top-card {:on-press (fn [] + (rf/dispatch [:navigate-to :sign-in]) + (rf/dispatch [:hide-terms-of-services-opt-in-screen])) + :heading (i18n/label :t/sign-in) + :accessibility-label :already-use-status-button} + :bottom-card {:on-press (fn [] + (rf/dispatch [:navigate-to :new-to-status]) + (rf/dispatch [:hide-terms-of-services-opt-in-screen])) + :heading (i18n/label :t/new-to-status) + :accessibility-label :new-to-status-button}} + (i18n/label :t/you-already-use-status) + [quo/text + {:style style/text-container} + [quo/text + {:size :paragraph-2 + :style style/plain-text + :weight :semi-bold} + (i18n/label :t/by-continuing-you-accept)] + [quo/text + {:on-press #(rf/dispatch [:open-modal :privacy-policy]) + :size :paragraph-2 + :style style/highlighted-text + :weight :semi-bold} + (i18n/label :t/terms-of-service)]]]]) diff --git a/src/status_im2/contexts/onboarding/new_to_status/style.cljs b/src/status_im2/contexts/onboarding/new_to_status/style.cljs index c418c93672..d5f16063c3 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/style.cljs +++ b/src/status_im2/contexts/onboarding/new_to_status/style.cljs @@ -4,20 +4,13 @@ (def full-screen {:flex 1}) -(def image-background - {:height "100%" - :width "100%"}) - -(def layer-background - {:padding-top (if platform/ios? 44 0) - :position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0 - :background-color colors/neutral-80-opa-80-blur}) - -(def navigation-bar {:height 56}) +(def content-container + {:padding-top (if platform/ios? 44 0) + :position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0}) (def options-container {:padding-top 12 diff --git a/src/status_im2/contexts/onboarding/new_to_status/view.cljs b/src/status_im2/contexts/onboarding/new_to_status/view.cljs index ea8f9303a0..5037f71e1a 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/view.cljs +++ b/src/status_im2/contexts/onboarding/new_to_status/view.cljs @@ -7,16 +7,10 @@ [status-im2.common.resources :as resources] [status-im2.contexts.onboarding.new-to-status.style :as style] [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar] + [status-im2.contexts.onboarding.common.background.view :as background] [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn background-image - [] - [rn/image - {:style style/image-background - :blur-radius 13 - :source (resources/get-image :onboarding-blur-bg)}]) - (defn sign-in-options [] (let [window (rf/sub [:dimensions/window])] @@ -78,7 +72,7 @@ (defn new-to-status [] [rn/view {:style style/full-screen} - [background-image] - [rn/view {:style style/layer-background} + [background/view true] + [rn/view {:style style/content-container} [navigation-bar/navigation-bar {:on-press-info #(js/alert "Info pressed")}] [sign-in-options]]]) diff --git a/src/status_im2/contexts/onboarding/profiles/view.cljs b/src/status_im2/contexts/onboarding/profiles/view.cljs index 688a1f2bfb..1c08192b6c 100644 --- a/src/status_im2/contexts/onboarding/profiles/view.cljs +++ b/src/status_im2/contexts/onboarding/profiles/view.cljs @@ -202,4 +202,4 @@ [background/view true] (if @show-profiles? [profiles-section] - [login-section show-profiles?])])) + [login-section])])) diff --git a/src/status_im2/contexts/onboarding/sign_in/view.cljs b/src/status_im2/contexts/onboarding/sign_in/view.cljs index 56e509b2b7..3500fc44f1 100644 --- a/src/status_im2/contexts/onboarding/sign_in/view.cljs +++ b/src/status_im2/contexts/onboarding/sign_in/view.cljs @@ -11,8 +11,8 @@ [react-native.platform :as platform] [react-native.safe-area :as safe-area] [reagent.core :as reagent] - [status-im2.common.resources :as resources] [status-im2.constants :as constants] + [status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.onboarding.sign-in.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -216,9 +216,7 @@ :camera-options {:zoomMode :off} :scan-barcode true :on-read-code on-read-code}] - [rn/image - {:style (merge style/absolute-fill {:height height :width width}) - :source (resources/get-image :intro-4)}]) + [background/view true]) (conj hole-view-wrapper [blur/view {:style style/absolute-fill diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index e6b323b51c..cb0e0a663f 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -13,7 +13,7 @@ [status-im2.contexts.chat.photo-selector.view :as photo-selector] [status-im2.contexts.communities.discover.view :as communities.discover] [status-im2.contexts.communities.overview.view :as communities.overview] - [status-im2.contexts.onboarding.common.intro.view :as intro] + [status-im2.contexts.onboarding.intro.view :as intro] [status-im2.contexts.onboarding.create-password.view :as create-password] [status-im2.contexts.onboarding.create-profile.view :as create-profile] [status-im2.contexts.onboarding.enable-biometrics.view :as enable-biometrics] diff --git a/src/utils/worklets/onboarding_carousel.cljs b/src/utils/worklets/onboarding_carousel.cljs new file mode 100644 index 0000000000..bfce096c7f --- /dev/null +++ b/src/utils/worklets/onboarding_carousel.cljs @@ -0,0 +1,11 @@ +(ns utils.worklets.onboarding-carousel) + +(def worklets (js/require "../src/js/worklets/onboarding_carousel.js")) + +(defn dynamic-progress-bar-width + [static-progress-bar-width progress] + (.dynamicProgressBarWidth ^js worklets static-progress-bar-width progress)) + +(defn carousel-left-position + [window-width progress] + (.carouselLeftPosition ^js worklets window-width progress))