status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix design inconsistencies on onboarding notifications screen (#15523) 

* Fix design inconsistencies on onboarding notifications screen

* Fixes

* Title as a separate component

* Lint-fix

* Post-review fixes

* File rollback

* File rollback

* Fixes

* Fixes
This commit is contained in:
Alexander 2023-04-11 16:44:38 +02:00 committed by GitHub
parent cddf127674
commit fe4f4463c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 178 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/quo2/components/text_combinations/title/style.cljs Normal file
View File

@ -0,0 +1,15 @@
(ns quo2.components.text-combinations.title.style
(:require
[quo2.foundations.colors :as colors]))
(def title-container
{:justify-content :center
:margin-top 12
:padding-horizontal 20})
(def title-text
{:color colors/white})
(def subtitle-text
{:color colors/white
:margin-bottom 8})

25
src/quo2/components/text_combinations/title/view.cljs Normal file
View File

@ -0,0 +1,25 @@
(ns quo2.components.text-combinations.title.view
(:require
[quo2.components.markdown.text :as text]
[quo2.components.text-combinations.title.style :as style]
[react-native.core :as rn]))
(defn title
[{:keys [title
title-accessibility-label
subtitle
subtitle-accessibility-label]}]
[rn/view {:style style/title-container}
[text/text
{:accessibility-label title-accessibility-label
:weight :semi-bold
:size :heading-1
:style style/title-text}
title]
(when subtitle
[text/text
{:accessibility-label subtitle-accessibility-label
:weight :regular
:size :paragraph-1
:style style/subtitle-text}
subtitle])])

4
src/quo2/core.cljs
View File

@ -72,6 +72,7 @@
quo2.components.tags.tag quo2.components.tags.tag
quo2.components.tags.tags quo2.components.tags.tags
quo2.components.tags.token-tag quo2.components.tags.token-tag
quo2.components.text-combinations.title.view
quo2.components.list-items.user-list)) quo2.components.list-items.user-list))
(def toast quo2.components.notifications.toast/toast) (def toast quo2.components.notifications.toast/toast)
@ -193,5 +194,8 @@
(def status-tag quo2.components.tags.status-tags/status-tag) (def status-tag quo2.components.tags.status-tags/status-tag)
(def token-tag quo2.components.tags.token-tag/tag) (def token-tag quo2.components.tags.token-tag/tag)
;;;; TITLE
(def title quo2.components.text-combinations.title.view/title)
;;;; LINKS ;;;; LINKS
(def url-preview quo2.components.links.url-preview.view/view) (def url-preview quo2.components.links.url-preview.view/view)

23
src/status_im2/contexts/onboarding/enable_notifications/style.cljs
View File

@ -1,26 +1,25 @@
(ns status-im2.contexts.onboarding.enable-notifications.style (ns status-im2.contexts.onboarding.enable-notifications.style
(:require (:require
[react-native.platform :as platform]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))
(def title-container (def default-margin 20)
{:justify-content :center
:margin-top 12
:padding-horizontal 20})
(def enable-notifications-buttons (defn page-container
{:margin 20}) [insets]
(def enable-notifications
{:flex 1 {:flex 1
:padding-top (if platform/ios? 44 0) :padding-top (:top insets)
:background-color colors/neutral-80-opa-80-blur}) :background-color colors/neutral-80-opa-80-blur})
(def page-illustration (def page-illustration
{:flex 1 {:flex 1
:background-color colors/danger-50 :background-color colors/danger-50
:align-items :center :align-items :center
:margin-horizontal 20 :margin-horizontal default-margin
:border-radius 20 :border-radius 20
:margin-top 20 :margin-top default-margin
:justify-content :center}) :justify-content :center})
(defn buttons
[insets]
{:margin default-margin
:margin-bottom (+ default-margin (:bottom insets))})

78
src/status_im2/contexts/onboarding/enable_notifications/view.cljs
View File

@ -6,6 +6,7 @@
[utils.re-frame :as rf] [utils.re-frame :as rf]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.platform :as platform] [react-native.platform :as platform]
[react-native.safe-area :as safe-area]
[status-im.notifications.core :as notifications] [status-im.notifications.core :as notifications]
[status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.enable-notifications.style :as style] [status-im2.contexts.onboarding.enable-notifications.style :as style]
@ -26,49 +27,44 @@
(defn page-title (defn page-title
[] []
[rn/view {:style style/title-container} [quo/title
[quo/text {:title (i18n/label :t/intro-wizard-title6)
{:accessibility-label :notifications-screen-title :title-accessibility-label :notifications-title
:weight :semi-bold :subtitle (i18n/label :t/enable-notifications-sub-title)
:size :heading-1 :subtitle-accessibility-label :notifications-sub-title}])
: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 (defn enable-notification-buttons
[] [{:keys [insets]}]
[rn/view {:style style/enable-notifications-buttons} (let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
[quo/button [rn/view {:style (style/buttons insets)}
{:on-press (fn [] [quo/button
(shell.animation/change-selected-stack-id :communities-stack true) {:on-press (fn []
(rf/dispatch [::notifications/switch true platform/ios?]) (shell.animation/change-selected-stack-id :communities-stack true)
(rf/dispatch [:init-root :welcome])) (rf/dispatch [::notifications/switch true platform/ios?])
:type :primary (rf/dispatch [:init-root :welcome]))
:before :i/notifications :type :primary
:accessibility-label :enable-notifications-button :before :i/notifications
:override-background-color (colors/custom-color :magenta 60)} :accessibility-label :enable-notifications-button
(i18n/label :t/intro-wizard-title6)] :override-background-color (colors/custom-color profile-color 60)}
[quo/button (i18n/label :t/intro-wizard-title6)]
{:on-press (fn [] [quo/button
(shell.animation/change-selected-stack-id :communities-stack true) {:on-press (fn []
(rf/dispatch [:init-root :welcome])) (shell.animation/change-selected-stack-id :communities-stack true)
:accessibility-label :enable-notifications-later-button (rf/dispatch [:init-root :welcome]))
:override-background-color colors/white-opa-5 :accessibility-label :enable-notifications-later-button
:style {:margin-top 12}} :override-background-color colors/white-opa-5
(i18n/label :t/maybe-later)]]) :style {:margin-top 12}}
(i18n/label :t/maybe-later)]]))
(defn enable-notifications (defn enable-notifications
[] []
[rn/view {:style style/enable-notifications} [safe-area/consumer
[background/view true] (fn [insets]
[navigation-bar] [rn/view {:style (style/page-container insets)}
[page-title] [background/view true]
[rn/view {:style style/page-illustration} [navigation-bar]
[quo/text [page-title]
"[Illustration here]"]] [rn/view {:style style/page-illustration}
[enable-notification-buttons]]) [quo/text
"Illustration here"]]
[enable-notification-buttons {:insets insets}]])])

3
src/status_im2/contexts/onboarding/events.cljs
View File

@ -163,8 +163,7 @@
constants/auth-method-biometric constants/auth-method-biometric
(get-in db [:onboarding-2/profile :auth-method]))] (get-in db [:onboarding-2/profile :auth-method]))]
(cond-> {:db (dissoc db :onboarding-2/profile) (cond-> {:dispatch [:navigate-to :enable-notifications]}
:dispatch [:navigate-to :enable-notifications]}
biometric-enabled? biometric-enabled?
(assoc :biometric/enable-and-save-password (assoc :biometric/enable-and-save-password
{:key-uid key-uid {:key-uid key-uid

19
src/status_im2/contexts/onboarding/welcome/style.cljs
View File

@ -1,24 +1,25 @@
(ns status-im2.contexts.onboarding.welcome.style (ns status-im2.contexts.onboarding.welcome.style
(:require (:require
[react-native.platform :as platform]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))
(def title-container (def default-margin 20)
{:justify-content :center
:margin-top 12
:padding-horizontal 20})
(def welcome-container (defn page-container
[insets]
{:flex 1 {:flex 1
:padding-top (if platform/ios? 44 0) :padding-top (:top insets)
:background-color colors/neutral-80-opa-80-blur}) :background-color colors/neutral-80-opa-80-blur})
(def page-illustration (def page-illustration
{:flex 1 {:flex 1
:background-color colors/danger-50 :background-color colors/danger-50
:align-items :center :align-items :center
:margin-horizontal 20 :margin-horizontal default-margin
:border-radius 20 :border-radius 20
:margin-top 20 :margin-top default-margin
:justify-content :center}) :justify-content :center})
(defn buttons
[insets]
{:margin default-margin
:margin-bottom (+ default-margin (:bottom insets))})

53
src/status_im2/contexts/onboarding/welcome/view.cljs
View File

@ -5,24 +5,20 @@
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf] [utils.re-frame :as rf]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im2.contexts.onboarding.welcome.style :as style] [status-im2.contexts.onboarding.welcome.style :as style]
[status-im2.contexts.onboarding.common.background.view :as background])) [status-im2.contexts.onboarding.common.background.view :as background]))
(defn page-title (defn page-title
[] []
[rn/view {:style style/title-container} (let [new-account? (rf/sub [:onboarding-2/new-account?])]
[quo/text [quo/title
{:accessibility-label :notifications-screen-title {:title (i18n/label (if new-account?
:weight :semi-bold :t/welcome-to-web3
:size :heading-1 :t/welcome-back))
:style {:color colors/white}} :title-accessibility-label :welcome-title
(i18n/label :t/welcome-to-web3)] :subtitle (i18n/label :t/welcome-to-web3-sub-title)
[quo/text :subtitle-accessibility-label :welcome-sub-title}]))
{: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 (defn navigation-bar
@ -39,17 +35,20 @@
(defn view (defn view
[] []
[rn/view {:style style/welcome-container} (let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
[background/view true] [safe-area/consumer
[navigation-bar :enable-notifications] (fn [insets]
[page-title] [rn/view {:style (style/page-container insets)}
[rn/view {:style style/page-illustration} [background/view true]
[quo/text [navigation-bar :enable-notifications]
"Illustration here"]] [page-title]
[quo/button [rn/view {:style style/page-illustration}
{:on-press #(rf/dispatch [:init-root :shell-stack]) [quo/text
:type :primary "Illustration here"]]
:accessibility-label :welcome-button [rn/view {:style (style/buttons insets)}
:override-background-color (colors/custom-color :magenta 60) [quo/button
:style {:margin 20}} {:on-press #(rf/dispatch [:init-root :shell-stack])
(i18n/label :t/start-using-status)]]) :type :primary
:accessibility-label :welcome-button
:override-background-color (colors/custom-color profile-color 60)}
(i18n/label :t/start-using-status)]]])]))

4
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -76,6 +76,7 @@
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags] [status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
[status-im2.contexts.quo-preview.tags.tags :as tags] [status-im2.contexts.quo-preview.tags.tags :as tags]
[status-im2.contexts.quo-preview.tags.token-tag :as token-tag] [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
[status-im2.contexts.quo-preview.title.title :as title]
[status-im2.contexts.quo-preview.inputs.input :as input] [status-im2.contexts.quo-preview.inputs.input :as input]
[status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price] [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
@ -294,6 +295,9 @@
{:name :token-tag {:name :token-tag
:insets {:top false} :insets {:top false}
:component token-tag/preview-token-tag}] :component token-tag/preview-token-tag}]
:text-combinations [{:name :title
:insets {:top false}
:component title/preview-title}]
:wallet [{:name :lowest-price :wallet [{:name :lowest-price
:insets {:top false} :insets {:top false}
:component lowest-price/preview-lowest-price} :component lowest-price/preview-lowest-price}

42
src/status_im2/contexts/quo_preview/title/title.cljs Normal file
View File

@ -0,0 +1,42 @@
(ns status-im2.contexts.quo-preview.title.title
(:require [quo2.components.text-combinations.title.view :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Title"
:key :title
:type :text}
{:label "Subtitle"
:key :subtitle
:type :text}])
(defn cool-preview
[]
(let [state (reagent/atom {:title "Title"
:title-accessibility-label :title
:subtitle ""
:subtitle-accessibility-label :subtitle})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo2/title @state]]]])))
(defn preview-title
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:flex-grow 1
:nested-scroll-enabled true
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

1
src/status_im2/subs/root.cljs
View File

@ -274,6 +274,7 @@
; onboarding ; onboarding
(reg-root-key-sub :onboarding-2/profile :onboarding-2/profile) (reg-root-key-sub :onboarding-2/profile :onboarding-2/profile)
(reg-root-key-sub :onboarding-2/new-account? :onboarding-2/new-account?)
; Testing ; Testing

3
translations/en.json
View File

@ -1457,7 +1457,8 @@
"web-view-error": "Unable to load page", "web-view-error": "Unable to load page",
"welcome-screen-text": "Set up your wallet, invite friends to chat\n and browse popular dapps!", "welcome-screen-text": "Set up your wallet, invite friends to chat\n and browse popular dapps!",
"welcome-to-status": "Welcome to Status!", "welcome-to-status": "Welcome to Status!",
"welcome-to-web3": "Welcome to web3", "welcome-to-web3": "Welcome to web3!",
"welcome-back": "Welcome back!",
"welcome-to-web3-sub-title": "What are you waiting for? Go explore!", "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-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-blank-message": "Your chats will appear here. To start new chats press the ⊕ button",