From ac32de89f92a4385dcf30360405e121f5de58cac Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Thu, 8 Feb 2024 16:01:50 +0530 Subject: [PATCH] Update drawer/bottom-actions component with top & top error variants (#18513) --- .../images/icons2/12x12/token-master@2x.png | Bin 0 -> 695 bytes .../images/icons2/12x12/token-master@3x.png | Bin 0 -> 1047 bytes .../components/buttons/button/properties.cljs | 57 ++++---- src/quo/components/buttons/button/view.cljs | 11 +- .../bottom_actions/component_spec.cljs | 58 ++++++-- .../drawers/bottom_actions/style.cljs | 60 +++++--- .../drawers/bottom_actions/view.cljs | 138 ++++++++++++------ .../addresses_for_permissions/view.cljs | 2 +- .../preview/quo/drawers/bottom_actions.cljs | 63 ++++++-- .../sheets/network_preferences/view.cljs | 3 +- .../edit_derivation_path/component_spec.cljs | 10 +- .../edit_derivation_path/view.cljs | 6 +- .../backup_recovery_phrase/view.cljs | 6 +- .../create_account/select_keypair/view.cljs | 3 +- .../send/input_amount/component_spec.cljs | 46 +++--- .../wallet/send/input_amount/view.cljs | 10 +- translations/en.json | 2 +- 17 files changed, 310 insertions(+), 165 deletions(-) create mode 100644 resources/images/icons2/12x12/token-master@2x.png create mode 100644 resources/images/icons2/12x12/token-master@3x.png diff --git a/resources/images/icons2/12x12/token-master@2x.png b/resources/images/icons2/12x12/token-master@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..176f2384c3277e974441c2eafb1b5c978f8e3210 GIT binary patch literal 695 zcmV;o0!aOdP)n8_|{S! z#Z`WoKD9gJ@mkv5Py6kzO!U}A?Akn$oijt`5@sopkuaV?pT$JiKlOY}4*@ul?Vcg( z({@)C5oN#hd`SNba4cWr)aAe$h#_9rB^iyc1VOvV>Vs!KHPpITYNhB9c_x$eShkIO zCLx<6nIxcZxVGzjdm&$?A={|w*rH-Yb$UXDocOfA_52(ZzNN~>BqfPS2&4v(GC>iG z2^+80jHicz?m$oMKuCr_YJepbXEwOdhQx(iP8oPNh*Fy%(a86y0fZ|Ysy;rVc+5cT z@Q3n`v`0J;&4=`TJb)@7#M~|s7)tdGo_pI0*aSh8%=uidvZw*T_pMXkHEY3Xa|7%H zS?KSBX67CMjomwSwNS20smZ}-cSGFtb}dDmg}nkeprHK9?p3Y|&eI5# zw5U~`I;T7>NR0Sm#PeyPe+=#c*g(aNHQEHR`<-(*^=Ri13iTXWYprzD+~QzO-uc>I zTf|c@kPZdsLve8aibD9zdtOhcNl>^EK(1cOc6Z&vRiM*_zC%Ky{x`tyy`S;U9}d$M zQPFQ)&nw3a)2~o;-s{>`%X`CazgXUl7wEpA?=!S@KX8!4#Wp~RdX$)UlBQ~e2yJY> d*g1NN@(=C88*%VL+_L}x002ovPDHLkV1hK3Kf3?` literal 0 HcmV?d00001 diff --git a/resources/images/icons2/12x12/token-master@3x.png b/resources/images/icons2/12x12/token-master@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..9d1871e77f08351a665e59ec2c54f943879137e1 GIT binary patch literal 1047 zcmV+y1nB#TP)Kinipy32fPY^f(B+y$^WfWV6d_&c(IjTnflU%{gX zOQ15Lb>2D>0LSGsnQsA{JO>X$sDVm^s*_2Hu0^br&>G)90EkbOC4mLvJVG-`0X9cd zwUO`_G@WbM!WUrgjsxF^WeKftx9vc9tCB(CJ9)wzywyR0M|j)OUg05Fzlyf3ycgua z4n!B~7;bi1bkZ?8^h@x#i`v>H%_y&U3}Qg0hZ5MPLC#$sLG)cW0iN<~GJYCC3BvJ{ zkJp*g*kCNJtUh&TDx9@GE@Lx}R!u^6li^4DBKENv2xgp6e=@a96`NEcESlfXx9 zSpE5kaQ{GfSU`wnHloeZY+MzBPG1_nd3XtaP?GiDqyZeL2h>a^{P{g|X(FEB8W(BK zEDoD|y9YIa@=laT{tA=5970TSu&Fu?WF)ZSpEmjC!cj-i-2nIfY9zD@wx{Kcw++#3 zBLQq*nU2|)UDqXrk$bK@c4lTv5efo-+S}-hiOecESRfyUy1I$fI^W94TSZv$)Taqd z+zcVfJhdUw@rjHiE3>ao3Qv1crB12PYhsiHl$D*R+gI>$D$0zclI**6M+p!rpoyJ? zY1~-LLU5E^0o;NxlfX=MiUNT$J(_S(MoeHUtjY7}H@6=`6Ob0(%z&E@u`ccF^OBNq zol}fGJoA+e@yG$kr-2Yc7yYh>X5KT&E^N@&cnde0w-0%wB(WB0thacVknSi83FVv~ ztGClPHEP)ovmEFiJF=umSVfa*Q!y=wsqU{!B&l6h=aP@DKsZQCpmnN`=@5OD%yb1* zK%SqF31hHN8koZLtUk+KlrBu`DM~3Y^t}o-G{a0&NZ>qmK6FfqDlE3Qd1T}!q2^oc z(nKa%yBHeS56Lf!eCH+2;rn~M`-DWhYEwpL{D2+gjBIvo4Uh>eh>n#`vLedA(P|M= ziBXqXrm+MbM(2Ln2jfzNR8Yv{9}#$oHg=Vt6Y=zwdml}|=a%~u;vN4i{sIQVyUVNq RMV0^n002ovPDHLkV1f~X(+&Ut literal 0 HcmV?d00001 diff --git a/src/quo/components/buttons/button/properties.cljs b/src/quo/components/buttons/button/properties.cljs index 50a596d439..1449f08fc3 100644 --- a/src/quo/components/buttons/button/properties.cljs +++ b/src/quo/components/buttons/button/properties.cljs @@ -4,14 +4,15 @@ (def backgrounds #{:photo :blur}) -(defn custom-color-type - [customization-color icon-only?] - {:icon-color colors/white-opa-70 - :label-color colors/white - :background-color (colors/custom-color customization-color 50) - :border-radius (when icon-only? 24)}) +(defn- custom-color-type + [customization-color icon-only? theme] + {:icon-color colors/white-opa-70 + :label-color colors/white + :background-color (colors/resolve-color customization-color theme) + :border-radius (when icon-only? 24) + :overlay-customization-color customization-color}) -(defn grey-photo +(defn- grey-photo [theme pressed?] {:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme) :label-color (colors/theme-colors colors/neutral-100 colors/white theme) @@ -24,7 +25,7 @@ theme)) :blur-type (if (= theme :light) :light :dark)}) -(defn grey-blur +(defn- grey-blur [theme pressed?] {:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme) :label-color (colors/theme-colors colors/neutral-100 colors/white theme) @@ -32,7 +33,7 @@ (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme) (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))}) -(defn outline-blur +(defn- outline-blur [theme pressed?] {:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme) :label-color (colors/theme-colors colors/neutral-100 colors/white theme) @@ -40,7 +41,7 @@ (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme) (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))}) -(defn grey +(defn- grey [theme pressed?] {:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) :label-color (colors/theme-colors colors/neutral-100 colors/white theme) @@ -50,7 +51,7 @@ colors/neutral-90 theme))}) -(defn dark-grey +(defn- dark-grey [theme pressed?] {:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) :label-color (colors/theme-colors colors/neutral-100 colors/white theme) @@ -58,7 +59,7 @@ (colors/theme-colors colors/neutral-30 colors/neutral-60 theme) (colors/theme-colors colors/neutral-20 colors/neutral-90 theme))}) -(defn outline +(defn- outline [theme pressed?] {:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) :label-color (colors/theme-colors colors/neutral-100 colors/white theme) @@ -66,29 +67,33 @@ (colors/theme-colors colors/neutral-40 colors/neutral-60 theme) (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))}) -(defn ghost +(defn- ghost [theme pressed?] {:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) :label-color (colors/theme-colors colors/neutral-100 colors/white theme) :background-color (when pressed? (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) -(defn black +(defn- black [pressed?] {:label-color colors/white :background-color (if pressed? colors/neutral-80 colors/neutral-95)}) (defn get-values [{:keys [customization-color theme type background pressed? icon-only?]}] - (cond - (= type :primary) (custom-color-type customization-color icon-only?) - (= type :positive) (custom-color-type customization-color icon-only?) - (= type :danger) (custom-color-type customization-color icon-only?) - (and (= :photo background) (= type :grey)) (grey-photo theme pressed?) - (and (= :blur background) (= type :grey)) (grey-blur theme pressed?) - (and (= :blur background) (= type :outline)) (outline-blur theme pressed?) - (= type :grey) (grey theme pressed?) - (= type :dark-grey) (dark-grey theme pressed?) - (= type :outline) (outline theme pressed?) - (= type :ghost) (ghost theme pressed?) - (= type :black) (black pressed?))) + (let [customization-color (get {:primary customization-color + :positive :success + :danger :danger} + type)] + (cond + (contains? #{:primary :positive :danger} type) (custom-color-type customization-color + icon-only? + theme) + (and (= :photo background) (= type :grey)) (grey-photo theme pressed?) + (and (= :blur background) (= type :grey)) (grey-blur theme pressed?) + (and (= :blur background) (= type :outline)) (outline-blur theme pressed?) + (= type :grey) (grey theme pressed?) + (= type :dark-grey) (dark-grey theme pressed?) + (= type :outline) (outline theme pressed?) + (= type :ghost) (ghost theme pressed?) + (= type :black) (black pressed?)))) diff --git a/src/quo/components/buttons/button/view.cljs b/src/quo/components/buttons/button/view.cljs index c26b55732f..f7d5fb4142 100644 --- a/src/quo/components/buttons/button/view.cljs +++ b/src/quo/components/buttons/button/view.cljs @@ -37,13 +37,10 @@ pressed? on-press-in on-press-out allow-multiple-presses?] :or {type :primary size 40 - customization-color (cond (= type :primary) :blue - (= type :positive) :success - (= type :danger) :danger - :else nil)}} + customization-color (if (= type :primary) :blue nil)}} children] (let [{:keys [icon-color background-color label-color border-color blur-type - blur-overlay-color border-radius]} + blur-overlay-color border-radius overlay-customization-color]} (button-properties/get-values {:customization-color customization-color :background background :type type @@ -79,9 +76,9 @@ :icon-left icon-left :icon-right icon-right}) inner-style)} - (when customization-color + (when overlay-customization-color [customization-colors/overlay - {:customization-color customization-color + {:customization-color overlay-customization-color :theme theme :pressed? (if pressed? pressed? @pressed-state?)}]) (when (= background :photo) diff --git a/src/quo/components/drawers/bottom_actions/component_spec.cljs b/src/quo/components/drawers/bottom_actions/component_spec.cljs index b21bb0dd77..5be35794ad 100644 --- a/src/quo/components/drawers/bottom_actions/component_spec.cljs +++ b/src/quo/components/drawers/bottom_actions/component_spec.cljs @@ -3,34 +3,60 @@ [quo.components.drawers.bottom-actions.view :as bottom-actions] [test-helpers.component :as h])) +(defn- render + [component] + (h/render-with-theme-provider component :light)) + (h/describe "bottom actions tests" (h/test "default render with no description and single action button" - (h/render [bottom-actions/view {:button-one-label "Request to join"}]) + (render [bottom-actions/view {:actions :one-action :button-one-label "Request to join"}]) (h/is-truthy (h/get-by-text "Request to join"))) - (h/test "render with description" - (h/render [bottom-actions/view {:description "Sample description"}]) - (h/is-truthy (h/get-by-text "Sample description"))) + (h/test "render with description & 1 action" + (render [bottom-actions/view + {:description :bottom + :description-text "Sample description" + :actions :one-action + :button-one-label "Request to join"}]) + (h/is-truthy (h/get-by-text "Sample description")) + (h/is-truthy (h/get-by-text "Request to join"))) (h/test "render with 2 actions" (let [button-one "Button One" button-two "Button Two"] - (h/render [bottom-actions/view - {:actions :2-actions - :button-one-label button-one - :button-one-props {:icon-left :i/arrow-left} - :button-two-label button-two}]) + (render [bottom-actions/view + {:actions :two-actions + :button-one-label button-one + :button-one-props {:icon-left :i/arrow-left} + :button-two-label button-two}]) (h/is-truthy (h/get-by-text button-one)) (h/is-truthy (h/get-by-label-text :icon)) (h/is-truthy (h/get-by-text button-two)))) (h/test "render disabled button" - (h/render [bottom-actions/view - {:description "Sample description" - :button-one-props {:disabled? true} - :button-one-label "button"}]) + (render [bottom-actions/view + {:description :bottom + :actions :one-action + :description-text "Sample description" + :button-one-props {:disabled? true} + :button-one-label "button"}]) (h/is-disabled (h/get-by-label-text :button-one))) - (h/test "sane defaults" - (h/render [bottom-actions/view {}]) - (h/is-truthy (h/get-by-label-text :button-one)))) + (h/test "render with error & 1 action" + (render [bottom-actions/view + {:description :top-error + :error-message "Sample error" + :actions :one-action + :button-one-label "Request to join"}]) + (h/is-truthy (h/get-by-text "Sample error")) + (h/is-truthy (h/get-by-text "Request to join"))) + + (h/test "render with top description & 1 action" + (render [bottom-actions/view + {:description :top + :role :admin + :actions :one-action + :button-one-label "Request to join"}]) + (h/is-truthy (h/get-by-text "Eligible to join as")) + (h/is-truthy (h/get-by-text "Admin")) + (h/is-truthy (h/get-by-text "Request to join")))) diff --git a/src/quo/components/drawers/bottom_actions/style.cljs b/src/quo/components/drawers/bottom_actions/style.cljs index b47b033825..ab0be43032 100644 --- a/src/quo/components/drawers/bottom_actions/style.cljs +++ b/src/quo/components/drawers/bottom_actions/style.cljs @@ -2,34 +2,58 @@ (:require [quo.foundations.colors :as colors])) +(defn- text-color + [scroll? blur? theme] + (cond + scroll? (if blur? + colors/white-70-blur + (colors/theme-colors colors/neutral-80-opa-70 + colors/white-opa-70 + theme)) + blur? colors/white-opa-40 + :else (colors/theme-colors colors/neutral-50 + colors/neutral-40 + theme))) + +(defn container + [scroll? blur? theme] + {:background-color (when-not (or scroll? blur?) + (colors/theme-colors colors/white colors/neutral-95 theme))}) + (def buttons-container {:flex-direction :row :justify-content :space-around :padding-vertical 12 + :gap 12 :padding-horizontal 20}) (def button-container {:flex 1}) -(def button-container-2-actions - (assoc button-container :margin-right 12)) +(def description-top + {:flex-direction :row + :align-items :center + :gap 5 + :padding-top 12 + :padding-bottom 4 + :justify-content :center}) -(defn description - [theme scroll?] - {:color (colors/theme-colors - (if scroll? - (colors/custom-color colors/neutral-80 70) - colors/neutral-50) - (if scroll? - colors/white-opa-70 - colors/neutral-40) - theme) +(defn description-top-text + [scroll? blur? theme] + {:color (text-color scroll? blur? theme)}) + +(defn description-bottom + [scroll? blur? theme] + {:color (text-color scroll? blur? theme) :text-align :center + :padding-bottom 12 :padding-horizontal 40}) -(def scroll - {:margin-top 21 - :margin-horizontal 120 - :margin-bottom 8 - :width 134 - :height 5}) +(def error-message + {:flex-direction :row + :gap 4 + :justify-content :center + :align-items :center + :padding-top 15 + :padding-horizontal 20 + :padding-bottom 7}) diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index 031873fa4a..eb7f2a06ec 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/src/quo/components/drawers/bottom_actions/view.cljs @@ -2,55 +2,105 @@ (:require [quo.components.buttons.button.view :as button] [quo.components.drawers.bottom-actions.style :as style] + [quo.components.icon :as icon] [quo.components.markdown.text :as text] + [quo.components.tags.context-tag.view :as context-tag] + [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [react-native.core :as rn])) + [react-native.blur :as blur] + [react-native.core :as rn] + [schema.core :as schema] + [utils.i18n :as i18n])) -(def default-props - {:button-one-type :primary - :button-two-type :grey - :customization-color :blue}) +(def ?schema + [:=> + [:catn + [:props + [:map {:closed true} + [:actions [:maybe [:enum :one-action :two-actions]]] + [:description {:optional true} [:maybe [:enum :top :bottom :top-error]]] + [:description-text {:optional true} [:maybe :string]] + [:error-message {:optional true} [:maybe :string]] + [:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]] + [:button-one-label {:optional true} [:maybe :string]] + [:button-two-label {:optional true} [:maybe :string]] + [:button-one-props {:optional true} [:maybe :map]] + [:button-two-props {:optional true} [:maybe :map]] + [:theme :schema.common/theme] + [:scroll? {:optional true} [:maybe :boolean]] + [:blur? {:optional true} [:maybe :boolean]] + [:container-style {:optional true} [:maybe :map]]]]] + :any]) + +(def ^:private role-icon + {:admin :i/gavel + :member :i/members + :token-master :i/token-master + :owner :i/crown}) (defn- view-internal - "Options: - - :actions - keyword (default nil) - :1-action/:2-actions - :description - string (default nil) - Description to display below the title - :button-one-label - string (default nil) - Label for the first button - :button-two-label - string (default nil) - Label for the second button - :button-one-props - map with props for button one - :button-two-props - map with props for button two - :theme - :light/:dark - :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered" - [props] - (let [{:keys [actions description button-one-label button-two-label - button-one-props button-two-props theme scroll? customization-color container-style]} - (merge default-props props)] - [rn/view {:style container-style} - [rn/view {:style style/buttons-container} - (when (= actions :2-actions) - [button/button - (merge - {:size 40 - :background (when scroll? :blur) - :container-style style/button-container-2-actions - :theme theme - :accessibility-label :button-two} - button-two-props) - button-two-label]) - [button/button - (merge - {:size 40 - :container-style style/button-container - :background (when scroll? :blur) - :theme theme - :accessibility-label :button-one - :customization-color customization-color} - button-one-props) - button-one-label]] - (when description + [{:keys [actions description description-text error-message role button-one-label button-two-label + blur? button-one-props button-two-props theme scroll? container-style]}] + [blur/view + {:blur-amount 20 + :blur-type :transparent + :overlay-color (if blur? + colors/neutral-80-opa-1-blur + (colors/theme-colors colors/white-70-blur + colors/neutral-95-opa-70-blur + theme))} + [rn/view + {:style (merge (style/container scroll? blur? theme) container-style)} + (when (= description :top-error) + [rn/view {:style style/error-message} + [icon/icon + :i/alert + {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) + :size 16}] [text/text {:size :paragraph-2 - :style (style/description theme scroll?)} description])])) + :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}} + error-message]]) -(def view (quo.theme/with-theme view-internal)) + (when (= description :top) + [rn/view + {:style style/description-top} + [text/text + {:size :paragraph-2 + :style (style/description-top-text scroll? blur? theme)} + (i18n/label :t/eligible-to-join-as)] + [context-tag/view + {:type :icon + :size 24 + :icon (role role-icon) + :blur? blur? + :context (i18n/label (keyword "t" role))}]]) + + [rn/view {:style style/buttons-container} + (when (= actions :two-actions) + [button/button + (merge + {:size 40 + :background (when (or blur? scroll?) :blur) + :container-style style/button-container + :theme theme + :accessibility-label :button-two} + button-two-props) + button-two-label]) + [button/button + (merge + {:size 40 + :container-style style/button-container + :background (when (or blur? scroll?) :blur) + :theme theme + :accessibility-label :button-one} + button-one-props) + button-one-label]] + (when (= description :bottom) + [text/text + {:size :paragraph-2 + :style (style/description-bottom scroll? blur? theme)} description-text])]]) + +(def view + (quo.theme/with-theme + (schema/instrument #'view-internal ?schema))) diff --git a/src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs b/src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs index 99c003b75d..cd92d8deff 100644 --- a/src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs +++ b/src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs @@ -55,7 +55,7 @@ [quo/text {:size :paragraph-2 :style {:color colors/neutral-50}} - (i18n/label :t/eligible-to-join-as {:role ""})] + (i18n/label :t/eligible-to-join-as)] [quo/context-tag {:type :icon :icon :i/members diff --git a/src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs b/src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs index a0f9ca2c41..6388a948a2 100644 --- a/src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs +++ b/src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs @@ -19,8 +19,10 @@ (def descriptor [{:type :select :key :actions - :options [{:key :1-action} - {:key :2-actions}]} + :options [{:key :one-action} + {:key :two-actions}]} + {:key :button-one-label + :type :text} {:label "Button 1 type" :type :select :key :type @@ -30,6 +32,8 @@ :type :boolean :key :disabled? :path [:button-one-props]} + {:key :button-two-label + :type :text} {:label "Button 2 type" :type :select :key :type @@ -39,32 +43,59 @@ :type :boolean :key :disabled? :path [:button-two-props]} - {:key :description - :type :text} - {:key :button-one-label - :type :text} - {:key :button-two-label - :type :text} + {:key :blur? + :type :boolean} {:key :scroll? - :type :boolean}]) + :type :boolean} + {:key :description + :type :select + :options [{:key nil + :value :none} + {:key :top} + {:key :bottom} + {:key :top-error}]}]) + +(def role-descriptor + {:key :role + :type :select + :options [{:key :owner} + {:key :token-master} + {:key :admin} + {:key :member}]}) + +(def description-descriptor + {:key :description-text + :type :text}) + +(def error-descriptor + {:key :error-message + :type :text}) (defn view [] - (let [state (reagent/atom {:actions :2-actions - :description description + (let [state (reagent/atom {:actions :two-actions + :description :bottom + :description-text description + :error-message "Error message" :button-one-label button-one :button-two-label button-two - :button-one-props {:on-press (button-press 1) - :type :primary - :icon-left :i/arrow-up} + :button-one-props {:on-press (button-press 1) + :type :primary} :button-two-props {:on-press (button-press 2) :type :grey} + :blur? false + :role :owner :scroll? false})] (fn [] [preview/preview-container {:state state - :descriptor descriptor - :blur? (:scroll? @state) + :descriptor (merge descriptor + (case (:description @state) + :top role-descriptor + :bottom description-descriptor + :top-error error-descriptor + nil)) + :blur? (:blur? @state) :show-blur-background? true :blur-dark-only? true :component-container-style {:margin-top 40 diff --git a/src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs b/src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs index 064aa1afe3..23dcde4b64 100644 --- a/src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs +++ b/src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs @@ -110,7 +110,8 @@ network))})) layer-2-networks)}] [quo/bottom-actions - {:button-one-label (i18n/label :t/update) + {:actions :one-action + :button-one-label (i18n/label :t/update) :button-one-props {:disabled? (= @state :default) :on-press (fn [] (let [chain-ids (map :chain-id current-networks)] diff --git a/src/status_im/contexts/wallet/create_account/edit_derivation_path/component_spec.cljs b/src/status_im/contexts/wallet/create_account/edit_derivation_path/component_spec.cljs index 48cfe8f2ee..4216ad3383 100644 --- a/src/status_im/contexts/wallet/create_account/edit_derivation_path/component_spec.cljs +++ b/src/status_im/contexts/wallet/create_account/edit_derivation_path/component_spec.cljs @@ -3,9 +3,13 @@ [status-im.contexts.wallet.create-account.edit-derivation-path.view :as edit-derivation-path] [test-helpers.component :as h])) +(defn- render + [component] + (h/render-with-theme-provider component :light)) + (h/describe "Edit derivation path page" (h/test "Default render" - (h/render [edit-derivation-path/view {}]) + (render [edit-derivation-path/view {}]) (h/is-truthy (h/get-by-translation-text :t/edit-derivation-path)) (h/is-truthy (h/get-by-translation-text :t/path-format)) (h/is-truthy (h/get-by-translation-text :t/derivation-path)) @@ -15,14 +19,14 @@ (h/test "Reveal address pressed" (let [on-reveal (h/mock-fn)] - (h/render [edit-derivation-path/view {:on-reveal on-reveal}]) + (render [edit-derivation-path/view {:on-reveal on-reveal}]) (h/fire-event :press (h/get-by-translation-text :t/reveal-address)) (h/was-called on-reveal) (h/wait-for #(h/is-truthy (h/get-by-translation-text :t/address-activity))))) (h/test "Reset button pressed" (let [on-reset (h/mock-fn)] - (h/render [edit-derivation-path/view {:on-reset on-reset}]) + (render [edit-derivation-path/view {:on-reset on-reset}]) (h/fire-event :press (h/get-by-translation-text :t/reset)) (h/was-called on-reset) (h/wait-for #(h/is-truthy (h/get-by-translation-text :t/derive-addresses)))))) diff --git a/src/status_im/contexts/wallet/create_account/edit_derivation_path/view.cljs b/src/status_im/contexts/wallet/create_account/edit_derivation_path/view.cljs index 210c0d54aa..57399099e9 100644 --- a/src/status_im/contexts/wallet/create_account/edit_derivation_path/view.cljs +++ b/src/status_im/contexts/wallet/create_account/edit_derivation_path/view.cljs @@ -72,7 +72,7 @@ :default [quo/bottom-actions {:theme theme - :actions :1-action + :actions :one-action :button-one-label (i18n/label :t/reveal-address) :button-one-props {:type :outline :icon-left :i/keycard-card @@ -81,7 +81,7 @@ :empty [quo/bottom-actions {:theme theme - :actions :1-action + :actions :one-action :button-one-label (i18n/label :t/derive-addresses) :button-one-props {:type :outline :icon-left :i/keycard-card @@ -111,7 +111,7 @@ [rn/view {:style (style/save-button-container bottom)} [quo/bottom-actions {:theme theme - :actions :1-action + :actions :one-action :button-one-label (i18n/label :t/save) :button-one-props {:type :primary :on-press #(js/alert "Save!") diff --git a/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs b/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs index c0faf960c5..ddb329ba32 100644 --- a/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs +++ b/src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs @@ -77,7 +77,8 @@ (if @revealed? [rn/view {:style style/slide-button} [quo/bottom-actions - {:button-one-label (i18n/label :t/i-have-written) + {:actions :one-action + :button-one-label (i18n/label :t/i-have-written) :button-one-props {:disabled? (some false? (vals @checked?)) :customization-color customization-color :on-press #(rf/dispatch [:navigate-to @@ -87,7 +88,8 @@ :style (style/description-text theme)} (i18n/label :t/next-you-will)]] [quo/bottom-actions - {:button-one-label (i18n/label :t/reveal-phrase) + {:actions :one-action + :button-one-label (i18n/label :t/reveal-phrase) :button-one-props {:disabled? (some false? (vals @checked?)) :customization-color customization-color :on-press #(reset! revealed? true)} diff --git a/src/status_im/contexts/wallet/create_account/select_keypair/view.cljs b/src/status_im/contexts/wallet/create_account/select_keypair/view.cljs index cef2cb115b..1a283e2532 100644 --- a/src/status_im/contexts/wallet/create_account/select_keypair/view.cljs +++ b/src/status_im/contexts/wallet/create_account/select_keypair/view.cljs @@ -75,7 +75,8 @@ :container-style {:margin-horizontal 20 :margin-vertical 8}})] [quo/bottom-actions - {:button-one-label (i18n/label :t/confirm-account-origin) + {:actions :one-action + :button-one-label (i18n/label :t/confirm-account-origin) :button-one-props {:disabled? true :customization-color customization-color} :container-style style/bottom-action-container}]])) diff --git a/src/status_im/contexts/wallet/send/input_amount/component_spec.cljs b/src/status_im/contexts/wallet/send/input_amount/component_spec.cljs index 150adef5a9..8b64ab64a0 100644 --- a/src/status_im/contexts/wallet/send/input_amount/component_spec.cljs +++ b/src/status_im/contexts/wallet/send/input_amount/component_spec.cljs @@ -47,15 +47,19 @@ :wallet/wallet-send-suggested-routes {:candidates []} :wallet/wallet-send-selected-networks []}) +(defn- render + [component] + (h/render-with-theme-provider component :light)) + (h/describe "Send > input amount screen" (h/setup-restorable-re-frame) (h/test "Default render" (h/setup-subs sub-mocks) - (h/render [input-amount/view - {:crypto-decimals 2 - :limit-crypto 250 - :initial-crypto-currency? false}]) + (render [input-amount/view + {:crypto-decimals 2 + :limit-crypto 250 + :initial-crypto-currency? false}]) (h/is-truthy (h/get-by-text "0")) (h/is-truthy (h/get-by-text "ETH")) (h/is-truthy (h/get-by-text "$0.00")) @@ -65,11 +69,11 @@ (h/test "Fill token input and confirm" (h/setup-subs sub-mocks) (let [on-confirm (h/mock-fn)] - (h/render [input-amount/view - {:on-confirm on-confirm - :crypto-decimals 10 - :limit-crypto 1000 - :initial-crypto-currency? false}]) + (render [input-amount/view + {:on-confirm on-confirm + :crypto-decimals 10 + :limit-crypto 1000 + :initial-crypto-currency? false}]) (h/fire-event :press (h/query-by-label-text :keyboard-key-1)) (h/fire-event :press (h/query-by-label-text :keyboard-key-2)) @@ -89,11 +93,11 @@ (h/setup-subs sub-mocks) (let [on-confirm (h/mock-fn)] - (h/render [input-amount/view - {:crypto-decimals 10 - :limit-crypto 1000 - :on-confirm on-confirm - :initial-crypto-currency? false}]) + (render [input-amount/view + {:crypto-decimals 10 + :limit-crypto 1000 + :on-confirm on-confirm + :initial-crypto-currency? false}]) (h/fire-event :press (h/query-by-label-text :keyboard-key-1)) (h/fire-event :press (h/query-by-label-text :keyboard-key-2)) @@ -111,9 +115,9 @@ (h/test "Try to fill more than limit" (h/setup-subs sub-mocks) - (h/render [input-amount/view - {:crypto-decimals 1 - :limit-crypto 1}]) + (render [input-amount/view + {:crypto-decimals 1 + :limit-crypto 1}]) (h/fire-event :press (h/query-by-label-text :keyboard-key-2)) (h/fire-event :press (h/query-by-label-text :keyboard-key-9)) @@ -123,10 +127,10 @@ (h/test "Switch from crypto to fiat and check limit" (h/setup-subs sub-mocks) - (h/render [input-amount/view - {:crypto-decimals 1 - :limit-crypto 1 - :on-confirm #()}]) + (render [input-amount/view + {:crypto-decimals 1 + :limit-crypto 1 + :on-confirm #()}]) (h/fire-event :press (h/query-by-label-text :keyboard-key-9)) (h/is-truthy (h/get-by-label-text :container-error)) diff --git a/src/status_im/contexts/wallet/send/input_amount/view.cljs b/src/status_im/contexts/wallet/send/input_amount/view.cljs index 6a3240556d..b347248db6 100644 --- a/src/status_im/contexts/wallet/send/input_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/input_amount/view.cljs @@ -222,11 +222,11 @@ :input-value @input-value :fetch-routes #(fetch-routes % current-limit)}] [quo/bottom-actions - {:actions :1-action - :customization-color color - :button-one-label (i18n/label :t/confirm) - :button-one-props {:disabled? confirm-disabled? - :on-press on-confirm}}] + {:actions :one-action + :button-one-label (i18n/label :t/confirm) + :button-one-props {:disabled? confirm-disabled? + :on-press on-confirm + :customization-color color}}] [quo/numbered-keyboard {:container-style (style/keyboard-container bottom) :left-action :dot diff --git a/translations/en.json b/translations/en.json index edd2a9add7..c3dd844c58 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2260,9 +2260,9 @@ "sync-devices-complete-title": "Device sync complete!", "sync-devices-complete-sub-title": "Your devices are now in sync", "synced-with": "Synced with", - "eligible-to-join-as": "Eligible to join as {{role}}", "you-eligible-to-join": "You’re eligible to join", "you-eligible-to-join-as": "You’re eligible to join as {{role}}", + "eligible-to-join-as": "Eligible to join as", "you-not-eligible-to-join": "You’re not eligible to join", "you-hold-number-of-hold-tokens-of-these": "You hold {{number-of-hold-tokens}} of these:", "token-gated-communities": "Token gated communities",