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

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

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

* Updates
This commit is contained in:
Alexander 2023-03-15 20:02:26 +01:00 committed by GitHub
parent f981021a1f
commit dabe8285be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 58 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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})

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

@ -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}])]))

2
src/status_im2/contexts/onboarding/common/intro/view.cljs
View File

@ -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

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

@ -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
[]

2
src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs
View File

@ -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}

3
translations/en.json
View File

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