diff --git a/src/quo2/components/colors/color_picker/view.cljs b/src/quo2/components/colors/color_picker/view.cljs index b248cbc5b3..39a00ee3cf 100644 --- a/src/quo2/components/colors/color_picker/view.cljs +++ b/src/quo2/components/colors/color_picker/view.cljs @@ -18,10 +18,11 @@ - `blur?` Boolean to enable blur background support.}" [{:keys [default-selected]}] (let [selected (reagent/atom default-selected)] - (fn [{:keys [blur? on-change feng-shui?]}] + (fn [{:keys [blur? on-change feng-shui? container-style]}] [rn/scroll-view {:horizontal true - :shows-horizontal-scroll-indicator false} + :shows-horizontal-scroll-indicator false + :content-container-style container-style} (doall (map (fn [color] [color/view {:selected? (= color @selected) diff --git a/src/quo2/components/inputs/title_input/view.cljs b/src/quo2/components/inputs/title_input/view.cljs index aaddd5ab60..04fd0b7606 100644 --- a/src/quo2/components/inputs/title_input/view.cljs +++ b/src/quo2/components/inputs/title_input/view.cljs @@ -39,7 +39,7 @@ [rn/text-input {:style (text/text-style - {:size :heading-2 + {:size :heading-1 :weight :semi-bold :style (style/title-text theme)}) :default-value default-value diff --git a/src/quo2/components/settings/settings_item/style.cljs b/src/quo2/components/settings/settings_item/style.cljs index 3c72c4ca34..4f94d66316 100644 --- a/src/quo2/components/settings/settings_item/style.cljs +++ b/src/quo2/components/settings/settings_item/style.cljs @@ -13,9 +13,10 @@ {:flex-direction :row :align-items (if (or tag description) :flex-start :center)}) -(def sub-container +(defn sub-container + [align-action] {:flex-direction :row - :align-items :center}) + :align-items (or align-action :center)}) (def left-container {:margin-left 12 diff --git a/src/quo2/components/settings/settings_item/view.cljs b/src/quo2/components/settings/settings_item/view.cljs index 71a188cda6..074ad65383 100644 --- a/src/quo2/components/settings/settings_item/view.cljs +++ b/src/quo2/components/settings/settings_item/view.cljs @@ -28,7 +28,7 @@ [{:keys [description-props blur? theme]}] (let [{:keys [text icon]} description-props] [rn/view - {:style style/sub-container} + {:style (style/sub-container :center)} [text/text {:size :paragraph-2 :style (style/color blur? theme)} @@ -93,15 +93,15 @@ (case action :arrow [icon/icon :i/chevron-right (style/color blur? theme)] :button [button/button - {:type :outline - :size 24 - :on-press (:on-press action-props)} + (merge action-props + {:type :outline + :size 24}) (:button-text action-props)] :selector [selectors/toggle action-props] nil)]) (defn- internal-view - [{:keys [title on-press accessibility-label] :as props}] + [{:keys [title on-press action-props accessibility-label] :as props}] [rn/pressable {:style (style/container props) :on-press on-press @@ -112,7 +112,7 @@ [text/text {:weight :medium} title] [description-component props] [tag-component props]]] - [rn/view {:style style/sub-container} + [rn/view {:style (style/sub-container (:alignment action-props))} [label-component props] [action-component props]]]) diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index 9d9b678ba8..812bc03104 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/src/status_im2/contexts/wallet/common/temp.cljs @@ -1,10 +1,13 @@ (ns status-im2.contexts.wallet.common.temp - (:require [quo2.core :as quo] - [quo2.foundations.resources :as quo.resources] - [react-native.core :as rn] - [status-im2.contexts.wallet.common.utils :as utils] - [utils.i18n :as i18n] - [utils.re-frame :as rf])) + (:require + [clojure.string :as string] + [quo2.core :as quo] + [quo2.foundations.resources :as quo.resources] + [react-native.core :as rn] + [status-im2.constants :as constants] + [status-im2.contexts.wallet.common.utils :as utils] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (def networks [{:source (quo.resources/get-network :ethereum)} @@ -78,9 +81,24 @@ (defn create-account-state [name] - [{:title (keypair-string name) - :button-props {:title (i18n/label :t/edit)} - :left-icon :i/placeholder} - {:title (i18n/label :t/derivation-path) - :button-props {:title (i18n/label :t/edit)} - :left-icon :i/derivated-path}]) + [{:title (keypair-string name) + :image :avatar + :image-props {:full-name "A Y" + :size :xxs + :customization-color :blue} + :action :button + :action-props {:on-press #(js/alert "Button pressed!") + :button-text (i18n/label :t/edit) + :alignment :flex-start} + :description :text + :description-props {:text (i18n/label :t/on-device)}} + {:title (i18n/label :t/derivation-path) + :image :icon + :image-props :i/derivated-path + :action :button + :action-props {:on-press #(js/alert "Button pressed!") + :button-text (i18n/label :t/edit) + :icon-left :i/placeholder + :alignment :flex-start} + :description :text + :description-props {:text (string/replace constants/path-default-wallet #"/" " / ")}}]) diff --git a/src/status_im2/contexts/wallet/create_account/style.cljs b/src/status_im2/contexts/wallet/create_account/style.cljs index 4f6a37c02d..edec792941 100644 --- a/src/status_im2/contexts/wallet/create_account/style.cljs +++ b/src/status_im2/contexts/wallet/create_account/style.cljs @@ -24,20 +24,17 @@ :padding-bottom 16}) (def color-picker-container - {:padding-vertical 12 - :padding-horizontal 20}) + {:padding-vertical 12}) (defn color-label [theme] - {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) - :padding-bottom 4}) + {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) + :padding-bottom 4 + :padding-horizontal 20}) -(defn divider-line - [theme] - {:border-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme) - :padding-top 12 - :padding-bottom 8 - :border-bottom-width 1}) +(def divider-line + {:margin-top 12 + :margin-bottom 8}) (defn slide-button-container [bottom] diff --git a/src/status_im2/contexts/wallet/create_account/view.cljs b/src/status_im2/contexts/wallet/create_account/view.cljs index 38d051e3a5..3de9666ca7 100644 --- a/src/status_im2/contexts/wallet/create_account/view.cljs +++ b/src/status_im2/contexts/wallet/create_account/view.cljs @@ -57,6 +57,7 @@ :disabled? false :default-value "Account 2" :container-style style/title-input-container}] + [quo/divider-line] [rn/view {:style style/color-picker-container} [quo/text @@ -66,14 +67,16 @@ (i18n/label :t/colour)] [quo/color-picker {:default-selected @account-color - :on-change #(reset! account-color %)}]] - [rn/view {:style (style/divider-line theme)}] + :on-change #(reset! account-color %) + :container-style {:padding-horizontal 12 + :padding-vertical 12}}]] + [quo/divider-line] [quo/category {:list-type :settings :label (i18n/label :t/origin) :data (temp/create-account-state display-name)}] [quo/slide-button - {:track-text (i18n/label :t/slide-create) + {:track-text (i18n/label :t/slide-to-sign) :track-icon :face-id :customization-color @account-color :on-complete (fn [] diff --git a/translations/en.json b/translations/en.json index 2ce05c9b77..ebddc56855 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2300,7 +2300,7 @@ "add-address-description": "Watch a public address or ENS name", "colour": "Colour", "origin": "Origin", - "slide-create": "Slide to create account", + "slide-to-sign": "Slide to sign", "user-keypair": "{{name}}'s Keypair", "trip-accounts": "Trip accounts", "destroy": "Destroy",