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.tags
quo2.components.tags.token-tag
quo2.components.text-combinations.title.view
quo2.components.list-items.user-list))
(def toast quo2.components.notifications.toast/toast)
@ -193,5 +194,8 @@
(def status-tag quo2.components.tags.status-tags/status-tag)
(def token-tag quo2.components.tags.token-tag/tag)
;;;; TITLE
(def title quo2.components.text-combinations.title.view/title)
;;;; LINKS
(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
(:require
[react-native.platform :as platform]
[quo2.foundations.colors :as colors]))
(def title-container
{:justify-content :center
:margin-top 12
:padding-horizontal 20})
(def default-margin 20)
(def enable-notifications-buttons
{:margin 20})
(def enable-notifications
(defn page-container
[insets]
{:flex 1
:padding-top (if platform/ios? 44 0)
:padding-top (:top insets)
:background-color colors/neutral-80-opa-80-blur})
(def page-illustration
{:flex 1
:background-color colors/danger-50
:align-items :center
:margin-horizontal 20
:margin-horizontal default-margin
:border-radius 20
:margin-top 20
:margin-top default-margin
:justify-content :center})
(defn buttons
[insets]
{:margin default-margin
:margin-bottom (+ default-margin (:bottom insets))})

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

@ -6,6 +6,7 @@
[utils.re-frame :as rf]
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.safe-area :as safe-area]
[status-im.notifications.core :as notifications]
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.enable-notifications.style :as style]
@ -26,23 +27,16 @@
(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/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)]])
[quo/title
{:title (i18n/label :t/intro-wizard-title6)
:title-accessibility-label :notifications-title
:subtitle (i18n/label :t/enable-notifications-sub-title)
:subtitle-accessibility-label :notifications-sub-title}])
(defn enable-notification-buttons
[]
[rn/view {:style style/enable-notifications-buttons}
[{:keys [insets]}]
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
[rn/view {:style (style/buttons insets)}
[quo/button
{:on-press (fn []
(shell.animation/change-selected-stack-id :communities-stack true)
@ -51,7 +45,7 @@
:type :primary
:before :i/notifications
:accessibility-label :enable-notifications-button
:override-background-color (colors/custom-color :magenta 60)}
:override-background-color (colors/custom-color profile-color 60)}
(i18n/label :t/intro-wizard-title6)]
[quo/button
{:on-press (fn []
@ -60,15 +54,17 @@
:accessibility-label :enable-notifications-later-button
:override-background-color colors/white-opa-5
:style {:margin-top 12}}
(i18n/label :t/maybe-later)]])
(i18n/label :t/maybe-later)]]))
(defn enable-notifications
[]
[rn/view {:style style/enable-notifications}
[safe-area/consumer
(fn [insets]
[rn/view {:style (style/page-container insets)}
[background/view true]
[navigation-bar]
[page-title]
[rn/view {:style style/page-illustration}
[quo/text
"[Illustration here]"]]
[enable-notification-buttons]])
"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
(get-in db [:onboarding-2/profile :auth-method]))]
(cond-> {:db (dissoc db :onboarding-2/profile)
:dispatch [:navigate-to :enable-notifications]}
(cond-> {:dispatch [:navigate-to :enable-notifications]}
biometric-enabled?
(assoc :biometric/enable-and-save-password
{: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
(:require
[react-native.platform :as platform]
[quo2.foundations.colors :as colors]))
(def title-container
{:justify-content :center
:margin-top 12
:padding-horizontal 20})
(def default-margin 20)
(def welcome-container
(defn page-container
[insets]
{:flex 1
:padding-top (if platform/ios? 44 0)
:padding-top (:top insets)
:background-color colors/neutral-80-opa-80-blur})
(def page-illustration
{:flex 1
:background-color colors/danger-50
:align-items :center
:margin-horizontal 20
:margin-horizontal default-margin
:border-radius 20
:margin-top 20
:margin-top default-margin
:justify-content :center})
(defn buttons
[insets]
{:margin default-margin
:margin-bottom (+ default-margin (:bottom insets))})

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

@ -5,24 +5,20 @@
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[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)]])
(let [new-account? (rf/sub [:onboarding-2/new-account?])]
[quo/title
{:title (i18n/label (if new-account?
:t/welcome-to-web3
:t/welcome-back))
:title-accessibility-label :welcome-title
:subtitle (i18n/label :t/welcome-to-web3-sub-title)
:subtitle-accessibility-label :welcome-sub-title}]))
(defn navigation-bar
@ -39,17 +35,20 @@
(defn view
[]
[rn/view {:style style/welcome-container}
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
[safe-area/consumer
(fn [insets]
[rn/view {:style (style/page-container insets)}
[background/view true]
[navigation-bar :enable-notifications]
[page-title]
[rn/view {:style style/page-illustration}
[quo/text
"Illustration here"]]
[rn/view {:style (style/buttons insets)}
[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)]])
: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.tags :as tags]
[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.wallet.lowest-price :as lowest-price]
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
@ -294,6 +295,9 @@
{:name :token-tag
:insets {:top false}
:component token-tag/preview-token-tag}]
:text-combinations [{:name :title
:insets {:top false}
:component title/preview-title}]
:wallet [{:name :lowest-price
:insets {:top false}
: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
(reg-root-key-sub :onboarding-2/profile :onboarding-2/profile)
(reg-root-key-sub :onboarding-2/new-account? :onboarding-2/new-account?)
; Testing

3
translations/en.json
View File

@ -1457,7 +1457,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": "Welcome to web3!",
"welcome-back": "Welcome back!",
"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",