From dabe8285bed490490730cc69d5050ab993026722 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 15 Mar 2023 20:02:26 +0100 Subject: [PATCH] Bugfixes for the style of "New to Status" screen (#15353) * Bugfixes for the style of "New to Status" screen * Updates --- .../onboarding/small_option_card/style.cljs | 7 +- .../onboarding/small_option_card/view.cljs | 21 +++--- .../onboarding/common/intro/view.cljs | 2 +- .../onboarding/new_to_status/view.cljs | 69 ++++++++++--------- .../quo_preview/drawers/drawer_buttons.cljs | 2 +- translations/en.json | 3 +- 6 files changed, 58 insertions(+), 46 deletions(-) diff --git a/src/quo2/components/onboarding/small_option_card/style.cljs b/src/quo2/components/onboarding/small_option_card/style.cljs index 389ad45bac..57a6d13a88 100644 --- a/src/quo2/components/onboarding/small_option_card/style.cljs +++ b/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}) diff --git a/src/quo2/components/onboarding/small_option_card/view.cljs b/src/quo2/components/onboarding/small_option_card/view.cljs index a3fe8416fe..5a6bc09009 100644 --- a/src/quo2/components/onboarding/small_option_card/view.cljs +++ b/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}]]] + {:title title + :subtitle subtitle + :image image + :max-height max-height}]]] (when main-variant? [rn/view {:style style/main-variant-extra-space}])])) diff --git a/src/status_im2/contexts/onboarding/common/intro/view.cljs b/src/status_im2/contexts/onboarding/common/intro/view.cljs index af9de31de9..a15b6a068e 100644 --- a/src/status_im2/contexts/onboarding/common/intro/view.cljs +++ b/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 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 e1b8ff1a62..07ad8be9f8 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/view.cljs +++ b/src/status_im2/contexts/onboarding/new_to_status/view.cljs @@ -32,41 +32,46 @@ (defn sign-in-options [] - [rn/view {:style style/options-container} - [quo/text - {:style style/title - :size :heading-1 - :weight :semi-bold} - (i18n/label :t/new-to-status)] + (let [window (rf/sub [:dimensions/window])] + [rn/view {:style style/options-container} + [quo/text + {:style style/title + :size :heading-1 + :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) - :on-press #(rf/dispatch [:generate-and-derive-addresses])}] + [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 [:generate-and-derive-addresses])}] - [rn/view {:style style/subtitle-container} - [quo/text - {:style style/subtitle - :size :paragraph-2 - :weight :medium} - (i18n/label :t/experienced-web3)]] + [rn/view {:style style/subtitle-container} + [quo/text + {:style style/subtitle + :size :paragraph-2 + :weight :medium} + (i18n/label :t/experienced-web3)]] - [rn/view {:style style/suboptions} - [quo/small-option-card - {:variant :icon - :title (i18n/label :t/use-recovery-phrase) - :subtitle (i18n/label :t/use-recovery-phrase-subtitle) - :image (resources/get-image :ethereum-address) - :on-press #(rf/dispatch [::multiaccounts.recover/enter-phrase-pressed])}] - [rn/view {:style style/space-between-suboptions}] - [quo/small-option-card - {:variant :icon - :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])}]]]) + [rn/view {:style style/suboptions} + [quo/small-option-card + {:variant :icon + :title (i18n/label :t/use-recovery-phrase) + :subtitle (i18n/label :t/use-recovery-phrase-subtitle) + :image (resources/get-image :ethereum-address) + :on-press #(rf/dispatch [::multiaccounts.recover/enter-phrase-pressed])}] + [rn/view {:style style/space-between-suboptions}] + [quo/small-option-card + {:variant :icon + :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])}]]])) (defn new-to-status [] diff --git a/src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs b/src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs index 6d09a208d7..46210e3a8f 100644 --- a/src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs +++ b/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} diff --git a/translations/en.json b/translations/en.json index fff0540eb4..b73384f822 100644 --- a/translations/en.json +++ b/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?",