feat(oboarding): Update ilustrations (#21781)

* Share usage data screen image done

* Update login by syncing and login using recovery phrase images

*  Small refactor: remove `merge` and add a `let` binding

* Fix modal entering expected animation
This commit is contained in:
Ulises Manuel 2024-12-11 11:05:23 -06:00 committed by GitHub
parent c8b063493b
commit bc9b0f8c87
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 44 additions and 29 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 306 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 542 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

@ -79,11 +79,11 @@
[rn/view {:style style/community-logo-ring}]]) [rn/view {:style style/community-logo-ring}]])
(defn- description-container (defn- description-container
[{:keys [description description-text collection-text community-text [{:keys [description description-text collection-text community-text blur?
collection-image community-image blur?] collection-image community-image description-accessibility-label]
context-tag-props :context-tag context-tag-props :context-tag
summary-props :summary}] summary-props :summary}]
[rn/view [rn/view {:accessibility-label description-accessibility-label}
(cond (cond
(and (= description :text) (not (string/blank? description-text))) (and (= description :text) (not (string/blank? description-text)))
[text/text [text/text

View File

@ -3,6 +3,8 @@
(def ui (def ui
{:add-new-contact (js/require "../resources/images/ui2/add-contact.png") {:add-new-contact (js/require "../resources/images/ui2/add-contact.png")
:biometrics (js/require "../resources/images/ui2/biometrics.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") :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-sign-in (js/require "../resources/images/ui2/desktop-how-to-pair-sign-in.png")
:desktop-how-to-pair-logged-in (js/require :desktop-how-to-pair-logged-in (js/require

View File

@ -91,7 +91,7 @@
:title (i18n/label :t/log-in-by-syncing) :title (i18n/label :t/log-in-by-syncing)
:subtitle (i18n/label :t/log-in-by-syncing-subtitle) :subtitle (i18n/label :t/log-in-by-syncing-subtitle)
:accessibility-label :log-in-by-syncing-icon-card :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}]) :on-press show-check-before-syncing}])
(defn- use-empty-keycard-icon-card (defn- use-empty-keycard-icon-card

View File

@ -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 (def title-container
{:margin-horizontal 20 {:margin-horizontal 20
@ -16,3 +17,7 @@
[insets] [insets]
{:margin 20 {:margin 20
:margin-bottom (+ 12 (:bottom insets))}) :margin-bottom (+ 12 (:bottom insets))})
(def page
{:flex 1
:background-color colors/neutral-100})

View File

@ -17,35 +17,38 @@
(rf/dispatch [:navigate-to-within-stack [next-screen :screen/onboarding.share-usage]]) ;; Onboarding (rf/dispatch [:navigate-to-within-stack [next-screen :screen/onboarding.share-usage]]) ;; Onboarding
(rf/dispatch [:navigate-back]))) ;; Login Screen (rf/dispatch [:navigate-back]))) ;; Login Screen
(defn- learn-more
[]
(rf/dispatch [:show-bottom-sheet
{:content learn-more-sheet/view
:shell? true}]))
(defn view (defn view
[] []
(let [insets (safe-area/get-insets) (let [insets (safe-area/get-insets)
next-screen (:next-screen (rf/sub [:get-screen-params :screen/onboarding.share-usage])) 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)) 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)) maybe-later (rn/use-callback #(share-usage-data-fn false next-screen))]
learn-more (rn/use-callback #(rf/dispatch [:show-bottom-sheet [rn/view {:style style/page}
{:content learn-more-sheet/view
:shell? true}]))]
[:<>
[quo/page-nav [quo/page-nav
{:margin-top (:top insets) {:margin-top (:top insets)
:background :blur :background :blur
:icon-name :i/arrow-left :icon-name :i/close
:on-press events-helper/navigate-back :on-press events-helper/navigate-back
:right-side [{:icon-left :i/info :right-side [{:icon-left :i/info
:accessibility-label :learn-more :accessibility-label :learn-more
:label (i18n/label :t/learn-more) :label (i18n/label :t/learn-more)
:on-press learn-more}]}] :on-press learn-more}]}]
[quo/text-combinations [quo/page-top
{:container-style style/title-container {:title (i18n/label :t/help-us-improve-status)
:title (i18n/label :t/help-us-improve-status)
:title-accessibility-label :share-usage-title :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}] :description-accessibility-label :share-usage-subtitle}]
[rn/image [rn/image
{:resize-mode :contain {:resize-mode :contain
:style (style/page-illustration (:width (rn/get-window))) :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)} [rn/view {:style (style/buttons insets)}
[quo/button [quo/button
{:size 40 {:size 40

View File

@ -25,16 +25,15 @@
(defn root-options (defn root-options
[{:keys [background-color theme status-bar-theme nav-bar-color]}] [{:keys [background-color theme status-bar-theme nav-bar-color]}]
(merge (let [layout-background (or background-color
(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)) (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"] :orientation ["portrait"]
:backgroundColor (or background-color :backgroundColor layout-background})))
(colors/theme-colors colors/white
colors/neutral-100
theme))}}))
(defn dark-root-options (defn dark-root-options
[] []

View File

@ -757,9 +757,7 @@
:metrics {:track? true} :metrics {:track? true}
:options {:theme :dark :options {:theme :dark
:layout options/onboarding-transparent-layout :layout options/onboarding-transparent-layout
:animations (merge :animations transitions/modal-animations-vertical
transitions/new-to-status-modal-animations
transitions/push-animations-for-transparent-background)
:popGesture false :popGesture false
:modalPresentationStyle :overCurrentContext} :modalPresentationStyle :overCurrentContext}
:component onboarding.share-usage/view}) :component onboarding.share-usage/view})

View File

@ -40,6 +40,14 @@
:to (:width (rn/get-window)) :to (:width (rn/get-window))
:duration constants/onboarding-modal-animation-duration}}}) :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 ;;;; Stack Transitions
(def stack-slide-transition (def stack-slide-transition
{:push {:content {:translationX {:from (:width (rn/get-window)) {:push {:content {:translationX {:from (:width (rn/get-window))