From ada7a02c2133e3a57d85862616d9f4676dd2af27 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Wed, 15 Mar 2023 11:46:05 +0000 Subject: [PATCH] chore: add skeleton for sign in with syncing flow --- .../onboarding/common/intro/view.cljs | 2 +- .../contexts/onboarding/sign_in/style.cljs | 14 ++++ .../contexts/onboarding/sign_in/view.cljs | 42 ++++++++++++ .../syncing/syncing_devices/style.cljs | 14 ++++ .../syncing/syncing_devices/view.cljs | 51 +++++++++++++++ src/status_im2/navigation/screens.cljs | 65 ++++++++++++------- 6 files changed, 163 insertions(+), 25 deletions(-) create mode 100644 src/status_im2/contexts/onboarding/sign_in/style.cljs create mode 100644 src/status_im2/contexts/onboarding/sign_in/view.cljs create mode 100644 src/status_im2/contexts/onboarding/syncing/syncing_devices/style.cljs create mode 100644 src/status_im2/contexts/onboarding/syncing/syncing_devices/view.cljs diff --git a/src/status_im2/contexts/onboarding/common/intro/view.cljs b/src/status_im2/contexts/onboarding/common/intro/view.cljs index f282986cd5..1b7337007f 100644 --- a/src/status_im2/contexts/onboarding/common/intro/view.cljs +++ b/src/status_im2/contexts/onboarding/common/intro/view.cljs @@ -61,7 +61,7 @@ :source (get-in carousels [@carousel-index :image])}] [quo/drawer-buttons {:top-card {:on-press (fn [] - (rf/dispatch [:navigate-to :new-to-status]) + (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} diff --git a/src/status_im2/contexts/onboarding/sign_in/style.cljs b/src/status_im2/contexts/onboarding/sign_in/style.cljs new file mode 100644 index 0000000000..0e5cd83e14 --- /dev/null +++ b/src/status_im2/contexts/onboarding/sign_in/style.cljs @@ -0,0 +1,14 @@ +(ns status-im2.contexts.onboarding.sign-in.style + (:require [quo2.foundations.colors :as colors] + [react-native.platform :as platform])) + +(def navigation-bar {:height 56}) + +(def page-container + {: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}) diff --git a/src/status_im2/contexts/onboarding/sign_in/view.cljs b/src/status_im2/contexts/onboarding/sign_in/view.cljs new file mode 100644 index 0000000000..97e5dde052 --- /dev/null +++ b/src/status_im2/contexts/onboarding/sign_in/view.cljs @@ -0,0 +1,42 @@ +(ns status-im2.contexts.onboarding.sign-in.view + (:require [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [status-im2.contexts.onboarding.sign-in.style :as style] + [utils.i18n :as i18n] + [status-im2.contexts.onboarding.common.background.view :as background] + [utils.re-frame :as rf])) + +(defn navigation-bar + [] + [rn/view {:style style/navigation-bar} + [quo/page-nav + {:align-mid? true + :mid-section {:type :text-only :main-text ""} + :left-section {:type :blur-bg + :icon :i/arrow-left + :icon-override-theme :dark + :on-press #(rf/dispatch [:navigate-back])} + :right-section-buttons [{:type :blur-bg + :icon :i/info + :icon-override-theme :dark + :on-press #(js/alert "Pending")}]}]]) + +(defn page + [] + [rn/view {:style style/page-container} + [navigation-bar] + [rn/view {:style {:padding-horizontal 20}} + [quo/text + {:size :heading-1 + :weight :semi-bold + :style {:color colors/white}} "Sign in by syncing"] + [quo/button + {:on-press #(rf/dispatch [:navigate-to :syncing-devices]) + :style {}} (i18n/label :t/continue)]]]) + +(defn sign-in + [] + [rn/view {:style {:flex 1}} + [background/view true] + [page]]) diff --git a/src/status_im2/contexts/onboarding/syncing/syncing_devices/style.cljs b/src/status_im2/contexts/onboarding/syncing/syncing_devices/style.cljs new file mode 100644 index 0000000000..d7c19875c9 --- /dev/null +++ b/src/status_im2/contexts/onboarding/syncing/syncing_devices/style.cljs @@ -0,0 +1,14 @@ +(ns status-im2.contexts.onboarding.syncing.syncing-devices.style + (:require [quo2.foundations.colors :as colors] + [react-native.platform :as platform])) + +(def navigation-bar {:height 56}) + +(def page-container + {: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}) diff --git a/src/status_im2/contexts/onboarding/syncing/syncing_devices/view.cljs b/src/status_im2/contexts/onboarding/syncing/syncing_devices/view.cljs new file mode 100644 index 0000000000..7204a7fc54 --- /dev/null +++ b/src/status_im2/contexts/onboarding/syncing/syncing_devices/view.cljs @@ -0,0 +1,51 @@ +(ns status-im2.contexts.onboarding.syncing.syncing-devices.view + (:require [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [status-im2.contexts.onboarding.syncing.syncing-devices.style :as style] + [utils.i18n :as i18n] + [status-im2.contexts.onboarding.common.background.view :as background] + [utils.re-frame :as rf])) + + +(defn navigation-bar + [] + [rn/view {:style style/navigation-bar} + [quo/page-nav + {:align-mid? true + :mid-section {:type :text-only :main-text ""} + :left-section {:type :blur-bg + :icon :i/arrow-left + :icon-override-theme :dark + :on-press #(rf/dispatch [:navigate-back])} + :right-section-buttons [{:type :blur-bg + :icon :i/info + :icon-override-theme :dark + :on-press #(js/alert "Pending")}]}]]) + +(defn page + [] + [rn/view {:style style/page-container} + [navigation-bar] + [rn/view {:style {:padding-horizontal 20}} + [quo/text + {:size :heading-1 + :weight :semi-bold + :style {:color colors/white}} "Syncing devices..."] + [quo/text + {:size :heading-2 + :weight :semi-bold + :style {:color colors/white}} "will show sync complete if successful"] + [quo/text + {:size :heading-2 + :weight :semi-bold + :style {:color colors/white}} "will show sync failed if unsuccessful"] + [quo/button + {:on-press #(rf/dispatch [:navigate-to :enable-notifications]) + :style {}} (i18n/label :t/continue)]]]) + +(defn syncing-devices + [] + [rn/view {:style {:flex 1}} + [background/view true] + [page]]) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 29b67ab4e0..8b193fc225 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -1,27 +1,30 @@ (ns status-im2.navigation.screens - (:require [utils.i18n :as i18n] ;; TODO remove when not used anymore - [quo2.foundations.colors :as colors] - [react-native.platform :as platform] - [status-im.ui.screens.screens :as old-screens] - [status-im2.config :as config] - [status-im2.contexts.activity-center.view :as activity-center] - [status-im2.contexts.add-new-contact.views :as add-new-contact] - [status-im2.contexts.chat.lightbox.view :as lightbox] - [status-im2.contexts.chat.messages.view :as chat] - [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector] - [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.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] - [status-im2.contexts.onboarding.enable-notifications.view :as enable-notifications] - [status-im2.contexts.onboarding.new-to-status.view :as new-to-status] - [status-im2.contexts.onboarding.profiles.view :as profiles] - [status-im2.contexts.quo-preview.main :as quo.preview] - [status-im2.contexts.shell.view :as shell] - [status-im2.contexts.syncing.view :as settings-syncing])) + (:require + [utils.i18n :as i18n] ;; TODO remove when not used anymore + [quo2.foundations.colors :as colors] + [react-native.platform :as platform] + [status-im.ui.screens.screens :as old-screens] + [status-im2.config :as config] + [status-im2.contexts.activity-center.view :as activity-center] + [status-im2.contexts.add-new-contact.views :as add-new-contact] + [status-im2.contexts.chat.lightbox.view :as lightbox] + [status-im2.contexts.chat.messages.view :as chat] + [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector] + [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.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] + [status-im2.contexts.onboarding.enable-notifications.view :as enable-notifications] + [status-im2.contexts.onboarding.new-to-status.view :as new-to-status] + [status-im2.contexts.onboarding.sign-in.view :as sign-in] + [status-im2.contexts.onboarding.syncing.syncing-devices.view :as syncing-devices] + [status-im2.contexts.onboarding.profiles.view :as profiles] + [status-im2.contexts.quo-preview.main :as quo.preview] + [status-im2.contexts.shell.view :as shell] + [status-im2.contexts.syncing.view :as settings-syncing])) (def components []) @@ -148,7 +151,21 @@ :topBar {:visible false} :navigationBar {:backgroundColor colors/black}} :insets {:top false} - :component enable-notifications/enable-notifications}] + :component enable-notifications/enable-notifications} + + {:name :sign-in + :options {:statusBar {:style :light} + :topBar {:visible false} + :navigationBar {:backgroundColor colors/black}} + :insets {:top false} + :component sign-in/sign-in} + + {:name :syncing-devices + :options {:statusBar {:style :light} + :topBar {:visible false} + :navigationBar {:backgroundColor colors/black}} + :insets {:top false} + :component syncing-devices/syncing-devices}] (when config/quo-preview-enabled? quo.preview/screens)