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

Changes to onboarding/new-to-status (quo/fonts/spacings/copy) (#17562) 

* fix: changes to onboarding/new-to-status (quo/fonts/spacings/copy)

* e2e: updated button  locator

---------

Co-authored-by: Yevheniia Berdnyk <ie.berdnyk@gmail.com>
This commit is contained in:
Lungu Cristian 2023-10-09 10:45:28 +03:00 committed by GitHub
parent 1abd1e9420
commit b432aab701
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 89 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/ui2/generate-keys@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

BIN
resources/images/ui2/generate-keys@3x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 539 KiB

After

Width:  |  Height:  |  Size: 430 KiB

20
src/quo2/components/onboarding/small_option_card/style.cljs
View File

@ -6,10 +6,14 @@
(def text-container {:flex 1})
(def title
(def icon-title
{:color colors/white
:height 22})
(def main-title
{:color colors/white
:height 26})
(def subtitle
{:color colors/white-opa-70
:height 18})
@ -33,21 +37,23 @@
:height 32})
(def main-variant
{:flex 1
:margin-bottom -8})
{:flex 1})
(def main-variant-text-container
{:height 62
:padding-top 10
:padding-bottom 12
:padding-horizontal 12})
(def touchable-overlay {:border-radius 16})
(defn main-variant-image
[max-height]
{:flex 1
:max-height max-height})
(def main-button
{:padding-horizontal 12 :margin-bottom 12 :margin-top 8})
(defn card
[height]
{:background-color colors/white-opa-5
:border-radius 16
:height height})
(def main-variant-extra-space {:height 8})

98
src/quo2/components/onboarding/small_option_card/view.cljs
View File

@ -1,55 +1,71 @@
(ns quo2.components.onboarding.small-option-card.view
(:require [quo2.components.markdown.text :as text]
[quo2.components.onboarding.small-option-card.style :as style]
[quo2.components.buttons.button.view :as button]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]))
(defn- texts
[{:keys [title subtitle]}]
[rn/view {:style style/text-container}
[text/text
{:style style/title
:size :paragraph-1
:weight :semi-bold
:number-of-lines 1}
title]
[text/text
{:style style/subtitle
:size :paragraph-2
:weight :regular
:number-of-lines 1}
subtitle]])
(defn- icon-variant
[{:keys [title subtitle image]}]
[rn/view {:style style/icon-variant}
[{:keys [title subtitle image accessibility-label on-press]}]
[rn/pressable
{:accessibility-label accessibility-label
:style style/icon-variant
:underlay-color colors/white-opa-5
:on-press on-press}
[rn/view {:style style/icon-variant-image-container}
[fast-image/fast-image
{:accessibility-label :small-option-card-icon-image
:style style/icon-variant-image
:resize-mode :contain
:source image}]]
[texts
{:title title
:subtitle subtitle}]])
[rn/view {:style style/text-container}
[text/text
{:style style/icon-title
:size :paragraph-1
:weight :semi-bold
:number-of-lines 1}
title]
[text/text
{:style style/subtitle
:size :paragraph-2
:weight :regular
:number-of-lines 1}
subtitle]]])
(defn- main-variant
[{:keys [title subtitle image max-height]}]
[{:keys [title subtitle button-label image max-height accessibility-label on-press]}]
[rn/view {:style style/main-variant}
[rn/view {:style style/main-variant-text-container}
[texts
{:title title
:subtitle subtitle}]]
[text/text
{:style style/main-title
:size :heading-2
:weight :semi-bold
:number-of-lines 1}
title]
[text/text
{:style style/subtitle
:size :paragraph-2
:weight :regular
:number-of-lines 1}
subtitle]]
[fast-image/fast-image
{:accessibility-label :small-option-card-main-image
:style {:flex 1 :max-height max-height}
:style (style/main-variant-image max-height)
:resize-mode :contain
:source image}]])
:source image}]
[button/button
{:on-press on-press
:accessibility-label accessibility-label
:type :grey
:size 40
:container-style style/main-button
:theme :dark
:background :blur}
button-label]])
(defn small-option-card
"Variants: `:main` or `:icon`"
[{:keys [variant title subtitle image max-height on-press accessibility-label]
[{:keys [variant title subtitle button-label image max-height on-press accessibility-label]
:or {variant :main accessibility-label :small-option-card}}]
(let [main-variant? (= variant :main)
card-component (if main-variant? main-variant icon-variant)
@ -57,18 +73,12 @@
(not main-variant?) style/icon-variant-height
max-height (min max-height style/main-variant-height)
:else style/main-variant-height)]
[rn/view
[rn/touchable-highlight
{:accessibility-label accessibility-label
:style style/touchable-overlay
:active-opacity 1
:underlay-color colors/white-opa-5
:on-press on-press}
[rn/view {:style (style/card card-height)}
[card-component
{:title title
:subtitle subtitle
:image image
:max-height max-height}]]]
(when main-variant?
[rn/view {:style style/main-variant-extra-space}])]))
[rn/view {:style (style/card card-height)}
[card-component
{:title title
:subtitle subtitle
:button-label button-label
:on-press on-press
:accessibility-label accessibility-label
:image image
:max-height max-height}]]))

2
src/status_im2/contexts/onboarding/new_to_status/style.cljs
View File

@ -21,7 +21,7 @@
:color colors/white-opa-70})
(def subtitle-container
{:margin-top 16})
{:margin-top 24})
(def doc-main-content
{:color colors/white

19
src/status_im2/contexts/onboarding/new_to_status/view.cljs
View File

@ -21,15 +21,16 @@
:weight :semi-bold}
(i18n/label :t/new-to-status)]
[quo/small-option-card
{:variant :main
:title (i18n/label :t/generate-keys)
:subtitle (i18n/label :t/generate-keys-subtitle)
:image (resources/get-image :generate-keys)
:max-height (- (:height window)
(* 2 56) ;; two other list items
(* 2 16) ;; spacing between items
220) ;; extra spacing (top bar)
:on-press #(rf/dispatch [:onboarding-2/navigate-to-create-profile])}]
{:variant :main
:title (i18n/label :t/generate-keys)
:subtitle (i18n/label :t/generate-keys-subtitle)
:button-label (i18n/label :t/lets-go)
:image (resources/get-image :generate-keys)
:max-height (- (:height window)
(* 2 56) ;; two other list items
(* 2 16) ;; spacing between items
220) ;; extra spacing (top bar)
:on-press #(rf/dispatch [:onboarding-2/navigate-to-create-profile])}]
[rn/view {:style style/subtitle-container}
[quo/text
{:style style/subtitle

14
src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs
View File

@ -18,15 +18,17 @@
{:key (resources/get-mock-image :small-opt-card-icon)
:value "Image 2"}]}
{:key :title :type :text}
{:key :subtitle :type :text}])
{:key :subtitle :type :text}
{:key :button-label :type :text}])
(defn view
[]
(let [state (reagent/atom {:variant :main
:image (-> descriptor second :options first :key)
:title "Generate keys "
:subtitle "Your new self-sovereign identity in Status"
:on-press #(js/alert "Small option card pressed!")})]
(let [state (reagent/atom {:variant :main
:image (-> descriptor second :options first :key)
:title "Generate keys "
:subtitle "Your new self-sovereign identity in Status"
:button-label "Let's go!"
:on-press #(js/alert "Small option card pressed!")})]
(fn []
[preview/preview-container
{:state state

2
test/appium/views/sign_in_view.py
View File

@ -187,7 +187,7 @@ class SignInView(BaseView):
self.cancel_custom_seed_phrase_button = Button(self.driver, accessibility_id="cancel-custom-seed-phrase")
# New onboarding
self.generate_keys_button = Button(self.driver, translation_id="create-multiaccount")
self.generate_keys_button = Button(self.driver, translation_id="lets-go")
self.profile_your_name_edit_box = EditBox(self.driver, accessibility_id="profile-title-input")
self.profile_continue_button = Button(self.driver, accessibility_id="submit-create-profile-button")
self.profile_password_edit_box = EditBox(self.driver, translation_id="password-creation-placeholder-1")

4
translations/en.json
View File

@ -861,7 +861,7 @@
"joined": "Joined",
"leave-group": "Leave group",
"left": "left",
"lets-go": "Let's go",
"lets-go": "Let's go!",
"les-ulc": "LES/ULC",
"linked-on": "Linked on {{date}}",
"load-messages-before": "before {{date}}",
@ -971,7 +971,7 @@
"getting-started-generate-keys-on-keycard": "Generate keys on a Keycard",
"getting-started-generate-keys-on-keycard-description": "A Keycard is a physical card (similar to a credit card) that securely stores your Status keys. Using a Keycard adds an extra layer of security to your digital assets and identity. This option creates a new Ethereum address.",
"generate-keys": "Generate keys",
"generate-keys-subtitle": "Your new self-sovereign identity in Status",
"generate-keys-subtitle": "Create your new self-sovereign identity",
"experienced-web3": "Experienced in Web3?",
"use-recovery-phrase": "Use recovery phrase",
"use-recovery-phrase-subtitle": "If you already have an Ethereum address",