diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs index ecfaa2cc6e..5e2e235e36 100644 --- a/src/quo2/components/navigation/page_nav.cljs +++ b/src/quo2/components/navigation/page_nav.cljs @@ -30,16 +30,16 @@ {:no-color true}))) (defn left-section-view - [{:keys [on-press icon accessibility-label type icon-override-theme] :or {type :grey}} + [{:keys [on-press icon accessibility-label type icon-background-color] :or {type :grey}} put-middle-section-on-left?] [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})} [button/button - {:on-press on-press - :icon true - :type type - :size 32 - :accessibility-label accessibility-label - :override-theme icon-override-theme} + {:on-press on-press + :icon true + :type type + :size 32 + :accessibility-label accessibility-label + :override-background-color icon-background-color} icon]]) (defn- mid-section-comp @@ -235,15 +235,18 @@ :align-items :center}} (when left-section [left-section-view left-section put-middle-section-on-left?]) - (when put-middle-section-on-left? - [mid-section-view - (assoc mid-section-props - :left-align? true - :description (:description mid-section) - :description-color (:description-color mid-section) - :description-icon (:description-icon mid-section) - :align-mid? align-mid? - :description-user-icon (:description-user-icon mid-section))])] - (when-not put-middle-section-on-left? - [mid-section-view mid-section-props]) + (when mid-section + (cond + put-middle-section-on-left? + [mid-section-view + (assoc mid-section-props + :left-align? true + :description (:description mid-section) + :description-color (:description-color mid-section) + :description-icon (:description-icon mid-section) + :align-mid? align-mid? + :description-user-icon (:description-user-icon mid-section))] + + (not put-middle-section-on-left?) + [mid-section-view mid-section-props]))] [right-section-view right-section-buttons]])) diff --git a/src/status_im/multiaccounts/login/core.cljs b/src/status_im/multiaccounts/login/core.cljs index 94f421c09e..90de058dc6 100644 --- a/src/status_im/multiaccounts/login/core.cljs +++ b/src/status_im/multiaccounts/login/core.cljs @@ -523,7 +523,7 @@ (rf/merge cofx {:db (-> db (dissoc :multiaccounts/login) - (assoc :tos/next-root :onboarding-notification :chats/loading? false) + (assoc :tos/next-root :enable-notifications :chats/loading? false) (assoc-in [:multiaccount :multiaccounts/first-account] first-account?)) ::get-tokens [network-id accounts recovered-account?]} (finish-keycard-setup) @@ -534,7 +534,7 @@ (multiaccounts/switch-preview-privacy-mode-flag) (link-preview/request-link-preview-whitelist) (logging/set-log-level (:log-level multiaccount)) - (navigation/init-root :shell-stack)))) + (navigation/init-root :enable-notifications)))) (defn- keycard-setup? [cofx] diff --git a/src/status_im2/contexts/onboarding/common/background/view.cljs b/src/status_im2/contexts/onboarding/common/background/view.cljs index 064d2bc377..a5e869dcaa 100644 --- a/src/status_im2/contexts/onboarding/common/background/view.cljs +++ b/src/status_im2/contexts/onboarding/common/background/view.cljs @@ -23,4 +23,4 @@ :style (style/background-gradient-overlay dark-overlay?)}] (when dark-overlay? [rn/view - {:style style/background-blur-overlay}])]) + {:style style/background-blur-overlay}])]) \ No newline at end of file diff --git a/src/status_im2/contexts/onboarding/enable_notifications/style.cljs b/src/status_im2/contexts/onboarding/enable_notifications/style.cljs index 26ee7187e6..670ab47a0e 100644 --- a/src/status_im2/contexts/onboarding/enable_notifications/style.cljs +++ b/src/status_im2/contexts/onboarding/enable_notifications/style.cljs @@ -1,14 +1,26 @@ (ns status-im2.contexts.onboarding.enable-notifications.style - (:require [quo2.foundations.colors :as colors] - [react-native.platform :as platform])) + (:require + [react-native.platform :as platform] + [quo2.foundations.colors :as colors])) -(def page-container - {:padding-top (if platform/ios? 44 0) - :position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0 +(def title-container + {:justify-content :center + :margin-top 12 + :padding-horizontal 20}) + +(def enable-notifications-buttons + {:margin 20}) + +(def enable-notifications + {:flex 1 + :padding-top (if platform/ios? 44 0) :background-color colors/neutral-80-opa-80-blur}) -(def navigation-bar {:height 56}) +(def page-illustration + {:flex 1 + :background-color colors/danger-50 + :align-items :center + :margin-horizontal 20 + :border-radius 20 + :margin-top 20 + :justify-content :center}) diff --git a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs index aa631ac6fd..ed0c52485c 100644 --- a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs +++ b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs @@ -1,37 +1,71 @@ (ns status-im2.contexts.onboarding.enable-notifications.view - (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [status-im2.contexts.onboarding.enable-notifications.style :as style] - [utils.i18n :as i18n] - [status-im2.contexts.onboarding.common.background.view :as background] - [utils.re-frame :as rf])) + (:require + [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [utils.i18n :as i18n] + [utils.re-frame :as rf] + [react-native.core :as rn] + [react-native.platform :as platform] + [status-im.notifications.core :as notifications] + [status-im2.contexts.onboarding.common.background.view :as background] + [status-im2.contexts.onboarding.enable-notifications.style :as style])) (defn navigation-bar [] - [rn/view {:style style/navigation-bar} - [quo/page-nav - {:align-mid? true - :mid-section {:type :text-only :main-text ""} - }]]) + [quo/page-nav + (merge {:horizontal-description? false + :one-icon-align-left? true + :align-mid? false + :page-nav-color :transparent + :left-section {:icon :i/arrow-left + :icon-background-color colors/white-opa-5 + :icon-override-theme :dark + :type :shell + :on-press #()}})]) -(defn page +(defn page-title [] - [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}} "Enable-notifications"] - [quo/button - {:on-press #(rf/dispatch [:init-root :shell-stack]) - :type :grey - :override-theme :dark - :style {}} (i18n/label :t/continue)]]]) + [rn/view {:style style/title-container} + [quo/text + {:accessibility-label :notifications-screen-title + :weight :semi-bold + :size :heading-1 + :style {:color colors/white}} + (i18n/label :t/intro-wizard-title6)] + [quo/text + {:accessibility-label :notifications-screen-sub-title + :weight :regular + :size :paragraph-1 + :style {:color colors/white}} + (i18n/label :t/enable-notifications-sub-title)]]) + +(defn enable-notification-buttons + [] + [rn/view {:style style/enable-notifications-buttons} + [quo/button + {:on-press (fn [] + (rf/dispatch [::notifications/switch true platform/ios?]) + (rf/dispatch [:init-root :welcome])) + :type :primary + :before :i/notifications + :accessibility-label :enable-notifications-button + :override-background-color (colors/custom-color :magenta 60)} + (i18n/label :t/intro-wizard-title6)] + [quo/button + {:on-press #(rf/dispatch [:init-root :welcome]) + :accessibility-label :enable-notifications-later-button + :override-background-color colors/white-opa-5 + :style {:margin-top 12}} + (i18n/label :t/maybe-later)]]) (defn enable-notifications [] - [rn/view {:style {:flex 1}} + [rn/view {:style style/enable-notifications} [background/view true] - [page]]) + [navigation-bar] + [page-title] + [rn/view {:style style/page-illustration} + [quo/text + "[Illustration here]"]] + [enable-notification-buttons]]) + diff --git a/src/status_im2/contexts/onboarding/welcome/style.cljs b/src/status_im2/contexts/onboarding/welcome/style.cljs new file mode 100644 index 0000000000..94cd199676 --- /dev/null +++ b/src/status_im2/contexts/onboarding/welcome/style.cljs @@ -0,0 +1,24 @@ +(ns status-im2.contexts.onboarding.welcome.style + (:require + [react-native.platform :as platform] + [quo2.foundations.colors :as colors])) + +(def title-container + {:justify-content :center + :margin-top 12 + :padding-horizontal 20}) + +(def welcome-container + {:flex 1 + :padding-top (if platform/ios? 44 0) + :background-color colors/neutral-80-opa-80-blur}) + +(def page-illustration + {:flex 1 + :background-color colors/danger-50 + :align-items :center + :margin-horizontal 20 + :border-radius 20 + :margin-top 20 + :justify-content :center}) + diff --git a/src/status_im2/contexts/onboarding/welcome/view.cljs b/src/status_im2/contexts/onboarding/welcome/view.cljs new file mode 100644 index 0000000000..ade784e3d5 --- /dev/null +++ b/src/status_im2/contexts/onboarding/welcome/view.cljs @@ -0,0 +1,55 @@ +(ns status-im2.contexts.onboarding.welcome.view + (:require + [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [utils.i18n :as i18n] + [utils.re-frame :as rf] + [react-native.core :as rn] + [status-im2.contexts.onboarding.welcome.style :as style] + [status-im2.contexts.onboarding.common.background.view :as background])) + +(defn page-title + [] + [rn/view {:style style/title-container} + [quo/text + {:accessibility-label :notifications-screen-title + :weight :semi-bold + :size :heading-1 + :style {:color colors/white}} + (i18n/label :t/welcome-to-web3)] + [quo/text + {:accessibility-label :notifications-screen-sub-title + :weight :regular + :size :paragraph-1 + :style {:color colors/white}} + (i18n/label :t/welcome-to-web3-sub-title)]]) + + +(defn navigation-bar + [root] + [quo/page-nav + {:horizontal-description? false + :one-icon-align-left? true + :align-mid? false + :page-nav-color :transparent + :left-section {:icon :i/arrow-left + :icon-background-color colors/white-opa-5 + :type :shell + :on-press #(rf/dispatch [:init-root root])}}]) + +(defn view + [] + [rn/view {:style style/welcome-container} + [background/view true] + [navigation-bar :enable-notifications] + [page-title] + [rn/view {:style style/page-illustration} + [quo/text + "Illustration here"]] + [quo/button + {:on-press #(rf/dispatch [:init-root :shell-stack]) + :type :primary + :accessibility-label :welcome-button + :override-background-color (colors/custom-color :magenta 60) + :style {:margin 20}} + (i18n/label :t/start-using-status)]]) \ No newline at end of file diff --git a/src/status_im2/navigation/roots.cljs b/src/status_im2/navigation/roots.cljs index 96fe90531c..722a948f7f 100644 --- a/src/status_im2/navigation/roots.cljs +++ b/src/status_im2/navigation/roots.cljs @@ -110,15 +110,6 @@ (status-bar-options) {:topBar (topbar-options)})}}} - ;;WELCOME - :welcome - {:root {:stack {:children [{:component {:name :welcome - :id :welcome - :options (status-bar-options)}}] - :options (merge (default-root) - (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}} - ;;NOTIFICATIONS :onboarding-notification {:root {:stack {:children [{:component {:name :onboarding-notification @@ -173,12 +164,18 @@ :id :profiles :options (merge (status-bar-options) - {:topBar {:visible false}})}}]}}} - :enable-notifications - {:root - {:stack {:id :enable-notifications - :children [{:component {:name :enable-notifications - :id :enable-notifications - :options (merge - (status-bar-options) - {:topBar {:visible false}})}}]}}}})) + {:topBar {:visible false}})}}]}}}} + {:enable-notifications + {:root {:stack {:children [{:component {:name :enable-notifications + :id :enable-notifications + :options (merge + (status-bar-options) + {:statusBar {:style :light} + :topBar {:visible false}})}}]}}}} + {:welcome + {:root {:stack {:children [{:component {:name :welcome + :id :welcome + :options (merge + (status-bar-options) + {:statusBar {:style :light} + :topBar {:visible false}})}}]}}}})) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 6619e888d4..ee9a54eb9f 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -18,6 +18,7 @@ [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.welcome.view :as welcome] [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] @@ -197,7 +198,14 @@ :topBar {:visible false} :navigationBar {:backgroundColor colors/black}} :insets {:top false} - :component syncing-devices/syncing-devices}] + :component syncing-devices/syncing-devices} + + {:name :welcome + :options {:statusBar {:style :light} + :topBar {:visible false} + :navigationBar {:backgroundColor colors/black}} + :insets {:top false} + :component welcome/view}] (when config/quo-preview-enabled? quo.preview/screens) diff --git a/translations/en.json b/translations/en.json index e9da82782e..0d360ce2ae 100644 --- a/translations/en.json +++ b/translations/en.json @@ -485,6 +485,7 @@ "empty-chat-description-community": "It's been quiet here for the last {{quiet-hours}}.", "empty-chat-description-public-share-this": "share this chat.", "enable": "Enable", + "enable-notifications-sub-title": "Receive notifications when somebody sends you a message or crypto to your wallet", "encrypt-with-password": "Encrypt with password", "ending-not-allowed": "{{ending}} ending is not allowed", "ens-10-SNT": "10 SNT", @@ -1259,6 +1260,7 @@ "start-conversation": "Start conversation", "start-group-chat": "Start group chat", "start-new-chat": "Start new chat", + "start-using-status": "Start using Status", "status": "Status", "status-confirmed": "Confirmed", "status-hardwallet": "Status hardwallet", @@ -1441,6 +1443,8 @@ "web-view-error": "Unable to load page", "welcome-screen-text": "Set up your wallet, invite friends to chat\n and browse popular dapps!", "welcome-to-status": "Welcome to Status!", + "welcome-to-web3": "Welcome to web3", + "welcome-to-web3-sub-title": "What are you waiting for? Go explore!", "welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps", "welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button", "welcome-community-blank-message": "Your channels will appear here. To create a new channel, click on the ⊕ button and select \"Create a channel\"",