diff --git a/src/quo/components/avatars/wallet_user_avatar.cljs b/src/quo/components/avatars/wallet_user_avatar.cljs deleted file mode 100644 index a50d56295b3..00000000000 --- a/src/quo/components/avatars/wallet_user_avatar.cljs +++ /dev/null @@ -1,68 +0,0 @@ -(ns quo.components.avatars.wallet-user-avatar - (:require - [clojure.string :as string] - [quo.components.markdown.text :as text] - [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] - [react-native.core :as rn])) - -(def circle-sizes - {:small 20 - :medium 32 - :large 48 - :size-64 64 - :x-large 80}) - -(def font-sizes - {:small :label - :medium :paragraph-2 - :large :paragraph-1 - :size-64 :heading-1 - :x-large :heading-1}) - -(def font-weights - {:small :medium - :medium :semi-bold - :large :semi-bold - :size-64 :medium - :x-large :medium}) - -(defn- view-internal - "params, first name, last name, customization-color, size - and if it's dark or not!" - [{:keys [f-name l-name customization-color size theme monospace? uppercase?] - :or {f-name "John" - l-name "Doe" - size :x-large - uppercase? true}}] - (let [circle-size (size circle-sizes) - small? (= size :small) - f-name-initial (-> f-name - (#(if uppercase? (string/upper-case %) %)) - (subs 0 1)) - l-name-initial (-> l-name - (#(if uppercase? (string/upper-case %) %)) - (subs 0 1)) - circle-color (if customization-color - (colors/resolve-color customization-color theme 20) - (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)) - text-color (if customization-color - (colors/resolve-color customization-color theme) - (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))] - [rn/view - {:style {:width circle-size - :height circle-size - :border-radius circle-size - :text-align :center - :justify-content :center - :align-items :center - :background-color circle-color}} - [text/text - {:size (size font-sizes) - :weight (if monospace? :monospace (size font-weights)) - :style {:color text-color}} - (if small? - (str f-name-initial) - (str f-name-initial l-name-initial))]])) - -(def wallet-user-avatar (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/avatars/wallet_user_avatar/component_spec.cljs b/src/quo/components/avatars/wallet_user_avatar/component_spec.cljs new file mode 100644 index 00000000000..af14a7ea115 --- /dev/null +++ b/src/quo/components/avatars/wallet_user_avatar/component_spec.cljs @@ -0,0 +1,16 @@ +(ns quo.components.avatars.wallet-user-avatar.component-spec + (:require [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar] + [test-helpers.component :as h])) + +(h/describe "wallet user avatar" + (h/describe "View internal" + (h/test "Renders by default even with no input parameters" + (h/render + [wallet-user-avatar/wallet-user-avatar {}]) + (h/is-truthy (h/query-by-label-text :wallet-user-avatar))) + + (h/test "Renders user’s initials when full name is provided" + (h/render + [wallet-user-avatar/wallet-user-avatar {:full-name "Jane Smith"}]) + (h/is-truthy (h/get-by-text "JS"))))) + diff --git a/src/quo/components/avatars/wallet_user_avatar/style.cljs b/src/quo/components/avatars/wallet_user_avatar/style.cljs new file mode 100644 index 00000000000..a1d9ef5b88a --- /dev/null +++ b/src/quo/components/avatars/wallet_user_avatar/style.cljs @@ -0,0 +1,27 @@ +(ns quo.components.avatars.wallet-user-avatar.style + (:require [quo.foundations.colors :as colors])) + +(defn- circle-color + [customization-color] + (colors/custom-color customization-color 50 20)) + +(defn- text-color + [customization-color theme] + (colors/theme-colors + (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme)) + +(defn container + [circle-size customization-color] + {:width circle-size + :height circle-size + :border-radius circle-size + :text-align :center + :justify-content :center + :align-items :center + :background-color (circle-color customization-color)}) + +(defn text + [customization-color theme] + {:color (text-color customization-color theme)}) diff --git a/src/quo/components/avatars/wallet_user_avatar/view.cljs b/src/quo/components/avatars/wallet_user_avatar/view.cljs new file mode 100644 index 00000000000..c3ea309576c --- /dev/null +++ b/src/quo/components/avatars/wallet_user_avatar/view.cljs @@ -0,0 +1,57 @@ +(ns quo.components.avatars.wallet-user-avatar.view + (:require [quo.components.avatars.wallet-user-avatar.style :as style] + [quo.components.markdown.text :as text] + [quo.theme :as quo.theme] + [react-native.core :as rn] + utils.string)) + +(def properties + {:size-20 {:size 20 + :font-size :label + :font-weight :medium} + :size-24 {:size 24 + :font-size :label + :font-weight :semi-bold} + :size-32 {:size 32 + :font-size :paragraph-2 + :font-weight :semi-bold} + :size-48 {:size 48 + :font-size :paragraph-1 + :font-weight :semi-bold} + :size-64 {:size 64 + :font-size :paragraph-1 + :font-weight :medium} + :size-80 {:size 80 + :font-size :heading-1 + :font-weight :medium}}) + +(def smallest-possible (first (keys properties))) +(def second-smallest-possible (second (keys properties))) +(defn check-if-size-small + [size] + (or (= size smallest-possible) + (= size second-smallest-possible))) +(def biggest-possible (last (keys properties))) + +(defn- view-internal + "Options: + + :full-name - string (default: nil) - used to generate initials + :customization-color - keyword (default: nil) - color of the avatar + :size - keyword (default: last element of properties object) - size of the + avatar + :monospace? - boolean (default: false) - use monospace font" + [{:keys [full-name customization-color size theme monospace?] + :or {size biggest-possible}}] + (let [circle-size (:size (size properties)) + small? (check-if-size-small size)] + [rn/view + {:style (style/container circle-size customization-color)} + [text/text + {:accessibility-label :wallet-user-avatar + :size (:font-size (size properties)) + :weight (if monospace? :monospace (:font-weight (size properties))) + :style (style/text customization-color theme)} + (utils.string/get-initials full-name (if small? 1 2))]])) + +(def wallet-user-avatar (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/list_items/address/view.cljs b/src/quo/components/list_items/address/view.cljs index 249537710f2..5499f62b4b8 100644 --- a/src/quo/components/list_items/address/view.cljs +++ b/src/quo/components/list_items/address/view.cljs @@ -1,7 +1,7 @@ (ns quo.components.list-items.address.view (:require [clojure.string :as string] - [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar] + [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar] [quo.components.list-items.address.style :as style] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] diff --git a/src/quo/components/list_items/saved_address/view.cljs b/src/quo/components/list_items/saved_address/view.cljs index 8a7beadab30..19225a6e3cc 100644 --- a/src/quo/components/list_items/saved_address/view.cljs +++ b/src/quo/components/list_items/saved_address/view.cljs @@ -1,7 +1,7 @@ (ns quo.components.list-items.saved-address.view (:require [clojure.string :as string] - [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar] + [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar] [quo.components.icon :as icon] [quo.components.list-items.saved-address.style :as style] [quo.components.markdown.text :as text] diff --git a/src/quo/components/list_items/user_list.cljs b/src/quo/components/list_items/user_list.cljs index 27351e08f78..694fff00f7f 100644 --- a/src/quo/components/list_items/user_list.cljs +++ b/src/quo/components/list_items/user_list.cljs @@ -27,8 +27,9 @@ {:size 20 :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}] :checkbox - [selectors/checkbox - {:checked? checked? + [selectors/view + {:type :checkbox + :checked? checked? :accessibility-label :user-list-toggle-check :disabled? disabled? :on-change (when on-check on-check)}] diff --git a/src/quo/components/selectors/disclaimer/view.cljs b/src/quo/components/selectors/disclaimer/view.cljs index b2f03c31530..5935eb40a4b 100644 --- a/src/quo/components/selectors/disclaimer/view.cljs +++ b/src/quo/components/selectors/disclaimer/view.cljs @@ -11,8 +11,9 @@ {:on-press on-change :accessibility-label :disclaimer-touchable-opacity} [rn/view {:style (merge container-style (style/container blur?))} - [selectors/checkbox - {:accessibility-label accessibility-label + [selectors/view + {:type :checkbox + :accessibility-label accessibility-label :blur? blur? :checked? checked? :on-change on-change}] diff --git a/src/quo/components/selectors/selectors/component_spec.cljs b/src/quo/components/selectors/selectors/component_spec.cljs index 241a9ddbdbf..5685e4bd044 100644 --- a/src/quo/components/selectors/selectors/component_spec.cljs +++ b/src/quo/components/selectors/selectors/component_spec.cljs @@ -6,27 +6,27 @@ (defn render-toggle ([] - (render-toggle {})) + (render-toggle {:type :toggle})) ([opts] - (h/render (reagent/as-element [selectors/toggle opts])))) + (h/render (reagent/as-element [selectors/view (assoc opts :type :toggle)])))) (defn render-checkbox ([] - (render-checkbox {})) + (render-checkbox {:type :checkbox})) ([opts] - (h/render (reagent/as-element [selectors/checkbox opts])))) + (h/render (reagent/as-element [selectors/view (assoc opts :type :checkbox)])))) -(defn render-checkbox-prefill +(defn render-filled-checkbox ([] - (render-checkbox-prefill {})) + (render-filled-checkbox {:type :filled-checkbox})) ([opts] - (h/render (reagent/as-element [selectors/checkbox-prefill opts])))) + (h/render (reagent/as-element [selectors/view (assoc opts :type :filled-checkbox)])))) (defn render-radio ([] - (render-radio {})) + (render-radio {:type :radio})) ([opts] - (h/render (reagent/as-element [selectors/radio opts])))) + (h/render (reagent/as-element [selectors/view (assoc opts :type :radio)])))) (h/test "default render of toggle component" (render-toggle) @@ -58,12 +58,12 @@ (h/fire-event :press (h/get-by-test-id "checkbox-component")) (h/was-called mock-fn))) -(h/test "default render of checkbox-prefill component" - (render-checkbox-prefill) - (h/is-truthy (h/get-by-test-id "checkbox-prefill-component"))) +(h/test "default render of filled-checkbox component" + (render-filled-checkbox) + (h/is-truthy (h/get-by-test-id "filled-checkbox-component"))) -(h/test "checkbox-prefill component on change is working" +(h/test "filled-checkbox component on change is working" (let [mock-fn (h/mock-fn)] - (render-checkbox-prefill {:on-change mock-fn}) - (h/fire-event :press (h/get-by-test-id "checkbox-prefill-component")) + (render-filled-checkbox {:on-change mock-fn}) + (h/fire-event :press (h/get-by-test-id "filled-checkbox-component")) (h/was-called mock-fn))) diff --git a/src/quo/components/selectors/selectors/style.cljs b/src/quo/components/selectors/selectors/style.cljs index a5efec4e6b5..144082f8d97 100644 --- a/src/quo/components/selectors/selectors/style.cljs +++ b/src/quo/components/selectors/selectors/style.cljs @@ -6,7 +6,7 @@ [customization-color theme] {:normal {:checked (colors/resolve-color customization-color theme) :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)} - :blur {:checked (colors/theme-colors (colors/custom-color customization-color 50) + :blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme) colors/white-opa-70 theme) :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}}) @@ -15,7 +15,7 @@ [customization-color theme] {:normal {:checked (colors/resolve-color customization-color theme) :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)} - :blur {:checked (colors/theme-colors (colors/custom-color customization-color 50) + :blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme) colors/white theme) :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}}) @@ -29,7 +29,7 @@ [customization-color theme] {:normal {:checked (colors/resolve-color customization-color theme) :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)} - :blur {:checked (colors/theme-colors (colors/custom-color customization-color 50) + :blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme) colors/white) :unchecked colors/white-opa-5}}) @@ -38,7 +38,7 @@ {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme) :blur (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}) -(defn- checkbox-prefill-background-color +(defn- filled-checkbox-background-color [theme] {:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 theme) :blur (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)}) @@ -119,16 +119,16 @@ (colors/theme-colors colors/white colors/neutral-100 theme) colors/white)}) -(defn checkbox-prefill +(defn filled-checkbox [{:keys [disabled? blur? container-style theme]}] (assoc container-style :height 21 :width 21 :border-radius 6 :opacity (if disabled? 0.3 1) - :background-color (get-color (checkbox-prefill-background-color theme) blur?))) + :background-color (get-color (filled-checkbox-background-color theme) blur?))) -(defn checkbox-prefill-check +(defn filled-checkbox-check [checked? _blur? theme] {:size 20 :color (when checked? (colors/theme-colors colors/neutral-100 colors/white theme))}) diff --git a/src/quo/components/selectors/selectors/view.cljs b/src/quo/components/selectors/selectors/view.cljs index b9d09c7281e..3577d19d44a 100644 --- a/src/quo/components/selectors/selectors/view.cljs +++ b/src/quo/components/selectors/selectors/view.cljs @@ -11,7 +11,7 @@ (when checked-atom (swap! checked-atom not)) (when on-change (on-change (not checked?)))) -(defn- selector-internal +(defn- base-selector [{:keys [default-checked? checked?]}] (let [controlled-component? (some? checked?) internal-checked? (when-not controlled-component? @@ -28,14 +28,13 @@ :container-style container-style :customization-color customization-color :theme theme})] - [rn/touchable-without-feedback + [rn/pressable (when-not disabled? {:on-press #(handle-press on-change internal-checked? actual-checked?)}) [rn/view {:style outer-styles :needs-offscreen-alpha-compositing true :accessibility-label accessibility-label - :accessibility-role :checkbox :testID test-id} [rn/view {:style (inner-style-fn {:theme theme @@ -45,39 +44,49 @@ (when (and icon-style-fn actual-checked?) [icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]])))) -(def ^:private selector (quo.theme/with-theme selector-internal)) - -(defn toggle +(defn- toggle [props] - [selector + [base-selector (assoc props :label-prefix "toggle" :outer-style-fn style/toggle :inner-style-fn style/toggle-inner)]) -(defn radio +(defn- radio [props] - [selector + [base-selector (assoc props :label-prefix "radio" :outer-style-fn style/radio :inner-style-fn style/radio-inner)]) -(defn checkbox +(defn- checkbox [props] - [selector + [base-selector (assoc props :label-prefix "checkbox" :outer-style-fn style/checkbox :inner-style-fn style/common-checkbox-inner :icon-style-fn style/checkbox-check)]) -(defn checkbox-prefill +(defn- filled-checkbox [props] - [selector + [base-selector (assoc props - :label-prefix "checkbox-prefill" - :outer-style-fn style/checkbox-prefill + :label-prefix "filled-checkbox" + :outer-style-fn style/filled-checkbox :inner-style-fn style/common-checkbox-inner - :icon-style-fn style/checkbox-prefill-check)]) + :icon-style-fn style/filled-checkbox-check)]) + +(defn view-internal + [{:keys [type] + :or {type :toggle} + :as props}] + (case type + :toggle [toggle props] + :radio [radio props] + :checkbox [checkbox props] + :filled-checkbox [filled-checkbox props] + nil)) +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/settings/privacy_option/view.cljs b/src/quo/components/settings/privacy_option/view.cljs index f09d90e9e35..5032f649171 100644 --- a/src/quo/components/settings/privacy_option/view.cljs +++ b/src/quo/components/settings/privacy_option/view.cljs @@ -29,8 +29,9 @@ [rn/view {:style style/card-footer-label-container} [text/text {:size :paragraph-2} label]] [rn/view {:style style/card-footer-toggle-container} - [selectors/toggle - {:disabled? (not active?) + [selectors/view + {:type :toggle + :disabled? (not active?) :on-change on-toggle}]]]]) (defn- selection-indicator diff --git a/src/quo/components/settings/settings_item/view.cljs b/src/quo/components/settings/settings_item/view.cljs index 0bfd20f3c7d..1b4748db95c 100644 --- a/src/quo/components/settings/settings_item/view.cljs +++ b/src/quo/components/settings/settings_item/view.cljs @@ -97,9 +97,7 @@ {:type :outline :size 24}) (:button-text action-props)] - :selector (if (= (:type action-props) :checkbox) - [selectors/checkbox action-props] - [selectors/toggle action-props]) + :selector [selectors/view action-props] nil)]) (defn- internal-view diff --git a/src/quo/components/share/qr_code/view.cljs b/src/quo/components/share/qr_code/view.cljs index 44ca003ac1e..2ed627db046 100644 --- a/src/quo/components/share/qr_code/view.cljs +++ b/src/quo/components/share/qr_code/view.cljs @@ -3,7 +3,7 @@ [quo.components.avatars.account-avatar.view :as account-avatar] [quo.components.avatars.channel-avatar.view :as channel-avatar] [quo.components.avatars.user-avatar.view :as user-avatar] - [quo.components.avatars.wallet-user-avatar :as wallet-avatar] + [quo.components.avatars.wallet-user-avatar.view :as wallet-avatar] [quo.components.share.qr-code.style :as style] [react-native.core :as rn] [react-native.fast-image :as fast-image])) diff --git a/src/quo/components/wallet/keypair/view.cljs b/src/quo/components/wallet/keypair/view.cljs index b4f2a325d4a..644a253675f 100644 --- a/src/quo/components/wallet/keypair/view.cljs +++ b/src/quo/components/wallet/keypair/view.cljs @@ -48,8 +48,9 @@ [text/text {:weight :semi-bold} (if (= type :default-keypair) (keypair-string full-name) full-name)] (if (= action :selector) - [selectors/radio - {:checked? selected? + [selectors/view + {:type :radio + :checked? selected? :blur? blur? :customization-color customization-color}] [rn/pressable {:on-press on-options-press} diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 7e5dea57edf..21baf73c6ae 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -7,7 +7,7 @@ quo.components.avatars.group-avatar.view quo.components.avatars.icon-avatar quo.components.avatars.user-avatar.view - quo.components.avatars.wallet-user-avatar + quo.components.avatars.wallet-user-avatar.view quo.components.banners.banner.view quo.components.browser.browser-input.view quo.components.buttons.button.view @@ -159,7 +159,7 @@ (def group-avatar quo.components.avatars.group-avatar.view/view) (def icon-avatar quo.components.avatars.icon-avatar/icon-avatar) (def user-avatar quo.components.avatars.user-avatar.view/user-avatar) -(def wallet-user-avatar quo.components.avatars.wallet-user-avatar/wallet-user-avatar) +(def wallet-user-avatar quo.components.avatars.wallet-user-avatar.view/wallet-user-avatar) ;;;; Banner (def banner quo.components.banners.banner.view/view) @@ -328,10 +328,7 @@ (def reactions-selector quo.components.selectors.reactions-selector.view/view) (def react quo.components.selectors.react.view/view) (def react-selector quo.components.selectors.react-selector.view/view) -(def checkbox quo.components.selectors.selectors.view/checkbox) -(def toggle quo.components.selectors.selectors.view/toggle) -(def radio quo.components.selectors.selectors.view/radio) -(def checkbox-prefill quo.components.selectors.selectors.view/checkbox-prefill) +(def selectors quo.components.selectors.selectors.view/view) ;;;; Settings (def account quo.components.settings.accounts.view/account) diff --git a/src/status_im2/common/confirmation_drawer/view.cljs b/src/status_im2/common/confirmation_drawer/view.cljs index f58826d79fe..8eabcf69bf4 100644 --- a/src/status_im2/common/confirmation_drawer/view.cljs +++ b/src/status_im2/common/confirmation_drawer/view.cljs @@ -24,7 +24,9 @@ [extra-action extra-text extra-action-selected?] (when extra-action [rn/view {:style {:margin-top 16 :flex-direction :row}} - [quo/checkbox {:on-change (fn [selected?] (reset! extra-action-selected? selected?))}] + [quo/selectors + {:type :checkbox + :on-change #(reset! extra-action-selected? %)}] [quo/text {:style {:margin-left 10}} extra-text]])) (defn confirmation-drawer diff --git a/src/status_im2/data_store/wallet.cljs b/src/status_im2/common/data_store/wallet.cljs similarity index 95% rename from src/status_im2/data_store/wallet.cljs rename to src/status_im2/common/data_store/wallet.cljs index c5952fa344b..3c4cdada159 100644 --- a/src/status_im2/data_store/wallet.cljs +++ b/src/status_im2/common/data_store/wallet.cljs @@ -1,4 +1,4 @@ -(ns status-im2.data-store.wallet +(ns status-im2.common.data-store.wallet (:require clojure.set)) diff --git a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs index deb8f1e3c64..9e9f3ec8fe7 100644 --- a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs @@ -5,28 +5,23 @@ [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "First name" - :key :f-name - :type :text} - {:label "Last name" - :key :l-name - :type :text} + [{:key :full-name + :type :text} {:key :size :type :select - :options [{:key :small} - {:key :medium} - {:key :large} + :options [{:key :size-20} + {:key :size-24} + {:key :size-32} + {:key :size-48} {:key :size-64} - {:key :x-large - :value "X Large"}]} - (preview/customization-color-option {:key :customization-color})]) + {:key :size-80}]} + (preview/customization-color-option)]) (defn view [] - (let [state (reagent/atom {:first-name "empty" - :last-name "name" - :size :x-large - :customization-color :indigo})] + (let [state (reagent/atom {:full-name "empty name" + :size :size-80 + :customization-color :blue})] (fn [] [preview/preview-container {:state state :descriptor descriptor} [quo/wallet-user-avatar @state]]))) diff --git a/src/dev/component_preview/events.cljs b/src/status_im2/contexts/quo_preview/component_preview/events.cljs similarity index 94% rename from src/dev/component_preview/events.cljs rename to src/status_im2/contexts/quo_preview/component_preview/events.cljs index 97ccfe58269..60b54899a23 100644 --- a/src/dev/component_preview/events.cljs +++ b/src/status_im2/contexts/quo_preview/component_preview/events.cljs @@ -1,4 +1,4 @@ -(ns dev.component-preview.events +(ns status-im2.contexts.quo-preview.component-preview.events (:require [quo.core :as quo] [re-frame.core :as re-frame])) diff --git a/src/dev/component_preview/view.cljs b/src/status_im2/contexts/quo_preview/component_preview/view.cljs similarity index 85% rename from src/dev/component_preview/view.cljs rename to src/status_im2/contexts/quo_preview/component_preview/view.cljs index 790f0a1deac..bdd3360b4fd 100644 --- a/src/dev/component_preview/view.cljs +++ b/src/status_im2/contexts/quo_preview/component_preview/view.cljs @@ -1,4 +1,4 @@ -(ns dev.component-preview.view +(ns status-im2.contexts.quo-preview.component-preview.view (:require [react-native.core :as rn] [utils.re-frame :as rf])) diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index 3d233075dc4..21b10f36ae1 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -197,8 +197,9 @@ {:style (style/multi-select-option) :on-press on-press} [rn/text {:style (style/field-text false)} v] - [quo/checkbox - {:checked? checked? + [quo/selectors + {:type :checkbox + :checked? checked? :on-change on-press}]])))] [rn/view {:style (style/footer)} [rn/pressable diff --git a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs b/src/status_im2/contexts/quo_preview/selectors/selectors.cljs index 2cbbf11a438..dc1eae21a15 100644 --- a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs +++ b/src/status_im2/contexts/quo_preview/selectors/selectors.cljs @@ -11,13 +11,14 @@ (preview/customization-color-option)]) (defn selector-preview - [text component {:keys [disabled? blur? customization-color]}] + [text type {:keys [disabled? blur? customization-color]}] [rn/view {:style {:margin 6 :align-items :center}} [quo/text {:size :paragraph-1} text] - [component - {:container-style {:margin 4} + [quo/selectors + {:type type + :container-style {:margin 4} :disabled? disabled? :blur? blur? :customization-color customization-color}]]) @@ -34,7 +35,7 @@ :blur? (:blur? @state) :show-blur-background? true :blur-height 300} - [selector-preview "Toggle" quo/toggle @state] - [selector-preview "Radio" quo/radio @state] - [selector-preview "Checkbox" quo/checkbox @state] - [selector-preview "Checkbox Prefill" quo/checkbox-prefill @state]]))) + [selector-preview "Toggle" :toggle @state] + [selector-preview "Radio" :radio @state] + [selector-preview "Checkbox" :checkbox @state] + [selector-preview "Filled Checkbox" :filled-checkbox @state]]))) diff --git a/src/status_im2/contexts/wallet/events.cljs b/src/status_im2/contexts/wallet/events.cljs index 2209f5c5531..01ea80e5bf6 100644 --- a/src/status_im2/contexts/wallet/events.cljs +++ b/src/status_im2/contexts/wallet/events.cljs @@ -1,7 +1,7 @@ (ns status-im2.contexts.wallet.events (:require [native-module.core :as native-module] - [status-im2.data-store.wallet :as data-store] + [status-im2.common.data-store.wallet :as data-store] [taoensso.timbre :as log] [utils.re-frame :as rf] [utils.security.core :as security])) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 98212cb4070..a2acffaf488 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -1,6 +1,5 @@ (ns status-im2.navigation.screens (:require - [dev.component-preview.view :as component-preview] [status-im.ui.screens.screens :as old-screens] [status-im2.config :as config] [status-im2.contexts.add-new-contact.views :as add-new-contact] @@ -28,6 +27,7 @@ [status-im2.contexts.onboarding.syncing.results.view :as syncing-results] [status-im2.contexts.onboarding.welcome.view :as welcome] [status-im2.contexts.profile.profiles.view :as profiles] + [status-im2.contexts.quo-preview.component-preview.view :as component-preview] [status-im2.contexts.quo-preview.main :as quo.preview] [status-im2.contexts.shell.activity-center.view :as activity-center] [status-im2.contexts.shell.jump-to.view :as shell] diff --git a/test/appium/tests/critical/chats/test_public_chat_browsing.py b/test/appium/tests/critical/chats/test_public_chat_browsing.py index 51eb4a64abb..d0880a1e924 100644 --- a/test/appium/tests/critical/chats/test_public_chat_browsing.py +++ b/test/appium/tests/critical/chats/test_public_chat_browsing.py @@ -855,20 +855,25 @@ def test_community_mentions_push_notification(self): chat_element.wait_for_sent_state() chat_element.long_press_element_by_coordinate() edit_done = False - edited_message = "0 abc (Edited)" + expected_message = "" try: self.channel_2.element_by_translation_id("edit-message").click() - for i in 31, 30, 29: + for i in range(29, 32): self.channel_2.driver.press_keycode(i) + input_text = self.channel_2.chat_message_input.text + if 'cba' in input_text: # sometimes method press_keycode adds symbols to the beginning of line + expected_message = "0 cba (Edited)" + else: + expected_message = "0 abc (Edited)" self.channel_2.send_message_button.click() edit_done = True - if chat_element.message_body_with_mention.text != edited_message: + if chat_element.message_body_with_mention.text != expected_message: self.errors.append("Edited message is not shown correctly for the sender") except NoSuchElementException: self.errors.append("Can not edit a message with a mention") if edit_done: element = self.channel_1.chat_element_by_text(self.username_1).message_body_with_mention - if not element.is_element_displayed(10) or element.text != edited_message: + if not element.is_element_displayed(10) or element.text != expected_message: self.errors.append("Edited message is not shown correctly for the (receiver) admin") self.home_2.navigate_back_to_home_view()