diff --git a/resources/images/ui2/generate-keys@2x.png b/resources/images/ui2/generate-keys@2x.png new file mode 100644 index 0000000000..6d06e1cb5a Binary files /dev/null and b/resources/images/ui2/generate-keys@2x.png differ diff --git a/resources/images/ui2/generate-keys@3x.png b/resources/images/ui2/generate-keys@3x.png index 803ec43f7f..a499691efd 100644 Binary files a/resources/images/ui2/generate-keys@3x.png and b/resources/images/ui2/generate-keys@3x.png differ diff --git a/src/quo2/components/onboarding/small_option_card/style.cljs b/src/quo2/components/onboarding/small_option_card/style.cljs index 57a6d13a88..5b10521fdf 100644 --- a/src/quo2/components/onboarding/small_option_card/style.cljs +++ b/src/quo2/components/onboarding/small_option_card/style.cljs @@ -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}) diff --git a/src/quo2/components/onboarding/small_option_card/view.cljs b/src/quo2/components/onboarding/small_option_card/view.cljs index 09cd9c90b6..7769591bf5 100644 --- a/src/quo2/components/onboarding/small_option_card/view.cljs +++ b/src/quo2/components/onboarding/small_option_card/view.cljs @@ -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}]])) diff --git a/src/status_im2/contexts/onboarding/new_to_status/style.cljs b/src/status_im2/contexts/onboarding/new_to_status/style.cljs index 2cdbc94c2e..d679802852 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/style.cljs +++ b/src/status_im2/contexts/onboarding/new_to_status/style.cljs @@ -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 diff --git a/src/status_im2/contexts/onboarding/new_to_status/view.cljs b/src/status_im2/contexts/onboarding/new_to_status/view.cljs index 85009be560..93282a3e12 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/view.cljs +++ b/src/status_im2/contexts/onboarding/new_to_status/view.cljs @@ -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 diff --git a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs index a99f2fff8a..b14a7917e7 100644 --- a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs +++ b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs @@ -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 diff --git a/test/appium/views/sign_in_view.py b/test/appium/views/sign_in_view.py index b28eeb4f63..515b4a9c03 100644 --- a/test/appium/views/sign_in_view.py +++ b/test/appium/views/sign_in_view.py @@ -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") diff --git a/translations/en.json b/translations/en.json index 1f8c36b101..67c940fe2a 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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",