diff --git a/resources/images/ui2/login-syncing@2x.png b/resources/images/ui2/login-syncing@2x.png new file mode 100644 index 0000000000..5e292e5561 Binary files /dev/null and b/resources/images/ui2/login-syncing@2x.png differ diff --git a/resources/images/ui2/login-syncing@3x.png b/resources/images/ui2/login-syncing@3x.png new file mode 100644 index 0000000000..c6ad028a0d Binary files /dev/null and b/resources/images/ui2/login-syncing@3x.png differ diff --git a/resources/images/ui2/recovery-phrase@2x.png b/resources/images/ui2/recovery-phrase@2x.png index 382d213c18..5e09d4553d 100644 Binary files a/resources/images/ui2/recovery-phrase@2x.png and b/resources/images/ui2/recovery-phrase@2x.png differ diff --git a/resources/images/ui2/recovery-phrase@3x.png b/resources/images/ui2/recovery-phrase@3x.png index 7d74055619..0d4e8b7bcf 100644 Binary files a/resources/images/ui2/recovery-phrase@3x.png and b/resources/images/ui2/recovery-phrase@3x.png differ diff --git a/resources/images/ui2/usage-data@2x.png b/resources/images/ui2/usage-data@2x.png new file mode 100644 index 0000000000..a808bca364 Binary files /dev/null and b/resources/images/ui2/usage-data@2x.png differ diff --git a/resources/images/ui2/usage-data@3x.png b/resources/images/ui2/usage-data@3x.png new file mode 100644 index 0000000000..54c10eaaae Binary files /dev/null and b/resources/images/ui2/usage-data@3x.png differ diff --git a/src/quo/components/text_combinations/page_top/view.cljs b/src/quo/components/text_combinations/page_top/view.cljs index d10109a8fe..f243aa8497 100644 --- a/src/quo/components/text_combinations/page_top/view.cljs +++ b/src/quo/components/text_combinations/page_top/view.cljs @@ -79,11 +79,11 @@ [rn/view {:style style/community-logo-ring}]]) (defn- description-container - [{:keys [description description-text collection-text community-text - collection-image community-image blur?] + [{:keys [description description-text collection-text community-text blur? + collection-image community-image description-accessibility-label] context-tag-props :context-tag summary-props :summary}] - [rn/view + [rn/view {:accessibility-label description-accessibility-label} (cond (and (= description :text) (not (string/blank? description-text))) [text/text diff --git a/src/status_im/common/resources.cljs b/src/status_im/common/resources.cljs index 05628ab48d..fc248082db 100644 --- a/src/status_im/common/resources.cljs +++ b/src/status_im/common/resources.cljs @@ -3,6 +3,8 @@ (def ui {:add-new-contact (js/require "../resources/images/ui2/add-contact.png") :biometrics (js/require "../resources/images/ui2/biometrics.png") + :usage-data (js/require "../resources/images/ui2/usage-data.png") + :login-syncing (js/require "../resources/images/ui2/login-syncing.png") :chat-privately-with-friends (js/require "../resources/images/ui2/chat-privately-with-friends.png") :desktop-how-to-pair-sign-in (js/require "../resources/images/ui2/desktop-how-to-pair-sign-in.png") :desktop-how-to-pair-logged-in (js/require diff --git a/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs b/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs index 0d25b3b1c3..800295191e 100644 --- a/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs +++ b/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs @@ -91,7 +91,7 @@ :title (i18n/label :t/log-in-by-syncing) :subtitle (i18n/label :t/log-in-by-syncing-subtitle) :accessibility-label :log-in-by-syncing-icon-card - :image (resources/get-image :ethereum-address) + :image (resources/get-image :login-syncing) :on-press show-check-before-syncing}]) (defn- use-empty-keycard-icon-card diff --git a/src/status_im/contexts/onboarding/share_usage/style.cljs b/src/status_im/contexts/onboarding/share_usage/style.cljs index c32258759f..1f8d4012c8 100644 --- a/src/status_im/contexts/onboarding/share_usage/style.cljs +++ b/src/status_im/contexts/onboarding/share_usage/style.cljs @@ -1,4 +1,5 @@ -(ns status-im.contexts.onboarding.share-usage.style) +(ns status-im.contexts.onboarding.share-usage.style + (:require [quo.foundations.colors :as colors])) (def title-container {:margin-horizontal 20 @@ -16,3 +17,7 @@ [insets] {:margin 20 :margin-bottom (+ 12 (:bottom insets))}) + +(def page + {:flex 1 + :background-color colors/neutral-100}) diff --git a/src/status_im/contexts/onboarding/share_usage/view.cljs b/src/status_im/contexts/onboarding/share_usage/view.cljs index 4987656e94..7a02b3b292 100644 --- a/src/status_im/contexts/onboarding/share_usage/view.cljs +++ b/src/status_im/contexts/onboarding/share_usage/view.cljs @@ -17,35 +17,38 @@ (rf/dispatch [:navigate-to-within-stack [next-screen :screen/onboarding.share-usage]]) ;; Onboarding (rf/dispatch [:navigate-back]))) ;; Login Screen +(defn- learn-more + [] + (rf/dispatch [:show-bottom-sheet + {:content learn-more-sheet/view + :shell? true}])) + (defn view [] (let [insets (safe-area/get-insets) next-screen (:next-screen (rf/sub [:get-screen-params :screen/onboarding.share-usage])) share-usage-data (rn/use-callback #(share-usage-data-fn true next-screen)) - maybe-later (rn/use-callback #(share-usage-data-fn false next-screen)) - learn-more (rn/use-callback #(rf/dispatch [:show-bottom-sheet - {:content learn-more-sheet/view - :shell? true}]))] - [:<> + maybe-later (rn/use-callback #(share-usage-data-fn false next-screen))] + [rn/view {:style style/page} [quo/page-nav {:margin-top (:top insets) :background :blur - :icon-name :i/arrow-left + :icon-name :i/close :on-press events-helper/navigate-back :right-side [{:icon-left :i/info :accessibility-label :learn-more :label (i18n/label :t/learn-more) :on-press learn-more}]}] - [quo/text-combinations - {:container-style style/title-container - :title (i18n/label :t/help-us-improve-status) + [quo/page-top + {:title (i18n/label :t/help-us-improve-status) :title-accessibility-label :share-usage-title - :description (i18n/label :t/collecting-usage-data) + :description :text + :description-text (i18n/label :t/collecting-usage-data) :description-accessibility-label :share-usage-subtitle}] [rn/image {:resize-mode :contain :style (style/page-illustration (:width (rn/get-window))) - :source (resources/get-image :biometrics)}] + :source (resources/get-image :usage-data)}] [rn/view {:style (style/buttons insets)} [quo/button {:size 40 diff --git a/src/status_im/navigation/options.cljs b/src/status_im/navigation/options.cljs index 1d7f3faee9..229548975d 100644 --- a/src/status_im/navigation/options.cljs +++ b/src/status_im/navigation/options.cljs @@ -25,16 +25,15 @@ (defn root-options [{:keys [background-color theme status-bar-theme nav-bar-color]}] - (merge - (statusbar-and-navbar-options theme status-bar-theme nav-bar-color) - {:topBar {:visible false} - :layout {:componentBackgroundColor (or background-color - (colors/theme-colors colors/white colors/neutral-100 theme)) - :orientation ["portrait"] - :backgroundColor (or background-color - (colors/theme-colors colors/white - colors/neutral-100 - theme))}})) + (let [layout-background (or background-color + (colors/theme-colors colors/white colors/neutral-100 theme)) + component-background (or background-color + (colors/theme-colors colors/white colors/neutral-100 theme))] + (assoc (statusbar-and-navbar-options theme status-bar-theme nav-bar-color) + :topBar {:visible false} + :layout {:componentBackgroundColor component-background + :orientation ["portrait"] + :backgroundColor layout-background}))) (defn dark-root-options [] diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 30c2d46a5b..c1f687d914 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -757,9 +757,7 @@ :metrics {:track? true} :options {:theme :dark :layout options/onboarding-transparent-layout - :animations (merge - transitions/new-to-status-modal-animations - transitions/push-animations-for-transparent-background) + :animations transitions/modal-animations-vertical :popGesture false :modalPresentationStyle :overCurrentContext} :component onboarding.share-usage/view}) diff --git a/src/status_im/navigation/transitions.cljs b/src/status_im/navigation/transitions.cljs index b4ef5790c5..d802a2832b 100644 --- a/src/status_im/navigation/transitions.cljs +++ b/src/status_im/navigation/transitions.cljs @@ -40,6 +40,14 @@ :to (:width (rn/get-window)) :duration constants/onboarding-modal-animation-duration}}}) +(def modal-animations-vertical + {:showModal {:translationY {:from (:height (rn/get-window)) + :to 0 + :duration constants/onboarding-modal-animation-duration}} + :dismissModal {:translationY {:from 0 + :to (:height (rn/get-window)) + :duration constants/onboarding-modal-animation-duration}}}) + ;;;; Stack Transitions (def stack-slide-transition {:push {:content {:translationX {:from (:width (rn/get-window))