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>

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
+  {:flex 1})
-   :margin-bottom -8})
 
 (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})

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]}]
+  [{:keys [title subtitle image accessibility-label on-press]}]
-  [rn/view {:style style/icon-variant}
+  [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
+   [rn/view {:style style/text-container}
-    {:title    title
+    [text/text
-     :subtitle subtitle}]])
+     {: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
+    [text/text
-     {:title    title
+     {:style           style/main-title
-      :subtitle subtitle}]]
+      :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 button-label image max-height on-press accessibility-label]
-  [{:keys [variant title subtitle 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/view {:style (style/card card-height)}
-     [rn/touchable-highlight
+     [card-component
-      {:accessibility-label accessibility-label
+      {:title               title
-       :style               style/touchable-overlay
+       :subtitle            subtitle
-       :active-opacity      1
+       :button-label        button-label
-       :underlay-color      colors/white-opa-5
+       :on-press            on-press
-       :on-press            on-press}
+       :accessibility-label accessibility-label
-      [rn/view {:style (style/card card-height)}
+       :image               image
-       [card-component
+       :max-height          max-height}]]))
-        {:title      title
-         :subtitle   subtitle
-         :image      image
-         :max-height max-height}]]]
-     (when main-variant?
-       [rn/view {:style style/main-variant-extra-space}])]))

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

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
+      {:variant      :main
-       :title      (i18n/label :t/generate-keys)
+       :title        (i18n/label :t/generate-keys)
-       :subtitle   (i18n/label :t/generate-keys-subtitle)
+       :subtitle     (i18n/label :t/generate-keys-subtitle)
-       :image      (resources/get-image :generate-keys)
+       :button-label (i18n/label :t/lets-go)
-       :max-height (- (:height window)
+       :image        (resources/get-image :generate-keys)
-                      (* 2 56) ;; two other list items
+       :max-height   (- (:height window)
-                      (* 2 16) ;; spacing between items
+                        (* 2 56) ;; two other list items
-                      220)     ;; extra spacing (top bar)
+                        (* 2 16) ;; spacing between items
-       :on-press   #(rf/dispatch [:onboarding-2/navigate-to-create-profile])}]
+                        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

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
+  (let [state (reagent/atom {:variant      :main
-                             :image    (-> descriptor second :options first :key)
+                             :image        (-> descriptor second :options first :key)
-                             :title    "Generate keys "
+                             :title        "Generate keys "
-                             :subtitle "Your new self-sovereign identity in Status"
+                             :subtitle     "Your new self-sovereign identity in Status"
-                             :on-press #(js/alert "Small option card pressed!")})]
+                             :button-label "Let's go!"
+                             :on-press     #(js/alert "Small option card pressed!")})]
     (fn []
       [preview/preview-container
        {:state                     state

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")

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",