Bugfixes for the style of "New to Status" screen (#15353)

* Bugfixes for the style of "New to Status" screen

* Updates

src/quo2/components/onboarding/small_option_card/style.cljs

@@ -1,6 +1,9 @@
 (ns quo2.components.onboarding.small-option-card.style
   (:require [quo2.foundations.colors :as colors]))
 
+(def main-variant-height 335)
+(def icon-variant-height 56)
+
 (def text-container {:flex 1})
 
 (def title
@@ -42,9 +45,9 @@
 (def touchable-overlay {:border-radius 16})
 
 (defn card
-  [main-variant?]
+  [height]
   {:background-color colors/white-opa-5
    :border-radius    16
-   :height           (if main-variant? 335 56)})
+   :height           height})
 
 (def main-variant-extra-space {:height 8})

src/quo2/components/onboarding/small_option_card/view.cljs

@@ -35,7 +35,7 @@
      :subtitle subtitle}]])
 
 (defn- main-variant
-  [{:keys [title subtitle image]}]
+  [{:keys [title subtitle image max-height]}]
   [rn/view {:style style/main-variant}
    [rn/view {:style style/main-variant-text-container}
     [texts
@@ -43,16 +43,20 @@
       :subtitle subtitle}]]
    [fast-image/fast-image
     {:accessibility-label :small-option-card-main-image
-     :style               {:flex 1}
+     :style               {:flex 1 :max-height max-height}
      :resize-mode         :contain
      :source              image}]])
 
 (defn small-option-card
   "Variants: `:main` or `:icon`"
-  [{:keys [variant title subtitle image on-press]
+  [{:keys [variant title subtitle image max-height on-press]
     :or   {variant :main}}]
   (let [main-variant?  (= variant :main)
-        card-component (if main-variant? main-variant icon-variant)]
+        card-component (if main-variant? main-variant icon-variant)
+        card-height    (cond
+                         (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 :small-option-card
@@ -60,10 +64,11 @@
        :active-opacity      1
        :underlay-color      colors/white-opa-5
        :on-press            on-press}
-      [rn/view {:style (style/card main-variant?)}
+      [rn/view {:style (style/card card-height)}
        [card-component
         {:title      title
          :subtitle   subtitle
-         :image    image}]]]
+         :image      image
+         :max-height max-height}]]]
      (when main-variant?
        [rn/view {:style style/main-variant-extra-space}])]))

src/status_im2/contexts/onboarding/common/intro/view.cljs

@@ -71,7 +71,7 @@
       :bottom-card {:on-press            (fn []
                                            (rf/dispatch [:navigate-to :new-to-status])
                                            (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
-                    :heading             (i18n/label :t/im-new-to-status)
+                    :heading             (i18n/label :t/new-to-status)
                     :accessibility-label :new-to-status-button}}
      (i18n/label :t/you-already-use-status)
      [quo/text

src/status_im2/contexts/onboarding/new_to_status/view.cljs

@@ -32,6 +32,7 @@
 
 (defn sign-in-options
   []
+  (let [window (rf/sub [:dimensions/window])]
     [rn/view {:style style/options-container}
      [quo/text
       {:style  style/title
@@ -44,6 +45,10 @@
        :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 [:generate-and-derive-addresses])}]
 
      [rn/view {:style style/subtitle-container}
@@ -66,7 +71,7 @@
         :title    (i18n/label :t/use-keycard)
         :subtitle (i18n/label :t/use-keycard-subtitle)
         :image    (resources/get-image :use-keycard)
-      :on-press #(rf/dispatch [::keycard/recover-with-keycard-pressed])}]]])
+        :on-press #(rf/dispatch [::keycard/recover-with-keycard-pressed])}]]]))
 
 (defn new-to-status
   []

src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs

@@ -53,7 +53,7 @@
   []
   (let [state (reagent/atom {:top-heading     "Sign in "
                              :top-sub-heading "You already use Status"
-                             :bottom-heading  "I'm new to status"})]
+                             :bottom-heading  "I’m new to Status"})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 400}

translations/en.json

@@ -205,7 +205,6 @@
     "invite": "Invite",
     "invite-contacts": "Invite people from contacts list",
     "create-channel": "Create a channel",
-    "im-new-to-status": "I'm new to status",
     "import-community": "Import a community",
     "import-community-title": "Import a community",
     "name-your-community": "Name your community",
@@ -941,7 +940,7 @@
     "name": "Name",
     "name-of-token": "The name of your token",
     "need-help": "Need help?",
-    "new-to-status": "I'm new to Status",
+    "new-to-status": "I’m new to Status",
     "generate-keys": "Generate keys",
     "generate-keys-subtitle": "Your new self-sovereign identity in Status",
     "experienced-web3": "Experienced in Web3?",