From 9b756544fd805ba311138e807ae832b157c5d8d9 Mon Sep 17 00:00:00 2001 From: yqrashawn Date: Mon, 17 Apr 2023 14:01:25 +0800 Subject: [PATCH] feat: add in-app notification, refactor toast (#15642) --- doc/component-tests-overview.md | 6 +- src/quo/previews/bottom_sheet.cljs | 8 +- src/quo/previews/button.cljs | 8 +- src/quo/previews/header.cljs | 10 +- src/quo/previews/lists.cljs | 12 +- src/quo/previews/text.cljs | 12 +- src/quo/previews/text_input.cljs | 12 +- src/quo/previews/tooltip.cljs | 10 +- .../notification/component_spec.cljs | 38 ++++++ .../notifications/notification/style.cljs | 39 ++++++ .../notifications/notification/view.cljs | 74 +++++++++++ src/quo2/components/notifications/toast.cljs | 122 ------------------ .../components/notifications/toast/style.cljs | 55 ++++++++ .../components/notifications/toast/view.cljs | 76 +++++++++++ src/quo2/core.cljs | 20 +-- src/quo2/core_spec.cljs | 1 + .../ui/screens/chat/components/input.cljs | 14 +- .../ui/screens/contacts_list/views.cljs | 12 +- .../ui/screens/currency_settings/views.cljs | 14 +- src/status_im/ui/screens/ens/views.cljs | 4 +- src/status_im/ui/screens/group/views.cljs | 10 +- .../ui/screens/multiaccounts/login/views.cljs | 4 +- src/status_im2/common/toasts/view.cljs | 8 +- .../chat/messages/composer/mentions/view.cljs | 12 +- .../quo_preview/avatars/account_avatar.cljs | 8 +- .../quo_preview/avatars/channel_avatar.cljs | 8 +- .../quo_preview/avatars/group_avatar.cljs | 8 +- .../quo_preview/avatars/icon_avatar.cljs | 8 +- .../quo_preview/avatars/user_avatar.cljs | 8 +- .../avatars/wallet_user_avatar.cljs | 8 +- .../contexts/quo_preview/banners/banner.cljs | 8 +- .../bottom_sheet/bottom_sheet.cljs | 8 +- .../contexts/quo_preview/buttons/button.cljs | 8 +- .../quo_preview/buttons/dynamic_button.cljs | 8 +- .../contexts/quo_preview/code/snippet.cljs | 8 +- .../quo_preview/colors/color_picker.cljs | 14 +- .../community/community_card_view.cljs | 8 +- .../community/community_list_view.cljs | 8 +- .../community_membership_list_view.cljs | 8 +- .../quo_preview/community/discover_card.cljs | 8 +- .../contexts/quo_preview/counter/counter.cljs | 8 +- .../contexts/quo_preview/dividers/date.cljs | 8 +- .../quo_preview/dividers/divider_label.cljs | 8 +- .../quo_preview/dividers/new_messages.cljs | 8 +- .../quo_preview/drawers/action_drawers.cljs | 10 +- .../quo_preview/drawers/drawer_buttons.cljs | 10 +- .../quo_preview/dropdowns/dropdown.cljs | 12 +- .../quo_preview/info/info_message.cljs | 8 +- .../quo_preview/info/information_box.cljs | 8 +- .../contexts/quo_preview/inputs/input.cljs | 8 +- .../quo_preview/list_items/channel.cljs | 8 +- .../quo_preview/list_items/preview_lists.cljs | 8 +- .../quo_preview/list_items/user_list.cljs | 8 +- src/status_im2/contexts/quo_preview/main.cljs | 12 +- .../contexts/quo_preview/markdown/text.cljs | 8 +- .../contexts/quo_preview/messages/author.cljs | 8 +- .../quo_preview/messages/system_message.cljs | 8 +- .../navigation/bottom_nav_tab.cljs | 8 +- .../navigation/floating_shell_button.cljs | 8 +- .../quo_preview/navigation/page_nav.cljs | 8 +- .../quo_preview/navigation/top_nav.cljs | 8 +- .../notifications/activity_logs.cljs | 8 +- .../notifications/notification.cljs | 112 ++++++++++++++++ .../quo_preview/notifications/toast.cljs | 8 +- .../onboarding/small_option_card.cljs | 8 +- .../contexts/quo_preview/password/tips.cljs | 8 +- .../quo_preview/profile/profile_card.cljs | 8 +- .../quo_preview/profile/select_profile.cljs | 8 +- .../contexts/quo_preview/reactions/react.cljs | 8 +- .../quo_preview/selectors/disclaimer.cljs | 8 +- .../quo_preview/selectors/filter.cljs | 8 +- .../quo_preview/selectors/selectors.cljs | 8 +- .../quo_preview/settings/accounts.cljs | 8 +- .../quo_preview/settings/privacy_option.cljs | 8 +- .../quo_preview/switcher/switcher_cards.cljs | 8 +- .../quo_preview/tabs/account_selector.cljs | 8 +- .../quo_preview/tabs/segmented_tab.cljs | 8 +- .../quo_preview/tags/context_tags.cljs | 8 +- .../quo_preview/tags/permission_tag.cljs | 8 +- .../quo_preview/tags/status_tags.cljs | 8 +- .../contexts/quo_preview/tags/tag.cljs | 8 +- .../contexts/quo_preview/tags/tags.cljs | 8 +- .../contexts/quo_preview/tags/token_tag.cljs | 8 +- .../quo_preview/wallet/lowest_price.cljs | 8 +- .../quo_preview/wallet/network_breakdown.cljs | 8 +- .../quo_preview/wallet/token_overview.cljs | 8 +- 86 files changed, 740 insertions(+), 459 deletions(-) create mode 100644 src/quo2/components/notifications/notification/component_spec.cljs create mode 100644 src/quo2/components/notifications/notification/style.cljs create mode 100644 src/quo2/components/notifications/notification/view.cljs delete mode 100644 src/quo2/components/notifications/toast.cljs create mode 100644 src/quo2/components/notifications/toast/style.cljs create mode 100644 src/quo2/components/notifications/toast/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/notifications/notification.cljs diff --git a/doc/component-tests-overview.md b/doc/component-tests-overview.md index 80a58c5931..016d508778 100644 --- a/doc/component-tests-overview.md +++ b/doc/component-tests-overview.md @@ -23,13 +23,13 @@ setups and runs the test suite once. setups and runs the test suite and watches for code changes will then retrigger the test suite. ## Writing Tests -New test files will need their namespace added to either the file "src/quo2/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadowcljs config discussed below. +New test files will need their namespace added to either the file "src/quo2/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below. ### Best practices For the moment we will keep best practices for tests in our other guidelines document: -To that point these guidelines will follow the conventions of Jest and React Native Testing Library recomendations and Status mobile will just stack their preferences on top. +To that point these guidelines will follow the conventions of Jest and React Native Testing Library recommendations and Status mobile will just stack their preferences on top. ### Utilities There is a file of utility functions defined in "src/test_helpers/component.cljs" and "src/test_helpers/component.clj". It will be great to use these utilities and to add any common testing tools to these files as it should make writing tests easier and faster. @@ -52,4 +52,4 @@ It's worth knowing that our tests are compiled to JS and then run in the tempora ### Jest There is also further configuration for Jest in "test/jest". There is a jest config file which has some mostly standard configuration pieces, where the tests live, what environment variables are set etc. This is documented by Jest here: https://jestjs.io/docs/configuration -There is also a setup file which is used to set some global and default values. Additionally this file is used to mock some of the react native (among other) dependencies \ No newline at end of file +There is also a setup file which is used to set some global and default values. Additionally this file is used to mock some of the react native (among other) dependencies diff --git a/src/quo/previews/bottom_sheet.cljs b/src/quo/previews/bottom_sheet.cljs index 4940c1a30f..cafa10c0bd 100644 --- a/src/quo/previews/bottom_sheet.cljs +++ b/src/quo/previews/bottom_sheet.cljs @@ -71,7 +71,7 @@ {:background-color (:ui-background @colors/theme) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]])) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]])) diff --git a/src/quo/previews/button.cljs b/src/quo/previews/button.cljs index 5de8449e17..5d298e034c 100644 --- a/src/quo/previews/button.cljs +++ b/src/quo/previews/button.cljs @@ -79,7 +79,7 @@ {:background-color (:ui-background @colors/theme) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/quo/previews/header.cljs b/src/quo/previews/header.cljs index 2817031d0f..05bc37f335 100644 --- a/src/quo/previews/header.cljs +++ b/src/quo/previews/header.cljs @@ -44,8 +44,8 @@ {:background-color (:ui-background @colors/theme) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :data all-props - :render-fn render-item - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :data all-props + :render-fn render-item + :key-fn str}]]) diff --git a/src/quo/previews/lists.cljs b/src/quo/previews/lists.cljs index 55dd9ca4ae..b6770f6ef8 100644 --- a/src/quo/previews/lists.cljs +++ b/src/quo/previews/lists.cljs @@ -113,9 +113,9 @@ {:background-color (:ui-background @colors/theme) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :data all-props - :render-fn render-item - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :data all-props + :render-fn render-item + :key-fn str}]]) diff --git a/src/quo/previews/text.cljs b/src/quo/previews/text.cljs index cac6c903fa..b0c07f8334 100644 --- a/src/quo/previews/text.cljs +++ b/src/quo/previews/text.cljs @@ -91,9 +91,9 @@ {:background-color (:ui-background @colors/theme) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :data all-props - :render-fn render-item - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :data all-props + :render-fn render-item + :key-fn str}]]) diff --git a/src/quo/previews/text_input.cljs b/src/quo/previews/text_input.cljs index f5453a3841..91df8df9e6 100644 --- a/src/quo/previews/text_input.cljs +++ b/src/quo/previews/text_input.cljs @@ -83,9 +83,9 @@ {:background-color (:ui-background @colors/theme) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :data all-props - :render-fn render-item - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :data all-props + :render-fn render-item + :key-fn str}]]) diff --git a/src/quo/previews/tooltip.cljs b/src/quo/previews/tooltip.cljs index 16696e0b65..04e6a0b0e6 100644 --- a/src/quo/previews/tooltip.cljs +++ b/src/quo/previews/tooltip.cljs @@ -31,8 +31,8 @@ {:background-color (:ui-background @colors/theme) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :data all-props - :render-fn render-item - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :data all-props + :render-fn render-item + :key-fn str}]]) diff --git a/src/quo2/components/notifications/notification/component_spec.cljs b/src/quo2/components/notifications/notification/component_spec.cljs new file mode 100644 index 0000000000..3020a2cf06 --- /dev/null +++ b/src/quo2/components/notifications/notification/component_spec.cljs @@ -0,0 +1,38 @@ +(ns quo2.components.notifications.notification.component-spec + (:require + [quo2.components.markdown.text :as text] + [quo2.components.notifications.notification.view :as notification] + [test-helpers.component :as h])) + +(h/describe "notification" + (h/test "empty notification" + (h/render [notification/notification {}]) + (h/is-null (h/query-by-label-text :notification-avatar)) + (h/is-null (h/query-by-label-text :notification-header)) + (h/is-null (h/query-by-label-text :notification-body))) + (h/test "notification with title and text" + (h/render [notification/notification + {:title "title" + :title-weight :medium + :text "text"}]) + (-> (h/expect (h/get-by-label-text :notification-header)) + (.toHaveTextContent "title")) + (-> (h/expect (h/get-by-label-text :notification-body)) + (.toHaveTextContent "text"))) + (h/test "notification with custom input" + (h/render [notification/notification + {:header [text/text {:accessibility-label :header} "custom header"] + :avatar [text/text {:accessibility-label :avatar} "custom avatar"] + :body [text/text {:accessibility-label :body} "custom body"]}]) + (h/is-truthy (h/get-by-label-text :notification-avatar)) + (h/is-truthy (h/get-by-label-text :notification-header)) + (h/is-truthy (h/get-by-label-text :notification-body)) + (h/is-truthy (h/get-by-label-text :avatar)) + (h/is-truthy (h/get-by-label-text :header)) + (h/is-truthy (h/get-by-label-text :body)) + (-> (h/expect (h/get-by-label-text :notification-header)) + (.toHaveTextContent "custom header")) + (-> (h/expect (h/get-by-label-text :notification-avatar)) + (.toHaveTextContent "custom avatar")) + (-> (h/expect (h/get-by-label-text :notification-body)) + (.toHaveTextContent "custom body")))) diff --git a/src/quo2/components/notifications/notification/style.cljs b/src/quo2/components/notifications/notification/style.cljs new file mode 100644 index 0000000000..eda46e0b25 --- /dev/null +++ b/src/quo2/components/notifications/notification/style.cljs @@ -0,0 +1,39 @@ +(ns quo2.components.notifications.notification.style + (:require + [quo2.foundations.colors :as colors] + [quo2.foundations.shadows :as shadows])) + +(def box-container + {:margin-horizontal 8 + :border-radius 16 + :overflow :hidden}) + +(def blur-container + {:height "100%" + :width "100%" + :position :absolute + :padding-vertical 8 + :padding-left 10 + :padding-right 8 + :background-color :transparent}) + +(defn content-container + [override-theme] + (merge + (:shadow-1 shadows/normal-scale) + {:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme) + :flex-direction :row + :padding-vertical 8 + :padding-horizontal 12})) + +(def right-side-container {:flex 1}) + +(defn title + [override-theme] + {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)}) + +(defn text + [override-theme] + {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)}) + +(def avatar-container {:margin-right 8 :margin-top 4}) diff --git a/src/quo2/components/notifications/notification/view.cljs b/src/quo2/components/notifications/notification/view.cljs new file mode 100644 index 0000000000..7371ff07de --- /dev/null +++ b/src/quo2/components/notifications/notification/view.cljs @@ -0,0 +1,74 @@ +(ns quo2.components.notifications.notification.view + (:require [quo2.components.markdown.text :as text] + [quo2.components.notifications.notification.style :as style] + [react-native.blur :as blur] + [react-native.core :as rn])) + +(defn header-container + [& children] + [into + [rn/view {:accessibility-label :notification-header}] children]) + +(defn body-container + [& children] + [into [rn/view {:accessibility-label :notification-body}] children]) + +(defn avatar-container + [& children] + [into + [rn/view + {:style style/avatar-container + :accessibility-label :notification-avatar}] + children]) + +(defn title + ([text weight] (title text weight nil)) + ([text weight override-theme] + [text/text + {:size :paragraph-1 + :weight (or weight :semi-bold) + :style (style/title override-theme) + :accessibility-label :notification-title} + text])) + +(defn message + [text override-theme] + [text/text + {:size :paragraph-2 + :style (style/text override-theme) + :accessibility-label :notification-content} + text]) + +(defn- notification-container + [{:keys [avatar header body container-style override-theme]}] + [rn/view + {:style (merge style/box-container container-style)} + [blur/view + {:style style/blur-container + :blur-amount 13 + :blur-radius 10 + :blur-type :transparent + :overlay-color :transparent}] + [rn/view + {:style (style/content-container override-theme)} + avatar + [rn/view + {:style style/right-side-container} + header + body]]]) + +(defn notification + [{title-text :title :keys [avatar header title-weight text body container-style override-theme]}] + (let [header (or header + (when title-text + [title title-text title-weight override-theme])) + header (when header [header-container header]) + body (or body (when text [message text override-theme])) + body (when body [body-container body]) + avatar (when avatar [avatar-container avatar])] + [notification-container + {:avatar avatar + :header header + :body body + :container-style container-style + :override-theme override-theme}])) diff --git a/src/quo2/components/notifications/toast.cljs b/src/quo2/components/notifications/toast.cljs deleted file mode 100644 index 6e7667ea32..0000000000 --- a/src/quo2/components/notifications/toast.cljs +++ /dev/null @@ -1,122 +0,0 @@ -(ns quo2.components.notifications.toast - (:require [quo2.components.icon :as icon] - [quo2.components.markdown.text :as text] - [quo2.components.notifications.count-down-circle :as count-down-circle] - [quo2.foundations.colors :as colors] - [quo2.foundations.shadows :as shadows] - [quo2.theme :as theme] - [utils.i18n :as i18n] - [react-native.blur :as blur] - [react-native.core :as rn])) - -(def ^:private themes - {:container {:dark {:background-color colors/white-opa-70} - :light {:background-color colors/neutral-80-opa-70}} - :title {:dark {:color colors/neutral-100} - :light {:color colors/white}} - :text {:dark {:color colors/neutral-100} - :light {:color colors/white}} - :icon {:dark {:color colors/neutral-100} - :light {:color colors/white}} - :action-container {:dark {:background-color colors/neutral-80-opa-5} - :light {:background-color colors/white-opa-5}}}) - -(defn- merge-theme-style - [component-key styles override-theme] - (merge (get-in themes [component-key (or override-theme (theme/get-theme))]) styles)) - -(defn toast-action-container - [{:keys [on-press style]} & children] - [rn/touchable-highlight - {:on-press on-press - :underlay-color :transparent} - [into - [rn/view - {:style (merge - {:flex-direction :row - :padding-vertical 3 - :padding-horizontal 8 - :align-items :center - :border-radius 8 - :background-color (get-in themes - [:action-container (theme/get-theme) - :background-color])} - style)}] - children]]) - -(defn toast-undo-action - [duration on-press override-theme] - [toast-action-container - {:on-press on-press :accessibility-label :toast-undo-action} - [rn/view {:style {:margin-right 5}} - [count-down-circle/circle-timer {:duration duration}]] - [text/text - {:size :paragraph-2 :weight :medium :style (merge-theme-style :text {} override-theme)} - [i18n/label :t/undo]]]) - -(defn- toast-container - [{:keys [left title text right container-style override-theme]}] - [rn/view - {:style (merge {:margin-horizontal 12 - :border-radius 12 - :overflow :hidden} - container-style)} - [blur/view - {:style {:height "100%" - :width "100%" - :position :absolute - :padding-vertical 8 - :padding-left 10 - :padding-right 8 - :background-color :transparent} - :blur-amount 13 - :blur-radius 10 - :blur-type :transparent - :overlay-color :transparent}] - [rn/view - {:style (merge-theme-style :container - (merge - (:shadow-1 shadows/normal-scale) - {:flex-direction :row - :justify-content :space-between - :padding-vertical 8 - :padding-left 10 - :padding-right 8 - :border-radius 12}) - override-theme)} - [rn/view {:style {:padding 2}} left] - [rn/view {:style {:padding 4 :flex 1}} - (when title - [text/text - {:size :paragraph-1 - :weight :semi-bold - :style (merge-theme-style :title {} override-theme) - :accessibility-label :toast-title} - title]) - (when text - [text/text - {:size :paragraph-2 - :weight :medium - :style (merge-theme-style :text {} override-theme) - :accessibility-label :toast-content} - text])] - (when right right)]]) - -(defn toast - [{:keys [icon icon-color title text action undo-duration undo-on-press container-style - override-theme]}] - [toast-container - {:left (when icon - [icon/icon icon - {:container-style {:width 20 :height 20} - :color (or icon-color - (get-in themes - [:icon (or override-theme (theme/get-theme)) - :color]))}]) - :title title - :text text - :right (if undo-duration - [toast-undo-action undo-duration undo-on-press override-theme] - action) - :container-style container-style - :override-theme override-theme}]) diff --git a/src/quo2/components/notifications/toast/style.cljs b/src/quo2/components/notifications/toast/style.cljs new file mode 100644 index 0000000000..8763a306eb --- /dev/null +++ b/src/quo2/components/notifications/toast/style.cljs @@ -0,0 +1,55 @@ +(ns quo2.components.notifications.toast.style + (:require + [quo2.foundations.colors :as colors] + [quo2.foundations.shadows :as shadows])) + +(def box-container + {:margin-horizontal 12 + :border-radius 12 + :overflow :hidden}) + +(def blur-container + {:height "100%" + :width "100%" + :position :absolute + :padding-vertical 8 + :padding-left 10 + :padding-right 8 + :background-color :transparent}) + +(defn content-container + [override-theme] + (merge + (:shadow-1 shadows/normal-scale) + {:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme) + :flex-direction :row + :justify-content :space-between + :padding-vertical 8 + :padding-left 10 + :padding-right 8 + :border-radius 12})) + +(defn title + [override-theme] + {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)}) + +(defn text + [override-theme] + {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)}) + +(defn icon + [override-theme] + {:color (colors/theme-colors colors/white colors/neutral-100 override-theme) + :container-style {:width 20 :height 20}}) + +(def left-side-container {:padding 2}) +(def right-side-container {:padding 4 :flex 1}) + +(defn action-container + [override-theme] + {:background-color (colors/theme-colors colors/white-opa-5 colors/neutral-80-opa-5 override-theme) + :flex-direction :row + :padding-vertical 3 + :padding-horizontal 8 + :align-items :center + :border-radius 8}) diff --git a/src/quo2/components/notifications/toast/view.cljs b/src/quo2/components/notifications/toast/view.cljs new file mode 100644 index 0000000000..6056b11a3a --- /dev/null +++ b/src/quo2/components/notifications/toast/view.cljs @@ -0,0 +1,76 @@ +(ns quo2.components.notifications.toast.view + (:require [quo2.components.icon :as icon] + [quo2.components.markdown.text :as text] + [quo2.components.notifications.count-down-circle :as count-down-circle] + [quo2.components.notifications.toast.style :as style] + [quo2.theme :as theme] + [react-native.blur :as blur] + [react-native.core :as rn] + [utils.i18n :as i18n])) + +(defn toast-action-container + [{:keys [on-press style]} & children] + [rn/touchable-highlight + {:on-press on-press + :underlay-color :transparent} + [into + [rn/view + {:style (merge (style/action-container (theme/get-theme)) style)}] + children]]) + +(defn toast-undo-action + [duration on-press override-theme] + [toast-action-container + {:on-press on-press :accessibility-label :toast-undo-action} + [rn/view {:style {:margin-right 5}} + [count-down-circle/circle-timer {:duration duration}]] + [text/text + {:size :paragraph-2 :weight :medium :style (style/text override-theme)} + [i18n/label :t/undo]]]) + +(defn- toast-container + [{:keys [left title text right container-style override-theme]}] + [rn/view + {:style (merge style/box-container container-style)} + [blur/view + {:style style/blur-container + :blur-amount 13 + :blur-radius 10 + :blur-type :transparent + :overlay-color :transparent}] + [rn/view + {:style (style/content-container override-theme)} + [rn/view {:style style/left-side-container} left] + [rn/view {:style style/right-side-container} + (when title + [text/text + {:size :paragraph-1 + :weight :semi-bold + :style (style/title override-theme) + :accessibility-label :toast-title} + title]) + (when text + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/text override-theme) + :accessibility-label :toast-content} + text])] + (when right right)]]) + +(defn toast + [{:keys [icon icon-color title text action undo-duration undo-on-press container-style + override-theme]}] + [toast-container + {:left (when icon + [icon/icon icon + (cond-> (style/icon override-theme) + icon-color + (assoc :color icon-color))]) + :title title + :text text + :right (if undo-duration + [toast-undo-action undo-duration undo-on-press override-theme] + action) + :container-style container-style + :override-theme override-theme}]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index c63e8e3463..4555507e8f 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -31,13 +31,14 @@ quo2.components.info.info-message quo2.components.info.information-box quo2.components.inputs.input.view - quo2.components.inputs.title-input.view quo2.components.inputs.profile-input.view - quo2.components.links.url-preview.view + quo2.components.inputs.title-input.view quo2.components.links.url-preview-list.view + quo2.components.links.url-preview.view quo2.components.list-items.channel quo2.components.list-items.menu-item quo2.components.list-items.preview-list + quo2.components.list-items.user-list quo2.components.loaders.skeleton quo2.components.markdown.text quo2.components.messages.author.view @@ -49,7 +50,9 @@ quo2.components.notifications.count-down-circle quo2.components.notifications.info-count quo2.components.notifications.notification-dot - quo2.components.notifications.toast + quo2.components.notifications.notification.view + quo2.components.notifications.toast.view + quo2.components.onboarding.small-option-card.view quo2.components.password.tips.view quo2.components.profile.profile-card.view quo2.components.profile.select-profile.view @@ -63,20 +66,17 @@ quo2.components.settings.privacy-option quo2.components.share.qr-code.view quo2.components.share.share-qr-code.view - quo2.components.onboarding.small-option-card.view - quo2.components.tabs.segmented-tab quo2.components.tabs.account-selector + quo2.components.tabs.segmented-tab quo2.components.tabs.tabs quo2.components.tags.context-tag.view - quo2.components.tags.status-tags quo2.components.tags.permission-tag + quo2.components.tags.status-tags quo2.components.tags.tag quo2.components.tags.tags quo2.components.tags.token-tag - quo2.components.text-combinations.title.view - quo2.components.list-items.user-list)) + quo2.components.text-combinations.title.view)) -(def toast quo2.components.notifications.toast/toast) (def button quo2.components.buttons.button/button) (def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button) (def text quo2.components.markdown.text/text) @@ -163,6 +163,8 @@ (def info-count quo2.components.notifications.info-count/info-count) (def notification-dot quo2.components.notifications.notification-dot/notification-dot) (def count-down-circle quo2.components.notifications.count-down-circle/circle-timer) +(def notification quo2.components.notifications.notification.view/notification) +(def toast quo2.components.notifications.toast.view/toast) ;;;; PASSWORD (def tips quo2.components.password.tips.view/view) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 334d519c40..72dec5f48a 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -16,6 +16,7 @@ [quo2.components.links.url-preview-list.component-spec] [quo2.components.links.url-preview.component-spec] [quo2.components.markdown.--tests--.text-component-spec] + [quo2.components.notifications.notification.component-spec] [quo2.components.onboarding.small-option-card.component-spec] [quo2.components.password.tips.component-spec] [quo2.components.profile.select-profile.component-spec] diff --git a/src/status_im/ui/screens/chat/components/input.cljs b/src/status_im/ui/screens/chat/components/input.cljs index ffac82fce6..69894644e2 100644 --- a/src/status_im/ui/screens/chat/components/input.cljs +++ b/src/status_im/ui/screens/chat/components/input.cljs @@ -331,13 +331,13 @@ [rn/view {:style {:height height}} [list/flat-list - {:keyboardShouldPersistTaps :always - :footer [rn/view {:style {:height 8}}] - :header [rn/view {:style {:height 8}}] - :data suggestions - :key-fn first - :render-data text-input-ref - :render-fn mention-item}]]])))) + {:keyboard-should-persist-taps :always + :footer [rn/view {:style {:height 8}}] + :header [rn/view {:style {:height 8}}] + :data suggestions + :key-fn first + :render-data text-input-ref + :render-fn mention-item}]]])))) (defn on-chat-toolbar-layout [^js ev] diff --git a/src/status_im/ui/screens/contacts_list/views.cljs b/src/status_im/ui/screens/contacts_list/views.cljs index 52eb5655c8..8cf1b17edb 100644 --- a/src/status_im/ui/screens/contacts_list/views.cljs +++ b/src/status_im/ui/screens/contacts_list/views.cljs @@ -65,9 +65,9 @@ [] (letsubs [blocked-contacts [:contacts/blocked]] [list.views/flat-list - {:data blocked-contacts - :key-fn :address - :render-fn contacts-list-item - :default-separator? true - :enableEmptySections true - :keyboardShouldPersistTaps :always}])) + {:data blocked-contacts + :key-fn :address + :render-fn contacts-list-item + :default-separator? true + :enableEmptySections true + :keyboard-should-persist-taps :always}])) diff --git a/src/status_im/ui/screens/currency_settings/views.cljs b/src/status_im/ui/screens/currency_settings/views.cljs index 606eb7b478..e651ed0d1b 100644 --- a/src/status_im/ui/screens/currency_settings/views.cljs +++ b/src/status_im/ui/screens/currency_settings/views.cljs @@ -44,10 +44,10 @@ :on-change (fn [text] (re-frame/dispatch [:search/currency-filter-changed text]))}]] [list/flat-list - {:data (->> currencies - vals - (sort #(compare (:code %1) (:code %2)))) - :key-fn :code - :render-data currency-id - :render-fn render-currency - :keyboardShouldPersistTaps :always}]]])) + {:data (->> currencies + vals + (sort #(compare (:code %1) (:code %2)))) + :key-fn :code + :render-data currency-id + :render-fn render-currency + :keyboard-should-persist-taps :always}]]])) diff --git a/src/status_im/ui/screens/ens/views.cljs b/src/status_im/ui/screens/ens/views.cljs index 9d027c8679..8c2823b069 100644 --- a/src/status_im/ui/screens/ens/views.cljs +++ b/src/status_im/ui/screens/ens/views.cljs @@ -219,11 +219,11 @@ [:ens/search-screen]] [react/keyboard-avoiding-view {:flex 1} [react/scroll-view - {:style {:flex 1} + {:style {:flex 1} ;;NOTE required so that switching custom-domain ;;works on first tap and persists keyboard ;;instead of dismissing keyboard and requiring two taps - :keyboardShouldPersistTaps :always} + :keyboard-should-persist-taps :always} [react/view {:style {:flex 1}} [react/view {:style {:flex 1 diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index 0ab8f26c78..dff7d1ad26 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -76,11 +76,11 @@ (defn toggle-list [{:keys [contacts render-fn render-data]}] [list/flat-list - {:data contacts - :key-fn :public-key - :render-data render-data - :render-fn render-fn - :keyboardShouldPersistTaps :always}]) + {:data contacts + :key-fn :public-key + :render-data render-data + :render-fn render-fn + :keyboard-should-persist-taps :always}]) (defn no-contacts [{:keys [no-contacts]}] diff --git a/src/status_im/ui/screens/multiaccounts/login/views.cljs b/src/status_im/ui/screens/multiaccounts/login/views.cljs index 1018acab77..67db4d2c94 100644 --- a/src/status_im/ui/screens/multiaccounts/login/views.cljs +++ b/src/status_im/ui/screens/multiaccounts/login/views.cljs @@ -58,8 +58,8 @@ banner-hidden [:keycard/banner-hidden]] [react/keyboard-avoiding-view {:style ast/multiaccounts-view} [react/scroll-view - {:keyboardShouldPersistTaps :always - :style styles/login-view} + {:keyboard-should-persist-taps :always + :style styles/login-view} [react/view styles/login-badge-container [multiaccount-login-badge multiaccount] [react/view {:style styles/password-container} diff --git a/src/status_im2/common/toasts/view.cljs b/src/status_im2/common/toasts/view.cljs index fce53b8f89..f29733678f 100644 --- a/src/status_im2/common/toasts/view.cljs +++ b/src/status_im2/common/toasts/view.cljs @@ -28,8 +28,10 @@ (defn toast [id] - (let [toast-opts (rf/sub [:toasts/toast id])] - [quo/toast toast-opts])) + (let [{:keys [type] :as toast-opts} (rf/sub [:toasts/toast id])] + (if (= type :notification) + [quo/notification toast-opts] + [quo/toast toast-opts]))) (defn container [id] @@ -81,7 +83,7 @@ (rn/use-unmount on-dismissed) [gesture/gesture-detector {:gesture pan} [reanimated/view - {;; TODO: this will eanble layout animation at runtime and causing flicker on android + {;; TODO: this will enable layout animation at runtime and causing flicker on android ;; we need to resolve this and re-enable layout animation ;; issue at https://github.com/status-im/status-mobile/issues/14752 ;; :entering slide-in-up-animation diff --git a/src/status_im2/contexts/chat/messages/composer/mentions/view.cljs b/src/status_im2/contexts/chat/messages/composer/mentions/view.cljs index 1b1d6945bc..74d511a832 100644 --- a/src/status_im2/contexts/chat/messages/composer/mentions/view.cljs +++ b/src/status_im2/contexts/chat/messages/composer/mentions/view.cljs @@ -29,9 +29,9 @@ :elevation 5 :max-height (/ max-y 2)})} [rn/flat-list - {:keyboardShouldPersistTaps :always - :data (vals suggestions) - :key-fn :key - :render-fn mention-item - :render-data (:text-input-ref refs) - :accessibility-label :mentions-list}]]))]) + {:keyboard-should-persist-taps :always + :data (vals suggestions) + :key-fn :key + :render-fn mention-item + :render-data (:text-input-ref refs) + :accessibility-label :mentions-list}]]))]) diff --git a/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs index b45f8e09ea..87bf41d58f 100644 --- a/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs @@ -46,7 +46,7 @@ [] [rn/view {:flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs index 18374df786..fcbbdc8545 100644 --- a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs @@ -49,7 +49,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs index 138175047d..83d16f149e 100644 --- a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs @@ -48,7 +48,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs index 56a7987820..789a2c7e24 100644 --- a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs @@ -53,7 +53,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs index bacc82d0b7..e1a84206a6 100644 --- a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs @@ -80,7 +80,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) 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 ab6217390e..43bf2d4ebd 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 @@ -51,7 +51,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/banners/banner.cljs b/src/status_im2/contexts/quo_preview/banners/banner.cljs index 6214ba1959..63da6cb70e 100644 --- a/src/status_im2/contexts/quo_preview/banners/banner.cljs +++ b/src/status_im2/contexts/quo_preview/banners/banner.cljs @@ -40,7 +40,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs b/src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs index cf39f7ec73..8a10998fb9 100644 --- a/src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs +++ b/src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs @@ -59,7 +59,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/buttons/button.cljs b/src/status_im2/contexts/quo_preview/buttons/button.cljs index b6792d18f9..47e4d3e1d9 100644 --- a/src/status_im2/contexts/quo_preview/buttons/button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/button.cljs @@ -93,7 +93,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs b/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs index 1b261fd3cc..1f58a1eab2 100644 --- a/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs @@ -49,7 +49,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/code/snippet.cljs b/src/status_im2/contexts/quo_preview/code/snippet.cljs index 7945e4d9f3..f1bc89c405 100644 --- a/src/status_im2/contexts/quo_preview/code/snippet.cljs +++ b/src/status_im2/contexts/quo_preview/code/snippet.cljs @@ -117,7 +117,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/colors/color_picker.cljs b/src/status_im2/contexts/quo_preview/colors/color_picker.cljs index 310a87f85a..0d8edb7f5b 100644 --- a/src/status_im2/contexts/quo_preview/colors/color_picker.cljs +++ b/src/status_im2/contexts/quo_preview/colors/color_picker.cljs @@ -1,9 +1,9 @@ (ns status-im2.contexts.quo-preview.colors.color-picker - (:require [react-native.core :as rn] + (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] - [reagent.core :as reagent] - [quo2.core :as quo] [react-native.blur :as blur] + [react-native.core :as rn] + [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor @@ -39,8 +39,8 @@ colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/community/community_card_view.cljs b/src/status_im2/contexts/quo_preview/community/community_card_view.cljs index cf60cb9ebc..311db3df9c 100644 --- a/src/status_im2/contexts/quo_preview/community/community_card_view.cljs +++ b/src/status_im2/contexts/quo_preview/community/community_card_view.cljs @@ -61,8 +61,8 @@ colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/community/community_list_view.cljs b/src/status_im2/contexts/quo_preview/community/community_list_view.cljs index d52345269b..a840c986ea 100644 --- a/src/status_im2/contexts/quo_preview/community/community_list_view.cljs +++ b/src/status_im2/contexts/quo_preview/community/community_list_view.cljs @@ -63,7 +63,7 @@ colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs b/src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs index c9383a8b52..79f41d1919 100644 --- a/src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs +++ b/src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs @@ -63,7 +63,7 @@ colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/community/discover_card.cljs b/src/status_im2/contexts/quo_preview/community/discover_card.cljs index c4df9e9dec..0c7e3b480a 100644 --- a/src/status_im2/contexts/quo_preview/community/discover_card.cljs +++ b/src/status_im2/contexts/quo_preview/community/discover_card.cljs @@ -36,7 +36,7 @@ colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/counter/counter.cljs b/src/status_im2/contexts/quo_preview/counter/counter.cljs index c665e885ad..82ffe65df1 100644 --- a/src/status_im2/contexts/quo_preview/counter/counter.cljs +++ b/src/status_im2/contexts/quo_preview/counter/counter.cljs @@ -39,7 +39,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/dividers/date.cljs b/src/status_im2/contexts/quo_preview/dividers/date.cljs index cd40c78a1c..eed133b9e1 100644 --- a/src/status_im2/contexts/quo_preview/dividers/date.cljs +++ b/src/status_im2/contexts/quo_preview/dividers/date.cljs @@ -27,7 +27,7 @@ colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/dividers/divider_label.cljs b/src/status_im2/contexts/quo_preview/dividers/divider_label.cljs index f12da6fb01..1db8bd8cfe 100644 --- a/src/status_im2/contexts/quo_preview/dividers/divider_label.cljs +++ b/src/status_im2/contexts/quo_preview/dividers/divider_label.cljs @@ -48,7 +48,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs b/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs index d0e9006744..0f6442ffae 100644 --- a/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs +++ b/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs @@ -56,7 +56,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs index 99866212c6..2cf941f128 100644 --- a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs +++ b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs @@ -72,8 +72,8 @@ {:background-color (colors/theme-colors colors/white colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :nestedScrollEnabled true - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn (fn [_ index] (str "actions-drawers-" index))}]]) + {:flex 1 + :nestedScrollEnabled true + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn (fn [_ index] (str "actions-drawers-" index))}]]) 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 46210e3a8f..255115ec2d 100644 --- a/src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs +++ b/src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs @@ -67,8 +67,8 @@ {:background-color (colors/theme-colors colors/white colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :nestedScrollEnabled true - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn :id}]]) + {:flex 1 + :nestedScrollEnabled true + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn :id}]]) diff --git a/src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs b/src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs index c41d2e74f8..0ad5eac70b 100644 --- a/src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs +++ b/src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs @@ -78,9 +78,9 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :flex-grow 1 - :nestedScrollEnabled true - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :flex-grow 1 + :nestedScrollEnabled true + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/info/info_message.cljs b/src/status_im2/contexts/quo_preview/info/info_message.cljs index 35b94a6a54..32464a34c9 100644 --- a/src/status_im2/contexts/quo_preview/info/info_message.cljs +++ b/src/status_im2/contexts/quo_preview/info/info_message.cljs @@ -47,7 +47,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/info/information_box.cljs b/src/status_im2/contexts/quo_preview/info/information_box.cljs index 357e0a8b0b..9f5ef275d5 100644 --- a/src/status_im2/contexts/quo_preview/info/information_box.cljs +++ b/src/status_im2/contexts/quo_preview/info/information_box.cljs @@ -51,7 +51,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/inputs/input.cljs b/src/status_im2/contexts/quo_preview/inputs/input.cljs index 84b2f38c96..2e4e6dcf5a 100644 --- a/src/status_im2/contexts/quo_preview/inputs/input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/input.cljs @@ -103,7 +103,7 @@ {:style {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1}} [rn/flat-list - {:style {:flex 1} - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:style {:flex 1} + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/list_items/channel.cljs b/src/status_im2/contexts/quo_preview/list_items/channel.cljs index 0a58ac7cc3..91ca89b127 100644 --- a/src/status_im2/contexts/quo_preview/list_items/channel.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/channel.cljs @@ -74,7 +74,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]]) diff --git a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs index 857d27593e..f6da78ad29 100644 --- a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs @@ -69,7 +69,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs index 5b017eb300..210cba1693 100644 --- a/src/status_im2/contexts/quo_preview/list_items/user_list.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/user_list.cljs @@ -67,7 +67,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index c1c76dbbb3..31ff3d4338 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -37,12 +37,14 @@ [status-im2.contexts.quo-preview.foundations.shadows :as shadows] [status-im2.contexts.quo-preview.info.info-message :as info-message] [status-im2.contexts.quo-preview.info.information-box :as information-box] + [status-im2.contexts.quo-preview.inputs.input :as input] [status-im2.contexts.quo-preview.inputs.profile-input :as profile-input] [status-im2.contexts.quo-preview.inputs.title-input :as title-input] [status-im2.contexts.quo-preview.links.url-preview :as url-preview] [status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list] [status-im2.contexts.quo-preview.list-items.channel :as channel] [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists] + [status-im2.contexts.quo-preview.list-items.user-list :as user-list] [status-im2.contexts.quo-preview.markdown.text :as text] [status-im2.contexts.quo-preview.messages.author :as messages-author] [status-im2.contexts.quo-preview.messages.gap :as messages-gap] @@ -52,6 +54,7 @@ [status-im2.contexts.quo-preview.navigation.page-nav :as page-nav] [status-im2.contexts.quo-preview.navigation.top-nav :as top-nav] [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs] + [status-im2.contexts.quo-preview.notifications.notification :as notification] [status-im2.contexts.quo-preview.notifications.toast :as toast] [status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card] [status-im2.contexts.quo-preview.password.tips :as tips] @@ -78,12 +81,10 @@ [status-im2.contexts.quo-preview.tags.tags :as tags] [status-im2.contexts.quo-preview.tags.token-tag :as token-tag] [status-im2.contexts.quo-preview.title.title :as title] - [status-im2.contexts.quo-preview.inputs.input :as input] [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown] - [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview] - [status-im2.contexts.quo-preview.list-items.user-list :as user-list])) + [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview])) (def screens-categories {:foundations [{:name :shadows @@ -226,7 +227,10 @@ :component activity-logs/preview-activity-logs} {:name :toast :insets {:top false} - :component toast/preview-toasts}] + :component toast/preview-toasts} + {:name :notification + :insets {:top false} + :component notification/preview-notification}] :onboarding [{:name :small-option-card :insets {:top false} :component small-option-card/preview-small-option-card}] diff --git a/src/status_im2/contexts/quo_preview/markdown/text.cljs b/src/status_im2/contexts/quo_preview/markdown/text.cljs index b93485d80e..8c6aadae2d 100644 --- a/src/status_im2/contexts/quo_preview/markdown/text.cljs +++ b/src/status_im2/contexts/quo_preview/markdown/text.cljs @@ -48,7 +48,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/messages/author.cljs b/src/status_im2/contexts/quo_preview/messages/author.cljs index a5a830b6ed..98ee41eec3 100644 --- a/src/status_im2/contexts/quo_preview/messages/author.cljs +++ b/src/status_im2/contexts/quo_preview/messages/author.cljs @@ -62,7 +62,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]]) diff --git a/src/status_im2/contexts/quo_preview/messages/system_message.cljs b/src/status_im2/contexts/quo_preview/messages/system_message.cljs index e7945bd11b..bde30d72d1 100644 --- a/src/status_im2/contexts/quo_preview/messages/system_message.cljs +++ b/src/status_im2/contexts/quo_preview/messages/system_message.cljs @@ -73,7 +73,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :header [preview] - :key-fn str - :keyboardShouldPersistTaps :always}]]) + {:flex 1 + :header [preview] + :key-fn str + :keyboard-should-persist-taps :always}]]) diff --git a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs index 6d85628c8e..0f01c447d8 100644 --- a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs @@ -76,7 +76,7 @@ {:background-color colors/neutral-100 :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs index 0331f1f220..81695ee46f 100644 --- a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs @@ -64,7 +64,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs index b4530e1312..63b2db6b9b 100644 --- a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs @@ -126,7 +126,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [@trackable-cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [@trackable-cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs index bd3a6564e3..d5ae23ac30 100644 --- a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs @@ -51,7 +51,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs index 16648d0c40..c938ed46f4 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs @@ -188,7 +188,7 @@ [] [rn/view {:flex 1} [rn/flat-list - {:flex 1 - :header [preview] - :key-fn str - :keyboardShouldPersistTaps :always}]]) + {:flex 1 + :header [preview] + :key-fn str + :keyboard-should-persist-taps :always}]]) diff --git a/src/status_im2/contexts/quo_preview/notifications/notification.cljs b/src/status_im2/contexts/quo_preview/notifications/notification.cljs new file mode 100644 index 0000000000..c2b76e2e46 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/notifications/notification.cljs @@ -0,0 +1,112 @@ +(ns status-im2.contexts.quo-preview.notifications.notification + (:require [quo2.components.avatars.user-avatar.view :as user-avatar] + [quo2.components.buttons.button :as button] + [quo2.components.code.snippet :as snippet] + [quo2.components.info.info-message :as info-message] + [react-native.core :as rn] + [status-im2.common.resources :as resources] + [status-im2.contexts.quo-preview.code.snippet :as snippet-preview] + [utils.re-frame :as rf])) + +(defn notification-button + ([id opts] (notification-button id id opts)) + ([text id opts] + (let [notification-opts (rf/sub [:toasts/toast id]) + dismiss! #(rf/dispatch [:toasts/close id]) + notification! #(rf/dispatch [:toasts/upsert (assoc opts :id id)]) + dismissed? (not notification-opts)] + [rn/view {:style {:margin-bottom 10}} + [button/button + {:size 32 + :on-press #(if dismissed? (notification!) (dismiss!))} + (if dismissed? text (str "DISMISS " text))]]))) + +(defn notification-button-0 + [] + [notification-button + "Notification: empty" + {:duration 4000 + :type :notification}]) + +(defn notification-button-1 + [] + [notification-button + "Notification: with title(header)" + {:avatar [user-avatar/user-avatar + {:full-name "A Y" + :status-indicator? true + :online? true + :size :small + :customization-color :blue + :ring-background (resources/get-mock-image :ring)}] + :title "Alisher Yakupov accepted your contact request" + :duration 4000 + :title-weight :medium + :type :notification}]) + +(defn notification-button-2 + [] + [notification-button + "with title and body" + {:avatar [user-avatar/user-avatar + {:full-name "A Y" + :status-indicator? true + :online? true + :size :small + :customization-color :blue + :ring-background (resources/get-mock-image :ring)}] + :title "Default to semibold title" + :text "The quick brown fox jumped over the lazy dog and ate a potatoe." + :duration 4000 + :type :notification}]) + +(defn notification-button-3 + [] + [notification-button + "with anything as header & body" + {:avatar [user-avatar/user-avatar + {:full-name "A Y" + :status-indicator? true + :online? true + :size :small + :customization-color :blue + :ring-background (resources/get-mock-image :ring)}] + :header [rn/view + [info-message/info-message + {:type :success + :size :tiny + :icon :i/placeholder} + "info-message as title"]] + :body [snippet/snippet {:language :clojure :max-lines 15 :syntax true} + snippet-preview/clojure-example] + :duration 3000 + :type :notification}]) + +(defn preview + [] + (fn [] + [rn/view + [rn/view + {:background-color "#508485" + :flex-direction :column + :justify-content :flex-start + :height 300}] + [into + [rn/view + {:flex 1 + :padding 16 + :margin-top 60}] + [^{:key :0} [notification-button-0] + ^{:key :1} [notification-button-1] + ^{:key :2} [notification-button-2] + ^{:key :3} [notification-button-3]] + ]])) + +(defn preview-notification + [] + [rn/view {:flex 1} + [rn/flat-list + {:flex 1 + :header [preview] + :key-fn str + :keyboard-should-persist-taps :always}]]) diff --git a/src/status_im2/contexts/quo_preview/notifications/toast.cljs b/src/status_im2/contexts/quo_preview/notifications/toast.cljs index 4b7c0c8d4b..57132d7af0 100644 --- a/src/status_im2/contexts/quo_preview/notifications/toast.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/toast.cljs @@ -109,7 +109,7 @@ [] [rn/view {:flex 1} [rn/flat-list - {:flex 1 - :header [preview] - :key-fn str - :keyboardShouldPersistTaps :always}]]) + {:flex 1 + :header [preview] + :key-fn str + :keyboard-should-persist-taps :always}]]) diff --git a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs index c582d42150..074c3d05f9 100644 --- a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs +++ b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs @@ -52,7 +52,7 @@ {:style {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1}} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/password/tips.cljs b/src/status_im2/contexts/quo_preview/password/tips.cljs index 72ebe6c2de..aeceb62d20 100644 --- a/src/status_im2/contexts/quo_preview/password/tips.cljs +++ b/src/status_im2/contexts/quo_preview/password/tips.cljs @@ -34,8 +34,8 @@ colors/neutral-95) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/profile/profile_card.cljs b/src/status_im2/contexts/quo_preview/profile/profile_card.cljs index fba28a5a4e..9c98cce4bb 100644 --- a/src/status_im2/contexts/quo_preview/profile/profile_card.cljs +++ b/src/status_im2/contexts/quo_preview/profile/profile_card.cljs @@ -80,7 +80,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/profile/select_profile.cljs b/src/status_im2/contexts/quo_preview/profile/select_profile.cljs index 2460841ae7..d2b63ed70d 100644 --- a/src/status_im2/contexts/quo_preview/profile/select_profile.cljs +++ b/src/status_im2/contexts/quo_preview/profile/select_profile.cljs @@ -48,8 +48,8 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/reactions/react.cljs b/src/status_im2/contexts/quo_preview/reactions/react.cljs index 10d2500f56..b487adabe3 100644 --- a/src/status_im2/contexts/quo_preview/reactions/react.cljs +++ b/src/status_im2/contexts/quo_preview/reactions/react.cljs @@ -45,7 +45,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs b/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs index 9cdac7e698..75384946a3 100644 --- a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs +++ b/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs @@ -58,7 +58,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/selectors/filter.cljs b/src/status_im2/contexts/quo_preview/selectors/filter.cljs index 196dd9cb92..5277c2b8cc 100644 --- a/src/status_im2/contexts/quo_preview/selectors/filter.cljs +++ b/src/status_im2/contexts/quo_preview/selectors/filter.cljs @@ -50,7 +50,7 @@ {:style {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1}} [rn/flat-list - {:style {:flex 1} - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:style {:flex 1} + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs b/src/status_im2/contexts/quo_preview/selectors/selectors.cljs index 69076728f2..ae211c4bb5 100644 --- a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs +++ b/src/status_im2/contexts/quo_preview/selectors/selectors.cljs @@ -65,7 +65,7 @@ {:style {:background-color (colors/theme-colors colors/white colors/neutral-95) :flex 1}} [rn/flat-list - {:style {:flex 1} - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:style {:flex 1} + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/settings/accounts.cljs b/src/status_im2/contexts/quo_preview/settings/accounts.cljs index 8bd6c6c494..2412521d38 100644 --- a/src/status_im2/contexts/quo_preview/settings/accounts.cljs +++ b/src/status_im2/contexts/quo_preview/settings/accounts.cljs @@ -45,7 +45,7 @@ [] [rn/view {:style {:flex 1}} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs b/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs index 847b6638c4..7435cca510 100644 --- a/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs +++ b/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs @@ -95,7 +95,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs index a5c87d320a..5b20b6c891 100644 --- a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs +++ b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs @@ -174,7 +174,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs b/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs index b3a65b54a8..563fee2886 100644 --- a/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs +++ b/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs @@ -69,7 +69,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs b/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs index 2042c1fd8d..7be100edc0 100644 --- a/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs +++ b/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs @@ -55,7 +55,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs index cfec213dac..b1dc0da83d 100644 --- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs @@ -160,7 +160,7 @@ colors/neutral-95) :flex 1}} [rn/flat-list - {:style {:flex 1} - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:style {:flex 1} + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs b/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs index 67366e2e30..0ca85051e4 100644 --- a/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/permission_tag.cljs @@ -200,7 +200,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs index b9fe3172d1..6ab0e24e7f 100644 --- a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs @@ -63,7 +63,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/tag.cljs b/src/status_im2/contexts/quo_preview/tags/tag.cljs index 5053d511e1..d7db0479d0 100644 --- a/src/status_im2/contexts/quo_preview/tags/tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/tag.cljs @@ -92,7 +92,7 @@ colors/white colors/neutral-90)} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/tags.cljs b/src/status_im2/contexts/quo_preview/tags/tags.cljs index b941b9eb3b..ba82838ad8 100644 --- a/src/status_im2/contexts/quo_preview/tags/tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/tags.cljs @@ -109,7 +109,7 @@ colors/white colors/neutral-90)} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/tags/token_tag.cljs b/src/status_im2/contexts/quo_preview/tags/token_tag.cljs index dc6c7d36f5..dce6eeb641 100644 --- a/src/status_im2/contexts/quo_preview/tags/token_tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/token_tag.cljs @@ -72,7 +72,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs b/src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs index d79fcf09a9..550576edbf 100644 --- a/src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs @@ -54,7 +54,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs b/src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs index 2c04bfcc45..fea572356b 100644 --- a/src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs @@ -69,7 +69,7 @@ colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/wallet/token_overview.cljs b/src/status_im2/contexts/quo_preview/wallet/token_overview.cljs index 52887d633f..eb263f2e61 100644 --- a/src/status_im2/contexts/quo_preview/wallet/token_overview.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/token_overview.cljs @@ -68,7 +68,7 @@ {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list - {:flex 1 - :keyboardShouldPersistTaps :always - :header [cool-preview] - :key-fn str}]]) + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]])