From 13661ec04a2f91f3eb5a6dd864f140ea861c76cf Mon Sep 17 00:00:00 2001 From: andrey Date: Tue, 16 Apr 2024 12:14:30 +0200 Subject: [PATCH 1/2] Replace use-theme-value with use-theme #19602 --- src/legacy/status_im/bottom_sheet/sheets.cljs | 4 +- .../ui/components/chat_icon/screen.cljs | 4 +- .../ui/screens/profile/contact/views.cljs | 4 +- .../ui/screens/profile/user/views.cljs | 4 +- .../animated_header_flatlist/view.cljs | 2 +- .../avatars/account_avatar/style.cljs | 5 +- .../avatars/account_avatar/view.cljs | 9 +- .../avatars/channel_avatar/view.cljs | 39 ++-- .../avatars/collection_avatar/view.cljs | 15 +- .../components/avatars/group_avatar/view.cljs | 84 ++++--- src/quo/components/avatars/icon_avatar.cljs | 9 +- .../avatars/user_avatar/schema.cljs | 1 - .../components/avatars/user_avatar/view.cljs | 18 +- .../avatars/wallet_user_avatar/view.cljs | 9 +- src/quo/components/banners/banner/view.cljs | 47 ++-- .../browser/browser_input/style.cljs | 6 +- src/quo/components/buttons/button/view.cljs | 4 +- .../buttons/composer_button/view.cljs | 4 +- .../buttons/dynamic_button/view.cljs | 2 +- .../buttons/logout_button/view.cljs | 2 +- .../buttons/predictive_keyboard/view.cljs | 79 ++++--- .../components/buttons/slide_button/view.cljs | 2 +- .../buttons/wallet_button/view.cljs | 4 +- .../components/buttons/wallet_ctas/view.cljs | 57 +++-- .../calendar/calendar/month_picker/view.cljs | 11 +- .../components/calendar/calendar/view.cljs | 4 +- .../calendar/weekdays_header/view.cljs | 31 ++- .../calendar/calendar/years_list/view.cljs | 37 ++-- .../calendar/calendar_day/view.cljs | 43 ++-- .../calendar/calendar_year/view.cljs | 37 ++-- src/quo/components/code/snippet/view.cljs | 22 +- src/quo/components/colors/color/view.cljs | 16 +- .../common/not_implemented/view.cljs | 11 +- .../common/notification_dot/view.cljs | 17 +- src/quo/components/community/banner/view.cljs | 27 ++- .../community/channel_action/view.cljs | 2 +- .../community/community_card_view.cljs | 55 +++-- .../community/community_list_view.cljs | 182 +++++++--------- .../community/community_stat/view.cljs | 33 ++- .../components/community/community_view.cljs | 27 ++- .../components/community/token_gating.cljs | 37 ++-- .../counter/collectible_counter/style.cljs | 16 +- .../counter/collectible_counter/view.cljs | 14 +- src/quo/components/counter/counter/view.cljs | 11 +- src/quo/components/counter/step/view.cljs | 10 +- .../dividers/divider_label/view.cljs | 61 +++--- .../dividers/divider_line/style.cljs | 2 +- .../dividers/divider_line/view.cljs | 7 +- src/quo/components/dividers/new_messages.cljs | 9 +- .../drawers/action_drawers/view.cljs | 143 ++++++------ .../drawers/bottom_actions/view.cljs | 94 ++++---- .../drawers/documentation_drawers/view.cljs | 53 +++-- .../drawers/drawer_action/view.cljs | 4 +- .../components/drawers/drawer_top/view.cljs | 98 ++++----- .../drawers/permission_context/view.cljs | 2 +- .../dropdowns/dropdown/properties.cljs | 2 +- .../components/dropdowns/dropdown/view.cljs | 38 ++-- .../dropdowns/dropdown_input/view.cljs | 30 ++- .../dropdowns/network_dropdown/view.cljs | 2 +- .../empty_state/empty_state/view.cljs | 5 +- .../gradient/gradient_cover/view.cljs | 5 +- .../graph/interactive_graph/view.cljs | 2 +- .../components/graph/wallet_graph/view.cljs | 9 +- src/quo/components/header.cljs | 2 +- src/quo/components/icon.cljs | 45 ++-- src/quo/components/info/info_message.cljs | 9 +- .../components/info/information_box/view.cljs | 4 +- .../inputs/address_input/style.cljs | 3 +- .../components/inputs/address_input/view.cljs | 2 +- src/quo/components/inputs/input/style.cljs | 2 +- src/quo/components/inputs/input/view.cljs | 2 +- .../components/inputs/locked_input/view.cljs | 30 ++- .../inputs/recovery_phrase/style.cljs | 2 +- .../inputs/recovery_phrase/view.cljs | 2 +- .../components/inputs/search_input/style.cljs | 3 +- .../components/inputs/title_input/view.cljs | 5 +- src/quo/components/ios/drawer_bar/style.cljs | 6 +- src/quo/components/ios/drawer_bar/view.cljs | 11 +- src/quo/components/keycard/view.cljs | 9 +- .../internal_link_card/channel/view.cljs | 38 ++-- .../internal_link_card/community/view.cljs | 37 ++-- .../links/internal_link_card/schema.cljs | 3 +- .../links/internal_link_card/user/view.cljs | 46 ++-- .../components/list_items/account/view.cljs | 2 +- .../list_items/account_list_card/view.cljs | 2 +- .../components/list_items/address/view.cljs | 2 +- .../components/list_items/channel/view.cljs | 2 +- .../components/list_items/community/view.cljs | 2 +- src/quo/components/list_items/dapp/view.cljs | 2 +- .../list_items/network_list/view.cljs | 7 +- .../list_items/preview_list/view.cljs | 5 +- .../list_items/quiz_item/style.cljs | 6 +- .../components/list_items/quiz_item/view.cljs | 43 ++-- .../list_items/saved_address/view.cljs | 4 +- .../saved_contact_address/view.cljs | 4 +- .../list_items/token_network/view.cljs | 4 +- .../list_items/token_value/view.cljs | 2 +- src/quo/components/loaders/skeleton.cljs | 9 +- .../loaders/skeleton_list/view.cljs | 14 +- src/quo/components/markdown/list/view.cljs | 55 +++-- src/quo/components/markdown/text.cljs | 11 +- src/quo/components/messages/author/view.cljs | 131 ++++++----- src/quo/components/messages/gap.cljs | 6 +- .../messages/system_message/view.cljs | 154 +++++++------ .../components/navigation/page_nav/view.cljs | 206 +++++++++--------- .../components/navigation/top_nav/view.cljs | 27 +-- .../notifications/count_down_circle.cljs | 2 +- .../notifications/notification/view.cljs | 2 +- .../components/notifications/toast/view.cljs | 90 ++++---- .../numbered_keyboard/keyboard_key/view.cljs | 2 +- .../numbered_keyboard/view.cljs | 103 +++++---- .../profile/collectible_list_item/view.cljs | 4 +- .../profile/expanded_collectible/view.cljs | 2 +- .../components/profile/link_card/view.cljs | 55 +++-- .../components/profile/profile_card/view.cljs | 10 +- .../components/profile/showcase_nav/view.cljs | 33 ++- .../record_audio/buttons/lock_button.cljs | 2 +- .../buttons/record_button_big.cljs | 2 +- .../record_audio/soundtrack/view.cljs | 2 +- src/quo/components/selectors/filter/view.cljs | 2 +- .../selectors/react_selector/view.cljs | 10 +- .../components/selectors/selectors/view.cljs | 9 +- .../components/settings/accounts/view.cljs | 52 +++-- .../settings/category/reorder/view.cljs | 2 +- .../settings/category/settings/view.cljs | 11 +- .../components/settings/category/style.cljs | 4 +- .../components/settings/data_item/view.cljs | 172 +++++++-------- .../settings/page_setting/view.cljs | 2 +- .../settings/privacy_option/view.cljs | 45 ++-- .../settings/reorder_item/items/item.cljs | 73 +++---- .../settings/section_label/view.cljs | 9 +- .../settings/settings_item/view.cljs | 31 +-- .../components/share/share_qr_code/view.cljs | 4 +- src/quo/components/tabs/account_selector.cljs | 4 +- src/quo/components/tabs/segmented_tab.cljs | 2 +- src/quo/components/tabs/tab/view.cljs | 23 +- .../components/tags/collectible_tag/view.cljs | 2 +- .../components/tags/context_tag/schema.cljs | 1 - src/quo/components/tags/context_tag/view.cljs | 159 +++++++------- .../components/tags/network_tags/view.cljs | 39 ++-- src/quo/components/tags/number_tag/style.cljs | 2 +- src/quo/components/tags/number_tag/view.cljs | 11 +- src/quo/components/tags/status_tags.cljs | 31 ++- .../components/tags/summary_tag/style.cljs | 2 +- src/quo/components/tags/summary_tag/view.cljs | 25 +-- src/quo/components/tags/tag.cljs | 9 +- src/quo/components/tags/tiny_tag/style.cljs | 4 +- src/quo/components/tags/tiny_tag/view.cljs | 19 +- src/quo/components/tags/token_tag/view.cljs | 2 +- .../text_combinations/channel_name/view.cljs | 41 ++-- .../text_combinations/page_top/view.cljs | 55 +++-- .../standard_title/view.cljs | 28 +-- .../text_combinations/username/view.cljs | 58 ++--- .../components/text_combinations/view.cljs | 98 ++++----- .../components/wallet/account_card/view.cljs | 4 +- .../wallet/account_origin/schema.cljs | 3 +- .../wallet/account_origin/view.cljs | 9 +- .../wallet/account_overview/view.cljs | 9 +- .../wallet/account_permissions/schema.cljs | 3 +- .../wallet/account_permissions/view.cljs | 63 +++--- .../wallet/address_text/schema.cljs | 1 - .../components/wallet/address_text/view.cljs | 9 +- .../components/wallet/amount_input/view.cljs | 2 +- .../wallet/confirmation_progress/schema.cljs | 3 +- .../wallet/confirmation_progress/view.cljs | 5 +- src/quo/components/wallet/keypair/view.cljs | 2 +- .../wallet/network_amount/schema.cljs | 3 +- .../wallet/network_amount/view.cljs | 23 +- .../wallet/network_bridge/schema.cljs | 1 - .../wallet/network_bridge/view.cljs | 73 +++---- .../wallet/network_link/schema.cljs | 3 +- .../components/wallet/network_link/view.cljs | 19 +- .../network_routing/component_spec.cljs | 2 +- .../wallet/network_routing/view.cljs | 2 +- .../wallet/progress_bar/schema.cljs | 1 - .../components/wallet/progress_bar/style.cljs | 4 +- .../components/wallet/progress_bar/view.cljs | 15 +- .../wallet/required_tokens/schema.cljs | 1 - .../wallet/required_tokens/view.cljs | 57 +++-- .../wallet/summary_info/schema.cljs | 1 - .../components/wallet/summary_info/view.cljs | 79 ++++--- .../components/wallet/token_input/view.cljs | 2 +- .../wallet/transaction_progress/schema.cljs | 1 - .../wallet/transaction_progress/view.cljs | 35 ++- .../wallet/transaction_summary/schema.cljs | 1 - .../wallet/transaction_summary/view.cljs | 65 +++--- .../wallet/wallet_activity/view.cljs | 2 +- .../wallet/wallet_overview/schema.cljs | 1 - .../wallet/wallet_overview/view.cljs | 33 ++- src/quo/foundations/colors.cljs | 6 +- src/quo/foundations/gradients.cljs | 2 +- src/quo/theme.cljs | 20 +- src/status_im/common/alert_banner/view.cljs | 2 +- src/status_im/common/bottom_sheet/view.cljs | 2 +- .../common/bottom_sheet_screen/style.cljs | 4 +- .../common/bottom_sheet_screen/view.cljs | 15 +- src/status_im/common/contact_list/view.cljs | 2 +- src/status_im/common/emoji_picker/view.cljs | 18 +- .../floating_container/view.cljs | 23 +- src/status_im/common/home/banner/view.cljs | 4 +- src/status_im/common/scan_qr_code/view.cljs | 10 +- .../password_input/view.cljs | 4 +- .../standard_auth/slide_button/view.cljs | 2 +- .../contexts/chat/group_create/view.cljs | 2 +- .../chat/home/contact_request/view.cljs | 9 +- .../contexts/chat/home/new_chat/view.cljs | 2 +- src/status_im/contexts/chat/home/view.cljs | 2 +- .../chat/messenger/composer/images/view.cljs | 2 +- .../chat/messenger/composer/view.cljs | 2 +- .../messenger/menus/pinned_messages/view.cljs | 28 +-- .../messages/content/audio/style.cljs | 4 +- .../messages/content/reactions/view.cljs | 9 +- .../chat/messenger/messages/content/view.cljs | 11 +- .../chat/messenger/messages/list/view.cljs | 2 +- .../messenger/messages/pin/banner/view.cljs | 4 +- .../actions/channel_view_details/view.cljs | 4 +- .../actions/invite_contacts/view.cljs | 9 +- .../actions/request_to_join/view.cljs | 9 +- .../contexts/communities/discover/view.cljs | 16 +- .../contexts/communities/home/view.cljs | 13 +- .../contexts/communities/overview/view.cljs | 4 +- .../contexts/preview/quo/common.cljs | 9 +- .../preview/quo/empty_state/empty_state.cljs | 9 +- .../quo/notifications/activity_logs.cljs | 2 +- .../contexts/preview/quo/preview.cljs | 2 +- .../contexts/profile/contact/header/view.cljs | 2 +- .../contexts/profile/contact/view.cljs | 2 +- src/status_im/contexts/profile/edit/view.cljs | 9 +- .../profile/settings/header/view.cljs | 9 +- .../settings/screens/password/view.cljs | 9 +- .../contexts/profile/settings/view.cljs | 13 +- .../activity_center/tabs/empty_tab/view.cljs | 9 +- .../jump_to/components/bottom_tabs/view.cljs | 2 +- .../components/floating_screens/view.cljs | 2 +- .../jump_to/components/home_stack/view.cljs | 2 +- .../components/jump_to_screen/view.cljs | 4 +- .../wallet/account/tabs/dapps/view.cljs | 9 +- .../edit_derivation_path/view.cljs | 10 +- .../backup_recovery_phrase/view.cljs | 134 ++++++------ .../new_keypair/check_your_backup/view.cljs | 5 +- .../add_account/create_account/view.cljs | 13 +- .../wallet/bridge/bridge_to/view.cljs | 4 +- .../wallet/bridge/input_amount/view.cljs | 5 +- .../wallet/collectible/tabs/about/view.cljs | 5 +- .../collectible/tabs/overview/view.cljs | 4 +- .../wallet/collectible/tabs/view.cljs | 4 +- .../contexts/wallet/collectible/view.cljs | 13 +- .../wallet/common/activity_tab/view.cljs | 9 +- .../wallet/common/collectibles_tab/view.cljs | 9 +- .../wallet/send/input_amount/view.cljs | 9 +- .../contexts/wallet/send/routes/view.cljs | 9 +- .../wallet/send/select_address/tabs/view.cljs | 41 ++-- .../wallet/send/select_asset/view.cljs | 9 +- .../wallet/send/send_amount/view.cljs | 4 +- .../send/transaction_confirmation/view.cljs | 9 +- .../wallet/sheets/account_options/view.cljs | 9 +- .../wallet/sheets/account_origin/view.cljs | 4 +- .../sheets/network_preferences/view.cljs | 9 +- .../wallet/sheets/remove_account/view.cljs | 5 +- .../wallet/sheets/select_account/view.cljs | 4 +- src/status_im/navigation/view.cljs | 12 +- src/status_im/subs/contact.cljs | 4 +- src/status_im/subs/profile.cljs | 8 +- src/test_helpers/component.cljs | 2 +- src/tests/contract_test/wallet_test.cljs | 44 ++-- src/utils/image_server.cljs | 1 - 266 files changed, 2440 insertions(+), 2769 deletions(-) diff --git a/src/legacy/status_im/bottom_sheet/sheets.cljs b/src/legacy/status_im/bottom_sheet/sheets.cljs index 537d4117b05..ace7b306150 100644 --- a/src/legacy/status_im/bottom_sheet/sheets.cljs +++ b/src/legacy/status_im/bottom_sheet/sheets.cljs @@ -3,7 +3,7 @@ [legacy.status-im.bottom-sheet.view :as bottom-sheet] [legacy.status-im.ui.screens.about-app.views :as about-app] [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [utils.re-frame :as rf])) @@ -32,7 +32,7 @@ (rn/hw-back-add-listener dismiss-bottom-sheet-callback) (fn [] (rn/hw-back-remove-listener dismiss-bottom-sheet-callback)))) - [theme/provider {:theme (or page-theme (theme/get-theme))} + [quo.theme/provider (or page-theme (quo.theme/get-theme)) [bottom-sheet/bottom-sheet opts (when content [content (when options options)])]])])) diff --git a/src/legacy/status_im/ui/components/chat_icon/screen.cljs b/src/legacy/status_im/ui/components/chat_icon/screen.cljs index f1cc9efcd87..10932ee7a52 100644 --- a/src/legacy/status_im/ui/components/chat_icon/screen.cljs +++ b/src/legacy/status_im/ui/components/chat_icon/screen.cljs @@ -8,7 +8,7 @@ [legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils] [quo.components.avatars.user-avatar.style :as user-avatar.style] [quo.core :as quo] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame.core] [react-native.core :as rn] [status-im.contexts.profile.utils :as profile.utils] @@ -72,7 +72,7 @@ :full-name full-name :font-size (get text-style :font-size) :background-color (user-avatar.style/customization-color customization-color - (theme/get-theme)) + (quo.theme/get-theme)) :indicator-size 0 :indicator-border 0 :indicator-color "#000000" diff --git a/src/legacy/status_im/ui/screens/profile/contact/views.cljs b/src/legacy/status_im/ui/screens/profile/contact/views.cljs index deea93e5a45..37245da052e 100644 --- a/src/legacy/status_im/ui/screens/profile/contact/views.cljs +++ b/src/legacy/status_im/ui/screens/profile/contact/views.cljs @@ -11,7 +11,7 @@ [legacy.status-im.ui.components.topbar :as topbar] [legacy.status-im.ui.screens.profile.components.sheets :as sheets] [quo.components.avatars.user-avatar.style :as user-avatar.style] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.constants :as constants] @@ -206,7 +206,7 @@ :bottom-separator false :title (profile.utils/displayed-name profile) :color (user-avatar.style/customization-color customization-color - (theme/get-theme)) + (quo.theme/get-theme)) :photo (profile.utils/photo profile) :monospace (not ens-verified) :subtitle secondary-name diff --git a/src/legacy/status_im/ui/screens/profile/user/views.cljs b/src/legacy/status_im/ui/screens/profile/user/views.cljs index d1bb8bef38f..cceda078c1e 100644 --- a/src/legacy/status_im/ui/screens/profile/user/views.cljs +++ b/src/legacy/status_im/ui/screens/profile/user/views.cljs @@ -14,7 +14,7 @@ [legacy.status-im.ui.screens.profile.visibility-status.views :as visibility-status] [legacy.status-im.utils.utils :as utils] [quo.components.avatars.user-avatar.style :as user-avatar.style] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.common.qr-codes.view :as qr-codes] @@ -221,7 +221,7 @@ {:content (edit/bottom-sheet has-picture)}]) :color (user-avatar.style/customization-color customization-color - (theme/get-theme)) + (quo.theme/get-theme)) :title (profile.utils/displayed-name profile) :photo (profile.utils/photo profile) :monospace (not ens-verified) diff --git a/src/quo/components/animated_header_flatlist/view.cljs b/src/quo/components/animated_header_flatlist/view.cljs index 17920a318db..5e3e14e2e23 100644 --- a/src/quo/components/animated_header_flatlist/view.cljs +++ b/src/quo/components/animated_header_flatlist/view.cljs @@ -54,7 +54,7 @@ (defn- f-animated-header-list [{:keys [header-comp main-comp back-button-on-press] :as params}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) window-height (:height (rn/get-window)) {:keys [top bottom]} (safe-area/get-insets) ;; view height calculation is different because window height is different on iOS and diff --git a/src/quo/components/avatars/account_avatar/style.cljs b/src/quo/components/avatars/account_avatar/style.cljs index 97fbc34aaf5..25d87527cb7 100644 --- a/src/quo/components/avatars/account_avatar/style.cljs +++ b/src/quo/components/avatars/account_avatar/style.cljs @@ -56,9 +56,10 @@ (defn root-container - [{:keys [type size theme customization-color] + [{:keys [type size customization-color] :or {size default-size - customization-color :blue}}] + customization-color :blue}} + theme] (let [watch-only? (= type :watch-only) width (cond-> size (keyword? size) (container-size size))] diff --git a/src/quo/components/avatars/account_avatar/view.cljs b/src/quo/components/avatars/account_avatar/view.cljs index 570ea5fe9ab..6364df33c00 100644 --- a/src/quo/components/avatars/account_avatar/view.cljs +++ b/src/quo/components/avatars/account_avatar/view.cljs @@ -5,7 +5,7 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal +(defn view "Opts: :type - keyword -> :default/:watch-only @@ -21,15 +21,14 @@ :or {size style/default-size emoji "🍑"} :as opts}] - (let [emoji-size (style/get-emoji-size size)] + (let [theme (quo.theme/use-theme) + emoji-size (style/get-emoji-size size)] [rn/view {:accessible true :accessibility-label :account-avatar - :style (style/root-container opts)} + :style (style/root-container opts theme)} [rn/text {:accessibility-label :account-emoji :adjusts-font-size-to-fit true :style {:font-size emoji-size}} (when emoji (string/trim emoji))]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/avatars/channel_avatar/view.cljs b/src/quo/components/avatars/channel_avatar/view.cljs index d48c477ecbe..9a3747df949 100644 --- a/src/quo/components/avatars/channel_avatar/view.cljs +++ b/src/quo/components/avatars/channel_avatar/view.cljs @@ -34,7 +34,7 @@ :container-style style/lock-icon :size 12}]])) -(defn- view-internal +(defn view "Options: :size - keyword (default nil) - Container size, for the moment, @@ -52,22 +52,21 @@ :full-name - string (default nil) - When :emoji is blank, this value will be used to extract the initials. " - [{:keys [size emoji customization-color locked? full-name theme]}] - [rn/view - {:accessibility-label :channel-avatar - :style (style/outer-container {:theme theme - :size size - :customization-color customization-color})} - (if (string/blank? emoji) - [initials - {:full-name full-name - :size size - :customization-color customization-color - :theme theme}] - [rn/text - {:style (style/emoji-size size) - :accessibility-label :emoji} - (when emoji (string/trim emoji))]) - [lock locked? size theme]]) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [size emoji customization-color locked? full-name]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :channel-avatar + :style (style/outer-container {:theme theme + :size size + :customization-color customization-color})} + (if (string/blank? emoji) + [initials + {:full-name full-name + :size size + :customization-color customization-color + :theme theme}] + [rn/text + {:style (style/emoji-size size) + :accessibility-label :emoji} + (when emoji (string/trim emoji))]) + [lock locked? size theme]])) diff --git a/src/quo/components/avatars/collection_avatar/view.cljs b/src/quo/components/avatars/collection_avatar/view.cljs index 9cb897eb875..2cceb76f7b2 100644 --- a/src/quo/components/avatars/collection_avatar/view.cljs +++ b/src/quo/components/avatars/collection_avatar/view.cljs @@ -4,15 +4,14 @@ [quo.theme :as quo.theme] [react-native.fast-image :as fast-image])) -(defn- view-internal +(defn view "Opts: :image - collection image :theme - keyword -> :light/:dark" - [{:keys [image theme size] :or {size :size-24}}] - [fast-image/fast-image - {:accessibility-label :collection-avatar - :source image - :style (style/collection-avatar theme size)}]) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [image size] :or {size :size-24}}] + (let [theme (quo.theme/use-theme)] + [fast-image/fast-image + {:accessibility-label :collection-avatar + :source image + :style (style/collection-avatar theme size)}])) diff --git a/src/quo/components/avatars/group_avatar/view.cljs b/src/quo/components/avatars/group_avatar/view.cljs index b9440dc64c6..8f5f50349de 100644 --- a/src/quo/components/avatars/group_avatar/view.cljs +++ b/src/quo/components/avatars/group_avatar/view.cljs @@ -21,46 +21,44 @@ :size-80 {:icon 32 :container 80}}) -(defn- view-internal - [_] - (fn [{:keys [size theme customization-color picture icon-name emoji chat-name] - :or {size :size-20 - customization-color :blue - picture nil - icon-name :i/members}}] - (let [container-size (get-in sizes [size :container]) - icon-size (get-in sizes [size :icon])] - [rn/view - {:accessibility-label :group-avatar - :style (style/container {:container-size container-size - :customization-color customization-color - :theme theme})} - (if picture - [fast-image/fast-image - {:source picture - :style {:width container-size - :height container-size}}] - (cond - emoji - (if (= size :size-80) - [rn/text - {:style (style/avatar-identifier theme)} - emoji] - [text/text - {:size :paragraph-1 - :style (dissoc (style/avatar-identifier theme) :font-size)} - emoji]) - chat-name - (if (= size :size-80) - [rn/text - {:style (style/avatar-identifier theme)} - ((comp first string/upper-case) chat-name)] - [text/text - {:size :paragraph-1} - ((comp first string/upper-case) chat-name)]) - :else - [icon/icon icon-name - {:size icon-size - :color colors/white-opa-70}]))]))) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [size customization-color picture icon-name emoji chat-name] + :or {size :size-20 + customization-color :blue + picture nil + icon-name :i/members}}] + (let [theme (quo.theme/use-theme) + container-size (get-in sizes [size :container]) + icon-size (get-in sizes [size :icon])] + [rn/view + {:accessibility-label :group-avatar + :style (style/container {:container-size container-size + :customization-color customization-color + :theme theme})} + (if picture + [fast-image/fast-image + {:source picture + :style {:width container-size + :height container-size}}] + (cond + emoji + (if (= size :size-80) + [rn/text + {:style (style/avatar-identifier theme)} + emoji] + [text/text + {:size :paragraph-1 + :style (dissoc (style/avatar-identifier theme) :font-size)} + emoji]) + chat-name + (if (= size :size-80) + [rn/text + {:style (style/avatar-identifier theme)} + ((comp first string/upper-case) chat-name)] + [text/text + {:size :paragraph-1} + ((comp first string/upper-case) chat-name)]) + :else + [icon/icon icon-name + {:size icon-size + :color colors/white-opa-70}]))])) diff --git a/src/quo/components/avatars/icon_avatar.cljs b/src/quo/components/avatars/icon_avatar.cljs index fe3ac543013..3ee56af2906 100644 --- a/src/quo/components/avatars/icon_avatar.cljs +++ b/src/quo/components/avatars/icon_avatar.cljs @@ -15,11 +15,12 @@ :size-20 {:component 20 :icon 12}}) -(defn icon-avatar-internal - [{:keys [size icon color opacity border? theme] +(defn icon-avatar + [{:keys [size icon color opacity border?] :or {opacity 20 size :size-32}}] - (let [{component-size :component icon-size :icon} (get sizes size) + (let [theme (quo.theme/use-theme) + {component-size :component icon-size :icon} (get sizes size) circle-color (colors/resolve-color color theme opacity) icon-color (colors/resolve-color color theme)] (if (keyword? icon) @@ -38,5 +39,3 @@ [rn/image {:source icon :style {:width component-size :height component-size}}]))) - -(def icon-avatar (quo.theme/with-theme icon-avatar-internal)) diff --git a/src/quo/components/avatars/user_avatar/schema.cljs b/src/quo/components/avatars/user_avatar/schema.cljs index a75299762c1..3c113616ad6 100644 --- a/src/quo/components/avatars/user_avatar/schema.cljs +++ b/src/quo/components/avatars/user_avatar/schema.cljs @@ -14,7 +14,6 @@ [:status-indicator? {:optional true} [:maybe boolean?]] [:online? {:optional true} [:maybe boolean?]] [:ring? {:optional true} [:maybe boolean?]] - [:theme :schema.common/theme] [:profile-picture {:optional true} [:maybe :schema.quo/profile-picture-source]]]]] diff --git a/src/quo/components/avatars/user_avatar/view.cljs b/src/quo/components/avatars/user_avatar/view.cljs index 3fe4100b73f..be571cbc8b6 100644 --- a/src/quo/components/avatars/user_avatar/view.cljs +++ b/src/quo/components/avatars/user_avatar/view.cljs @@ -11,9 +11,10 @@ utils.string)) (defn initials-avatar - [{:keys [full-name size customization-color theme] + [{:keys [full-name size customization-color] :or {customization-color :blue}}] - (let [font-size (get-in style/sizes [size :font-size]) + (let [theme (quo.theme/use-theme) + font-size (get-in style/sizes [size :font-size]) amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)] [rn/view {:accessibility-label :initials-avatar @@ -31,14 +32,14 @@ When calling the `profile-picture-fn` and passing the `:ring?` key, be aware that the `profile-picture-fn` may have an `:override-ring?` value. If it does then the `:ring?` value will not be used. For reference, refer to the `utils.image-server` namespace for these `profile-picture-fn` are generated." - [{:keys [full-name size profile-picture static? - status-indicator? online? ring? theme] + [{:keys [full-name size profile-picture static? status-indicator? online? ring?] :or {size :big status-indicator? true online? true ring? true} :as props}] - (let [full-name (or full-name "Your Name") + (let [theme (quo.theme/use-theme) + full-name (or full-name "Your Name") ;; image generated with `profile-picture-fn` is round cropped ;; no need to add border-radius for them outer-styles (style/outer size (not (:fn profile-picture))) @@ -66,7 +67,8 @@ {:length amount-initials :full-name full-name :font-size (:font-size (text/text-style {:size - font-size})) + font-size} + nil)) :indicator-size (when status-indicator? (:status-indicator sizes)) :indicator-border (when status-indicator? @@ -87,6 +89,4 @@ :else {:uri profile-picture})}])])) -(def user-avatar - (quo.theme/with-theme - (schema/instrument #'user-avatar-internal component-schema/?schema))) +(def user-avatar (schema/instrument #'user-avatar-internal component-schema/?schema)) diff --git a/src/quo/components/avatars/wallet_user_avatar/view.cljs b/src/quo/components/avatars/wallet_user_avatar/view.cljs index 2c39204344f..357b5598c9a 100644 --- a/src/quo/components/avatars/wallet_user_avatar/view.cljs +++ b/src/quo/components/avatars/wallet_user_avatar/view.cljs @@ -34,7 +34,7 @@ (= size second-smallest-possible))) (def biggest-possible (last (keys properties))) -(defn- view-internal +(defn wallet-user-avatar "Options: :full-name - string (default: nil) - used to generate initials @@ -44,9 +44,10 @@ :monospace? - boolean (default: false) - use monospace font :lowercase? - boolean (default: false) - lowercase text :neutral? - boolean (default: false) - use neutral colors variant" - [{:keys [full-name customization-color size theme monospace? lowercase? neutral?] + [{:keys [full-name customization-color size monospace? lowercase? neutral?] :or {size biggest-possible}}] - (let [circle-size (:size (size properties)) + (let [theme (quo.theme/use-theme) + circle-size (:size (size properties)) small? (check-if-size-small size) initials (utils.string/get-initials full-name (if small? 1 2))] [rn/view @@ -57,5 +58,3 @@ :weight (if monospace? :monospace (:font-weight (size properties))) :style (style/text customization-color neutral? theme)} (if (and initials lowercase?) (string/lower-case initials) initials)]])) - -(def wallet-user-avatar (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/banners/banner/view.cljs b/src/quo/components/banners/banner/view.cljs index e932e401dc6..9f873956bcc 100644 --- a/src/quo/components/banners/banner/view.cljs +++ b/src/quo/components/banners/banner/view.cljs @@ -8,27 +8,26 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [hide-pin? latest-pin-text pins-count on-press theme]}] - (when (pos? pins-count) - [rn/touchable-opacity - {:accessibility-label :pinned-banner - :style style/container - :active-opacity 1 - :on-press on-press} - (when-not hide-pin? - [rn/view {:style style/icon} - [icons/icon :i/pin - {:color (colors/theme-colors colors/neutral-100 colors/white theme) - :size 20}]]) - [rn/view {:style (style/text hide-pin?)} - [text/text - {:number-of-lines 1 - :size :paragraph-2} - latest-pin-text]] - [rn/view - {:accessibility-label :pins-count - :style style/counter} - [counter/view {:type :secondary} pins-count]]])) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [hide-pin? latest-pin-text pins-count on-press]}] + (let [theme (quo.theme/use-theme)] + (when (pos? pins-count) + [rn/touchable-opacity + {:accessibility-label :pinned-banner + :style style/container + :active-opacity 1 + :on-press on-press} + (when-not hide-pin? + [rn/view {:style style/icon} + [icons/icon :i/pin + {:color (colors/theme-colors colors/neutral-100 colors/white theme) + :size 20}]]) + [rn/view {:style (style/text hide-pin?)} + [text/text + {:number-of-lines 1 + :size :paragraph-2} + latest-pin-text]] + [rn/view + {:accessibility-label :pins-count + :style style/counter} + [counter/view {:type :secondary} pins-count]]]))) diff --git a/src/quo/components/browser/browser_input/style.cljs b/src/quo/components/browser/browser_input/style.cljs index 021324c5b1d..14396e3d6c2 100644 --- a/src/quo/components/browser/browser_input/style.cljs +++ b/src/quo/components/browser/browser_input/style.cljs @@ -17,7 +17,8 @@ (defn input [disabled?] (assoc (text/text-style {:size :paragraph-1 - :weight :regular}) + :weight :regular} + nil) :flex 1 :min-height 36 :min-width 120 @@ -47,7 +48,8 @@ (defn text [] (assoc (text/text-style {:size :paragraph-1 - :weight :medium}) + :weight :medium} + nil) :color (colors/theme-colors colors/neutral-100 colors/white))) diff --git a/src/quo/components/buttons/button/view.cljs b/src/quo/components/buttons/button/view.cljs index 2c080929625..a24302eaaca 100644 --- a/src/quo/components/buttons/button/view.cljs +++ b/src/quo/components/buttons/button/view.cljs @@ -5,7 +5,7 @@ [quo.components.icon :as quo.icons] [quo.components.markdown.text :as text] [quo.foundations.customization-colors :as customization-colors] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.core :as rn])) @@ -36,7 +36,7 @@ customization-color (if (= type :primary) :blue nil)}} children] (let [[pressed-state? set-pressed-state] (rn/use-state false) - theme (theme/use-theme-value) + theme (quo.theme/use-theme) {:keys [icon-color background-color label-color border-color blur-type blur-overlay-color border-radius overlay-customization-color]} (button-properties/get-values {:customization-color customization-color diff --git a/src/quo/components/buttons/composer_button/view.cljs b/src/quo/components/buttons/composer_button/view.cljs index 3c9161aa6f2..bbaa4a90dc2 100644 --- a/src/quo/components/buttons/composer_button/view.cljs +++ b/src/quo/components/buttons/composer_button/view.cljs @@ -2,13 +2,13 @@ (:require [quo.components.buttons.composer-button.style :as style] [quo.components.icon :as quo.icons] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn view [{:keys [on-press on-long-press disabled? blur? icon accessibility-label container-style]}] (let [[pressed? set-pressed] (rn/use-state false) - theme (theme/use-theme-value) + theme (quo.theme/use-theme) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed nil))] [rn/pressable diff --git a/src/quo/components/buttons/dynamic_button/view.cljs b/src/quo/components/buttons/dynamic_button/view.cljs index d9f0f85d91b..7c249f7563b 100644 --- a/src/quo/components/buttons/dynamic_button/view.cljs +++ b/src/quo/components/buttons/dynamic_button/view.cljs @@ -52,7 +52,7 @@ :count mentions or notifications count :customization-color customize jump-to and mention button color}" [{:keys [type label on-press customization-color style] :as args}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) button-color (get-button-color {:type type :pressed? pressed? diff --git a/src/quo/components/buttons/logout_button/view.cljs b/src/quo/components/buttons/logout_button/view.cljs index 056f6ade4f0..6faf2d46a5c 100644 --- a/src/quo/components/buttons/logout_button/view.cljs +++ b/src/quo/components/buttons/logout_button/view.cljs @@ -10,7 +10,7 @@ (defn view [{:keys [on-press on-long-press disabled? container-style]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed nil))] diff --git a/src/quo/components/buttons/predictive_keyboard/view.cljs b/src/quo/components/buttons/predictive_keyboard/view.cljs index 7dc7cd10c44..42feb25a73e 100644 --- a/src/quo/components/buttons/predictive_keyboard/view.cljs +++ b/src/quo/components/buttons/predictive_keyboard/view.cljs @@ -4,7 +4,7 @@ [quo.components.buttons.predictive-keyboard.style :as style] [quo.components.info.info-message :as info-message] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient])) @@ -26,7 +26,7 @@ [] [rn/view {:style {:width 8}}]) -(defn- view-internal +(defn view "Options - `type` `:words`/`:error`/`:info`/`:empty`. - `blur?` Boolean to enable blur background support. @@ -34,43 +34,42 @@ - `words` List of words to display in the keyboard. - `on-press` Callback called when a word is pressed `(fn [word])` - `theme` :light or :dark, received from with-theme HOC." - [{:keys [type blur? text words on-press theme]}] - [linear-gradient/linear-gradient - {:style {:flex-direction :row} - :accessibility-label :predictive-keyboard - :colors (if blur? - (gradients :blur) - (colors/theme-colors (gradients :light) (gradients :dark) theme))} - [rn/view {:style (style/wrapper type)} - (case type - :words - [rn/flat-list - {:keyboard-should-persist-taps :always - :data words - :content-container-style style/word-list - :render-fn word-component - :render-data {:on-press on-press} - :shows-horizontal-scroll-indicator false - :separator [separator] - :horizontal true - :key-fn str}] + [{:keys [type blur? text words on-press]}] + (let [theme (quo.theme/use-theme)] + [linear-gradient/linear-gradient + {:style {:flex-direction :row} + :accessibility-label :predictive-keyboard + :colors (if blur? + (gradients :blur) + (colors/theme-colors (gradients :light) (gradients :dark) theme))} + [rn/view {:style (style/wrapper type)} + (case type + :words + [rn/flat-list + {:keyboard-should-persist-taps :always + :data words + :content-container-style style/word-list + :render-fn word-component + :render-data {:on-press on-press} + :shows-horizontal-scroll-indicator false + :separator [separator] + :horizontal true + :key-fn str}] - :error - [info-message/info-message - {:icon :i/info - :size :default - :type :error} - text] + :error + [info-message/info-message + {:icon :i/info + :size :default + :type :error} + text] - :info - [info-message/info-message - (merge {:icon :i/info - :size :default - :type (if (= type :error) :error :default)} - (when blur? - {:text-color colors/white-opa-70 - :icon-color colors/white-opa-70})) - text] - nil)]]) - -(def view (theme/with-theme view-internal)) + :info + [info-message/info-message + (merge {:icon :i/info + :size :default + :type (if (= type :error) :error :default)} + (when blur? + {:text-color colors/white-opa-70 + :icon-color colors/white-opa-70})) + text] + nil)]])) diff --git a/src/quo/components/buttons/slide_button/view.cljs b/src/quo/components/buttons/slide_button/view.cljs index 76bf523bfdd..dc9504f5e47 100644 --- a/src/quo/components/buttons/slide_button/view.cljs +++ b/src/quo/components/buttons/slide_button/view.cljs @@ -48,7 +48,7 @@ " [{:keys [on-complete track-text track-icon disabled? customization-color size container-style type blur?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) x-pos (reanimated/use-shared-value 0) [track-width set-track-width] (rn/use-state nil) [sliding-complete? diff --git a/src/quo/components/buttons/wallet_button/view.cljs b/src/quo/components/buttons/wallet_button/view.cljs index e92416d468d..f1602c4c4e5 100644 --- a/src/quo/components/buttons/wallet_button/view.cljs +++ b/src/quo/components/buttons/wallet_button/view.cljs @@ -3,12 +3,12 @@ [quo.components.buttons.wallet-button.style :as style] [quo.components.icon :as quo.icons] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn view [{:keys [on-press on-long-press disabled? icon accessibility-label container-style]}] - (let [theme (theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed nil))] diff --git a/src/quo/components/buttons/wallet_ctas/view.cljs b/src/quo/components/buttons/wallet_ctas/view.cljs index fc77f4f08df..6fe9ab4be6b 100644 --- a/src/quo/components/buttons/wallet_ctas/view.cljs +++ b/src/quo/components/buttons/wallet_ctas/view.cljs @@ -23,32 +23,31 @@ :style {:margin-top 4 :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} text]]) -(defn view-internal - [{:keys [theme buy-action send-action receive-action bridge-action]}] - [rn/view {:style style/container} - [action-button - {:icon :i/add - :text (i18n/label :t/buy) - :on-press buy-action - :theme theme - :accessibility-label :buy}] - [action-button - {:icon :i/send - :text (i18n/label :t/send) - :on-press send-action - :theme theme - :accessibility-label :send}] - [action-button - {:icon :i/receive - :text (i18n/label :t/receive) - :on-press receive-action - :theme theme - :accessibility-label :receive}] - [action-button - {:icon :i/bridge - :text (i18n/label :t/bridge) - :on-press bridge-action - :theme theme - :accessibility-label :bridge}]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [buy-action send-action receive-action bridge-action]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/container} + [action-button + {:icon :i/add + :text (i18n/label :t/buy) + :on-press buy-action + :theme theme + :accessibility-label :buy}] + [action-button + {:icon :i/send + :text (i18n/label :t/send) + :on-press send-action + :theme theme + :accessibility-label :send}] + [action-button + {:icon :i/receive + :text (i18n/label :t/receive) + :on-press receive-action + :theme theme + :accessibility-label :receive}] + [action-button + {:icon :i/bridge + :text (i18n/label :t/bridge) + :on-press bridge-action + :theme theme + :accessibility-label :bridge}]])) diff --git a/src/quo/components/calendar/calendar/month_picker/view.cljs b/src/quo/components/calendar/calendar/month_picker/view.cljs index 6efa19c1fd5..80449ea18c4 100644 --- a/src/quo/components/calendar/calendar/month_picker/view.cljs +++ b/src/quo/components/calendar/calendar/month_picker/view.cljs @@ -4,13 +4,14 @@ [quo.components.calendar.calendar.month-picker.style :as style] [quo.components.calendar.calendar.month-picker.utils :as utils] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [utils.number :as utils.number])) -(defn- view-internal - [{:keys [year month on-change theme]}] - (let [year (utils.number/parse-int year) +(defn view + [{:keys [year month on-change]}] + (let [theme (quo.theme/use-theme) + year (utils.number/parse-int year) month (utils.number/parse-int month)] [rn/view {:style style/container} @@ -35,5 +36,3 @@ :type :outline :on-press #(on-change (utils/next-month year month))} :i/chevron-right]])) - -(def view (theme/with-theme view-internal)) diff --git a/src/quo/components/calendar/calendar/view.cljs b/src/quo/components/calendar/calendar/view.cljs index efc5d946ced..fafbdeaebaa 100644 --- a/src/quo/components/calendar/calendar/view.cljs +++ b/src/quo/components/calendar/calendar/view.cljs @@ -6,13 +6,13 @@ [quo.components.calendar.calendar.utils :as utils] [quo.components.calendar.calendar.weekdays-header.view :as weekdays-header] [quo.components.calendar.calendar.years-list.view :as years-list] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [utils.number :as utils.number])) (defn view [{:keys [on-change start-date end-date]}] - (let [theme (theme/use-theme-value) + (let [theme (quo.theme/use-theme) [selected-year set-selected-year] (rn/use-state (utils/current-year)) [selected-month set-selected-month] (rn/use-state (utils/current-month)) on-change-year (rn/use-callback #(set-selected-year %)) diff --git a/src/quo/components/calendar/calendar/weekdays_header/view.cljs b/src/quo/components/calendar/calendar/weekdays_header/view.cljs index ffb269c392d..4c05a2807c8 100644 --- a/src/quo/components/calendar/calendar/weekdays_header/view.cljs +++ b/src/quo/components/calendar/calendar/weekdays_header/view.cljs @@ -2,23 +2,22 @@ (:require [quo.components.calendar.calendar.weekdays-header.style :as style] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [utils.datetime :as datetime] [utils.i18n :as i18n])) -(defn- view-internal - [theme] - [rn/view - {:style style/container-weekday-row} - (for [weekday datetime/weekday-names] - [rn/view - {:style style/container-weekday - :key weekday} - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/text-weekdays theme)} - (str (i18n/label weekday))]])]) - -(def view (theme/with-theme view-internal)) +(defn view + [] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style style/container-weekday-row} + (for [weekday datetime/weekday-names] + [rn/view + {:style style/container-weekday + :key weekday} + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/text-weekdays theme)} + (str (i18n/label weekday))]])])) diff --git a/src/quo/components/calendar/calendar/years_list/view.cljs b/src/quo/components/calendar/calendar/years_list/view.cljs index c7b379ca6f1..5c40945f33c 100644 --- a/src/quo/components/calendar/calendar/years_list/view.cljs +++ b/src/quo/components/calendar/calendar/years_list/view.cljs @@ -3,7 +3,7 @@ [quo.components.calendar.calendar-year.view :as calendar-year] [quo.components.calendar.calendar.utils :as utils] [quo.components.calendar.calendar.years-list.style :as style] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient])) @@ -30,21 +30,20 @@ :start {:x 0 :y 0} :end {:x 0 :y 1}}]) -(defn view-internal - [{:keys [on-change-year year theme]}] - [rn/view - {:style (style/container-years theme)} - [rn/flat-list - {:data (utils/generate-years (utils/current-year)) - :key-fn str - :list-key :years-list - :inverted true - :shows-vertical-scroll-indicator false - :footer [footer] - :separator [separator] - :render-fn year-view - :render-data {:selected-year year - :on-press #(on-change-year %)}}] - [gradiant-overview theme]]) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [on-change-year year]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (style/container-years theme)} + [rn/flat-list + {:data (utils/generate-years (utils/current-year)) + :key-fn str + :list-key :years-list + :inverted true + :shows-vertical-scroll-indicator false + :footer [footer] + :separator [separator] + :render-fn year-view + :render-data {:selected-year year + :on-press #(on-change-year %)}}] + [gradiant-overview theme]])) diff --git a/src/quo/components/calendar/calendar_day/view.cljs b/src/quo/components/calendar/calendar_day/view.cljs index 1f169b7753c..df5073cabd9 100644 --- a/src/quo/components/calendar/calendar_day/view.cljs +++ b/src/quo/components/calendar/calendar_day/view.cljs @@ -2,31 +2,30 @@ (:require [quo.components.calendar.calendar-day.style :as style] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [state in-range on-press customization-color theme] +(defn view + [{:keys [state in-range on-press customization-color] :or {state :default}} day] - [rn/view {:style style/wrapper} - [rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}] - [rn/touchable-opacity - {:on-press on-press - :style (style/container + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/wrapper} + [rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}] + [rn/touchable-opacity + {:on-press on-press + :style (style/container + {:state state + :theme theme + :customization-color customization-color}) + :disabled (= state :disabled)} + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/text {:state state :theme theme})} + day] + [rn/view + {:style (style/indicator {:state state :theme theme - :customization-color customization-color}) - :disabled (= state :disabled)} - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/text {:state state :theme theme})} - day] - [rn/view - {:style (style/indicator - {:state state - :theme theme - :customization-color customization-color})}]]]) - -(def view (theme/with-theme view-internal)) + :customization-color customization-color})}]]])) diff --git a/src/quo/components/calendar/calendar_year/view.cljs b/src/quo/components/calendar/calendar_year/view.cljs index 7fc37cdefee..6eb75669528 100644 --- a/src/quo/components/calendar/calendar_year/view.cljs +++ b/src/quo/components/calendar/calendar_year/view.cljs @@ -2,24 +2,23 @@ (:require [quo.components.calendar.calendar-year.style :as style] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [selected? disabled? on-press theme]} year] - [rn/touchable-opacity - {:on-press on-press - :style (style/container - {:selected? selected? - :disabled? disabled? - :theme theme}) - :disabled disabled?} - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/text - {:selected? selected? - :theme theme})} - year]]) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [selected? disabled? on-press]} year] + (let [theme (quo.theme/use-theme)] + [rn/touchable-opacity + {:on-press on-press + :style (style/container + {:selected? selected? + :disabled? disabled? + :theme theme}) + :disabled disabled?} + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/text + {:selected? selected? + :theme theme})} + year]])) diff --git a/src/quo/components/code/snippet/view.cljs b/src/quo/components/code/snippet/view.cljs index 569e00e663f..2999ca8b9f2 100644 --- a/src/quo/components/code/snippet/view.cljs +++ b/src/quo/components/code/snippet/view.cljs @@ -1,16 +1,12 @@ (ns quo.components.code.snippet.view (:require - [quo.components.code.common.view :as code-common] - [quo.theme :as theme])) + [quo.components.code.common.view :as code-common])) -(defn- view-internal - [_] - (fn [{:keys [language max-lines on-copy-press]} children] - [code-common/view - {:language language - :max-lines max-lines - :on-copy-press on-copy-press - :preview? false} - children])) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [language max-lines on-copy-press]} children] + [code-common/view + {:language language + :max-lines max-lines + :on-copy-press on-copy-press + :preview? false} + children]) diff --git a/src/quo/components/colors/color/view.cljs b/src/quo/components/colors/color/view.cljs index b32450ff3f2..76d36724fb9 100644 --- a/src/quo/components/colors/color/view.cljs +++ b/src/quo/components/colors/color/view.cljs @@ -14,16 +14,11 @@ [rn/view {:style (style/left-half theme)}] [rn/view {:style (style/right-half theme)}]]) -(defn- view-internal - [{:keys [color - selected? - on-press - blur? - theme - idx - window-width] +(defn view + [{:keys [color selected? on-press blur? idx window-width] :as props}] - (let [border? (and (not blur?) (not selected?)) + (let [theme (quo.theme/use-theme) + border? (and (not blur?) (not selected?)) hex-color (if (= :feng-shui color) (colors/theme-colors colors/neutral-100 colors/white theme) (colors/theme-colors (colors/custom-color color 50) @@ -38,6 +33,7 @@ (if (and (= :feng-shui color) (not selected?)) [feng-shui (assoc props + :theme theme :hex-color hex-color :border? border?)] [rn/view @@ -49,5 +45,3 @@ :color (if (= :feng-shui color) (colors/theme-colors colors/white colors/neutral-100 theme) colors/white)}])])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/common/not_implemented/view.cljs b/src/quo/components/common/not_implemented/view.cljs index 0f0e8a34dd6..0cbeea575ec 100644 --- a/src/quo/components/common/not_implemented/view.cljs +++ b/src/quo/components/common/not_implemented/view.cljs @@ -4,9 +4,8 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [blur? theme]}] - [rn/text {:style (style/text blur? theme)} - "not implemented"]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/text {:style (style/text blur? theme)} + "not implemented"])) diff --git a/src/quo/components/common/notification_dot/view.cljs b/src/quo/components/common/notification_dot/view.cljs index 1ab62bce8ed..c9cd0d601e0 100644 --- a/src/quo/components/common/notification_dot/view.cljs +++ b/src/quo/components/common/notification_dot/view.cljs @@ -4,12 +4,11 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn view-internal - [{:keys [customization-color style theme blur?]}] - [rn/view - {:accessibility-label :notification-dot - :style (merge - (style/notification-dot customization-color theme blur?) - style)}]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [customization-color style blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :notification-dot + :style (merge + (style/notification-dot customization-color theme blur?) + style)}])) diff --git a/src/quo/components/community/banner/view.cljs b/src/quo/components/community/banner/view.cljs index 07eb36b3e15..c56de8fb6c8 100644 --- a/src/quo/components/community/banner/view.cljs +++ b/src/quo/components/community/banner/view.cljs @@ -3,7 +3,7 @@ [quo.components.community.banner.style :as style] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn- card-title-and-description @@ -26,16 +26,15 @@ :size :paragraph-2} description]]]) -(defn view-internal - [{:keys [title description on-press accessibility-label banner style theme]}] - [rn/touchable-without-feedback - {:on-press on-press - :accessibility-label accessibility-label} - [rn/view {:style (merge (style/community-card theme) style)} - [card-title-and-description title description theme] - [rn/image - {:style style/discover-illustration - :source banner - :accessibility-label :discover-communities-illustration}]]]) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [title description on-press accessibility-label banner style]}] + (let [theme (quo.theme/use-theme)] + [rn/touchable-without-feedback + {:on-press on-press + :accessibility-label accessibility-label} + [rn/view {:style (merge (style/community-card theme) style)} + [card-title-and-description title description theme] + [rn/image + {:style style/discover-illustration + :source banner + :accessibility-label :discover-communities-illustration}]]])) diff --git a/src/quo/components/community/channel_action/view.cljs b/src/quo/components/community/channel_action/view.cljs index 80e9408b338..aa1c6cb3a31 100644 --- a/src/quo/components/community/channel_action/view.cljs +++ b/src/quo/components/community/channel_action/view.cljs @@ -9,7 +9,7 @@ (defn view [{:keys [big? customization-color label counter-value icon on-press accessibility-label disabled?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/community/community_card_view.cljs b/src/quo/components/community/community_card_view.cljs index 52d25b66002..542cfdfb530 100644 --- a/src/quo/components/community/community_card_view.cljs +++ b/src/quo/components/community/community_card_view.cljs @@ -7,33 +7,34 @@ [react-native.core :as rn])) (defn- loading-card-view - [{:keys [width theme]}] - [rn/view {:style (style/loading-card width theme)} - [rn/view (style/loading-cover-container theme)] - [rn/view (style/loading-content-container theme) - [rn/view (style/loading-avatar theme)] - [rn/view (style/loading-lock theme)] - [rn/view - {:style style/loading-card-content-container} - [rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}] - [rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}] - [rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]] - [rn/view - {:style style/loading-stats-container} - [rn/view {:style (style/loading-stat-circle theme 0)}] - [rn/view {:style (style/loading-stat-line theme 4)}] - [rn/view {:style (style/loading-stat-circle theme 12)}] - [rn/view {:style (style/loading-stat-line theme 4)}]] - [rn/view - {:style style/loading-tags-container} - [rn/view {:style (style/loading-tag theme 0)}] - [rn/view {:style (style/loading-tag theme 8)}] - [rn/view {:style (style/loading-tag theme 8)}]]]]) + [{:keys [width]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/loading-card width theme)} + [rn/view (style/loading-cover-container theme)] + [rn/view (style/loading-content-container theme) + [rn/view (style/loading-avatar theme)] + [rn/view (style/loading-lock theme)] + [rn/view + {:style style/loading-card-content-container} + [rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}] + [rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}] + [rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]] + [rn/view + {:style style/loading-stats-container} + [rn/view {:style (style/loading-stat-circle theme 0)}] + [rn/view {:style (style/loading-stat-line theme 4)}] + [rn/view {:style (style/loading-stat-circle theme 12)}] + [rn/view {:style (style/loading-stat-line theme 4)}]] + [rn/view + {:style style/loading-tags-container} + [rn/view {:style (style/loading-tag theme 0)}] + [rn/view {:style (style/loading-tag theme 8)}] + [rn/view {:style (style/loading-tag theme 8)}]]]])) (defn- community-card-view - [{:keys [community on-press width theme]}] - (let [{:keys [name description locked? images cover - status tokens tags]} community] + [{:keys [community on-press width]}] + (let [theme (quo.theme/use-theme) + {:keys [name description locked? images cover status tokens tags]} community] [rn/touchable-without-feedback {:accessibility-label :community-card-item :on-press on-press} @@ -68,10 +69,8 @@ [rn/view {:style (style/community-tags-position)} [community-view/community-tags {:tags tags}]]]]]]])) -(defn- internal-view +(defn view [{:keys [loading?] :as props}] (if-not loading? [community-card-view props] [loading-card-view props])) - -(def view (quo.theme/with-theme internal-view)) diff --git a/src/quo/components/community/community_list_view.cljs b/src/quo/components/community/community_list_view.cljs index 91b63e4a5e4..2fc3a594bce 100644 --- a/src/quo/components/community/community_list_view.cljs +++ b/src/quo/components/community/community_list_view.cljs @@ -38,110 +38,94 @@ unread-messages? [unread-grey-dot :unviewed-messages-public])]) -(defn- communities-list-view-item-internal - [{:keys [theme customization-color] :as props} - {:keys [name - locked? - status - muted - unread-messages? - unread-mentions-count - community-icon - tokens]}] - [rn/view - {:style (merge (style/community-card 16 theme) - {:margin-bottom 12})} - [rn/touchable-highlight - (merge {:style {:height 56 - :border-radius 16}} - props) - [rn/view {:style style/detail-container} - [rn/view (style/list-info-container) +(defn communities-list-view-item + [{:keys [customization-color] :as props} + {:keys [name locked? status muted unread-messages? unread-mentions-count community-icon tokens]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/community-card 16 theme) + {:margin-bottom 12})} + [rn/touchable-highlight + (merge {:style {:height 56 + :border-radius 16}} + props) + [rn/view {:style style/detail-container} + [rn/view (style/list-info-container) + [community-icon/community-icon + {:images community-icon} 32] + [rn/view + {:flex 1 + :margin-horizontal 12} + [text/text + {:weight :semi-bold + :size :paragraph-1 + :accessibility-label :community-name-text + :number-of-lines 1 + :ellipsize-mode :tail + :style {:color (when muted + (colors/theme-colors + colors/neutral-40 + colors/neutral-60 + theme))}} + name] + [community-view/community-stats-column + {:type :list-view}]] + (if (= status :gated) + [community-view/permission-tag-container + {:locked? locked? + :tokens tokens}] + [notification-view + {:customization-color customization-color + :theme theme + :muted? muted + :unread-mentions-count unread-mentions-count + :unread-messages? unread-messages?}])]]]])) + +(defn communities-membership-list-item + [{:keys [customization-color] :as props} + bottom-sheet? + {:keys [name muted unviewed-messages-count unviewed-mentions-count status + images tokens locked? style]}] + (let [theme (quo.theme/use-theme)] + [rn/touchable-highlight + (merge {:underlay-color (colors/theme-colors + colors/neutral-5 + colors/neutral-95 + theme) + :style {:border-radius 12 + :margin-left 12}} + props) + [rn/view (merge (style/membership-info-container) style) [community-icon/community-icon - {:images community-icon} 32] + {:images images} 32] [rn/view - {:flex 1 - :margin-horizontal 12} + {:flex 1 + :margin-left 12 + :justify-content :center} [text/text - {:weight :semi-bold - :size :paragraph-1 - :accessibility-label :community-name-text + {:accessibility-label :chat-name-text :number-of-lines 1 :ellipsize-mode :tail - :style {:color (when muted - (colors/theme-colors + :weight :semi-bold + :size :paragraph-1 + :style (when muted + {:color (colors/theme-colors colors/neutral-40 colors/neutral-60 - theme))}} - name] - [community-view/community-stats-column - {:type :list-view}]] - (if (= status :gated) - [community-view/permission-tag-container - {:locked? locked? - :tokens tokens}] - [notification-view - {:customization-color customization-color - :theme theme - :muted? muted - :unread-mentions-count unread-mentions-count - :unread-messages? unread-messages?}])]]]]) + theme)})} + name]] -(def communities-list-view-item (quo.theme/with-theme communities-list-view-item-internal)) - -(defn- communities-membership-list-item-internal - [{:keys [theme customization-color] :as props} - bottom-sheet? - {:keys [name - muted - unviewed-messages-count - unviewed-mentions-count - status - images - tokens - locked? - style]}] - [rn/touchable-highlight - (merge {:underlay-color (colors/theme-colors - colors/neutral-5 - colors/neutral-95 - theme) - :style {:border-radius 12 - :margin-left 12}} - props) - [rn/view (merge (style/membership-info-container) style) - [community-icon/community-icon - {:images images} 32] - [rn/view - {:flex 1 - :margin-left 12 - :justify-content :center} - [text/text - {:accessibility-label :chat-name-text - :number-of-lines 1 - :ellipsize-mode :tail - :weight :semi-bold - :size :paragraph-1 - :style (when muted - {:color (colors/theme-colors - colors/neutral-40 - colors/neutral-60 - theme)})} - name]] - - [rn/view - {:justify-content :center - :margin-right (when bottom-sheet? - 16)} - (if (= status :gated) - [community-view/permission-tag-container - {:locked? locked? - :tokens tokens}] - [notification-view - {:theme theme - :customization-color customization-color - :muted? muted - :unread-mentions-count unviewed-mentions-count - :unread-messages? (pos? unviewed-messages-count)}])]]]) - -(def communities-membership-list-item (quo.theme/with-theme communities-membership-list-item-internal)) + [rn/view + {:justify-content :center + :margin-right (when bottom-sheet? + 16)} + (if (= status :gated) + [community-view/permission-tag-container + {:locked? locked? + :tokens tokens}] + [notification-view + {:theme theme + :customization-color customization-color + :muted? muted + :unread-mentions-count unviewed-mentions-count + :unread-messages? (pos? unviewed-messages-count)}])]]])) diff --git a/src/quo/components/community/community_stat/view.cljs b/src/quo/components/community/community_stat/view.cljs index 68e6a991237..218bf83bb03 100644 --- a/src/quo/components/community/community_stat/view.cljs +++ b/src/quo/components/community/community_stat/view.cljs @@ -7,20 +7,19 @@ [react-native.core :as rn] utils.money)) -(defn view-internal - [{:keys [value icon theme style accessibility-label text-size]}] - [rn/view - {:style (merge style/container style) - :accessibility-label accessibility-label} - [quo.icons/icon icon - {:size 16 - :container-style {:align-items :center - :justify-content :center} - :resize-mode :center - :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}] - [quo.text/text - {:size (or text-size :paragraph-1) - :weight :regular - :style (style/text theme)} (utils.money/format-amount value)]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [value icon style accessibility-label text-size]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge style/container style) + :accessibility-label accessibility-label} + [quo.icons/icon icon + {:size 16 + :container-style {:align-items :center + :justify-content :center} + :resize-mode :center + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}] + [quo.text/text + {:size (or text-size :paragraph-1) + :weight :regular + :style (style/text theme)} (utils.money/format-amount value)]])) diff --git a/src/quo/components/community/community_view.cljs b/src/quo/components/community/community_view.cljs index ebdc3ef564d..65c159e1254 100644 --- a/src/quo/components/community/community_view.cljs +++ b/src/quo/components/community/community_view.cljs @@ -6,7 +6,7 @@ [quo.components.tags.permission-tag :as permission] [quo.components.tags.tag :as tag] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture])) @@ -70,16 +70,15 @@ :style {:margin-top (if (= size :large) 8 2)}} description])]) -(defn- permission-tag-container-internal - [{:keys [locked? blur? tokens on-press theme]}] - [permission/tag - {:accessibility-label :permission-tag - :background-color (if (and (= :dark theme) blur?) - colors/white-opa-10 - (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)) - :locked? locked? - :tokens tokens - :size 24 - :on-press on-press}]) - -(def permission-tag-container (theme/with-theme permission-tag-container-internal)) +(defn permission-tag-container + [{:keys [locked? blur? tokens on-press]}] + (let [theme (quo.theme/use-theme)] + [permission/tag + {:accessibility-label :permission-tag + :background-color (if (and (= :dark theme) blur?) + colors/white-opa-10 + (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)) + :locked? locked? + :tokens tokens + :size 24 + :on-press on-press}])) diff --git a/src/quo/components/community/token_gating.cljs b/src/quo/components/community/token_gating.cljs index 18fe8d9464a..0d7254127d9 100644 --- a/src/quo/components/community/token_gating.cljs +++ b/src/quo/components/community/token_gating.cljs @@ -24,22 +24,21 @@ purchasable? :add)}]]) tokens)]) -(defn- internal-view - [{:keys [tokens padding? theme]}] - [:<> - (if (> (count tokens) 1) - (map-indexed - (fn [token-requirement-index tokens] - ^{:key token-requirement-index} - [rn/view {:margin-bottom 12} - (when-not (= token-requirement-index 0) - [rn/view {:style (style/token-row-or-border theme)}]) - (when-not (= token-requirement-index 0) - [text/text - {:style (style/token-row-or-text padding? theme) - :size :label} (string/lower-case (i18n/label :t/or))]) - [token-requirement-list-row tokens padding?]]) - tokens) - [token-requirement-list-row (first tokens) padding?])]) - -(def token-requirement-list (quo.theme/with-theme internal-view)) +(defn token-requirement-list + [{:keys [tokens padding?]}] + (let [theme (quo.theme/use-theme)] + [:<> + (if (> (count tokens) 1) + (map-indexed + (fn [token-requirement-index tokens] + ^{:key token-requirement-index} + [rn/view {:margin-bottom 12} + (when-not (= token-requirement-index 0) + [rn/view {:style (style/token-row-or-border theme)}]) + (when-not (= token-requirement-index 0) + [text/text + {:style (style/token-row-or-text padding? theme) + :size :label} (string/lower-case (i18n/label :t/or))]) + [token-requirement-list-row tokens padding?]]) + tokens) + [token-requirement-list-row (first tokens) padding?])])) diff --git a/src/quo/components/counter/collectible_counter/style.cljs b/src/quo/components/counter/collectible_counter/style.cljs index 53fc548e5fc..efcbb53b032 100644 --- a/src/quo/components/counter/collectible_counter/style.cljs +++ b/src/quo/components/counter/collectible_counter/style.cljs @@ -3,14 +3,14 @@ [quo.foundations.colors :as colors])) (defn- get-background-color - [{:keys [status theme]}] + [{:keys [status]} theme] (case status :default (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme) :error (colors/resolve-color :danger theme 10) (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme))) (defn- get-container-border-styles - [{:keys [status theme]}] + [{:keys [status]} theme] (when (= status :error) {:border-color (colors/resolve-color :danger theme 20) :border-width 1})) @@ -29,17 +29,17 @@ style-size-32))) (defn container - [props] + [props theme] (merge {:align-self :flex-start :flex-direcrion :row :justify-content :center :border-radius 999 - :background-color (get-background-color props)} - (get-container-border-styles props) + :background-color (get-background-color props theme)} + (get-container-border-styles props theme) (get-container-styles-by-size props))) (defn- get-text-color - [{:keys [status theme]}] + [{:keys [status]} theme] (case status :default (colors/theme-colors colors/neutral-100 colors/white theme) :error (colors/resolve-color :danger theme) @@ -53,5 +53,5 @@ :paragraph-1)) (defn text - [props] - {:color (get-text-color props)}) + [props theme] + {:color (get-text-color props theme)}) diff --git a/src/quo/components/counter/collectible_counter/view.cljs b/src/quo/components/counter/collectible_counter/view.cljs index 65cb2a029d6..9dc0fea23e2 100644 --- a/src/quo/components/counter/collectible_counter/view.cljs +++ b/src/quo/components/counter/collectible_counter/view.cljs @@ -15,26 +15,24 @@ [:value {:optional true} [:maybe [:or :string :int]]] [:status {:optional true} [:maybe :keyword]] [:size {:optional true} [:maybe [:enum :size-32 :size-24]]] - [:accessibility-label {:optional true} [:maybe :keyword]] - [:theme :schema.common/theme]]]] + [:accessibility-label {:optional true} [:maybe :keyword]]]]] :any]) (defn- view-internal [{:keys [value accessibility-label container-style] :as props}] - (let [default-props {:status :default + (let [theme (quo.theme/use-theme) + default-props {:status :default :size :size-32} props (merge default-props props)] [rn/view {:accessible true :accessibility-label (or accessibility-label :collectible-counter) - :style (merge (style/container props) container-style)} + :style (merge (style/container props theme) container-style)} [text/text {:weight :medium :size (style/get-text-size props) - :style (style/text props)} + :style (style/text props theme)} value]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal ?schema))) +(def view (schema/instrument #'view-internal ?schema)) diff --git a/src/quo/components/counter/counter/view.cljs b/src/quo/components/counter/counter/view.cljs index fdaedc5a82b..6874fdabd87 100644 --- a/src/quo/components/counter/counter/view.cljs +++ b/src/quo/components/counter/counter/view.cljs @@ -7,11 +7,12 @@ [react-native.core :as rn] [utils.number])) -(defn- view-internal - [{:keys [type customization-color theme container-style accessibility-label max-value] - :or {max-value 99 customization-color :blue theme :dark}} +(defn view + [{:keys [type customization-color container-style accessibility-label max-value] + :or {max-value 99 customization-color :blue}} value] - (let [type (or type :default) + (let [theme (quo.theme/use-theme) + type (or type :default) value (utils.number/parse-int value) label (if (> value max-value) (str max-value "+") @@ -33,5 +34,3 @@ :size :label :style (when (= type :default) {:color colors/white})} label]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/counter/step/view.cljs b/src/quo/components/counter/step/view.cljs index 2a5797865e2..199459c5304 100644 --- a/src/quo/components/counter/step/view.cljs +++ b/src/quo/components/counter/step/view.cljs @@ -15,14 +15,14 @@ [:accessibility-label {:optional true} [:maybe :keyword]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:in-blur-view? {:optional true} [:maybe :boolean]] - [:theme :schema.common/theme] [:type {:optional true} [:enum :active :complete :neutral]]]] [:value [:maybe [:or :string :int]]]] :any]) (defn- view-internal - [{:keys [type accessibility-label theme in-blur-view? customization-color]} value] - (let [type (or type :neutral) + [{:keys [type accessibility-label in-blur-view? customization-color]} value] + (let [theme (quo.theme/use-theme) + type (or type :neutral) value (utils.number/parse-int value) label (str value) size (count label)] @@ -40,6 +40,4 @@ :style {:color (style/text-color type theme)}} label]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal ?schema))) +(def view (schema/instrument #'view-internal ?schema)) diff --git a/src/quo/components/dividers/divider_label/view.cljs b/src/quo/components/dividers/divider_label/view.cljs index 5207e3c4411..053b4eb4d08 100644 --- a/src/quo/components/dividers/divider_label/view.cljs +++ b/src/quo/components/dividers/divider_label/view.cljs @@ -20,42 +20,35 @@ - `container-style` - Style applied to the container view. label - String or markdown text component to display in the divider label." - [{:keys [counter? - counter-value - chevron - chevron-icon - tight? - blur? - theme - on-press - container-style] + [{:keys [counter? counter-value chevron chevron-icon tight? blur? on-press container-style] :or {tight? true}} label] - [rn/pressable - {:on-press on-press - :accessibility-label :divider-label - :style (merge (style/container blur? tight? chevron theme) - container-style)} - [rn/view - {:style (style/content chevron)} - (when chevron - [icons/icon (or chevron-icon :i/chevron-right) - {:color (style/get-content-color blur? theme) - :container-style {(if (= chevron :right) - :margin-left - :margin-right) - 2}}]) - [text/text - {:size :paragraph-2 - :weight :medium - :style (style/text blur? theme)} - label]] - (when counter? - [counter/view - {:type (if blur? :secondary :grey) - :container-style {:margin-left 2}} - counter-value])]) + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:on-press on-press + :accessibility-label :divider-label + :style (merge (style/container blur? tight? chevron theme) + container-style)} + [rn/view + {:style (style/content chevron)} + (when chevron + [icons/icon (or chevron-icon :i/chevron-right) + {:color (style/get-content-color blur? theme) + :container-style {(if (= chevron :right) + :margin-left + :margin-right) + 2}}]) + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/text blur? theme)} + label]] + (when counter? + [counter/view + {:type (if blur? :secondary :grey) + :container-style {:margin-left 2}} + counter-value])])) (defn view - ([_ _] (quo.theme/with-theme view-internal)) + ([props label] [view-internal props label]) ([label] [view {} label])) diff --git a/src/quo/components/dividers/divider_line/style.cljs b/src/quo/components/dividers/divider_line/style.cljs index aaef0944afc..bfa71b85d19 100644 --- a/src/quo/components/dividers/divider_line/style.cljs +++ b/src/quo/components/dividers/divider_line/style.cljs @@ -3,7 +3,7 @@ [quo.foundations.colors :as colors])) (defn divider-line - [{:keys [blur? container-style theme]}] + [{:keys [blur? container-style]} theme] (merge {:border-color (if blur? (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) diff --git a/src/quo/components/dividers/divider_line/view.cljs b/src/quo/components/dividers/divider_line/view.cljs index d9b57bf6617..3af7ed2fd23 100644 --- a/src/quo/components/dividers/divider_line/view.cljs +++ b/src/quo/components/dividers/divider_line/view.cljs @@ -4,8 +4,7 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal +(defn view [props] - [rn/view {:style (style/divider-line props)}]) - -(def view (quo.theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/divider-line props theme)}])) diff --git a/src/quo/components/dividers/new_messages.cljs b/src/quo/components/dividers/new_messages.cljs index 53cab96b2eb..4e09da86af9 100644 --- a/src/quo/components/dividers/new_messages.cljs +++ b/src/quo/components/dividers/new_messages.cljs @@ -6,10 +6,11 @@ [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient])) -(defn- view-internal +(defn view "new-messages params - label, customization-color, theme" - [{:keys [label customization-color theme] :or {customization-color :blue}}] - (let [bg-color (colors/resolve-color customization-color theme 5) + [{:keys [label customization-color] :or {customization-color :blue}}] + (let [theme (quo.theme/use-theme) + bg-color (colors/resolve-color customization-color theme 5) text-color (colors/resolve-color customization-color theme)] [linear-gradient/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"] @@ -24,5 +25,3 @@ :weight :medium :style {:color text-color}} label]]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/drawers/action_drawers/view.cljs b/src/quo/components/drawers/action_drawers/view.cljs index b34acdbd6ca..22786fdb599 100644 --- a/src/quo/components/drawers/action_drawers/view.cljs +++ b/src/quo/components/drawers/action_drawers/view.cljs @@ -26,88 +26,73 @@ [rn/view (dissoc props :on-press) child] [rn/touchable-highlight props child])) -(defn- action-internal - [{:keys [icon - label - sub-label - right-icon - right-text - danger? - disabled? - on-press - add-divider? - theme - accessibility-label - icon-color - no-icon-color? - state - customization-color - blur?]}] - [:<> - (when add-divider? - [divider theme blur?]) - [maybe-pressable disabled? - {:accessibility-label accessibility-label - :style (style/container {:sub-label sub-label - :disabled? disabled? - :state state - :customization-color customization-color - :blur? blur? - :theme theme}) - :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) - :on-press on-press} - [rn/view - {:style (style/row-container sub-label)} - (when icon +(defn action + [{:keys [icon label sub-label right-icon right-text danger? disabled? on-press add-divider? + accessibility-label icon-color no-icon-color? state customization-color blur?]}] + (let [theme (quo.theme/use-theme)] + [:<> + (when add-divider? + [divider theme blur?]) + [maybe-pressable disabled? + {:accessibility-label accessibility-label + :style (style/container {:sub-label sub-label + :disabled? disabled? + :state state + :customization-color customization-color + :blur? blur? + :theme theme}) + :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) + :on-press on-press} + [rn/view + {:style (style/row-container sub-label)} + (when icon + [rn/view + {:accessibility-label :left-icon-for-action + :accessible true + :style (style/left-icon sub-label)} + [icon/icon icon + {:color (or icon-color (get-icon-color danger? theme)) + :no-color no-icon-color? + :size 20}]]) [rn/view - {:accessibility-label :left-icon-for-action - :accessible true - :style (style/left-icon sub-label)} - [icon/icon icon - {:color (or icon-color (get-icon-color danger? theme)) - :no-color no-icon-color? - :size 20}]]) - [rn/view - {:style style/text-container} - [text/text - {:size :paragraph-1 - :weight :medium - :style {:color - (cond - danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme) - :else (colors/theme-colors colors/neutral-100 colors/white theme))}} - label] - (when sub-label + {:style style/text-container} [text/text - {:size :paragraph-2 - :style {:color - (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - sub-label])] - (when (or right-text right-icon (= state :selected)) - [rn/view {:style style/right-side-container} - (when right-text + {:size :paragraph-1 + :weight :medium + :style {:color + (cond + danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme) + :else (colors/theme-colors colors/neutral-100 colors/white theme))}} + label] + (when sub-label [text/text - {:accessibility-label :right-text-for-action - :size :paragraph-1 - :style (style/right-text theme)} - right-text]) - (when right-icon - [rn/view - {:style style/right-icon - :accessible true - :accessibility-label :right-icon-for-action} - [icon/icon right-icon - {:color (get-icon-color danger? theme) - :size 20}]]) - (when (= state :selected) - [rn/view {:style style/right-icon} - [icon/icon :i/check - {:color (if blur? - colors/white - (colors/resolve-color customization-color theme)) - :size 20}]])])]]]) - -(def ^:private action (quo.theme/with-theme action-internal)) + {:size :paragraph-2 + :style {:color + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + sub-label])] + (when (or right-text right-icon (= state :selected)) + [rn/view {:style style/right-side-container} + (when right-text + [text/text + {:accessibility-label :right-text-for-action + :size :paragraph-1 + :style (style/right-text theme)} + right-text]) + (when right-icon + [rn/view + {:style style/right-icon + :accessible true + :accessibility-label :right-icon-for-action} + [icon/icon right-icon + {:color (get-icon-color danger? theme) + :size 20}]]) + (when (= state :selected) + [rn/view {:style style/right-icon} + [icon/icon :i/check + {:color (if blur? + colors/white + (colors/resolve-color customization-color theme)) + :size 20}]])])]]])) (defn action-drawer [sections] diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index 46d97a22c12..fdde7f26c90 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/src/quo/components/drawers/bottom_actions/view.cljs @@ -26,7 +26,6 @@ [:button-two-label {:optional true} [:maybe :string]] [:button-one-props {:optional true} [:maybe :map]] [:button-two-props {:optional true} [:maybe :map]] - [:theme :schema.common/theme] [:scroll? {:optional true} [:maybe :boolean]] [:blur? {:optional true} [:maybe :boolean]] [:container-style {:optional true} [:maybe :map]]]]] @@ -40,58 +39,57 @@ (defn- view-internal [{:keys [actions description description-text description-top-text error-message role button-one-label - button-two-label blur? button-one-props button-two-props theme scroll? container-style]}] - [rn/view - {:style (merge (style/container scroll? blur? theme) container-style)} - (when (= description :top-error) - [rn/view {:style style/error-message} - [icon/icon - :i/alert - {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) - :size 16}] - [text/text - {:size :paragraph-2 - :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}} - error-message]]) + button-two-label blur? button-one-props button-two-props scroll? container-style]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container scroll? blur? theme) container-style)} + (when (= description :top-error) + [rn/view {:style style/error-message} + [icon/icon + :i/alert + {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) + :size 16}] + [text/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}} + error-message]]) - (when (and (= description :top) role) - [rn/view {:style style/description-top} - [text/text - {:size :paragraph-2 - :style (style/description-top-text scroll? blur? theme)} - (or description-top-text (i18n/label :t/eligible-to-join-as))] - [context-tag/view - {:type :icon - :size 24 - :icon (role role-icon) - :blur? blur? - :context (i18n/label (keyword "t" role))}]]) + (when (and (= description :top) role) + [rn/view {:style style/description-top} + [text/text + {:size :paragraph-2 + :style (style/description-top-text scroll? blur? theme)} + (or description-top-text (i18n/label :t/eligible-to-join-as))] + [context-tag/view + {:type :icon + :size 24 + :icon (role role-icon) + :blur? blur? + :context (i18n/label (keyword "t" role))}]]) - [rn/view {:style style/buttons-container} - (when (= actions :two-actions) + [rn/view {:style style/buttons-container} + (when (= actions :two-actions) + [button/button + (merge + {:size 40 + :background (when (or blur? scroll?) :blur) + :container-style style/button-container + :theme theme + :accessibility-label :button-two} + button-two-props) + button-two-label]) [button/button (merge {:size 40 - :background (when (or blur? scroll?) :blur) :container-style style/button-container + :background (when (or blur? scroll?) :blur) :theme theme - :accessibility-label :button-two} - button-two-props) - button-two-label]) - [button/button - (merge - {:size 40 - :container-style style/button-container - :background (when (or blur? scroll?) :blur) - :theme theme - :accessibility-label :button-one} - button-one-props) - button-one-label]] - (when (= description :bottom) - [text/text - {:size :paragraph-2 - :style (style/description-bottom scroll? blur? theme)} description-text])]) + :accessibility-label :button-one} + button-one-props) + button-one-label]] + (when (= description :bottom) + [text/text + {:size :paragraph-2 + :style (style/description-bottom scroll? blur? theme)} description-text])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal ?schema))) +(def view (schema/instrument #'view-internal ?schema)) diff --git a/src/quo/components/drawers/documentation_drawers/view.cljs b/src/quo/components/drawers/documentation_drawers/view.cljs index 3e0d5982626..f2f7b692cc5 100644 --- a/src/quo/components/drawers/documentation_drawers/view.cljs +++ b/src/quo/components/drawers/documentation_drawers/view.cljs @@ -7,7 +7,7 @@ [react-native.core :as rn] [react-native.gesture :as gesture])) -(defn- view-internal +(defn view "Options - `title` Title text - `show-button?` Show button @@ -17,29 +17,28 @@ - `shell?` use shell theme `content` Content of the drawer " - [{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content] - [gesture/scroll-view - {:style style/outer-container - :always-bounce-vertical false - :content-inset-adjustment-behavior :never} - [rn/view {:style style/container} - [text/text - {:size :heading-2 - :accessibility-label :documentation-drawer-title - :style (style/title theme) - :weight :semi-bold} - title] - [rn/view {:style style/content :accessibility-label :documentation-drawer-content} - content - (when show-button? - [button/button - {:size 24 - :type :outline - :container-style {:margin-top 16} - :background (when shell? :blur) - :on-press on-press-button - :accessibility-label :documentation-drawer-button - :icon-right button-icon} - button-label])]]]) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [title show-button? on-press-button button-label button-icon shell?]} content] + (let [theme (quo.theme/use-theme)] + [gesture/scroll-view + {:style style/outer-container + :always-bounce-vertical false + :content-inset-adjustment-behavior :never} + [rn/view {:style style/container} + [text/text + {:size :heading-2 + :accessibility-label :documentation-drawer-title + :style (style/title theme) + :weight :semi-bold} + title] + [rn/view {:style style/content :accessibility-label :documentation-drawer-content} + content + (when show-button? + [button/button + {:size 24 + :type :outline + :container-style {:margin-top 16} + :background (when shell? :blur) + :on-press on-press-button + :accessibility-label :documentation-drawer-button + :icon-right button-icon} + button-label])]]])) diff --git a/src/quo/components/drawers/drawer_action/view.cljs b/src/quo/components/drawers/drawer_action/view.cljs index c0af3dad547..7f8cdad3d4b 100644 --- a/src/quo/components/drawers/drawer_action/view.cljs +++ b/src/quo/components/drawers/drawer_action/view.cljs @@ -5,7 +5,7 @@ [quo.components.icon :as icon] [quo.components.markdown.text :as text] [quo.components.selectors.selectors.view :as selectors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [schema.core :as schema])) @@ -14,7 +14,7 @@ customization-color blur?] :or {customization-color :blue blur? false}}] - (let [theme (theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/src/quo/components/drawers/drawer_top/view.cljs index b200c706e14..5ecc2c3fcc2 100644 --- a/src/quo/components/drawers/drawer_top/view.cljs +++ b/src/quo/components/drawers/drawer_top/view.cljs @@ -192,54 +192,50 @@ colors/white-opa-40 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])])) -(defn- view-internal - [{:keys [title title-icon type theme description blur? community-name community-logo button-icon - account-name emoji context-tag-type button-type - on-button-press - on-button-long-press - button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar - profile-picture keycard? networks label full-name - container-style]}] - [rn/view {:style (merge style/container container-style)} - (when (left-image-supported-types type) - [rn/view {:style style/left-container} - [left-image - {:type type - :customization-color customization-color - :account-avatar-emoji account-avatar-emoji - :account-avatar-type account-avatar-type - :icon-avatar icon-avatar - :profile-picture profile-picture}]]) - [rn/view {:style style/body-container} - [left-title - {:type type - :label label - :title title - :title-icon title-icon - :theme theme - :blur? blur?}] - [subtitle - {:type type - :theme theme - :blur? blur? - :keycard? keycard? - :networks networks - :description description - :community-name community-name - :community-logo community-logo - :context-tag-type context-tag-type - :customization-color customization-color - :account-name account-name - :emoji emoji - :full-name full-name - :profile-picture profile-picture}]] - [right-icon - {:theme theme - :type type - :button-type button-type - :on-button-press on-button-press - :on-button-long-press on-button-long-press - :button-disabled? button-disabled? - :button-icon button-icon}]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [title title-icon type description blur? community-name community-logo button-icon + account-name emoji context-tag-type button-type container-style + on-button-press on-button-long-press profile-picture keycard? networks label full-name + button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (merge style/container container-style)} + (when (left-image-supported-types type) + [rn/view {:style style/left-container} + [left-image + {:type type + :customization-color customization-color + :account-avatar-emoji account-avatar-emoji + :account-avatar-type account-avatar-type + :icon-avatar icon-avatar + :profile-picture profile-picture}]]) + [rn/view {:style style/body-container} + [left-title + {:type type + :label label + :title title + :title-icon title-icon + :theme theme + :blur? blur?}] + [subtitle + {:type type + :theme theme + :blur? blur? + :keycard? keycard? + :networks networks + :description description + :community-name community-name + :community-logo community-logo + :context-tag-type context-tag-type + :customization-color customization-color + :account-name account-name + :emoji emoji + :full-name full-name + :profile-picture profile-picture}]] + [right-icon + {:theme theme + :type type + :button-type button-type + :on-button-press on-button-press + :on-button-long-press on-button-long-press + :button-disabled? button-disabled? + :button-icon button-icon}]])) diff --git a/src/quo/components/drawers/permission_context/view.cljs b/src/quo/components/drawers/permission_context/view.cljs index bb67ca910a8..fd638189395 100644 --- a/src/quo/components/drawers/permission_context/view.cljs +++ b/src/quo/components/drawers/permission_context/view.cljs @@ -69,7 +69,7 @@ (defn- view-internal [{:keys [on-press blur? container-style] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) context-type (:type props)] [shadow/view {:offset [0 4] diff --git a/src/quo/components/dropdowns/dropdown/properties.cljs b/src/quo/components/dropdowns/dropdown/properties.cljs index a7272142325..8cd447bd403 100644 --- a/src/quo/components/dropdowns/dropdown/properties.cljs +++ b/src/quo/components/dropdowns/dropdown/properties.cljs @@ -109,7 +109,7 @@ (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) (defn get-colors - [{:keys [customization-color theme type state background size]}] + [{:keys [customization-color type state background size]} theme] (let [active? (= state :active)] (cond (and (= background :photo) (= type :grey)) (grey-photo theme active? size) diff --git a/src/quo/components/dropdowns/dropdown/view.cljs b/src/quo/components/dropdowns/dropdown/view.cljs index 655e3b8d042..e1479144b61 100644 --- a/src/quo/components/dropdowns/dropdown/view.cljs +++ b/src/quo/components/dropdowns/dropdown/view.cljs @@ -5,12 +5,24 @@ [quo.components.icon :as icon] [quo.components.markdown.text :as text] [quo.foundations.customization-colors :as customization-colors] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.core :as rn])) -(defn- view-internal - [{:keys [type size state background customization-color theme on-press icon-name icon? emoji? +(defn view + "Props: + - type: :outline |:grey (default) | :ghost | :customization + - size: :size-40 (default) | :size-32 | :size-24 + - state: :default (default) | :active | :disabled + - emoji?: boolean + - icon?: boolean + - no-icon-color?: boolean + - background: :blur | :photo (optional) + - icon-name: keyword + - on-press: function + + Child: string - used as label or emoji (for emoji only)" + [{:keys [type size state background customization-color on-press icon-name icon? emoji? accessibility-label no-icon-color?] :or {type :grey size :size-40 @@ -20,11 +32,12 @@ icon-name :i/placeholder} :as props} text] - (let [{:keys [icon-size text-size emoji-size border-radius] + (let [theme (quo.theme/use-theme) + {:keys [icon-size text-size emoji-size border-radius] :as size-properties} (properties/sizes size) {:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type blur-overlay-color] - :as colors} (properties/get-colors props) + :as colors} (properties/get-colors props theme) right-icon (if (= state :active) :i/pullup :i/dropdown) customization-type? (= type :customization) show-blur-background? (and (= background :photo) @@ -73,18 +86,3 @@ :accessibility-label :right-icon :color right-icon-color :color-2 right-icon-color-2}]])])) - -(def view - "Props: - - type: :outline |:grey (default) | :ghost | :customization - - size: :size-40 (default) | :size-32 | :size-24 - - state: :default (default) | :active | :disabled - - emoji?: boolean - - icon?: boolean - - no-icon-color?: boolean - - background: :blur | :photo (optional) - - icon-name: keyword - - on-press: function - - Child: string - used as label or emoji (for emoji only)" - (theme/with-theme view-internal)) diff --git a/src/quo/components/dropdowns/dropdown_input/view.cljs b/src/quo/components/dropdowns/dropdown_input/view.cljs index bdf74d6f9d4..af5c5d9aebb 100644 --- a/src/quo/components/dropdowns/dropdown_input/view.cljs +++ b/src/quo/components/dropdowns/dropdown_input/view.cljs @@ -4,13 +4,19 @@ [quo.components.dropdowns.dropdown-input.style :as style] [quo.components.icon :as icon] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [state theme on-press icon? - label? blur? - accessibility-label header-label] +(defn view + "Props: + - state: :default (default) | :active | :disabled + - label: string + - header-label: string + - icon?: boolean + - label?: boolean + - blur?: boolean + - on-press: function" + [{:keys [state on-press icon? label? blur? accessibility-label header-label] :or {state :default icon? true label? true @@ -18,7 +24,8 @@ header-label "Label"} :as props} label] - (let [{:keys [left-icon-color right-icon-color right-icon-color-2] + (let [theme (quo.theme/use-theme) + {:keys [left-icon-color right-icon-color right-icon-color-2] :as colors} (properties/get-colors props) right-icon (if (= state :active) :i/pullup :i/dropdown)] [rn/view @@ -55,14 +62,3 @@ :accessibility-label :right-icon :color right-icon-color :color-2 right-icon-color-2}]]])) - -(def view - "Props: - - state: :default (default) | :active | :disabled - - label: string - - header-label: string - - icon?: boolean - - label?: boolean - - blur?: boolean - - on-press: function" - (theme/with-theme view-internal)) diff --git a/src/quo/components/dropdowns/network_dropdown/view.cljs b/src/quo/components/dropdowns/network_dropdown/view.cljs index 6bce73abdc7..adf9b34aefc 100644 --- a/src/quo/components/dropdowns/network_dropdown/view.cljs +++ b/src/quo/components/dropdowns/network_dropdown/view.cljs @@ -7,7 +7,7 @@ (defn view [{:keys [on-press state] :as props} networks] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/empty_state/empty_state/view.cljs b/src/quo/components/empty_state/empty_state/view.cljs index 42b2dc613c7..c43a531acf4 100644 --- a/src/quo/components/empty_state/empty_state/view.cljs +++ b/src/quo/components/empty_state/empty_state/view.cljs @@ -3,11 +3,10 @@ [quo.components.buttons.button.view :as button] [quo.components.empty-state.empty-state.styles :as styles] [quo.components.markdown.text :as text] - [quo.theme :as theme] [react-native.core :as rn] [react-native.fast-image :as fast-image])) -(defn- empty-state-internal +(defn empty-state [{:keys [customization-color image title description blur? placeholder? container-style] upper-button :upper-button lower-button :lower-button @@ -49,5 +48,3 @@ :background :blur :on-press lower-button-on-press} lower-button-text])])]) - -(def empty-state (theme/with-theme empty-state-internal)) diff --git a/src/quo/components/gradient/gradient_cover/view.cljs b/src/quo/components/gradient/gradient_cover/view.cljs index 5d2ae3dae13..2d610b31f88 100644 --- a/src/quo/components/gradient/gradient_cover/view.cljs +++ b/src/quo/components/gradient/gradient_cover/view.cljs @@ -2,10 +2,9 @@ (:require [quo.components.gradient.gradient-cover.style :as style] [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] [react-native.linear-gradient :as linear-gradient])) -(defn- view-internal +(defn view [{:keys [customization-color opacity container-style height] :or {customization-color :blue}}] ;; `when` added for safety, `linear-gradient` will break if `nil` is passed, the `:or` @@ -21,5 +20,3 @@ :end {:x 0 :y 1} :style (merge (style/root-container opacity height) container-style)}]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/graph/interactive_graph/view.cljs b/src/quo/components/graph/interactive_graph/view.cljs index 94c997bec71..dbed59abec0 100644 --- a/src/quo/components/graph/interactive_graph/view.cljs +++ b/src/quo/components/graph/interactive_graph/view.cljs @@ -49,7 +49,7 @@ [{:keys [data state customization-color reference-value reference-prefix decimal-separator] :or {reference-prefix "$" decimal-separator :dot}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [inspecting? set-inspecting] (rn/use-state false) data (if (> (count data) max-data-points) (utils/downsample-data data max-data-points) diff --git a/src/quo/components/graph/wallet_graph/view.cljs b/src/quo/components/graph/wallet_graph/view.cljs index 93758fdc522..248ec81a652 100644 --- a/src/quo/components/graph/wallet_graph/view.cljs +++ b/src/quo/components/graph/wallet_graph/view.cljs @@ -31,9 +31,10 @@ (colors/custom-color color-keyword 60) theme))) -(defn- view-internal - [{:keys [data state time-frame customization-color theme]}] - (let [max-data-points (time-frame->max-data-points time-frame) +(defn view + [{:keys [data state time-frame customization-color]}] + (let [theme (quo.theme/use-theme) + max-data-points (time-frame->max-data-points time-frame) data (if (and (not= time-frame :empty) (> (count data) max-data-points)) (utils/downsample-data data max-data-points) data) @@ -78,5 +79,3 @@ :y-axis-label-width 0.01 :labels-extra-height -36 :x-axis-label-text-style style/x-axis-label-text-style}]]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/header.cljs b/src/quo/components/header.cljs index 0b26f73c17b..2696e44c679 100644 --- a/src/quo/components/header.cljs +++ b/src/quo/components/header.cljs @@ -139,7 +139,7 @@ background] :or {title-align :center border-bottom false}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [layout set-layout] (rn/use-state {:left {:width (or left-width 8) :height header-height} :right {:width (or right-width 8) diff --git a/src/quo/components/icon.cljs b/src/quo/components/icon.cljs index 6ad3ed72571..db027989fdf 100644 --- a/src/quo/components/icon.cljs +++ b/src/quo/components/icon.cljs @@ -15,7 +15,7 @@ (not (string/blank? color)))))) (defn- image-icon-style - [{:keys [color no-color size container-style theme]}] + [{:keys [color no-color size container-style]} theme] (cond-> {:width size :height size} (not no-color) @@ -26,29 +26,30 @@ :always (merge container-style))) -(defn memo-icon-fn - [{:keys [color color-2 container-style size accessibility-label] - :or {accessibility-label :icon} - :as props} - icon-name] - (let [size (or size 20)] - (with-meta - (if-let [svg-icon (icons.svg/get-icon icon-name size)] - [svg-icon - (cond-> {:size size - :accessibility-label accessibility-label - :style container-style} - (valid-color? color) (assoc :color color) - (valid-color? color-2) (assoc :color-2 color-2))] - [rn/image - {:style (image-icon-style (assoc props :size size)) - :accessibility-label accessibility-label - :source (icons/icon-source (str (name icon-name) size))}]) - {:key icon-name}))) +(def memo-icon-fn + (fn [{:keys [color color-2 container-style size accessibility-label] + :or {accessibility-label :icon} + :as props} + icon-name] + (let [theme (quo.theme/use-theme) + size (or size 20)] + (with-meta + (if-let [svg-icon (icons.svg/get-icon icon-name size)] + [svg-icon + (cond-> {:size size + :accessibility-label accessibility-label + :style container-style} + (valid-color? color) (assoc :color color) + (valid-color? color-2) (assoc :color-2 color-2))] + [rn/image + {:style (image-icon-style (assoc props :size size) theme) + :accessibility-label accessibility-label + :source (icons/icon-source (str (name icon-name) size))}]) + {:key icon-name})))) -(def ^:private themed-icon (memoize (quo.theme/with-theme memo-icon-fn))) +(def ^:private memoized-icon (memoize memo-icon-fn)) (defn icon ([icon-name] (icon icon-name nil)) ([icon-name params] - (themed-icon params icon-name))) + (memoized-icon params icon-name))) diff --git a/src/quo/components/info/info_message.cljs b/src/quo/components/info/info_message.cljs index 92896b70798..612643f1051 100644 --- a/src/quo/components/info/info_message.cljs +++ b/src/quo/components/info/info_message.cljs @@ -14,7 +14,7 @@ :warning (colors/resolve-color :warning theme) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))) -(defn view-internal +(defn info-message "[info-message opts \"message\"] opts {:type :default/:success/:error @@ -23,9 +23,10 @@ :text-color colors/white ;; text color override :icon-color colors/white ;; icon color override :no-icon-color? false ;; disable tint color for icon" - [{:keys [type size theme icon text-color icon-color no-icon-color? style accessibility-label + [{:keys [type size icon text-color icon-color no-icon-color? style accessibility-label container-style]} message] - (let [weight (if (= size :default) :regular :medium) + (let [theme (quo.theme/use-theme) + weight (if (= size :default) :regular :medium) icon-size (if (= size :default) 16 12) size (if (= size :default) :paragraph-2 :label) text-color (or text-color (get-color type theme)) @@ -45,5 +46,3 @@ :weight weight :style {:color text-color :margin-horizontal 4}} message]])) - -(def info-message (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/info/information_box/view.cljs b/src/quo/components/info/information_box/view.cljs index f983df0e981..9314638a7b6 100644 --- a/src/quo/components/info/information_box/view.cljs +++ b/src/quo/components/info/information_box/view.cljs @@ -5,7 +5,7 @@ [quo.components.icon :as icons] [quo.components.info.information-box.style :as style] [quo.components.markdown.text :as text] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn- info-type->button-type @@ -57,7 +57,7 @@ on-button-press on-close no-icon-color? icon-size]} message] (when-not closed? - (let [theme (theme/get-theme) + (let [theme (quo.theme/get-theme) include-button? (not (string/blank? button-label))] [rn/view {:accessibility-label :information-box diff --git a/src/quo/components/inputs/address_input/style.cljs b/src/quo/components/inputs/address_input/style.cljs index fe44f770a82..2bd9e6dbe93 100644 --- a/src/quo/components/inputs/address_input/style.cljs +++ b/src/quo/components/inputs/address_input/style.cljs @@ -29,7 +29,8 @@ (defn input-text [theme] (assoc (text/text-style {:size :paragraph-1 - :weight :monospace}) + :weight :monospace} + nil) :flex 1 :color (colors/theme-colors colors/neutral-100 colors/white theme) :margin-top (if platform/ios? 0 -4) diff --git a/src/quo/components/inputs/address_input/view.cljs b/src/quo/components/inputs/address_input/view.cljs index 2a31ff94121..2fcdaf9f34c 100644 --- a/src/quo/components/inputs/address_input/view.cljs +++ b/src/quo/components/inputs/address_input/view.cljs @@ -58,7 +58,7 @@ [{:keys [default-value blur? on-change-text on-blur on-focus on-clear on-scan on-detect-ens on-detect-address on-detect-unclassified address-regex ens-regex valid-ens-or-address? container-style]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [status set-status] (rn/use-state :default) [value set-value] (rn/use-state nil) [focused? set-focused] (rn/use-state false) diff --git a/src/quo/components/inputs/input/style.cljs b/src/quo/components/inputs/input/style.cljs index 6ff41e3f9d3..ece7c7267b7 100644 --- a/src/quo/components/inputs/input/style.cljs +++ b/src/quo/components/inputs/input/style.cljs @@ -87,7 +87,7 @@ (defn input [colors-by-status small? multiple-lines? weight] (let [padding (if small? 4 8) - base-props (assoc (text/text-style {:size :paragraph-1 :weight (or weight :regular)}) + base-props (assoc (text/text-style {:size :paragraph-1 :weight (or weight :regular)} nil) :flex 1 :padding-right 0 :padding-left padding diff --git a/src/quo/components/inputs/input/view.cljs b/src/quo/components/inputs/input/view.cljs index 7d998d271bd..e8646eeedb4 100644 --- a/src/quo/components/inputs/input/view.cljs +++ b/src/quo/components/inputs/input/view.cljs @@ -67,7 +67,7 @@ label char-limit multiline? clearable? on-focus on-blur container-style input-container-style on-change-text on-char-limit-reach weight default-value on-clear placeholder] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) ref (rn/use-ref-atom nil) on-ref (rn/use-callback (fn [value] (when (:ref props) diff --git a/src/quo/components/inputs/locked_input/view.cljs b/src/quo/components/inputs/locked_input/view.cljs index cd1c3daf519..ccd069fa572 100644 --- a/src/quo/components/inputs/locked_input/view.cljs +++ b/src/quo/components/inputs/locked_input/view.cljs @@ -19,21 +19,7 @@ {:size :paragraph-1 :style (style/info-box-label theme)} value-text]]) -(defn- locked-input-internal - [{:keys [label icon container-style theme]} value] - [rn/view {:style container-style} - (when label - [text/text - {:size :paragraph-2 - :weight :medium - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - label]) - [info-box - {:theme theme - :icon icon - :value-text value}]]) - -(def locked-input +(defn locked-input "Options: :label - string (default nil) - Text to display above the input @@ -42,4 +28,16 @@ :theme - :light/:dark (passed from with-theme HOC) :value - string (default nil) - value to display in the info box" - (quo.theme/with-theme locked-input-internal)) + [{:keys [label icon container-style]} value] + (let [theme (quo.theme/use-theme)] + [rn/view {:style container-style} + (when label + [text/text + {:size :paragraph-2 + :weight :medium + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + label]) + [info-box + {:theme theme + :icon icon + :value-text value}]])) diff --git a/src/quo/components/inputs/recovery_phrase/style.cljs b/src/quo/components/inputs/recovery_phrase/style.cljs index 58e9108886f..a248875e837 100644 --- a/src/quo/components/inputs/recovery_phrase/style.cljs +++ b/src/quo/components/inputs/recovery_phrase/style.cljs @@ -13,7 +13,7 @@ (defn input [] - (assoc (text/text-style {}) + (assoc (text/text-style {} nil) :height 32 :flex-grow 1 :padding-vertical 5 diff --git a/src/quo/components/inputs/recovery_phrase/view.cljs b/src/quo/components/inputs/recovery_phrase/view.cljs index 382a1daf73c..79a756b528c 100644 --- a/src/quo/components/inputs/recovery_phrase/view.cljs +++ b/src/quo/components/inputs/recovery_phrase/view.cljs @@ -47,7 +47,7 @@ error-pred-written-words (constantly false)} :as props} text] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) on-focus (rn/use-callback (fn [] diff --git a/src/quo/components/inputs/search_input/style.cljs b/src/quo/components/inputs/search_input/style.cljs index 0b4d92c4052..fa1f641840a 100644 --- a/src/quo/components/inputs/search_input/style.cljs +++ b/src/quo/components/inputs/search_input/style.cljs @@ -63,7 +63,8 @@ (defn input-text [disabled?] (assoc (text/text-style {:size :paragraph-1 - :weight :regular}) + :weight :regular} + nil) :flex 1 :padding-vertical 5 :min-width 120 diff --git a/src/quo/components/inputs/title_input/view.cljs b/src/quo/components/inputs/title_input/view.cljs index e2d3864fea2..5d950d08ffc 100644 --- a/src/quo/components/inputs/title_input/view.cljs +++ b/src/quo/components/inputs/title_input/view.cljs @@ -18,7 +18,7 @@ :or {max-length 0 auto-focus false default-value ""}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [focused? set-focused] (rn/use-state auto-focus) [value set-value] (rn/use-state default-value) input-ref (rn/use-ref-atom nil) @@ -45,7 +45,8 @@ {:style (text/text-style {:size (or size :heading-1) :weight :semi-bold - :style (style/title-text theme)}) + :style (style/title-text theme)} + nil) :default-value default-value :accessibility-label :profile-title-input :keyboard-appearance (quo.theme/theme-value :light :dark theme) diff --git a/src/quo/components/ios/drawer_bar/style.cljs b/src/quo/components/ios/drawer_bar/style.cljs index 7476dde1951..6b84daccbee 100644 --- a/src/quo/components/ios/drawer_bar/style.cljs +++ b/src/quo/components/ios/drawer_bar/style.cljs @@ -1,7 +1,7 @@ (ns quo.components.ios.drawer-bar.style (:require [quo.foundations.colors :as colors] - [quo.theme :as theme])) + [quo.theme])) (def handle-container {:padding-vertical 8 @@ -9,9 +9,9 @@ :align-items :center}) (defn handle - [{:keys [theme]}] + [theme] {:width 32 :height 4 :background-color (colors/theme-colors colors/neutral-100 colors/white theme) - :opacity (theme/theme-value 0.05 0.1 theme) + :opacity (quo.theme/theme-value 0.05 0.1 theme) :border-radius 100}) diff --git a/src/quo/components/ios/drawer_bar/view.cljs b/src/quo/components/ios/drawer_bar/view.cljs index 6dc9c3c6907..0743d5dcf80 100644 --- a/src/quo/components/ios/drawer_bar/view.cljs +++ b/src/quo/components/ios/drawer_bar/view.cljs @@ -4,9 +4,8 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [props] - [rn/view {:style style/handle-container} - [rn/view {:style (style/handle props)}]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [_] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/handle-container} + [rn/view {:style (style/handle theme)}]])) diff --git a/src/quo/components/keycard/view.cljs b/src/quo/components/keycard/view.cljs index f5a35ad60f3..11d801175dd 100644 --- a/src/quo/components/keycard/view.cljs +++ b/src/quo/components/keycard/view.cljs @@ -8,14 +8,15 @@ [react-native.core :as rn] [utils.i18n :as i18n])) -(defn- view-internal +(defn keycard "This component based on the following properties: - :holder-name - Can be owner's name. Default is Empty - :locked? - Boolean to specify whether the keycard is locked or not - :theme :light/:dark " - [{:keys [holder-name locked? theme]}] - (let [label (if (boolean holder-name) + [{:keys [holder-name locked?]}] + (let [theme (quo.theme/use-theme) + label (if (boolean holder-name) (i18n/label :t/user-keycard {:name holder-name}) (i18n/label :t/empty-keycard))] [rn/view {:style (style/card-container locked? theme)} @@ -39,5 +40,3 @@ :accessibility-label :holder-name :icon-color colors/white-70-blur :override-theme (when locked? :dark)}]])) - -(def keycard (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/links/internal_link_card/channel/view.cljs b/src/quo/components/links/internal_link_card/channel/view.cljs index 4f67e64ea0c..10bae192994 100644 --- a/src/quo/components/links/internal_link_card/channel/view.cljs +++ b/src/quo/components/links/internal_link_card/channel/view.cljs @@ -68,25 +68,23 @@ [rn/view {:style (style/loading-thumbnail-box theme size)}]]) (defn view-internal - [{:keys [title description loading? icon banner - theme on-press channel-name size] + [{:keys [title description loading? icon banner on-press channel-name size] :or {channel-name "empty name"}}] - [rn/pressable - {:style (style/container size theme) - :accessibility-label :internal-link-card - :on-press on-press} - (if loading? - [loading-view theme size] - [:<> - [rn/view {:style style/header-container} - (when icon - [logo-comp icon]) - [title-comp title channel-name theme]] - (when description - [description-comp description]) - (when banner - [banner-comp banner size])])]) + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:style (style/container size theme) + :accessibility-label :internal-link-card + :on-press on-press} + (if loading? + [loading-view theme size] + [:<> + [rn/view {:style style/header-container} + (when icon + [logo-comp icon]) + [title-comp title channel-name theme]] + (when description + [description-comp description]) + (when banner + [banner-comp banner size])])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/links/internal_link_card/community/view.cljs b/src/quo/components/links/internal_link_card/community/view.cljs index eee7123f159..92a94615361 100644 --- a/src/quo/components/links/internal_link_card/community/view.cljs +++ b/src/quo/components/links/internal_link_card/community/view.cljs @@ -74,23 +74,22 @@ (defn- view-internal [{:keys [title description loading? icon banner members-count active-members-count - theme on-press size]}] - [rn/pressable - {:style (style/container size theme) - :accessibility-label :internal-link-card - :on-press on-press} - (if loading? - [loading-view theme size] - [:<> - [rn/view {:style style/header-container} - (when icon - [logo-comp icon]) - [title-comp title]] - (when description - [description-comp description members-count active-members-count]) - (when banner - [thumbnail-comp banner size])])]) + on-press size]}] + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:style (style/container size theme) + :accessibility-label :internal-link-card + :on-press on-press} + (if loading? + [loading-view theme size] + [:<> + [rn/view {:style style/header-container} + (when icon + [logo-comp icon]) + [title-comp title]] + (when description + [description-comp description members-count active-members-count]) + (when banner + [thumbnail-comp banner size])])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/links/internal_link_card/schema.cljs b/src/quo/components/links/internal_link_card/schema.cljs index b69963fd02f..a3a1a47f84b 100644 --- a/src/quo/components/links/internal_link_card/schema.cljs +++ b/src/quo/components/links/internal_link_card/schema.cljs @@ -18,6 +18,5 @@ [:active-members-count {:optional true} [:maybe [:or :int :string]]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:emoji-hash {:optional true} [:maybe :string]] - [:size {:optional true} [:maybe :keyword]] - [:theme :schema.common/theme]]]] + [:size {:optional true} [:maybe :keyword]]]]] :any]) diff --git a/src/quo/components/links/internal_link_card/user/view.cljs b/src/quo/components/links/internal_link_card/user/view.cljs index 59ba70cfa0e..7b8e37f448e 100644 --- a/src/quo/components/links/internal_link_card/user/view.cljs +++ b/src/quo/components/links/internal_link_card/user/view.cljs @@ -56,28 +56,26 @@ [(style/gradient-start-color customization-color theme) :transparent]) (defn view-internal - [{:keys [title loading? icon - theme on-press subtitle emoji-hash customization-color size]}] - (if loading? - [rn/pressable - {:accessibility-label :internal-link-card - :on-press on-press - :style (style/container loading? theme size)} - [loading-view theme]] - [linear-gradient/linear-gradient - (assoc {:style (style/container loading? theme size)} - :colors - (linear-gradient-props theme customization-color)) - [rn/pressable - {:accessibility-label :internal-link-card - :on-press on-press} - [rn/view {:style style/header-container} - (when icon - [logo-comp icon]) - [title-comp title]] - (when subtitle - [subtitle-comp subtitle emoji-hash])]])) + [{:keys [title loading? icon on-press subtitle emoji-hash customization-color size]}] + (let [theme (quo.theme/use-theme)] + (if loading? + [rn/pressable + {:accessibility-label :internal-link-card + :on-press on-press + :style (style/container loading? theme size)} + [loading-view theme]] + [linear-gradient/linear-gradient + (assoc {:style (style/container loading? theme size)} + :colors + (linear-gradient-props theme customization-color)) + [rn/pressable + {:accessibility-label :internal-link-card + :on-press on-press} + [rn/view {:style style/header-container} + (when icon + [logo-comp icon]) + [title-comp title]] + (when subtitle + [subtitle-comp subtitle emoji-hash])]]))) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/list_items/account/view.cljs b/src/quo/components/list_items/account/view.cljs index 18064376194..62066ef4e3a 100644 --- a/src/quo/components/list_items/account/view.cljs +++ b/src/quo/components/list_items/account/view.cljs @@ -102,7 +102,7 @@ state :default blur? false} :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false)) diff --git a/src/quo/components/list_items/account_list_card/view.cljs b/src/quo/components/list_items/account_list_card/view.cljs index 4a8c59111ea..e1e6bc8e96d 100644 --- a/src/quo/components/list_items/account_list_card/view.cljs +++ b/src/quo/components/list_items/account_list_card/view.cljs @@ -13,7 +13,7 @@ (defn- internal-view [{:keys [action blur? account-props networks on-press on-options-press]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) on-press-in (rn/use-callback #(set-state :pressed)) on-press-out (rn/use-callback #(set-state :default))] diff --git a/src/quo/components/list_items/address/view.cljs b/src/quo/components/list_items/address/view.cljs index e04b9f096e1..02d67d4d3e3 100644 --- a/src/quo/components/list_items/address/view.cljs +++ b/src/quo/components/list_items/address/view.cljs @@ -40,7 +40,7 @@ (defn- internal-view [{:keys [networks address customization-color on-press active-state? blur?] :or {customization-color :blue}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) active? (rn/use-ref-atom false) timer (rn/use-ref-atom nil) diff --git a/src/quo/components/list_items/channel/view.cljs b/src/quo/components/list_items/channel/view.cljs index 3269f31eb78..fb9d51d9056 100644 --- a/src/quo/components/list_items/channel/view.cljs +++ b/src/quo/components/list_items/channel/view.cljs @@ -27,7 +27,7 @@ - on-long-press - (function, default: nil) - Function called when the component is long pressed. - theme - Theme value from with-theme HOC" [{:keys [notification locked? mentions-count customization-color emoji name on-press on-long-press]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/list_items/community/view.cljs b/src/quo/components/list_items/community/view.cljs index 4b0eaf3af86..a4bedda9c7d 100644 --- a/src/quo/components/list_items/community/view.cljs +++ b/src/quo/components/list_items/community/view.cljs @@ -117,7 +117,7 @@ " [{:keys [members type info tokens locked? title subtitle logo blur? customization-color on-press on-long-press on-press-info container-style unread-count]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/list_items/dapp/view.cljs b/src/quo/components/list_items/dapp/view.cljs index 461fc6d2a6b..9a6ec20926b 100644 --- a/src/quo/components/list_items/dapp/view.cljs +++ b/src/quo/components/list_items/dapp/view.cljs @@ -10,7 +10,7 @@ (defn view [{:keys [dapp action on-press on-press-icon] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/list_items/network_list/view.cljs b/src/quo/components/list_items/network_list/view.cljs index b8331a9bbad..9bdcb4f0faf 100644 --- a/src/quo/components/list_items/network_list/view.cljs +++ b/src/quo/components/list_items/network_list/view.cljs @@ -22,7 +22,7 @@ (defn- values [{:keys [token-value fiat-value]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style style/values-container} [text/text {:weight :medium @@ -46,15 +46,14 @@ [:token-value :string] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:state {:optional true} [:enum :pressed :active :default]] - [:on-press {:optional true} [:maybe fn?]] - [:theme :schema.common/theme]]]] + [:on-press {:optional true} [:maybe fn?]]]]] :any]) (defn- view-internal [{:keys [on-press state customization-color] :as props :or {customization-color :blue}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false)) diff --git a/src/quo/components/list_items/preview_list/view.cljs b/src/quo/components/list_items/preview_list/view.cljs index b6bd0ab985f..048bdec5c34 100644 --- a/src/quo/components/list_items/preview_list/view.cljs +++ b/src/quo/components/list_items/preview_list/view.cljs @@ -5,7 +5,6 @@ [quo.components.list-items.preview-list.properties :as properties] [quo.components.tags.number-tag.view :as number-tag] [quo.components.utilities.token.view :as token] - [quo.theme :as quo.theme] [react-native.core :as rn] [react-native.fast-image :as fast-image] [react-native.hole-view :as hole-view])) @@ -67,7 +66,7 @@ :type type :size-key size-key}]])) -(defn- view-internal +(defn view "[preview-list opts items] opts {:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network @@ -97,5 +96,3 @@ :size size-key :blur? blur? :container-style {:margin-left margin-left}}])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/list_items/quiz_item/style.cljs b/src/quo/components/list_items/quiz_item/style.cljs index 6459be26c79..f19504cfa9e 100644 --- a/src/quo/components/list_items/quiz_item/style.cljs +++ b/src/quo/components/list_items/quiz_item/style.cljs @@ -2,7 +2,7 @@ (:require [quo.foundations.colors :as colors])) (defn container - [{:keys [blur? theme state]}] + [{:keys [blur? state]} theme] {:flex 1 :flex-direction :row :justify-content :space-between @@ -27,7 +27,7 @@ :error (colors/resolve-color :danger theme 10))}) (defn num-container - [{:keys [blur? theme]}] + [{:keys [blur?]} theme] {:width 32 :height 32 :justify-content :center @@ -39,7 +39,7 @@ (colors/theme-colors colors/neutral-20 colors/neutral-70 theme))}) (defn text - [{:keys [theme state]}] + [{:keys [state]} theme] {:color (case state :success (colors/theme-colors colors/success-50 colors/success-60 theme) :error (colors/theme-colors colors/danger-50 colors/danger-60 theme))}) diff --git a/src/quo/components/list_items/quiz_item/view.cljs b/src/quo/components/list_items/quiz_item/view.cljs index 3bfa1d58bd6..f3eacf31c6b 100644 --- a/src/quo/components/list_items/quiz_item/view.cljs +++ b/src/quo/components/list_items/quiz_item/view.cljs @@ -8,25 +8,24 @@ [react-native.core :as rn] [utils.i18n :as i18n])) -(defn- view-internal - [{:keys [state theme number word on-press] :as props}] - [rn/pressable - {:style (style/container props) - :on-press on-press} - (if (or (= state :empty) (= state :disabled)) - [rn/view - {:style (style/num-container props) - :accessibility-label :number-container} - [text/text {:weight :semi-bold} number]] - [text/text {:style (style/text props)} - (if (= state :success) word (i18n/label :t/oops-wrong-word))]) - (when (= state :success) - [icon/icon :i/check - {:color (colors/theme-colors colors/success-50 colors/success-60 theme) - :accessibility-label :success-icon}]) - (when (= state :error) - [icon/icon :i/incorrect - {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) - :accessibility-label :error-icon}])]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [state number word on-press] :as props}] + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:style (style/container props theme) + :on-press on-press} + (if (or (= state :empty) (= state :disabled)) + [rn/view + {:style (style/num-container props theme) + :accessibility-label :number-container} + [text/text {:weight :semi-bold} number]] + [text/text {:style (style/text props theme)} + (if (= state :success) word (i18n/label :t/oops-wrong-word))]) + (when (= state :success) + [icon/icon :i/check + {:color (colors/theme-colors colors/success-50 colors/success-60 theme) + :accessibility-label :success-icon}]) + (when (= state :error) + [icon/icon :i/incorrect + {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) + :accessibility-label :error-icon}])])) diff --git a/src/quo/components/list_items/saved_address/view.cljs b/src/quo/components/list_items/saved_address/view.cljs index 8fa19652eda..34c2c967dff 100644 --- a/src/quo/components/list_items/saved_address/view.cljs +++ b/src/quo/components/list_items/saved_address/view.cljs @@ -11,7 +11,7 @@ (defn- left-container [{:keys [blur? name ens address customization-color]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style style/left-container} [wallet-user-avatar/wallet-user-avatar {:size :size-32 @@ -34,7 +34,7 @@ [{:keys [blur? user-props active-state? customization-color on-press on-options-press] :or {customization-color :blue blur? false}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) active? (rn/use-ref-atom false) timer (rn/use-ref-atom nil) diff --git a/src/quo/components/list_items/saved_contact_address/view.cljs b/src/quo/components/list_items/saved_contact_address/view.cljs index dfe9bd3d38f..1857ab888e9 100644 --- a/src/quo/components/list_items/saved_contact_address/view.cljs +++ b/src/quo/components/list_items/saved_contact_address/view.cljs @@ -15,7 +15,7 @@ (defn- account [{:keys [emoji name address customization-color]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:accessibility-label :account-container :style style/account-container} @@ -40,7 +40,7 @@ :or {customization-color :blue accounts [] active-state? true}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) active? (rn/use-ref-atom false) timer (rn/use-ref-atom nil) diff --git a/src/quo/components/list_items/token_network/view.cljs b/src/quo/components/list_items/token_network/view.cljs index 862606dc17b..b596cfe7e14 100644 --- a/src/quo/components/list_items/token_network/view.cljs +++ b/src/quo/components/list_items/token_network/view.cljs @@ -31,7 +31,7 @@ (defn- values [{:keys [state token-value fiat-value customization-color]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] (if (= state :selected) [icon/icon :i/check {:color (style/check-color customization-color theme) @@ -52,7 +52,7 @@ [{:keys [on-press state customization-color _token _networks _token-value _fiat-value] :as props :or {customization-color :blue}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false)) diff --git a/src/quo/components/list_items/token_value/view.cljs b/src/quo/components/list_items/token_value/view.cljs index 4f22380a006..d3743aed7a2 100644 --- a/src/quo/components/list_items/token_value/view.cljs +++ b/src/quo/components/list_items/token_value/view.cljs @@ -13,7 +13,7 @@ (defn- internal-view [{:keys [customization-color status token metrics? values on-press on-long-press token-name]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [state set-state] (rn/use-state :default) bg-opacity (case state :active 10 diff --git a/src/quo/components/loaders/skeleton.cljs b/src/quo/components/loaders/skeleton.cljs index 81d523469c8..cb403af7d70 100644 --- a/src/quo/components/loaders/skeleton.cljs +++ b/src/quo/components/loaders/skeleton.cljs @@ -78,9 +78,10 @@ :end {:x 1 :y 0} :style animated-gradient-style}]]])) -(defn- view-internal - [{:keys [parent-height theme]}] - (let [number-of-skeletons (int (Math/floor (/ parent-height message-skeleton-height)))] +(defn view + [{:keys [parent-height]}] + (let [theme (quo.theme/use-theme) + number-of-skeletons (int (Math/floor (/ parent-height message-skeleton-height)))] [rn/view {:style {:background-color (colors/theme-colors colors/white @@ -90,5 +91,3 @@ (doall (for [n (range number-of-skeletons)] [:f> f-message-skeleton {:key n :theme theme}]))])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/loaders/skeleton_list/view.cljs b/src/quo/components/loaders/skeleton_list/view.cljs index d9b7b91ad8b..b20fbd61408 100644 --- a/src/quo/components/loaders/skeleton_list/view.cljs +++ b/src/quo/components/loaders/skeleton_list/view.cljs @@ -3,7 +3,7 @@ [quo.components.loaders.skeleton-list.constants :as constants] [quo.components.loaders.skeleton-list.style :as style] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.masked-view :as masked-view] [react-native.reanimated :as reanimated] @@ -86,9 +86,10 @@ [props] [:f> f-animated-skeleton-view props]) -(defn- f-internal-view - [{:keys [content theme blur? parent-height animated?] :as props}] - (let [{window-width :width} (rn/get-window) +(defn view + [{:keys [content blur? parent-height animated?] :as props}] + (let [theme (quo.theme/use-theme) + {window-width :width} (rn/get-window) translate-x (reanimated/use-shared-value (- window-width)) animated-gradient-style (reanimated/apply-animations-to-style {:transform [{:translateX translate-x}]} @@ -114,8 +115,3 @@ :skeleton-height skeleton-height :style animated-gradient-style})])])) -(defn- internal-view - [props] - [:f> f-internal-view props]) - -(def view (theme/with-theme internal-view)) diff --git a/src/quo/components/markdown/list/view.cljs b/src/quo/components/markdown/list/view.cljs index 85ac9310233..a819cd952e5 100644 --- a/src/quo/components/markdown/list/view.cljs +++ b/src/quo/components/markdown/list/view.cljs @@ -6,7 +6,7 @@ [quo.components.markdown.text :as text] [quo.components.tags.context-tag.view :as context-tag] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn get-colors @@ -39,32 +39,31 @@ :size :paragraph-2} description-after-tag]])) -(defn- internal-view - [{:keys [theme title description tag-picture tag-name description-after-tag step-number +(defn view + [{:keys [title description tag-picture tag-name description-after-tag step-number customization-color type blur? container-style] :or {type :bullet}}] - [rn/view {:style (style/container container-style)} - [rn/view {:style style/index} - (if (= type :step) - [step/view - {:in-blur-view? blur? - :customization-color customization-color - :type (if customization-color :complete :neutral)} step-number] - [icon/icon :i/bullet {:color (get-colors theme blur?)}])] - [rn/view {:style style/text-container} - (when title - [text/text - {:accessibility-label :list-item-title - :weight :semi-bold - :size :paragraph-2} - title]) - (when description - [rn/view (when title {:style {:margin-top 0}}) - [description-text - {:description description - :tag-name tag-name - :tag-picture tag-picture - :description-after-tag description-after-tag - :blur? blur?}]])]]) - -(def view (theme/with-theme internal-view)) + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/container container-style)} + [rn/view {:style style/index} + (if (= type :step) + [step/view + {:in-blur-view? blur? + :customization-color customization-color + :type (if customization-color :complete :neutral)} step-number] + [icon/icon :i/bullet {:color (get-colors theme blur?)}])] + [rn/view {:style style/text-container} + (when title + [text/text + {:accessibility-label :list-item-title + :weight :semi-bold + :size :paragraph-2} + title]) + (when description + [rn/view (when title {:style {:margin-top 0}}) + [description-text + {:description description + :tag-name tag-name + :tag-picture tag-picture + :description-after-tag description-after-tag + :blur? blur?}]])]])) diff --git a/src/quo/components/markdown/text.cljs b/src/quo/components/markdown/text.cljs index ffda3ac81fd..5aaf62cac58 100644 --- a/src/quo/components/markdown/text.cljs +++ b/src/quo/components/markdown/text.cljs @@ -7,7 +7,7 @@ [react-native.utils :as rn.utils])) (defn text-style - [{:keys [size align weight style theme]}] + [{:keys [size align weight style]} theme] (merge (case (or weight :regular) :regular typography/font-regular :medium typography/font-medium @@ -30,16 +30,15 @@ :color (if (= (or theme (quo.theme/get-theme)) :dark) colors/white colors/neutral-100))))) -(defn- text-view-internal +(defn- text-view [props & children] - (let [style (text-style props)] + (let [theme (quo.theme/use-theme) + style (text-style props theme)] (into [rn/text (merge {:style style} - (dissoc props :style :size :align :weight :color :theme))] + (dissoc props :style :size :align :weight :color))] children))) -(def ^:private text-view (quo.theme/with-theme text-view-internal)) - (defn text [& argv] (let [[props children] (rn.utils/get-props-and-children argv)] diff --git a/src/quo/components/messages/author/view.cljs b/src/quo/components/messages/author/view.cljs index 02a5e3be505..8971e5372dd 100644 --- a/src/quo/components/messages/author/view.cljs +++ b/src/quo/components/messages/author/view.cljs @@ -9,71 +9,70 @@ (def middle-dot "·") -(defn- internal-view +(defn view [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy? - muted? size theme] + muted? size] :or {size 13}}] - [rn/view - {:style (merge (style/container size) style)} - [text/text - {:weight :semi-bold - :size (if (= size 15) :paragraph-1 :paragraph-2) - :number-of-lines 1 - :accessibility-label :author-primary-name - :style (style/primary-name muted? theme size)} - primary-name] - (when (not (string/blank? secondary-name)) - [:<> - [text/text - {:size :label - :number-of-lines 1 - :style (style/middle-dot theme)} - middle-dot] - [text/text - {:weight :medium - :size :label - :number-of-lines 1 - :accessibility-label :author-secondary-name - :style (style/secondary-name theme)} - secondary-name]]) - (when contact? - [icons/icon :main-icons2/contact - {:size 12 - :no-color true - :container-style (style/icon-container true)}]) - (cond - verified? - [icons/icon :main-icons2/verified - {:size 12 - :no-color true - :container-style (style/icon-container contact?)}] - untrustworthy? - [icons/icon :main-icons2/untrustworthy - {:size 12 - :no-color true - :container-style (style/icon-container contact?)}]) - [rn/view {:style style/details-container} - (when (and (not verified?) short-chat-key) - [text/text - {:weight :monospace - :size :label - :number-of-lines 1 - :style (style/chat-key-text theme)} - short-chat-key]) - (when (and (not verified?) time-str short-chat-key) - [text/text - {:monospace true - :size :label - :number-of-lines 1 - :style (style/middle-dot theme)} - middle-dot]) - (when time-str - [text/text - {:monospace true - :size :label - :accessibility-label :message-timestamp - :number-of-lines 1 - :style (style/time-text theme)} - time-str])]]) - -(def view (quo.theme/with-theme internal-view)) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container size) style)} + [text/text + {:weight :semi-bold + :size (if (= size 15) :paragraph-1 :paragraph-2) + :number-of-lines 1 + :accessibility-label :author-primary-name + :style (style/primary-name muted? theme size)} + primary-name] + (when (not (string/blank? secondary-name)) + [:<> + [text/text + {:size :label + :number-of-lines 1 + :style (style/middle-dot theme)} + middle-dot] + [text/text + {:weight :medium + :size :label + :number-of-lines 1 + :accessibility-label :author-secondary-name + :style (style/secondary-name theme)} + secondary-name]]) + (when contact? + [icons/icon :main-icons2/contact + {:size 12 + :no-color true + :container-style (style/icon-container true)}]) + (cond + verified? + [icons/icon :main-icons2/verified + {:size 12 + :no-color true + :container-style (style/icon-container contact?)}] + untrustworthy? + [icons/icon :main-icons2/untrustworthy + {:size 12 + :no-color true + :container-style (style/icon-container contact?)}]) + [rn/view {:style style/details-container} + (when (and (not verified?) short-chat-key) + [text/text + {:weight :monospace + :size :label + :number-of-lines 1 + :style (style/chat-key-text theme)} + short-chat-key]) + (when (and (not verified?) time-str short-chat-key) + [text/text + {:monospace true + :size :label + :number-of-lines 1 + :style (style/middle-dot theme)} + middle-dot]) + (when time-str + [text/text + {:monospace true + :size :label + :accessibility-label :message-timestamp + :number-of-lines 1 + :style (style/time-text theme)} + time-str])]])) diff --git a/src/quo/components/messages/gap.cljs b/src/quo/components/messages/gap.cljs index 62c89e48bae..0e1a24fb17e 100644 --- a/src/quo/components/messages/gap.cljs +++ b/src/quo/components/messages/gap.cljs @@ -4,7 +4,7 @@ [quo.components.icon :as icon] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) ;;; helpers @@ -18,7 +18,7 @@ (defn get-color [k] - (get-in themes [(theme/get-theme) k])) + (get-in themes [(quo.theme/get-theme) k])) (def ui-images {:light {:horizontal (js/require "../resources/images/ui/message-gap-hborder-light.png") @@ -29,7 +29,7 @@ (defn get-image [k] - (get-in ui-images [(theme/get-theme) k])) + (get-in ui-images [(quo.theme/get-theme) k])) ;;; components ;;;; borders diff --git a/src/quo/components/messages/system_message/view.cljs b/src/quo/components/messages/system_message/view.cljs index b84d9a1a8f9..9ee41eb0ffd 100644 --- a/src/quo/components/messages/system_message/view.cljs +++ b/src/quo/components/messages/system_message/view.cljs @@ -57,43 +57,41 @@ [sm-icon icon] [rn/view {:style style/system-message-base-content-wrapper} child]]) -(defn system-message-deleted-internal - [{:keys [label child theme timestamp]}] - [system-message-base - {:icon {:icon :i/delete - :color :danger - :opacity 5}} - [rn/view {:style style/system-message-deleted-wrapper} - (if child - child - [text/text - {:size :paragraph-2 - :style (style/system-message-deleted-text theme)} - (or label (i18n/label :t/message-deleted))]) - [sm-timestamp timestamp theme]]]) - -(def system-message-deleted (quo.theme/with-theme system-message-deleted-internal)) - -(defn system-message-contact-internal - [{:keys [display-name photo-path customization-color theme timestamp]} label icon] - [system-message-base - {:icon {:icon icon - :color (or customization-color :primary) - :opacity 5}} - [rn/view - {:style style/system-message-contact-wrapper} - [rn/view {:style style/system-message-contact-account-wrapper} - [sm-user-avatar display-name photo-path] - [text/text - {:weight :semi-bold - :number-of-lines 1 - :style style/system-message-contact-account-name - :size :paragraph-2} - display-name]] - [split-text label theme true] - [sm-timestamp timestamp theme]]]) - -(def system-message-contact (quo.theme/with-theme system-message-contact-internal)) +(defn system-message-deleted + [{:keys [label child timestamp]}] + (let [theme (quo.theme/use-theme)] + [system-message-base + {:icon {:icon :i/delete + :color :danger + :opacity 5}} + [rn/view {:style style/system-message-deleted-wrapper} + (if child + child + [text/text + {:size :paragraph-2 + :style (style/system-message-deleted-text theme)} + (or label (i18n/label :t/message-deleted))]) + [sm-timestamp timestamp theme]]])) + +(defn system-message-contact + [{:keys [display-name photo-path customization-color timestamp]} label icon] + (let [theme (quo.theme/use-theme)] + [system-message-base + {:icon {:icon icon + :color (or customization-color :primary) + :opacity 5}} + [rn/view + {:style style/system-message-contact-wrapper} + [rn/view {:style style/system-message-contact-account-wrapper} + [sm-user-avatar display-name photo-path] + [text/text + {:weight :semi-bold + :number-of-lines 1 + :style style/system-message-contact-account-name + :size :paragraph-2} + display-name]] + [split-text label theme true] + [sm-timestamp timestamp theme]]])) (defn system-message-added [data] @@ -108,48 +106,46 @@ (i18n/label :t/contact-request-removed-as-contact)) :i/sad]) -(defn system-message-contact-request-internal - [{:keys [display-name photo-path customization-color theme timestamp incoming?]}] - [system-message-base - {:icon {:icon :i/add-user - :color (or customization-color :primary) - :opacity 5}} - [rn/view - {:style style/system-message-contact-request-wrapper} - (when-not incoming? [split-text "Contact request sent to" theme false]) - [rn/view {:style style/system-message-contact-request-account-wrapper} - [sm-user-avatar display-name photo-path] - [text/text - {:weight :semi-bold - :number-of-lines 1 - :style style/system-message-contact-request-account-name - :size :paragraph-2} - display-name]] - (when incoming? [split-text "sent you a contact request" theme true]) - [sm-timestamp timestamp theme]]]) - -(def system-message-contact-request (quo.theme/with-theme system-message-contact-request-internal)) - -(defn system-message-pinned-internal - [{:keys [pinned-by child customization-color theme timestamp]}] - [system-message-base - {:icon {:icon :i/pin - :color (or customization-color :primary) - :opacity 5}} - [rn/view {:style style/system-message-pinned-wrapper} - [rn/view - {:style style/system-message-pinned-content-wrapper} - [text/text - {:weight :semi-bold - :number-of-lines 1 - :style style/system-message-pinned-content-pinned-by - :size :paragraph-2} - pinned-by] - [split-text (i18n/label :t/pinned-a-message) theme true] - [sm-timestamp timestamp theme]] - (when child child)]]) - -(def system-message-pinned (quo.theme/with-theme system-message-pinned-internal)) +(defn system-message-contact-request + [{:keys [display-name photo-path customization-color timestamp incoming?]}] + (let [theme (quo.theme/use-theme)] + [system-message-base + {:icon {:icon :i/add-user + :color (or customization-color :primary) + :opacity 5}} + [rn/view + {:style style/system-message-contact-request-wrapper} + (when-not incoming? [split-text "Contact request sent to" theme false]) + [rn/view {:style style/system-message-contact-request-account-wrapper} + [sm-user-avatar display-name photo-path] + [text/text + {:weight :semi-bold + :number-of-lines 1 + :style style/system-message-contact-request-account-name + :size :paragraph-2} + display-name]] + (when incoming? [split-text "sent you a contact request" theme true]) + [sm-timestamp timestamp theme]]])) + +(defn system-message-pinned + [{:keys [pinned-by child customization-color timestamp]}] + (let [theme (quo.theme/use-theme)] + [system-message-base + {:icon {:icon :i/pin + :color (or customization-color :primary) + :opacity 5}} + [rn/view {:style style/system-message-pinned-wrapper} + [rn/view + {:style style/system-message-pinned-content-wrapper} + [text/text + {:weight :semi-bold + :number-of-lines 1 + :style style/system-message-pinned-content-pinned-by + :size :paragraph-2} + pinned-by] + [split-text (i18n/label :t/pinned-a-message) theme true] + [sm-timestamp timestamp theme]] + (when child child)]])) (defn f-system-message [{:keys [type animate-bg-color? bg-color-animation-duration on-long-press] diff --git a/src/quo/components/navigation/page_nav/view.cljs b/src/quo/components/navigation/page_nav/view.cljs index 6495f696142..ae41e10347a 100644 --- a/src/quo/components/navigation/page_nav/view.cljs +++ b/src/quo/components/navigation/page_nav/view.cljs @@ -10,7 +10,7 @@ [quo.components.icon :as icons] [quo.components.markdown.text :as text] [quo.components.navigation.page-nav.style :as style] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [utils.worklets.profile-header :as header-worklet])) @@ -107,8 +107,9 @@ title]])) (defn- dropdown-center - [{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}] - (let [dropdown-type (cond + [{:keys [background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}] + (let [theme (quo.theme/use-theme) + dropdown-type (cond (= background :photo) :grey (and (= theme :dark) (= background :blur)) :grey :else :ghost) @@ -123,54 +124,57 @@ dropdown-text]])) (defn- token-center - [{:keys [theme background token-logo token-name token-abbreviation center-opacity]}] - [reanimated/view {:style (style/center-content-container false center-opacity)} - [rn/image {:style style/token-logo :source token-logo}] - [text/text - {:style style/token-name - :weight :semi-bold - :size :paragraph-1 - :number-of-lines 1} - token-name] - [text/text - {:style (style/token-abbreviation theme background) - :weight :medium - :size :paragraph-2 - :number-of-lines 1} - token-abbreviation]]) + [{:keys [background token-logo token-name token-abbreviation center-opacity]}] + (let [theme (quo.theme/use-theme)] + [reanimated/view {:style (style/center-content-container false center-opacity)} + [rn/image {:style style/token-logo :source token-logo}] + [text/text + {:style style/token-name + :weight :semi-bold + :size :paragraph-1 + :number-of-lines 1} + token-name] + [text/text + {:style (style/token-abbreviation theme background) + :weight :medium + :size :paragraph-2 + :number-of-lines 1} + token-abbreviation]])) (defn- channel-center - [{:keys [theme background channel-emoji channel-name channel-icon center-opacity]}] - [reanimated/view {:style (style/center-content-container false center-opacity)} - [rn/text {:style style/channel-emoji} - channel-emoji] - [text/text - {:style style/channel-name - :weight :semi-bold - :size :paragraph-1 - :number-of-lines 1} - (str "# " channel-name)] - [icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]]) + [{:keys [background channel-emoji channel-name channel-icon center-opacity]}] + (let [theme (quo.theme/use-theme)] + [reanimated/view {:style (style/center-content-container false center-opacity)} + [rn/text {:style style/channel-emoji} + channel-emoji] + [text/text + {:style style/channel-name + :weight :semi-bold + :size :paragraph-1 + :number-of-lines 1} + (str "# " channel-name)] + [icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]])) (defn- title-description-center - [{:keys [background theme picture title description center-opacity]}] - [reanimated/view {:style (style/center-content-container false center-opacity)} - (when picture - [rn/view {:style style/group-avatar-picture} - [group-avatar/view {:picture picture :size :size-28}]]) - [rn/view {:style style/title-description-container} - [text/text - {:style style/title-description-title - :weight :semi-bold - :size :paragraph-1 - :number-of-lines 1} - title] - [text/text - {:style (style/title-description-description theme background) - :weight :medium - :size :paragraph-2 - :number-of-lines 1} - description]]]) + [{:keys [background picture title description center-opacity]}] + (let [theme (quo.theme/use-theme)] + [reanimated/view {:style (style/center-content-container false center-opacity)} + (when picture + [rn/view {:style style/group-avatar-picture} + [group-avatar/view {:picture picture :size :size-28}]]) + [rn/view {:style style/title-description-container} + [text/text + {:style style/title-description-title + :weight :semi-bold + :size :paragraph-1 + :number-of-lines 1} + title] + [text/text + {:style (style/title-description-description theme background) + :weight :medium + :size :paragraph-2 + :number-of-lines 1} + description]]])) (defn- community-network-center [{:keys [type community-logo network-logo community-name network-name center-opacity]}] @@ -195,8 +199,58 @@ :on-press networks-on-press :blur? (= background :blur)} networks]]) -(defn- view-internal - "behind-overlay is necessary for us to know if the page-nav buttons are under the bottom sheet overlay or not." +(defn page-nav + "Props: + - type: defaults to `:no-title`. + - background: + `:white`, `:neutral-5`, `:neutral-90`, `:neutral-95`, `:neutral-100`, `:photo` or `:blur` + - accessibility-label + - on-press: callback for left button + - icon-name: icon for left button + - right-side (optional): + - The `:account-switcher` keyword + - vector of maps to render buttons, e.g.: + {:icon-name :i/my-icon + :on-press (fn callback [] nil) + :accessibility-label \"an optional label\"} + + - account-switcher (optional) + - props to render dropdown component (emoji only) e.g.: + {:customization-color :purple + :on-press (fn [] nil) + :state :default (inherit dropdown states) + :emoji \"🍑\"} + + Depending on the `type` selected, different properties are accepted: + `:title` + - title + - text-align: `:center` or `:left` + - scroll-y: a shared value (optional) + `:dropdown` + - dropdown-on-press: a callback + - dropdown-selected?: a boolean + - dropdown-text + `:token` + - token-logo: a valid rn/image `:source` value + - token-name: string + - token-abbreviation: string + `:channel` + - channel-emoji: an emoji in a string + - channel-name + - channel-icon: an icon keyword (:i/members, :i/lock, etc.) + `:title-description` + - title + - description + - picture: a valid rn/image `:source` value + `:wallet-networks` + - networks: a vector of network image source + - networks-on-press: a callback + `:community` + - community-name + - community-logo: a valid rn/image `:source` value + `:network` + - network-name + - network-logo a valid rn/image `:source` value" [{:keys [type right-side background text-align account-switcher behind-overlay?] :or {type :no-title text-align :center @@ -280,57 +334,3 @@ :support-account-switcher? false}]] nil)) - -(def page-nav - "Props: - - type: defaults to `:no-title`. - - background: - `:white`, `:neutral-5`, `:neutral-90`, `:neutral-95`, `:neutral-100`, `:photo` or `:blur` - - accessibility-label - - on-press: callback for left button - - icon-name: icon for left button - - right-side (optional): - - The `:account-switcher` keyword - - vector of maps to render buttons, e.g.: - {:icon-name :i/my-icon - :on-press (fn callback [] nil) - :accessibility-label \"an optional label\"} - - - account-switcher (optional) - - props to render dropdown component (emoji only) e.g.: - {:customization-color :purple - :on-press (fn [] nil) - :state :default (inherit dropdown states) - :emoji \"🍑\"} - - Depending on the `type` selected, different properties are accepted: - `:title` - - title - - text-align: `:center` or `:left` - - scroll-y: a shared value (optional) - `:dropdown` - - dropdown-on-press: a callback - - dropdown-selected?: a boolean - - dropdown-text - `:token` - - token-logo: a valid rn/image `:source` value - - token-name: string - - token-abbreviation: string - `:channel` - - channel-emoji: an emoji in a string - - channel-name - - channel-icon: an icon keyword (:i/members, :i/lock, etc.) - `:title-description` - - title - - description - - picture: a valid rn/image `:source` value - `:wallet-networks` - - networks: a vector of network image source - - networks-on-press: a callback - `:community` - - community-name - - community-logo: a valid rn/image `:source` value - `:network` - - network-name - - network-logo a valid rn/image `:source` value" - (theme/with-theme view-internal)) diff --git a/src/quo/components/navigation/top_nav/view.cljs b/src/quo/components/navigation/top_nav/view.cljs index 30dcea1971b..5691e2fba7a 100644 --- a/src/quo/components/navigation/top_nav/view.cljs +++ b/src/quo/components/navigation/top_nav/view.cljs @@ -88,8 +88,7 @@ avatar-props)]]]) (defn- right-section - [{:keys [theme - jump-to? + [{:keys [jump-to? blur? notification notification-count @@ -97,7 +96,8 @@ scan-on-press qr-code-on-press] :as props}] - (let [button-common-props (get-button-common-props {:theme theme + (let [theme (quo.theme/use-theme) + button-common-props (get-button-common-props {:theme theme :jump-to? jump-to? :blur? blur?})] [rn/view {:style style/right-section} @@ -123,17 +123,7 @@ :i/activity-center]] [notification-highlight props]]])) -(defn view-internal - [{:keys [avatar-on-press avatar-props customization-color container-style] :as props}] - [rn/view {:style (merge style/top-nav-container container-style)} - [rn/view {:style style/top-nav-inner-container} - [left-section - {:avatar-props avatar-props - :on-press avatar-on-press - :customization-color customization-color}] - [right-section (dissoc props :avatar-props :avatar-on-press)]]]) - -(def view +(defn view ":container-style style map merged with outer view for margins/paddings :customization-color custom colors :blur? true/false @@ -148,4 +138,11 @@ :notification-count number :max-unread-notifications used to specify max number for counter " - (quo.theme/with-theme view-internal)) + [{:keys [avatar-on-press avatar-props customization-color container-style] :as props}] + [rn/view {:style (merge style/top-nav-container container-style)} + [rn/view {:style style/top-nav-inner-container} + [left-section + {:avatar-props avatar-props + :on-press avatar-on-press + :customization-color customization-color}] + [right-section (dissoc props :avatar-props :avatar-on-press)]]]) diff --git a/src/quo/components/notifications/count_down_circle.cljs b/src/quo/components/notifications/count_down_circle.cljs index 82abad70b11..42ad4d48c8a 100644 --- a/src/quo/components/notifications/count_down_circle.cljs +++ b/src/quo/components/notifications/count_down_circle.cljs @@ -50,7 +50,7 @@ (defn circle-timer [{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) rotation (or rotation :clockwise) duration (or duration 4) stroke-width (or stroke-width 1) diff --git a/src/quo/components/notifications/notification/view.cljs b/src/quo/components/notifications/notification/view.cljs index c189cd31b93..ecea18a3c08 100644 --- a/src/quo/components/notifications/notification/view.cljs +++ b/src/quo/components/notifications/notification/view.cljs @@ -79,7 +79,7 @@ [avatar-container {:multiline? (and header body)} user-avatar])] - [quo.theme/provider {:theme theme} + [quo.theme/provider theme [notification-container {:avatar avatar :header header diff --git a/src/quo/components/notifications/toast/view.cljs b/src/quo/components/notifications/toast/view.cljs index d409528d015..1f52f2ede06 100644 --- a/src/quo/components/notifications/toast/view.cljs +++ b/src/quo/components/notifications/toast/view.cljs @@ -20,52 +20,50 @@ {:style (merge (style/action-container theme) style)}] children)]) -(defn toast-undo-action-internal - [{:keys [undo-duration undo-on-press theme]}] - [toast-action-container - {:on-press undo-on-press - :accessibility-label :toast-undo-action - :theme theme} - [rn/view {:style {:margin-right 5}} - [count-down-circle/circle-timer {:duration undo-duration}]] - [text/text - {:size :paragraph-2 - :weight :medium - :style (style/text theme)} - [i18n/label :t/undo]]]) +(defn toast-undo-action + [{:keys [undo-duration undo-on-press]}] + (let [theme (quo.theme/use-theme)] + [toast-action-container + {:on-press undo-on-press + :accessibility-label :toast-undo-action + :theme theme} + [rn/view {:style {:margin-right 5}} + [count-down-circle/circle-timer {:duration undo-duration}]] + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/text theme)} + [i18n/label :t/undo]]])) -(def ^:private toast-undo-action (quo.theme/with-theme toast-undo-action-internal)) - -(defn- toast-container-internal - [{:keys [left title text right container-style theme]}] - [rn/view {:style (merge (style/box-container theme) 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 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 theme) - :accessibility-label :toast-title} - title]) - (when text - [text/text - {:size :paragraph-2 - :weight :medium - :style (style/text theme) - :accessibility-label :toast-content} - text])] - right]]) - -(def ^:private toast-container (quo.theme/with-theme toast-container-internal)) +(defn toast-container + [{:keys [left title text right container-style]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (merge (style/box-container theme) 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 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 theme) + :accessibility-label :toast-title} + title]) + (when text + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/text theme) + :accessibility-label :toast-content} + text])] + right]])) (defn toast "Options: @@ -83,7 +81,7 @@ :i/incorrect :i/incorrect-dark) :neutral icon)] - [quo.theme/provider {:theme context-theme} + [quo.theme/provider context-theme [toast-container {:left (cond user [user-avatar/user-avatar user] diff --git a/src/quo/components/numbered_keyboard/keyboard_key/view.cljs b/src/quo/components/numbered_keyboard/keyboard_key/view.cljs index 337b7e938a8..c7874c6f9d6 100644 --- a/src/quo/components/numbered_keyboard/keyboard_key/view.cljs +++ b/src/quo/components/numbered_keyboard/keyboard_key/view.cljs @@ -13,7 +13,7 @@ (defn view [{:keys [disabled? blur? on-press on-long-press type]} label] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed?] (rn/use-state false) on-press (rn/use-callback #(when on-press (on-press label)) [on-press label]) on-long-press (rn/use-callback #(when (fn? on-long-press) (on-long-press label)) diff --git a/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs b/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs index 80f42e11168..7d4aa2fa7ab 100644 --- a/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs +++ b/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs @@ -16,60 +16,59 @@ :type type} item]) -(defn- view-internal +(defn view [] - (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete on-long-press-delete + (fn [{:keys [disabled? blur? left-action delete-key? on-press on-delete on-long-press-delete container-style] :or {left-action :none}}] - [rn/view - {:style (merge style/container - container-style)} - (for [row-index (range 1 4)] - ^{:key row-index} + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge style/container + container-style)} + (for [row-index (range 1 4)] + ^{:key row-index} + [rn/view {:style style/row-container} + (for [column-index (range 1 4)] + ^{:key (str row-index column-index)} + [keyboard-item + {:item (+ (* (dec row-index) 3) column-index) + :type :digit + :disabled? disabled? + :on-press on-press + :blur? blur? + :theme theme}])]) + ;; bottom row [rn/view {:style style/row-container} - (for [column-index (range 1 4)] - ^{:key (str row-index column-index)} - [keyboard-item - {:item (+ (* (dec row-index) 3) column-index) - :type :digit - :disabled? disabled? - :on-press on-press - :blur? blur? - :theme theme}])]) - ;; bottom row - [rn/view {:style style/row-container} - (case left-action - :dot [keyboard-item - {:item "." - :type :digit - :disabled? disabled? - :on-press on-press - :blur? blur? - :theme theme}] - :face-id [keyboard-item - {:item :i/faceid-key - :type :key - :disabled? disabled? - :on-press on-press - :blur? blur? - :theme theme}] - :none [keyboard-item]) - [keyboard-item - {:item "0" - :type :digit - :disabled? disabled? - :on-press on-press - :blur? blur? - :theme theme}] - (if delete-key? + (case left-action + :dot [keyboard-item + {:item "." + :type :digit + :disabled? disabled? + :on-press on-press + :blur? blur? + :theme theme}] + :face-id [keyboard-item + {:item :i/faceid-key + :type :key + :disabled? disabled? + :on-press on-press + :blur? blur? + :theme theme}] + :none [keyboard-item]) [keyboard-item - {:item :i/backspace - :type :key - :disabled? disabled? - :on-press on-delete - :on-long-press on-long-press-delete - :blur? blur? - :theme theme}] - [keyboard-item])]])) - -(def view (quo.theme/with-theme view-internal)) + {:item "0" + :type :digit + :disabled? disabled? + :on-press on-press + :blur? blur? + :theme theme}] + (if delete-key? + [keyboard-item + {:item :i/backspace + :type :key + :disabled? disabled? + :on-press on-delete + :on-long-press on-long-press-delete + :blur? blur? + :theme theme}] + [keyboard-item])]]))) diff --git a/src/quo/components/profile/collectible_list_item/view.cljs b/src/quo/components/profile/collectible_list_item/view.cljs index 13f3c2629b8..66ad0f1ed19 100644 --- a/src/quo/components/profile/collectible_list_item/view.cljs +++ b/src/quo/components/profile/collectible_list_item/view.cljs @@ -86,7 +86,7 @@ (defn- card-view [{:keys [avatar-image-src collectible-name community? counter gradient-color-index image-src status]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style (style/card-view-container theme)} [rn/view {:style {:aspect-ratio 1}} (cond @@ -125,7 +125,7 @@ (defn- image-view [{:keys [avatar-image-src community? counter gradient-color-index image-src status]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style style/image-view-container} (cond (= :loading status) diff --git a/src/quo/components/profile/expanded_collectible/view.cljs b/src/quo/components/profile/expanded_collectible/view.cljs index 308827ad233..c70bc197bc2 100644 --- a/src/quo/components/profile/expanded_collectible/view.cljs +++ b/src/quo/components/profile/expanded_collectible/view.cljs @@ -33,7 +33,7 @@ (defn view-internal [{:keys [container-style square? status on-press counter image-src] :or {status :default}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [image-size set-image-size] (rn/use-state {})] (rn/use-effect (fn [] diff --git a/src/quo/components/profile/link_card/view.cljs b/src/quo/components/profile/link_card/view.cljs index 056e97f2ca8..6bd2a713e2c 100644 --- a/src/quo/components/profile/link_card/view.cljs +++ b/src/quo/components/profile/link_card/view.cljs @@ -7,31 +7,30 @@ [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient])) -(defn- view-internal - [{:keys [address theme on-press icon title customization-color container-style]}] - [rn/pressable - {:accessibility-label :link-card - :on-press on-press} - [linear-gradient/linear-gradient - {:colors [(properties/gradient-start-color theme customization-color) - (properties/gradient-end-color theme customization-color)] - :start {:x 0 :y 1} - :end {:x 1 :y 1} - :style (merge (style/container theme) container-style)} - [rn/view {:style style/icon-container} - [social/view - {:accessibility-label :social-icon - :social icon}]] - [text/text - {:accessibility-label :title - :number-of-lines 1 - :weight :semi-bold} - title] - [text/text - {:accessibility-label :address - :size :paragraph-2 - :numberOfLines 1 - :style (style/address theme)} - address]]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [address on-press icon title customization-color container-style]}] + (let [theme (quo.theme/use-theme)] + [rn/pressable + {:accessibility-label :link-card + :on-press on-press} + [linear-gradient/linear-gradient + {:colors [(properties/gradient-start-color theme customization-color) + (properties/gradient-end-color theme customization-color)] + :start {:x 0 :y 1} + :end {:x 1 :y 1} + :style (merge (style/container theme) container-style)} + [rn/view {:style style/icon-container} + [social/view + {:accessibility-label :social-icon + :social icon}]] + [text/text + {:accessibility-label :title + :number-of-lines 1 + :weight :semi-bold} + title] + [text/text + {:accessibility-label :address + :size :paragraph-2 + :numberOfLines 1 + :style (style/address theme)} + address]]])) diff --git a/src/quo/components/profile/profile_card/view.cljs b/src/quo/components/profile/profile_card/view.cljs index 90ded3c556e..9b3b22cf137 100644 --- a/src/quo/components/profile/profile_card/view.cljs +++ b/src/quo/components/profile/profile_card/view.cljs @@ -11,7 +11,7 @@ [react-native.hole-view :as hole-view] [utils.i18n :as i18n])) -(defn- f-profile-card-component +(defn profile-card [{:keys [keycard-account? profile-picture name customization-color emoji-hash on-options-press show-emoji-hash? show-options-button? show-user-hash? @@ -89,9 +89,9 @@ :number-of-lines 1 :style style/user-name} name] (when keycard-account? - (icon/icon + [icon/icon :i/keycard - style/keycard-icon))] + style/keycard-icon])] (when show-user-hash? [text/text {:weight :monospace @@ -102,7 +102,3 @@ {:weight :monospace :number-of-lines 1 :style style/emoji-hash} emoji-hash])]]])) - -(defn profile-card - [props] - [:f> f-profile-card-component props]) diff --git a/src/quo/components/profile/showcase_nav/view.cljs b/src/quo/components/profile/showcase_nav/view.cljs index ec2ad572676..ee4739e13a7 100644 --- a/src/quo/components/profile/showcase_nav/view.cljs +++ b/src/quo/components/profile/showcase_nav/view.cljs @@ -22,20 +22,19 @@ :container-style style/button-container} icon])) -(defn- view-internal - [{:keys [theme container-style default-active state data on-press active-id]}] - [rn/view - {:style container-style - :accessibility-label :showcase-nav} - [rn/flat-list - {:data data - :key-fn :id - :horizontal true - :shows-horizontal-scroll-indicator false - :content-container-style (style/container state theme) - :render-fn render-button - :render-data {:state state - :on-press on-press - :active-id (or active-id default-active)}}]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [container-style default-active state data on-press active-id]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style container-style + :accessibility-label :showcase-nav} + [rn/flat-list + {:data data + :key-fn :id + :horizontal true + :shows-horizontal-scroll-indicator false + :content-container-style (style/container state theme) + :render-fn render-button + :render-data {:state state + :on-press on-press + :active-id (or active-id default-active)}}]])) diff --git a/src/quo/components/record_audio/record_audio/buttons/lock_button.cljs b/src/quo/components/record_audio/record_audio/buttons/lock_button.cljs index 018b3bb1826..f6f2ccb4206 100644 --- a/src/quo/components/record_audio/record_audio/buttons/lock_button.cljs +++ b/src/quo/components/record_audio/record_audio/buttons/lock_button.cljs @@ -10,7 +10,7 @@ (defn lock-button [recording? ready-to-lock? locked?] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) translate-x-y (reanimated/use-shared-value 20) opacity (reanimated/use-shared-value 0) connector-opacity (reanimated/use-shared-value 0) diff --git a/src/quo/components/record_audio/record_audio/buttons/record_button_big.cljs b/src/quo/components/record_audio/record_audio/buttons/record_button_big.cljs index 2254a36495f..adfda3918c8 100644 --- a/src/quo/components/record_audio/record_audio/buttons/record_button_big.cljs +++ b/src/quo/components/record_audio/record_audio/buttons/record_button_big.cljs @@ -35,7 +35,7 @@ record-button-at-initial-position? locked? set-locked reviewing-audio? recording-length-ms set-recording-length-ms clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) scale (reanimated/use-shared-value 1) opacity (reanimated/use-shared-value 0) opacity-from (if ready-to-lock? opacity-from-lock opacity-from-default) diff --git a/src/quo/components/record_audio/soundtrack/view.cljs b/src/quo/components/record_audio/soundtrack/view.cljs index 4cb6e675a61..c8e1dc95ff7 100644 --- a/src/quo/components/record_audio/soundtrack/view.cljs +++ b/src/quo/components/record_audio/soundtrack/view.cljs @@ -17,7 +17,7 @@ [{:keys [audio-current-time-ms set-audio-current-time-ms player-ref style seeking-audio? set-seeking-audio max-audio-duration-ms]}] (let [audio-duration-ms (min max-audio-duration-ms (audio/get-player-duration player-ref)) - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) on-sliding-start (rn/use-callback #(set-seeking-audio true)) on-sliding-complete (rn/use-callback (fn [seek-time] diff --git a/src/quo/components/selectors/filter/view.cljs b/src/quo/components/selectors/filter/view.cljs index 9a07d5b4733..dd5e75e4923 100644 --- a/src/quo/components/selectors/filter/view.cljs +++ b/src/quo/components/selectors/filter/view.cljs @@ -7,7 +7,7 @@ (defn view [{:keys [blur? customization-color on-press-out pressed?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state pressed?) on-press-out (fn [] (set-pressed (not pressed?)) diff --git a/src/quo/components/selectors/react_selector/view.cljs b/src/quo/components/selectors/react_selector/view.cljs index 2bcb0eac0e9..7168242194f 100644 --- a/src/quo/components/selectors/react_selector/view.cljs +++ b/src/quo/components/selectors/react_selector/view.cljs @@ -8,10 +8,10 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [emoji clicks state use-case on-press accessibility-label on-long-press container-style - theme]}] - (let [numeric-value (int clicks) +(defn view + [{:keys [emoji clicks state use-case on-press accessibility-label on-long-press container-style]}] + (let [theme (quo.theme/use-theme) + numeric-value (int clicks) icon-color (if (= :pinned use-case) (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))] @@ -42,5 +42,3 @@ :weight :semi-bold :style style/reaction-count} (str (if (pos? numeric-value) numeric-value 1))]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/selectors/selectors/view.cljs b/src/quo/components/selectors/selectors/view.cljs index db7fcb84c9b..fd46077f55c 100644 --- a/src/quo/components/selectors/selectors/view.cljs +++ b/src/quo/components/selectors/selectors/view.cljs @@ -7,9 +7,10 @@ (defn- base-selector [{:keys [default-checked? checked? disabled? blur? customization-color on-change container-style - label-prefix outer-style-fn inner-style-fn icon-style-fn theme] + label-prefix outer-style-fn inner-style-fn icon-style-fn] :or {customization-color :blue}}] - (let [controlled-component? (some? checked?) + (let [theme (quo.theme/use-theme) + controlled-component? (some? checked?) [internal-checked? set-internal-checked?] (rn/use-state (when-not controlled-component? (or default-checked? false))) @@ -79,7 +80,7 @@ :inner-style-fn style/common-checkbox-inner :icon-style-fn style/filled-checkbox-check)]) -(defn view-internal +(defn view [{:keys [type] :or {type :toggle} :as props}] @@ -89,5 +90,3 @@ :checkbox [checkbox props] :filled-checkbox [filled-checkbox props] nil)) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/settings/accounts/view.cljs b/src/quo/components/settings/accounts/view.cljs index 2638be7b901..2cf3f81b39e 100644 --- a/src/quo/components/settings/accounts/view.cljs +++ b/src/quo/components/settings/accounts/view.cljs @@ -29,30 +29,28 @@ :on-press on-press} :i/more]]) -(defn- account-internal - [{:keys [account-name account-address avatar-icon - customization-color on-press-menu theme]}] - [rn/view {:style style/card} - [card-background - {:customization-color customization-color - :theme theme}] - [rn/view {:style style/card-top} - [avatar - {:color customization-color - :icon avatar-icon} - theme] - [menu-button - {:on-press on-press-menu - :theme theme}]] - [rn/view {:style style/card-bottom} - [text/text - {:size :paragraph-1 - :weight :semi-bold} - account-name] - [text/text - {:style (style/address-text theme) - :size :paragraph-2 - :weight :medium} - account-address]]]) - -(def account (quo.theme/with-theme account-internal)) +(defn account + [{:keys [account-name account-address avatar-icon customization-color on-press-menu]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/card} + [card-background + {:customization-color customization-color + :theme theme}] + [rn/view {:style style/card-top} + [avatar + {:color customization-color + :icon avatar-icon} + theme] + [menu-button + {:on-press on-press-menu + :theme theme}]] + [rn/view {:style style/card-bottom} + [text/text + {:size :paragraph-1 + :weight :semi-bold} + account-name] + [text/text + {:style (style/address-text theme) + :size :paragraph-2 + :weight :medium} + account-address]]])) diff --git a/src/quo/components/settings/category/reorder/view.cljs b/src/quo/components/settings/category/reorder/view.cljs index fc72a9a071b..0e57ed90c16 100644 --- a/src/quo/components/settings/category/reorder/view.cljs +++ b/src/quo/components/settings/category/reorder/view.cljs @@ -13,7 +13,7 @@ (defn reorder-category [{:keys [label data blur? container-style]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [atom-data set-atom-data] (rn/use-state data) render-fn (rn/use-callback (fn [item _ _ _ _ drag] diff --git a/src/quo/components/settings/category/settings/view.cljs b/src/quo/components/settings/category/settings/view.cljs index e347d2de41f..ee228d584c1 100644 --- a/src/quo/components/settings/category/settings/view.cljs +++ b/src/quo/components/settings/category/settings/view.cljs @@ -6,22 +6,21 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- category-internal +(defn settings-category [{:keys [label data container-style] :as props}] - (let [settings-item (filter identity data)] + (let [theme (quo.theme/use-theme) + settings-item (filter identity data)] [rn/view {:style (merge (style/container label) container-style)} (when label [text/text {:weight :medium :size :paragraph-2 - :style (style/label props)} + :style (style/label props theme)} label]) - [rn/view {:style (style/settings-items props)} + [rn/view {:style (style/settings-items props theme)} (for [item settings-item] ^{:key item} [:<> [settings-item/view item] (when-not (= item (last settings-item)) [rn/view {:style (style/settings-separator props)}])])]])) - -(def settings-category (quo.theme/with-theme category-internal)) diff --git a/src/quo/components/settings/category/style.cljs b/src/quo/components/settings/category/style.cljs index 3aad999e0c7..92d031365ba 100644 --- a/src/quo/components/settings/category/style.cljs +++ b/src/quo/components/settings/category/style.cljs @@ -11,7 +11,7 @@ :padding-bottom 8}) (defn settings-items - [{:keys [label blur? theme]}] + [{:keys [label blur?]} theme] {:margin-top (if label 12 4) :border-radius 16 :background-color (if blur? @@ -23,7 +23,7 @@ (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) (defn label - [{:keys [blur? theme]}] + [{:keys [blur?]} theme] {:color (if blur? colors/white-opa-40 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}) diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index 452a7bb424d..2bd80f7b2f1 100644 --- a/src/quo/components/settings/data_item/view.cljs +++ b/src/quo/components/settings/data_item/view.cljs @@ -12,82 +12,85 @@ [utils.i18n :as i18n])) (defn- left-loading - [{:keys [size blur? theme]}] - [rn/view {:style (style/loading-container size blur? theme)}]) + [{:keys [size blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style (style/loading-container size blur? theme)}])) (defn- left-subtitle - [{:keys [theme size subtitle-type icon icon-color blur? subtitle customization-color emoji - network-image] + [{:keys [size subtitle-type icon icon-color blur? subtitle customization-color emoji network-image] :or {subtitle-type :default}}] - [rn/view {:style style/subtitle-container} - (when (and subtitle-type (not= :small size)) - [rn/view {:style (style/subtitle-icon-container subtitle-type)} - (case subtitle-type - :icon [icons/icon icon - {:accessibility-label :subtitle-type-icon - :size 16 - :color icon-color}] - :account [account-avatar/view - {:customization-color customization-color - :size 16 - :emoji emoji - :type :default}] - :network [rn/image - {:accessibility-label :subtitle-type-image - :source network-image - :style style/image}] - nil)]) - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/description blur? theme)} - subtitle]]) + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/subtitle-container} + (when (and subtitle-type (not= :small size)) + [rn/view {:style (style/subtitle-icon-container subtitle-type)} + (case subtitle-type + :icon [icons/icon icon + {:accessibility-label :subtitle-type-icon + :size 16 + :color icon-color}] + :account [account-avatar/view + {:customization-color customization-color + :size 16 + :emoji emoji + :type :default}] + :network [rn/image + {:accessibility-label :subtitle-type-image + :source network-image + :style style/image}] + nil)]) + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/description blur? theme)} + subtitle]])) (defn- left-title - [{:keys [title label size blur? theme]}] - [rn/view {:style style/title-container} - [text/text - {:weight :regular - :size :paragraph-2 - :style (style/title blur? theme)} - title] - (when (and (= :graph label) (not= :small size)) + [{:keys [title label size blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/title-container} [text/text {:weight :regular - :size :label + :size :paragraph-2 :style (style/title blur? theme)} - (i18n/label :t/days)])]) + title] + (when (and (= :graph label) (not= :small size)) + [text/text + {:weight :regular + :size :label + :style (style/title blur? theme)} + (i18n/label :t/days)])])) (defn- left-side "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`" - [{:keys [theme title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color + [{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color customization-color network-image emoji] :as props}] - [rn/view {:style style/left-side} - [left-title - {:title title - :label label - :size size - :blur? blur? - :theme theme}] - (if (= status :loading) - [left-loading - {:size size + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/left-side} + [left-title + {:title title + :label label + :size size :blur? blur? :theme theme}] - (if custom-subtitle - [custom-subtitle props] - [left-subtitle - {:theme theme - :size size - :subtitle-type subtitle-type - :icon icon - :icon-color icon-color - :blur? blur? - :subtitle subtitle - :customization-color customization-color - :emoji emoji - :network-image network-image}]))]) + (if (= status :loading) + [left-loading + {:size size + :blur? blur? + :theme theme}] + (if custom-subtitle + [custom-subtitle props] + [left-subtitle + {:theme theme + :size size + :subtitle-type subtitle-type + :icon icon + :icon-color icon-color + :blur? blur? + :subtitle subtitle + :customization-color customization-color + :emoji emoji + :network-image network-image}]))])) (defn- right-side [{:keys [label icon-right? right-icon icon-color communities-list]}] @@ -108,27 +111,26 @@ :color icon-color :size 20}]])]) -(def view-internal - (fn [{:keys [blur? card? icon-right? right-icon label status size theme on-press communities-list - container-style] - :as props}] - (let [icon-color (if (or blur? (= :dark theme)) - colors/neutral-40 - colors/neutral-50)] - (if (= :graph label) - [not-implemented/view {:blur? blur?}] - [rn/pressable - {:accessibility-label :data-item - :disabled (not icon-right?) - :on-press on-press - :style (merge (style/container size card? blur? theme) container-style)} - [left-side props] - (when (and (= :default status) (not= :small size)) - [right-side - {:label label - :icon-right? icon-right? - :right-icon right-icon - :icon-color icon-color - :communities-list communities-list}])])))) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [blur? card? icon-right? right-icon label status size on-press communities-list + container-style] + :as props}] + (let [theme (quo.theme/use-theme) + icon-color (if (or blur? (= :dark theme)) + colors/neutral-40 + colors/neutral-50)] + (if (= :graph label) + [not-implemented/view {:blur? blur?}] + [rn/pressable + {:accessibility-label :data-item + :disabled (not icon-right?) + :on-press on-press + :style (merge (style/container size card? blur? theme) container-style)} + [left-side props] + (when (and (= :default status) (not= :small size)) + [right-side + {:label label + :icon-right? icon-right? + :right-icon right-icon + :icon-color icon-color + :communities-list communities-list}])]))) diff --git a/src/quo/components/settings/page_setting/view.cljs b/src/quo/components/settings/page_setting/view.cljs index a3775446067..9ace4e4b25e 100644 --- a/src/quo/components/settings/page_setting/view.cljs +++ b/src/quo/components/settings/page_setting/view.cljs @@ -8,7 +8,7 @@ (defn page-setting [{:keys [setting-text customization-color checked? container-style on-change disabled?]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style (merge (style/container theme) container-style)} diff --git a/src/quo/components/settings/privacy_option/view.cljs b/src/quo/components/settings/privacy_option/view.cljs index 5032f649171..f3f9499de28 100644 --- a/src/quo/components/settings/privacy_option/view.cljs +++ b/src/quo/components/settings/privacy_option/view.cljs @@ -49,28 +49,27 @@ [text/text {:weight :semi-bold} label]] [selection-indicator active?]]) -(defn- view-internal - [{:keys [active? header footer list-items icon on-select on-toggle theme] +(defn view + [{:keys [active? header footer list-items icon on-select on-toggle] :or {icon :i/world active? false}}] - [rn/touchable-without-feedback - {:on-press on-select - :accessibility-label :privacy-option-card - :testID :privacy-option-card} - [rn/view (style/privacy-option-card active? theme) - [card-header - {:theme theme - :active? active? - :icon icon - :label header}] - [unordered-list - {:theme theme - :container-style (when-not footer {:margin-bottom 8})} list-items] - (when footer - [card-footer - {:theme theme - :active? active? - :label footer - :on-toggle on-toggle}])]]) - -(def view (quo.theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/touchable-without-feedback + {:on-press on-select + :accessibility-label :privacy-option-card + :testID :privacy-option-card} + [rn/view (style/privacy-option-card active? theme) + [card-header + {:theme theme + :active? active? + :icon icon + :label header}] + [unordered-list + {:theme theme + :container-style (when-not footer {:margin-bottom 8})} list-items] + (when footer + [card-footer + {:theme theme + :active? active? + :label footer + :on-toggle on-toggle}])]])) diff --git a/src/quo/components/settings/reorder_item/items/item.cljs b/src/quo/components/settings/reorder_item/items/item.cljs index 674b7dbb7cc..cb7e817c107 100644 --- a/src/quo/components/settings/reorder_item/items/item.cljs +++ b/src/quo/components/settings/reorder_item/items/item.cljs @@ -8,49 +8,40 @@ [react-native.core :as rn] [react-native.fast-image :as fast-image])) -(defn- view-internal +(defn view [{:keys - [title - subtitle - image - image-size - right-text - right-icon - on-press - theme]} + [title subtitle image image-size right-text right-icon on-press]} blur? drag] - [rn/touchable-opacity - {:on-press on-press - :on-long-press drag - :style (merge (style/item-container blur?) (when subtitle style/item-container-extended))} - [icon/icon :main-icons/drag - {:color (colors/theme-colors - colors/neutral-50 - colors/neutral-40)}] - [rn/view - {:style style/body-container} - [rn/view - {:style style/image-container} - [fast-image/fast-image - {:source image - :style (style/image image-size)}]] - [rn/view - {:style style/text-container} + (let [theme (quo.theme/use-theme)] + [rn/touchable-opacity + {:on-press on-press + :on-long-press drag + :style (merge (style/item-container blur?) (when subtitle style/item-container-extended))} + [icon/icon :main-icons/drag + {:color (colors/theme-colors + colors/neutral-50 + colors/neutral-40)}] [rn/view - [text/text - {:weight :medium} - title] - (when subtitle + {:style style/body-container} + [rn/view + {:style style/image-container} + [fast-image/fast-image + {:source image + :style (style/image image-size)}]] + [rn/view + {:style style/text-container} + [rn/view [text/text - {:style style/item-subtitle - :size :paragraph-2} - subtitle])] - (when right-text - [text/text {:style style/right-text} right-text]) - (when right-icon - [rn/view {:style style/right-icon-container} [icon/icon right-icon (style/right-icon)]])]] - [icon/icon :tiny-icons/chevron-right (style/chevron theme)]]) - - -(def view (quo.theme/with-theme view-internal)) + {:weight :medium} + title] + (when subtitle + [text/text + {:style style/item-subtitle + :size :paragraph-2} + subtitle])] + (when right-text + [text/text {:style style/right-text} right-text]) + (when right-icon + [rn/view {:style style/right-icon-container} [icon/icon right-icon (style/right-icon)]])]] + [icon/icon :tiny-icons/chevron-right (style/chevron theme)]])) diff --git a/src/quo/components/settings/section_label/view.cljs b/src/quo/components/settings/section_label/view.cljs index e664e49f765..345cd76662a 100644 --- a/src/quo/components/settings/section_label/view.cljs +++ b/src/quo/components/settings/section_label/view.cljs @@ -20,14 +20,15 @@ description? (assoc :margin-bottom 2))) -(defn- view-internal +(defn view "Props: - section - the label of the section - description (optional) - description of the section - blur? (optional) - use blurred styling - theme - light or dark" - [{:keys [section description blur? theme container-style]}] - (let [color (get-text-color theme (or blur? false)) + [{:keys [section description blur? container-style]}] + (let [theme (quo.theme/use-theme) + color (get-text-color theme (or blur? false)) description? (not (nil? description)) root-view (if (seq container-style) rn/view :<>)] [root-view {:style container-style} @@ -43,5 +44,3 @@ :weight :regular :style {:color color}} description])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/settings/settings_item/view.cljs b/src/quo/components/settings/settings_item/view.cljs index 4dcd38334a1..5ebc7f53ae7 100644 --- a/src/quo/components/settings/settings_item/view.cljs +++ b/src/quo/components/settings/settings_item/view.cljs @@ -16,8 +16,9 @@ [utils.i18n :as i18n])) (defn status-description - [{:keys [description-props blur? theme]}] - (let [{:keys [online? text]} description-props] + [{:keys [description-props blur?]}] + (let [theme (quo.theme/use-theme) + {:keys [online? text]} description-props] [rn/view {:style style/status-container} [rn/view {:style (style/status-dot online? blur?)}] [text/text @@ -26,8 +27,9 @@ (if online? (i18n/label :t/online-now) text)]])) (defn text-description - [{:keys [description-props blur? theme]}] - (let [{:keys [text icon]} description-props] + [{:keys [description-props blur?]}] + (let [theme (quo.theme/use-theme) + {:keys [text icon]} description-props] [rn/view {:style (style/sub-container :center)} [text/text @@ -49,14 +51,15 @@ nil)) (defn image-component - [{:keys [image image-props description tag blur? theme]}] - [rn/view - {:style (style/image-container description tag image)} - (case image - :icon [icon/icon image-props (style/color blur? theme)] - :avatar [user-avatar/user-avatar image-props] - :icon-avatar [icon-avatar/icon-avatar image-props] - nil)]) + [{:keys [image image-props description tag blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (style/image-container description tag image)} + (case image + :icon [icon/icon image-props (style/color blur? theme)] + :avatar [user-avatar/user-avatar image-props] + :icon-avatar [icon-avatar/icon-avatar image-props] + nil)])) (defn tag-component [{:keys [tag tag-props]}] @@ -101,7 +104,7 @@ :selector [selectors/view action-props] nil)]) -(defn- internal-view +(defn view [{:keys [title on-press action-props accessibility-label blur? container-style] :as props}] [rn/pressable {:style (merge style/container container-style) @@ -118,5 +121,3 @@ [rn/view {:style (style/sub-container (:alignment action-props))} [label-component props] [action-component props]]]) - -(def view (quo.theme/with-theme internal-view)) diff --git a/src/quo/components/share/share_qr_code/view.cljs b/src/quo/components/share/share_qr_code/view.cljs index a3271986338..7d86ef94d81 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/src/quo/components/share/share_qr_code/view.cljs @@ -155,7 +155,7 @@ [share-button {:on-press on-share-press}]] (when (not= share-qr-type :profile) [header props]) - [quo.theme/provider {:theme :light} + [quo.theme/provider :light [qr-code/view {:qr-image-uri qr-image-uri :size (style/qr-code-size component-width) @@ -185,7 +185,7 @@ props (-> props (assoc :component-width (or provided-width calculated-width)) (clojure.set/rename-keys {:type :share-qr-type}))] - [quo.theme/provider {:theme :dark} + [quo.theme/provider :dark [rn/view {:accessibility-label :share-qr-code :style style/outer-container diff --git a/src/quo/components/tabs/account_selector.cljs b/src/quo/components/tabs/account_selector.cljs index e5f5ca2aa04..52a17e771b0 100644 --- a/src/quo/components/tabs/account_selector.cljs +++ b/src/quo/components/tabs/account_selector.cljs @@ -3,7 +3,7 @@ [quo.components.avatars.account-avatar.view :as account-avatar] [quo.components.markdown.text :as quo] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (def themes @@ -35,7 +35,7 @@ (defn get-color-by-type [type k] - (get-in themes [(theme/get-theme) type k])) + (get-in themes [(quo.theme/get-theme) type k])) (defn account-selector "[account-selector opts] diff --git a/src/quo/components/tabs/segmented_tab.cljs b/src/quo/components/tabs/segmented_tab.cljs index de935660465..3aac6accfae 100644 --- a/src/quo/components/tabs/segmented_tab.cljs +++ b/src/quo/components/tabs/segmented_tab.cljs @@ -16,7 +16,7 @@ (defn segmented-control [{:keys [data size blur? container-style item-container-style active-item-container-style default-active on-change]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [active-tab-id set-active-tab-id] (rn/use-state default-active) on-press (rn/use-callback diff --git a/src/quo/components/tabs/tab/view.cljs b/src/quo/components/tabs/tab/view.cljs index ffce2e235d2..b068716f45a 100644 --- a/src/quo/components/tabs/tab/view.cljs +++ b/src/quo/components/tabs/tab/view.cljs @@ -48,24 +48,13 @@ (vector? children) children)]) -(defn- view-internal - [{:keys [accessibility-label - active - before - item-container-style - active-item-container-style - blur? - disabled - id - on-press - theme - segmented? - size - notification-dot? - customization-color] +(defn view + [{:keys [accessibility-label active before item-container-style active-item-container-style blur? + disabled id on-press segmented? size notification-dot? customization-color] :or {size 32}} children] - (let [show-notification-dot? (and notification-dot? (= size 32)) + (let [theme (quo.theme/use-theme) + show-notification-dot? (and notification-dot? (= size 32)) {:keys [icon-color background-color label]} (style/by-theme {:theme theme @@ -104,5 +93,3 @@ :height size :disabled disabled :background-color background-color}])]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/tags/collectible_tag/view.cljs b/src/quo/components/tags/collectible_tag/view.cljs index 96852903a3e..3bb408fa66f 100644 --- a/src/quo/components/tags/collectible_tag/view.cljs +++ b/src/quo/components/tags/collectible_tag/view.cljs @@ -12,7 +12,7 @@ (defn- view-internal [{:keys [options blur? collectible-img-src collectible-name collectible-id] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [container-width set-container-width] (rn/use-state 0) on-layout (rn/use-callback diff --git a/src/quo/components/tags/context_tag/schema.cljs b/src/quo/components/tags/context_tag/schema.cljs index 0fe884beaaf..15bf8b7ac0c 100644 --- a/src/quo/components/tags/context_tag/schema.cljs +++ b/src/quo/components/tags/context_tag/schema.cljs @@ -9,7 +9,6 @@ :collectible :address :icon :audio]]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:container-style {:optional true} [:maybe :map]] - [:theme :schema.common/theme] [:blur? {:optional true} [:maybe :boolean]] [:state {:optional true} [:maybe [:enum :selected :default]]]]) diff --git a/src/quo/components/tags/context_tag/view.cljs b/src/quo/components/tags/context_tag/view.cljs index 5aa3fdf3008..0d434074a97 100644 --- a/src/quo/components/tags/context_tag/view.cljs +++ b/src/quo/components/tags/context_tag/view.cljs @@ -76,89 +76,88 @@ context]]]) (defn- view-internal - [{:keys [theme type size state blur? customization-color profile-picture full-name users + [{:keys [type size state blur? customization-color profile-picture full-name users group-name amount token network-logo network-name networks account-name emoji collectible collectible-name collectible-number duration container-style] :or {customization-color :blue type :default state :default} :as props}] - [rn/view {:style (merge {:align-items :flex-start} container-style)} - [rn/view - {:style (style/container {:theme theme - :type type - :size size - :state state - :blur? blur? - :customization-color customization-color}) - :accessibility-label :context-tag} - (case type - :default - [tag-skeleton {:theme theme :size size :text full-name} - [user-avatar/user-avatar - {:full-name full-name - :profile-picture profile-picture - :size (if (= size 24) :xxs 28) - :status-indicator? false - :ring? false - :customization-color customization-color}]] - - :multiuser - [preview-list/view {:type :user :size :size-20} - users] - - :multinetwork - [preview-list/view {:type :network :size :size-20} - networks] - - :audio - [tag-skeleton {:theme theme :text (str duration)} - [rn/view {:style (style/audio-tag-icon-container customization-color theme)} - [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]] - - :group - [tag-skeleton {:theme theme :size size :text group-name} - [group-avatar/view - {:icon-name :i/members - :size (if (= size 24) :size-20 :size-28) - :customization-color (colors/custom-color customization-color 50)}]] - - (:channel :community) - [communities-tag (assoc props :channel? (= type :channel))] - - :token - [tag-skeleton {:theme theme :size size :text (str amount " " token)} - [token/view - {:style (style/token-logo size) - :token token - :size (if (= size 24) :size-20 :size-28)}]] - - :network - [tag-skeleton {:theme theme :size size :text network-name} - [rn/image {:style (style/circle-logo size) :source network-logo}]] - - :collectible - [tag-skeleton - {:theme theme - :size size - :text (str collectible-name " #" collectible-number)} - [rn/image {:style (style/rounded-logo size) :source collectible}]] - - :account - [tag-skeleton {:theme theme :size size :text account-name} - [account-avatar/view - {:customization-color customization-color - :emoji emoji - :size (if (= size 24) 20 28)}]] - - :address - [address-tag props] - - :icon - [icon-tag props] - - nil)]]) - -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) + (let [theme (quo.theme/use-theme)] + [rn/view {:style (merge {:align-items :flex-start} container-style)} + [rn/view + {:style (style/container {:theme theme + :type type + :size size + :state state + :blur? blur? + :customization-color customization-color}) + :accessibility-label :context-tag} + (case type + :default + [tag-skeleton {:theme theme :size size :text full-name} + [user-avatar/user-avatar + {:full-name full-name + :profile-picture profile-picture + :size (if (= size 24) :xxs 28) + :status-indicator? false + :ring? false + :customization-color customization-color}]] + + :multiuser + [preview-list/view {:type :user :size :size-20} + users] + + :multinetwork + [preview-list/view {:type :network :size :size-20} + networks] + + :audio + [tag-skeleton {:theme theme :text (str duration)} + [rn/view {:style (style/audio-tag-icon-container customization-color theme)} + [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]] + + :group + [tag-skeleton {:theme theme :size size :text group-name} + [group-avatar/view + {:icon-name :i/members + :size (if (= size 24) :size-20 :size-28) + :customization-color (colors/custom-color customization-color 50)}]] + + (:channel :community) + [communities-tag (assoc props :channel? (= type :channel))] + + :token + [tag-skeleton {:theme theme :size size :text (str amount " " token)} + [token/view + {:style (style/token-logo size) + :token token + :size (if (= size 24) :size-20 :size-28)}]] + + :network + [tag-skeleton {:theme theme :size size :text network-name} + [rn/image {:style (style/circle-logo size) :source network-logo}]] + + :collectible + [tag-skeleton + {:theme theme + :size size + :text (str collectible-name " #" collectible-number)} + [rn/image {:style (style/rounded-logo size) :source collectible}]] + + :account + [tag-skeleton {:theme theme :size size :text account-name} + [account-avatar/view + {:customization-color customization-color + :emoji emoji + :size (if (= size 24) 20 28)}]] + + :address + [address-tag props] + + :icon + [icon-tag props] + + nil)]])) + +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/tags/network_tags/view.cljs b/src/quo/components/tags/network_tags/view.cljs index 059e46bb665..189bd2123fa 100644 --- a/src/quo/components/tags/network_tags/view.cljs +++ b/src/quo/components/tags/network_tags/view.cljs @@ -6,23 +6,22 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal - [{:keys [title networks status theme blur? container-style] :or {status :default}}] - [rn/view - {:style (merge (style/container {:status status - :theme theme - :blur? blur?}) - container-style)} - [preview-list/view - {:type :network - :number (count networks) - :size :size-16} - networks] - [text/text - {:weight :medium - :size :paragraph-2 - :style (style/title-style {:status status - :theme theme})} - title]]) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [title networks status blur? container-style] :or {status :default}}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container {:status status + :theme theme + :blur? blur?}) + container-style)} + [preview-list/view + {:type :network + :number (count networks) + :size :size-16} + networks] + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/title-style {:status status + :theme theme})} + title]])) diff --git a/src/quo/components/tags/number_tag/style.cljs b/src/quo/components/tags/number_tag/style.cljs index 9c1fc83e84d..1d1fff83061 100644 --- a/src/quo/components/tags/number_tag/style.cljs +++ b/src/quo/components/tags/number_tag/style.cljs @@ -56,7 +56,7 @@ (get-in sizes [size (if widen? :width-extra :size)]))) (defn container - [{:keys [type number size blur? theme container-style]}] + [{:keys [type number size blur? container-style]} theme] {:style (assoc container-style :width (get-width size number) :height (get-in sizes [size :size]) diff --git a/src/quo/components/tags/number_tag/view.cljs b/src/quo/components/tags/number_tag/view.cljs index dc82d416ae1..174561b8f67 100644 --- a/src/quo/components/tags/number_tag/view.cljs +++ b/src/quo/components/tags/number_tag/view.cljs @@ -6,11 +6,12 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn view-internal - [{:keys [number size blur? theme] :as props}] - (let [size-value (get-in style/sizes [size :size]) +(defn view + [{:keys [number size blur?] :as props}] + (let [theme (quo.theme/use-theme) + size-value (get-in style/sizes [size :size]) icon-size (get-in style/sizes [size :icon-size])] - [rn/view (style/container props) + [rn/view (style/container props theme) (if (and (> size-value 20) (< (count number) 3)) [text/text {:size (if (= size :size-32) @@ -22,5 +23,3 @@ [icons/icon :i/options {:size icon-size :color (style/get-color blur? theme)}])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/tags/status_tags.cljs b/src/quo/components/tags/status_tags.cljs index b438fdec584..457e3c8dbc4 100644 --- a/src/quo/components/tags/status_tags.cljs +++ b/src/quo/components/tags/status_tags.cljs @@ -112,20 +112,19 @@ colors/white-opa-70 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]) -(defn- status-tag-internal - [{:keys [status size theme label blur? no-icon? container-style]}] +(defn status-tag + [{:keys [status size label blur? no-icon? container-style]}] (when status - (when-let [status-component (case (:type status) - :positive positive - :negative negative - :pending pending - nil)] - [status-component - size - theme - label - blur? - no-icon? - container-style]))) - -(def status-tag (quo.theme/with-theme status-tag-internal)) + (let [theme (quo.theme/use-theme)] + (when-let [status-component (case (:type status) + :positive positive + :negative negative + :pending pending + nil)] + [status-component + size + theme + label + blur? + no-icon? + container-style])))) diff --git a/src/quo/components/tags/summary_tag/style.cljs b/src/quo/components/tags/summary_tag/style.cljs index bd18f37e4d3..f33654ff822 100644 --- a/src/quo/components/tags/summary_tag/style.cljs +++ b/src/quo/components/tags/summary_tag/style.cljs @@ -3,7 +3,7 @@ [quo.foundations.colors :as colors])) (defn main - [{:keys [type theme customization-color]}] + [{:keys [type customization-color]} theme] {:justify-content :center :align-items :center :height 32 diff --git a/src/quo/components/tags/summary_tag/view.cljs b/src/quo/components/tags/summary_tag/view.cljs index e26de4f8356..c652c5a17df 100644 --- a/src/quo/components/tags/summary_tag/view.cljs +++ b/src/quo/components/tags/summary_tag/view.cljs @@ -45,7 +45,7 @@ :style style/token-image}] nil)) -(defn- view-internal +(defn view "Options: - :label - string - tag label - :customization-color - color - It will be passed down to components that @@ -54,17 +54,16 @@ - :emoji - string - emoji used for displaying account avatar - :image-source - resource - image to display on :network, :collectible and :user - :theme - :light / :dark" - [{:keys [label customization-color type theme] + [{:keys [label customization-color type] :as props :or {customization-color colors/neutral-80-opa-5}}] - [rn/view - {:accessibility-label :container - :style (style/main (assoc props :customization-color customization-color))} - [left-view props] - [text/text - {:style (style/label type theme) - :weight :semi-bold - :size :heading-1} - label]]) - -(def view (quo.theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :container + :style (style/main (assoc props :customization-color customization-color) theme)} + [left-view props] + [text/text + {:style (style/label type theme) + :weight :semi-bold + :size :heading-1} + label]])) diff --git a/src/quo/components/tags/tag.cljs b/src/quo/components/tags/tag.cljs index 4bca27bd28b..2b0ac6b5b57 100644 --- a/src/quo/components/tags/tag.cljs +++ b/src/quo/components/tags/tag.cljs @@ -73,7 +73,7 @@ text-color) label])]) -(defn tag-internal +(defn tag "opts {:type :icon/:emoji/:label :label string @@ -89,9 +89,10 @@ - `type` can be icon or emoji with or without a tag label - `labelled` boolean: is true if tag has label else false" [{:keys [id on-press disabled? size active accessibility-label label resource type - labelled? blurred? icon-color theme] + labelled? blurred? icon-color] :or {size 32}}] - (let [state (cond + (let [theme (quo.theme/use-theme) + state (cond disabled? :disabled active :active :else :default) @@ -112,5 +113,3 @@ :type type :labelled? (if (= type :label) true labelled?)} [tag-resources size type resource icon-color label text-color labelled?]]])) - -(def tag (quo.theme/with-theme tag-internal)) diff --git a/src/quo/components/tags/tiny_tag/style.cljs b/src/quo/components/tags/tiny_tag/style.cljs index ba25310546a..e7c7236792a 100644 --- a/src/quo/components/tags/tiny_tag/style.cljs +++ b/src/quo/components/tags/tiny_tag/style.cljs @@ -20,7 +20,7 @@ :height 16}) (defn inner - [{:keys [blur? theme]}] + [{:keys [blur?]} theme] {:border-width 1 :border-radius 6 :border-color (get-border-color blur? theme) @@ -30,5 +30,5 @@ :padding-right 3}) (defn label - [{:keys [blur? theme]}] + [{:keys [blur?]} theme] {:color (get-label-color blur? theme)}) diff --git a/src/quo/components/tags/tiny_tag/view.cljs b/src/quo/components/tags/tiny_tag/view.cljs index 5de5cdd90e7..660d78a1159 100644 --- a/src/quo/components/tags/tiny_tag/view.cljs +++ b/src/quo/components/tags/tiny_tag/view.cljs @@ -5,14 +5,13 @@ [quo.theme :as quo.theme] [react-native.core :as rn])) -(defn- view-internal +(defn view [{:keys [label] :as props}] - [rn/view {:style style/main} - [rn/view {:style (style/inner props)} - [text/text - {:style (style/label props) - :weight :medium - :size :label - :align :center} label]]]) - -(def view (quo.theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/main} + [rn/view {:style (style/inner props theme)} + [text/text + {:style (style/label props theme) + :weight :medium + :size :label + :align :center} label]]])) diff --git a/src/quo/components/tags/token_tag/view.cljs b/src/quo/components/tags/token_tag/view.cljs index c20f5ed8a0d..d65985420b6 100644 --- a/src/quo/components/tags/token_tag/view.cljs +++ b/src/quo/components/tags/token_tag/view.cljs @@ -19,7 +19,7 @@ - :token-symbol - string" [{:keys [options size blur? token-value token-img-src token-symbol] :or {size :size-24}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [container-width set-container-width] (rn/use-state 0) on-layout (rn/use-callback #(set-container-width diff --git a/src/quo/components/text_combinations/channel_name/view.cljs b/src/quo/components/text_combinations/channel_name/view.cljs index f50c1c9286e..dfbc77c62a6 100644 --- a/src/quo/components/text_combinations/channel_name/view.cljs +++ b/src/quo/components/text_combinations/channel_name/view.cljs @@ -6,28 +6,29 @@ [react-native.core :as rn])) (defn icons - [{:keys [theme unlocked? muted? blur?]}] - [rn/view {:style style/icons-container} - (when unlocked? - [rn/view - {:style style/icon - :accessibility-label :channel-name-unlocked-icon} - [icon/icon :i/unlocked - {:color (style/unlocked-icon-color theme blur?) - :size 20}]]) + [{:keys [unlocked? muted? blur?]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/icons-container} + (when unlocked? + [rn/view + {:style style/icon + :accessibility-label :channel-name-unlocked-icon} + [icon/icon :i/unlocked + {:color (style/unlocked-icon-color theme blur?) + :size 20}]]) - (when (and unlocked? muted?) - [rn/view {:style style/icons-gap}]) + (when (and unlocked? muted?) + [rn/view {:style style/icons-gap}]) - (when muted? - [rn/view - {:style style/icon - :accessibility-label :channel-name-muted-icon} - [icon/icon :i/muted - {:color (style/muted-icon-color theme blur?) - :size 20}]])]) + (when muted? + [rn/view + {:style style/icon + :accessibility-label :channel-name-muted-icon} + [icon/icon :i/muted + {:color (style/muted-icon-color theme blur?) + :size 20}]])])) -(defn- view-internal +(defn view [{:keys [unlocked? muted? channel-name] :as props}] [rn/view {:style style/container} [text/text @@ -36,5 +37,3 @@ (str "# " channel-name)] (when (or unlocked? muted?) [icons props])]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/text_combinations/page_top/view.cljs b/src/quo/components/text_combinations/page_top/view.cljs index 3062b7439a9..a78e0a49af8 100644 --- a/src/quo/components/text_combinations/page_top/view.cljs +++ b/src/quo/components/text_combinations/page_top/view.cljs @@ -118,35 +118,34 @@ [rn/text {:adjusts-font-size-to-fit true} emoji]])) emojis)) -(defn- view-internal - [{:keys [theme description title input blur? input-props container-style] +(defn view + [{:keys [description title input blur? input-props container-style] emojis :emoji-dash :as props}] - [rn/view {:style container-style} - [rn/view {:style style/top-container} - (when (or title input) - [header props]) - (when description - [description-container props]) - (when emojis - [emoji-dash emojis])] - (when input - [rn/view {:style (style/input-container theme input blur?)} - (case input - :search - [search-input/search-input - (assoc input-props - :container-style style/search-input-container - :blur? blur?)] + (let [theme (quo.theme/use-theme)] + [rn/view {:style container-style} + [rn/view {:style style/top-container} + (when (or title input) + [header props]) + (when description + [description-container props]) + (when emojis + [emoji-dash emojis])] + (when input + [rn/view {:style (style/input-container theme input blur?)} + (case input + :search + [search-input/search-input + (assoc input-props + :container-style style/search-input-container + :blur? blur?)] - :address - [address-input/address-input (assoc input-props :blur? blur?)] + :address + [address-input/address-input (assoc input-props :blur? blur?)] - :recovery-phrase - [recovery-phrase/recovery-phrase-input - (assoc input-props - :container-style style/recovery-phrase-container - :blur? blur?)] - nil)])]) - -(def view (quo.theme/with-theme view-internal)) + :recovery-phrase + [recovery-phrase/recovery-phrase-input + (assoc input-props + :container-style style/recovery-phrase-container + :blur? blur?)] + nil)])])) diff --git a/src/quo/components/text_combinations/standard_title/view.cljs b/src/quo/components/text_combinations/standard_title/view.cljs index 65312a81201..609b4eeacc9 100644 --- a/src/quo/components/text_combinations/standard_title/view.cljs +++ b/src/quo/components/text_combinations/standard_title/view.cljs @@ -16,15 +16,16 @@ parsed-number))) (defn- right-counter - [{:keys [blur? theme counter-left counter-right]}] - [rn/view {:style style/right-counter} - [text/text - {:size :paragraph-2 - :weight :regular - :style (style/right-counter-text blur? theme)} - (str (get-counter-number counter-left) - "/" - (get-counter-number counter-right))]]) + [{:keys [blur? counter-left counter-right]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/right-counter} + [text/text + {:size :paragraph-2 + :weight :regular + :style (style/right-counter-text blur? theme)} + (str (get-counter-number counter-left) + "/" + (get-counter-number counter-right))]])) (defn- right-action [{:keys [customization-color on-press icon] @@ -38,9 +39,10 @@ icon]) (defn- right-tag - [{:keys [theme blur? on-press icon label] + [{:keys [blur? on-press icon label] :or {icon :i/placeholder}}] - (let [labelled? (not (string/blank? label))] + (let [theme (quo.theme/use-theme) + labelled? (not (string/blank? label))] [tag/tag {:accessibility-label :standard-title-tag :size 32 @@ -52,7 +54,7 @@ :blurred? blur? :icon-color (style/right-tag-icon-color blur? theme)}])) -(defn- view-internal +(defn view [{:keys [title right accessibility-label] :as props}] [rn/view {:style style/container} [text/text @@ -67,5 +69,3 @@ :action [right-action props] :tag [right-tag props] nil)])]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/text_combinations/username/view.cljs b/src/quo/components/text_combinations/username/view.cljs index 5c1450a9e45..9932c0e4472 100644 --- a/src/quo/components/text_combinations/username/view.cljs +++ b/src/quo/components/text_combinations/username/view.cljs @@ -7,35 +7,37 @@ [react-native.core :as rn])) (defn- username-text - [{:keys [theme name-type username accessibility-label blur?] + [{:keys [name-type username accessibility-label blur?] real-name :name}] - [rn/view {:style style/username-text-container} - [text/text - {:size :heading-1 - :accessibility-label accessibility-label - :weight :semi-bold} - username] - (when (= name-type :nickname) - [:<> - [text/text - {:style (style/real-name-dot theme blur?) - :size :paragraph-1 - :weight :medium} - "∙"] - [text/text - {:style (style/real-name-text theme blur?) - :size :paragraph-1 - :accessibility-label :real-name - :weight :medium - :number-of-lines 1} - real-name]])]) + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/username-text-container} + [text/text + {:size :heading-1 + :accessibility-label accessibility-label + :weight :semi-bold} + username] + (when (= name-type :nickname) + [:<> + [text/text + {:style (style/real-name-dot theme blur?) + :size :paragraph-1 + :weight :medium} + "∙"] + [text/text + {:style (style/real-name-text theme blur?) + :size :paragraph-1 + :accessibility-label :real-name + :weight :medium + :number-of-lines 1} + real-name]])])) (defn- icon-20 - [icon-name theme color] - [icon/icon icon-name - {:accessibility-label :username-status-icon - :size 20 - :color (colors/resolve-color color theme)}]) + [icon-name color] + (let [theme (quo.theme/use-theme)] + [icon/icon icon-name + {:accessibility-label :username-status-icon + :size 20 + :color (colors/resolve-color color theme)}])) (defn status-icon [{:keys [theme name-type status] @@ -51,10 +53,8 @@ [icon-20 :i/contact theme :blue]] nil)]) -(defn view-internal +(defn view [props] [rn/view {:style style/container} [username-text props] [status-icon props]]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/text_combinations/view.cljs b/src/quo/components/text_combinations/view.cljs index 6a412d93b01..422db85e779 100644 --- a/src/quo/components/text_combinations/view.cljs +++ b/src/quo/components/text_combinations/view.cljs @@ -3,7 +3,7 @@ [quo.components.buttons.button.view :as button] [quo.components.markdown.text :as text] [quo.components.text-combinations.style :as style] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn])) (defn icon @@ -20,58 +20,46 @@ :width size :height size}}])) -(defn view-internal - [{:keys [container-style - title - theme - title-number-of-lines - avatar - title-accessibility-label - description - description-accessibility-label - button-icon - button-on-press - customization-color - emoji-hash - emoji] +(defn view + [{:keys [container-style title title-number-of-lines avatar title-accessibility-label description emoji + description-accessibility-label button-icon button-on-press customization-color emoji-hash] :or {title-number-of-lines 1}}] - [rn/view {:style container-style} - [rn/view - {:style {:flex-direction :row - :justify-content :space-between}} - [rn/view {:style style/title-container} - (when avatar - [rn/view {:style style/avatar-container} - [icon {:source avatar :size 32}]]) - (when emoji - [rn/view {:style style/avatar-container} - [icon {:source emoji :size 32 :customization-color customization-color :theme theme}]]) - [text/text - {:accessibility-label title-accessibility-label - :weight :semi-bold - :ellipsize-mode :tail - :style {:flex 1} - :number-of-lines title-number-of-lines - :size :heading-1} - title]] - (when button-icon - [button/button - {:icon-only? true - :on-press button-on-press - :customization-color customization-color - :size 32} button-icon])] - (when description - [text/text - {:accessibility-label description-accessibility-label - :weight :regular - :size :paragraph-1 - :style style/description-description-text} - description]) - (when emoji-hash - [text/text - {:number-of-lines 1 - :accessibility-label :emoji-hash - :style style/emoji-hash} - emoji-hash])]) - -(def view (theme/with-theme view-internal)) + (let [theme (quo.theme/use-theme)] + [rn/view {:style container-style} + [rn/view + {:style {:flex-direction :row + :justify-content :space-between}} + [rn/view {:style style/title-container} + (when avatar + [rn/view {:style style/avatar-container} + [icon {:source avatar :size 32}]]) + (when emoji + [rn/view {:style style/avatar-container} + [icon {:source emoji :size 32 :customization-color customization-color :theme theme}]]) + [text/text + {:accessibility-label title-accessibility-label + :weight :semi-bold + :ellipsize-mode :tail + :style {:flex 1} + :number-of-lines title-number-of-lines + :size :heading-1} + title]] + (when button-icon + [button/button + {:icon-only? true + :on-press button-on-press + :customization-color customization-color + :size 32} button-icon])] + (when description + [text/text + {:accessibility-label description-accessibility-label + :weight :regular + :size :paragraph-1 + :style style/description-description-text} + description]) + (when emoji-hash + [text/text + {:number-of-lines 1 + :accessibility-label :emoji-hash + :style style/emoji-hash} + emoji-hash])])) diff --git a/src/quo/components/wallet/account_card/view.cljs b/src/quo/components/wallet/account_card/view.cljs index c148d1e291b..84c912b629e 100644 --- a/src/quo/components/wallet/account_card/view.cljs +++ b/src/quo/components/wallet/account_card/view.cljs @@ -97,7 +97,7 @@ (defn- user-account [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics? on-press]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false)) @@ -155,7 +155,7 @@ (defn- add-account-view [{:keys [on-press customization-color metrics?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed false))] diff --git a/src/quo/components/wallet/account_origin/schema.cljs b/src/quo/components/wallet/account_origin/schema.cljs index da3d9765a2b..56f322496a7 100644 --- a/src/quo/components/wallet/account_origin/schema.cljs +++ b/src/quo/components/wallet/account_origin/schema.cljs @@ -3,8 +3,7 @@ (def ^:private ?base [:map [:type {:optional true} [:enum :default-keypair :recovery-phrase :private-key]] - [:stored {:optional true} [:enum :on-device :on-keycard]] - [:theme :schema.common/theme]]) + [:stored {:optional true} [:enum :on-device :on-keycard]]]) (def ^:private ?default-keypair [:map diff --git a/src/quo/components/wallet/account_origin/view.cljs b/src/quo/components/wallet/account_origin/view.cljs index b35d3c7e22f..91371fe6ce9 100644 --- a/src/quo/components/wallet/account_origin/view.cljs +++ b/src/quo/components/wallet/account_origin/view.cljs @@ -96,8 +96,9 @@ :secondary-color secondary-color}]) (defn view-internal - [{:keys [type theme derivation-path on-press] :as props}] - (let [secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)] + [{:keys [type derivation-path on-press] :as props}] + (let [theme (quo.theme/use-theme) + secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)] [rn/view {:style (style/container theme)} [text/text {:weight :regular @@ -108,6 +109,4 @@ (when (not= :private-key type) [card-view theme derivation-path secondary-color on-press])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/account_overview/view.cljs b/src/quo/components/wallet/account_overview/view.cljs index 2cbe81493b1..66f90642d45 100644 --- a/src/quo/components/wallet/account_overview/view.cljs +++ b/src/quo/components/wallet/account_overview/view.cljs @@ -96,9 +96,10 @@ (defn- view-internal [{:keys [state account time-frame time-frame-string time-frame-to-string account-name current-value - percentage-change currency-change theme metrics customization-color] + percentage-change currency-change metrics customization-color] :or {customization-color :blue}}] - (let [time-frame-string (time-string time-frame time-frame-string) + (let [theme (quo.theme/use-theme) + time-frame-string (time-string time-frame time-frame-string) up? (= metrics :positive)] [rn/view {:style style/account-overview-wrapper} (if (= :loading state) @@ -127,6 +128,4 @@ (seq currency-change)) [numeric-changes percentage-change currency-change customization-color theme up?])]])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/account_permissions/schema.cljs b/src/quo/components/wallet/account_permissions/schema.cljs index 8893b6b52a2..7eebfe0327b 100644 --- a/src/quo/components/wallet/account_permissions/schema.cljs +++ b/src/quo/components/wallet/account_permissions/schema.cljs @@ -18,6 +18,5 @@ [:disabled? {:optional true} [:maybe :boolean]] [:on-change {:optional true} [:maybe fn?]] [:container-style {:optional true} [:maybe :map]] - [:customization-color {:optional true} [:maybe :schema.common/customization-color]] - [:theme :schema.common/theme]]]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]] :any]) diff --git a/src/quo/components/wallet/account_permissions/view.cljs b/src/quo/components/wallet/account_permissions/view.cljs index b26f1c05980..0444a2d9044 100644 --- a/src/quo/components/wallet/account_permissions/view.cljs +++ b/src/quo/components/wallet/account_permissions/view.cljs @@ -50,41 +50,40 @@ (defn- view-internal [{:keys - [checked? disabled? on-change token-details keycard? theme container-style customization-color] + [checked? disabled? on-change token-details keycard? container-style customization-color] {:keys [name address emoji] :as account} :account :or {customization-color :blue}}] - [rn/view - {:style (merge (style/container theme) container-style) - :accessibility-label :wallet-account-permissions} - [rn/view {:style style/row1} - [account-avatar/view - {:size 32 - :emoji emoji - :customization-color (:customization-color account)}] - [rn/view {:style style/account-details} - [rn/view {:style style/name-and-keycard} - [text/text - {:size :paragraph-1 - :weight :semi-bold} name] - (when keycard? - [icons/icon :i/keycard-card - {:accessibility-label :wallet-account-permissions-keycard - :size 20 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])] - [address-text/view - {:address address - :format :short}]] - [selectors/view - {:type :checkbox - :checked? checked? - :customization-color customization-color - :disabled? disabled? - :on-change on-change}]] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container theme) container-style) + :accessibility-label :wallet-account-permissions} + [rn/view {:style style/row1} + [account-avatar/view + {:size 32 + :emoji emoji + :customization-color (:customization-color account)}] + [rn/view {:style style/account-details} + [rn/view {:style style/name-and-keycard} + [text/text + {:size :paragraph-1 + :weight :semi-bold} name] + (when keycard? + [icons/icon :i/keycard-card + {:accessibility-label :wallet-account-permissions-keycard + :size 20 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])] + [address-text/view + {:address address + :format :short}]] + [selectors/view + {:type :checkbox + :checked? checked? + :customization-color customization-color + :disabled? disabled? + :on-change on-change}]] - [token-details-section token-details]]) + [token-details-section token-details]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/address_text/schema.cljs b/src/quo/components/wallet/address_text/schema.cljs index ea68139e842..6f917403e23 100644 --- a/src/quo/components/wallet/address_text/schema.cljs +++ b/src/quo/components/wallet/address_text/schema.cljs @@ -8,7 +8,6 @@ [:address {:optional true} [:maybe :string]] [:blur? {:optional true} [:maybe :boolean]] [:format {:optional true} [:enum :short :long]] - [:theme :schema.common/theme] [:networks {:optional true} [:maybe [:sequential [:map [:network-name :keyword] [:short-name :string]]]]] [:full-address? {:optional true} [:maybe :boolean]] diff --git a/src/quo/components/wallet/address_text/view.cljs b/src/quo/components/wallet/address_text/view.cljs index 9cb51063563..760d377abd7 100644 --- a/src/quo/components/wallet/address_text/view.cljs +++ b/src/quo/components/wallet/address_text/view.cljs @@ -17,9 +17,10 @@ (str network ":")]) (defn- view-internal - [{:keys [networks address blur? theme format full-address? size weight] + [{:keys [networks address blur? format full-address? size weight] :or {size :paragraph-2}}] - (let [network-colored-text (map #(colored-network-text {:theme theme + (let [theme (quo.theme/use-theme) + network-colored-text (map #(colored-network-text {:theme theme :network % :weight weight :size size})) @@ -44,6 +45,4 @@ (into [text/text] network-colored-text $) (conj $ address-text)))) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/amount_input/view.cljs b/src/quo/components/wallet/amount_input/view.cljs index 77433872a00..926ade86254 100644 --- a/src/quo/components/wallet/amount_input/view.cljs +++ b/src/quo/components/wallet/amount_input/view.cljs @@ -26,7 +26,7 @@ :or {value 0 min-value 0 max-value 999999999}}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style (merge style/container container-style)} [amount-button diff --git a/src/quo/components/wallet/confirmation_progress/schema.cljs b/src/quo/components/wallet/confirmation_progress/schema.cljs index c3c8ef2ebc2..a6dcb19eb24 100644 --- a/src/quo/components/wallet/confirmation_progress/schema.cljs +++ b/src/quo/components/wallet/confirmation_progress/schema.cljs @@ -10,6 +10,5 @@ [:progress-value {:optional true} [:maybe :int]] [:network {:optional true} [:enum :mainnet :optimism :arbitrum]] [:state {:optional true} [:enum :pending :sending :confirmed :finalising :finalized :error]] - [:customization-color {:optional true} [:maybe :schema.common/customization-color]] - [:theme :schema.common/theme]]]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]] :any]) diff --git a/src/quo/components/wallet/confirmation_progress/view.cljs b/src/quo/components/wallet/confirmation_progress/view.cljs index 02deb810868..173ead81311 100644 --- a/src/quo/components/wallet/confirmation_progress/view.cljs +++ b/src/quo/components/wallet/confirmation_progress/view.cljs @@ -2,7 +2,6 @@ (:require [quo.components.wallet.confirmation-progress.schema :as component-schema] [quo.components.wallet.confirmation-progress.style :as style] [quo.components.wallet.progress-bar.view :as progress-box] - [quo.theme :as quo.theme] [react-native.core :as rn] [schema.core :as schema])) @@ -68,6 +67,4 @@ (:arbitrum :optimism) [progress-boxes-sidenet props] nil)) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/keypair/view.cljs b/src/quo/components/wallet/keypair/view.cljs index a995fc4a677..f6065daab0f 100644 --- a/src/quo/components/wallet/keypair/view.cljs +++ b/src/quo/components/wallet/keypair/view.cljs @@ -38,7 +38,7 @@ (defn title-view [{:keys [details action selected? type blur? customization-color on-options-press]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) {:keys [full-name]} details] [rn/view {:style style/title-container diff --git a/src/quo/components/wallet/network_amount/schema.cljs b/src/quo/components/wallet/network_amount/schema.cljs index a7baa54e5f7..12ebd1fc133 100644 --- a/src/quo/components/wallet/network_amount/schema.cljs +++ b/src/quo/components/wallet/network_amount/schema.cljs @@ -6,6 +6,5 @@ [:props [:map {:closed true} [:amount {:optional true} [:maybe :string]] - [:token {:optional true} [:or :keyword :string]] - [:theme :schema.common/theme]]]] + [:token {:optional true} [:or :keyword :string]]]]] :any]) diff --git a/src/quo/components/wallet/network_amount/view.cljs b/src/quo/components/wallet/network_amount/view.cljs index 2e92a8c6de2..207f5acfd4c 100644 --- a/src/quo/components/wallet/network_amount/view.cljs +++ b/src/quo/components/wallet/network_amount/view.cljs @@ -10,15 +10,16 @@ [schema.core :as schema])) (defn- view-internal - [{:keys [amount token theme]}] - [rn/view {:style style/container} - [token/view {:token token :size :size-12}] - [text/text - {:weight :medium - :size :paragraph-2 - :style style/text} - (str amount " " (string/upper-case (clj->js token)))] - [rn/view - {:style (style/divider theme)}]]) + [{:keys [amount token]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/container} + [token/view {:token token :size :size-12}] + [text/text + {:weight :medium + :size :paragraph-2 + :style style/text} + (str amount " " (string/upper-case (clj->js token)))] + [rn/view + {:style (style/divider theme)}]])) -(def view (quo.theme/with-theme (schema/instrument #'view-internal network-amount-schema/?schema))) +(def view (schema/instrument #'view-internal network-amount-schema/?schema)) diff --git a/src/quo/components/wallet/network_bridge/schema.cljs b/src/quo/components/wallet/network_bridge/schema.cljs index c070baabb2d..67d9a578258 100644 --- a/src/quo/components/wallet/network_bridge/schema.cljs +++ b/src/quo/components/wallet/network_bridge/schema.cljs @@ -8,7 +8,6 @@ [:catn [:props [:map - [:theme :schema.common/theme] [:network {:optional true} [:maybe :keyword]] [:status {:optional true} [:maybe ?network-bridge-status]] [:amount {:optional true} [:maybe :string]] diff --git a/src/quo/components/wallet/network_bridge/view.cljs b/src/quo/components/wallet/network_bridge/view.cljs index c033ee953a7..119c46c86ac 100644 --- a/src/quo/components/wallet/network_bridge/view.cljs +++ b/src/quo/components/wallet/network_bridge/view.cljs @@ -27,43 +27,42 @@ :else (string/capitalize (name network)))) (defn view-internal - [{:keys [theme network status amount container-style on-press] :as args}] - (if (= status :add) - [network-bridge-add args] - [rn/pressable - {:style (merge (style/container network status theme) container-style) - :accessible true - :accessibility-label :container - :on-press on-press} - (if (= status :loading) + [{:keys [network status amount container-style on-press] :as args}] + (let [theme (quo.theme/use-theme)] + (if (= status :add) + [network-bridge-add args] + [rn/pressable + {:style (merge (style/container network status theme) container-style) + :accessible true + :accessibility-label :container + :on-press on-press} + (if (= status :loading) + [rn/view + {:style (style/loading-skeleton theme) + :accessible true + :accessibility-label :loading}] + [rn/view + {:style {:flex-direction :row + :justify-content :space-between}} + [text/text + {:size :paragraph-2 + :weight :medium} amount] + (when (= status :locked) + [icon/icon :i/locked + {:size 12 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) + :accessible true + :accessibility-label :lock}])]) [rn/view - {:style (style/loading-skeleton theme) - :accessible true - :accessibility-label :loading}] - [rn/view - {:style {:flex-direction :row - :justify-content :space-between}} + {:style {:flex-direction :row + :align-items :center}} + [rn/image + {:source (resources/get-network network) + :style style/network-icon}] [text/text - {:size :paragraph-2 - :weight :medium} amount] - (when (= status :locked) - [icon/icon :i/locked - {:size 12 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) - :accessible true - :accessibility-label :lock}])]) - [rn/view - {:style {:flex-direction :row - :align-items :center}} - [rn/image - {:source (resources/get-network network) - :style style/network-icon}] - [text/text - {:size :label - :weight :medium - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - (network->text network)]]])) + {:size :label + :weight :medium + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (network->text network)]]]))) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal network-bridge-schema/?schema))) +(def view (schema/instrument #'view-internal network-bridge-schema/?schema)) diff --git a/src/quo/components/wallet/network_link/schema.cljs b/src/quo/components/wallet/network_link/schema.cljs index c0b89e23519..e8d2ec086bf 100644 --- a/src/quo/components/wallet/network_link/schema.cljs +++ b/src/quo/components/wallet/network_link/schema.cljs @@ -9,6 +9,5 @@ [:map [:shape {:optional true} [:maybe [:enum :linear :1x :2x]]] [:source {:optional true} [:maybe ?networks]] - [:destination {:optional true} [:maybe ?networks]] - [:theme :schema.common/theme]]]] + [:destination {:optional true} [:maybe ?networks]]]]] :any]) diff --git a/src/quo/components/wallet/network_link/view.cljs b/src/quo/components/wallet/network_link/view.cljs index 2c59d3d492d..7bc4da04a83 100644 --- a/src/quo/components/wallet/network_link/view.cljs +++ b/src/quo/components/wallet/network_link/view.cljs @@ -38,8 +38,9 @@ (defn link-linear [] (let [container-width (reagent/atom 100)] - (fn [{:keys [source theme]}] - (let [stroke-color (colors/resolve-color source theme) + (fn [{:keys [source]}] + (let [theme (quo.theme/use-theme) + stroke-color (colors/resolve-color source theme) fill-color (colors/theme-colors colors/white colors/neutral-90 theme)] [rn/view {:style style/link-linear-container @@ -56,8 +57,9 @@ [] (let [container-width (reagent/atom 100) stroke-color "url(#gradient)"] - (fn [{:keys [source destination theme]}] - (let [source-color (colors/resolve-color source theme) + (fn [{:keys [source destination]}] + (let [theme (quo.theme/use-theme) + source-color (colors/resolve-color source theme) destination-color (colors/resolve-color destination theme) fill-color (colors/theme-colors colors/white colors/neutral-90 theme) view-box (str "0 0 " @container-width " 58") @@ -104,8 +106,9 @@ [] (let [container-width (reagent/atom 100) stroke-color "url(#gradient)"] - (fn [{:keys [source destination theme]}] - (let [source-color (colors/resolve-color source theme) + (fn [{:keys [source destination]}] + (let [theme (quo.theme/use-theme) + source-color (colors/resolve-color source theme) destination-color (colors/resolve-color destination theme) fill-color (colors/theme-colors colors/white colors/neutral-90 theme) view-box (str "0 0 " @container-width " 114") @@ -155,6 +158,4 @@ :1x [link-1x props] :2x [link-2x props])]) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/network_routing/component_spec.cljs b/src/quo/components/wallet/network_routing/component_spec.cljs index cb3475988a0..2a4487ddeca 100644 --- a/src/quo/components/wallet/network_routing/component_spec.cljs +++ b/src/quo/components/wallet/network_routing/component_spec.cljs @@ -22,7 +22,7 @@ ;; Fires on-layout callback since the total width is required (h/fire-event :layout component #js {:nativeEvent #js {:layout #js {:width 1000}}}) ;; Update props to trigger rerender, otherwise it won't be updated - (rerender-fn [quo.theme/provider {:theme :light} + (rerender-fn [quo.theme/provider :light [network-routing/view (assoc default-props :requesting-data? true)]]) ;; Check number of networks rendered (->> (js->clj (h/query-all-by-label-text :network-routing-bar)) diff --git a/src/quo/components/wallet/network_routing/view.cljs b/src/quo/components/wallet/network_routing/view.cljs index 25331398c01..577acec69a0 100644 --- a/src/quo/components/wallet/network_routing/view.cljs +++ b/src/quo/components/wallet/network_routing/view.cljs @@ -197,7 +197,7 @@ (defn view-internal [{:keys [networks container-style] :as params}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [total-width set-total-width] (rn/use-state nil) on-layout (rn/use-callback #(let [width (oops/oget % "nativeEvent.layout.width")] diff --git a/src/quo/components/wallet/progress_bar/schema.cljs b/src/quo/components/wallet/progress_bar/schema.cljs index 6ef509a6acf..25be8a42682 100644 --- a/src/quo/components/wallet/progress_bar/schema.cljs +++ b/src/quo/components/wallet/progress_bar/schema.cljs @@ -6,7 +6,6 @@ [:props [:map [:customization-color {:optional true} [:maybe :schema.common/customization-color]] - [:theme :schema.common/theme] [:progressed-value {:optional true} [:maybe [:or :string :int]]] [:full-width? {:optional true} [:maybe :boolean]]]]] :any]) diff --git a/src/quo/components/wallet/progress_bar/style.cljs b/src/quo/components/wallet/progress_bar/style.cljs index 8a1ebe76c1d..a8fb77f1175 100644 --- a/src/quo/components/wallet/progress_bar/style.cljs +++ b/src/quo/components/wallet/progress_bar/style.cljs @@ -24,7 +24,7 @@ (def max-value 100) (defn root-container - [{:keys [customization-color state theme full-width?]}] + [{:keys [customization-color state full-width?]} theme] (let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color theme) [theme (if full-width? :pending state)])] @@ -39,7 +39,7 @@ :margin-vertical 2})) (defn progressed-bar - [{:keys [customization-color state theme progressed-value]}] + [{:keys [customization-color state progressed-value]} theme] (let [{:keys [background-color]} (get-in (border-and-background-color customization-color theme) [theme state]) progress (if (> progressed-value max-value) max-value progressed-value)] diff --git a/src/quo/components/wallet/progress_bar/view.cljs b/src/quo/components/wallet/progress_bar/view.cljs index f7c7e9e8f79..6d9c422bcb5 100644 --- a/src/quo/components/wallet/progress_bar/view.cljs +++ b/src/quo/components/wallet/progress_bar/view.cljs @@ -8,12 +8,11 @@ (defn- view-internal [{:keys [full-width?] :as props}] - [rn/view - {:accessibility-label :progress-bar - :style (style/root-container props)} - (when full-width? - [rn/view {:style (style/progressed-bar props)}])]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :progress-bar + :style (style/root-container props theme)} + (when full-width? + [rn/view {:style (style/progressed-bar props theme)}])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal progress-bar-schema/?schema))) +(def view (schema/instrument #'view-internal progress-bar-schema/?schema)) diff --git a/src/quo/components/wallet/required_tokens/schema.cljs b/src/quo/components/wallet/required_tokens/schema.cljs index 8bf19f6864e..6ad329d869b 100644 --- a/src/quo/components/wallet/required_tokens/schema.cljs +++ b/src/quo/components/wallet/required_tokens/schema.cljs @@ -12,6 +12,5 @@ [:collectible-img-src {:optional true} [:maybe :schema.common/image-source]] [:collectible-name {:optional true} [:maybe :string]] [:divider? {:optional true} [:maybe :boolean]] - [:theme :schema.common/theme] [:container-style {:optional true} [:maybe :map]]]]] :any]) diff --git a/src/quo/components/wallet/required_tokens/view.cljs b/src/quo/components/wallet/required_tokens/view.cljs index 6a709555701..3cfb7a9657f 100644 --- a/src/quo/components/wallet/required_tokens/view.cljs +++ b/src/quo/components/wallet/required_tokens/view.cljs @@ -8,34 +8,33 @@ [schema.core :as schema])) (defn- view-internal - [{:keys [type amount token token-img-src collectible-img-src collectible-name divider? theme + [{:keys [type amount token token-img-src collectible-img-src collectible-name divider? container-style]}] - [rn/view - {:style (merge style/container container-style) - :accessibility-label :wallet-required-tokens} - (case type - :token [token/view - (assoc (if token-img-src - {:image-source token-img-src} - {:token token}) - :size - 14)] - :collectible [rn/image - {:style style/collectible-img - :source collectible-img-src}] - nil) - [text/text - {:size :paragraph-2 - :weight :medium - :style {:margin-left 4}} - (case type - :token (str amount " " token) - :collectible (str amount " " collectible-name) - nil)] - (when divider? - [rn/view - {:style (style/divider theme)}])]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge style/container container-style) + :accessibility-label :wallet-required-tokens} + (case type + :token [token/view + (assoc (if token-img-src + {:image-source token-img-src} + {:token token}) + :size + 14)] + :collectible [rn/image + {:style style/collectible-img + :source collectible-img-src}] + nil) + [text/text + {:size :paragraph-2 + :weight :medium + :style {:margin-left 4}} + (case type + :token (str amount " " token) + :collectible (str amount " " collectible-name) + nil)] + (when divider? + [rn/view + {:style (style/divider theme)}])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal required-tokens-schema/?schema))) +(def view (schema/instrument #'view-internal required-tokens-schema/?schema)) diff --git a/src/quo/components/wallet/summary_info/schema.cljs b/src/quo/components/wallet/summary_info/schema.cljs index 3d604830b52..83f9e912e37 100644 --- a/src/quo/components/wallet/summary_info/schema.cljs +++ b/src/quo/components/wallet/summary_info/schema.cljs @@ -5,7 +5,6 @@ [:catn [:props [:map - [:theme :schema.common/theme] [:type [:enum :status-account :saved-account :account :user]] [:account-props {:optional true} [:maybe :map]] [:networks? {:optional true} [:maybe :boolean]] diff --git a/src/quo/components/wallet/summary_info/view.cljs b/src/quo/components/wallet/summary_info/view.cljs index 23593e28773..ea97aef79ff 100644 --- a/src/quo/components/wallet/summary_info/view.cljs +++ b/src/quo/components/wallet/summary_info/view.cljs @@ -58,45 +58,44 @@ :theme theme}])])) (defn- view-internal - [{:keys [theme type account-props networks? values]}] - [rn/view - {:style (style/container networks? theme)} - [rn/view - {:style style/info-container} - (case type - :status-account [account-avatar/view account-props] - :saved-account [wallet-user-avatar/wallet-user-avatar (assoc account-props :size :size-32)] - :account [wallet-user-avatar/wallet-user-avatar - (assoc account-props - :size :size-32 - :neutral? true)] - [user-avatar/user-avatar account-props]) - [rn/view {:style {:margin-left 8}} - (when (not= type :account) [text/text {:weight :semi-bold} (:name account-props)]) + [{:keys [type account-props networks? values]}] + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (style/container networks? theme)} [rn/view - {:style {:flex-direction :row - :align-items :center}} - (when (= type :user) - [:<> - [rn/view {:style {:margin-right 4}} [account-avatar/view (:status-account account-props)]] - [text/text - {:size :paragraph-2 - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - (get-in account-props [:status-account :name])] - [rn/view - {:style (style/dot-divider theme)}]]) - [text/text - {:size (when (not= type :account) :paragraph-2) - :weight (when (= type :account) :semi-bold) - :style {:color (when (not= type :account) - (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}} - (:address account-props)]]]] - (when networks? - [:<> - [rn/view - {:style (style/line-divider theme)}] - [networks values theme]])]) + {:style style/info-container} + (case type + :status-account [account-avatar/view account-props] + :saved-account [wallet-user-avatar/wallet-user-avatar (assoc account-props :size :size-32)] + :account [wallet-user-avatar/wallet-user-avatar + (assoc account-props + :size :size-32 + :neutral? true)] + [user-avatar/user-avatar account-props]) + [rn/view {:style {:margin-left 8}} + (when (not= type :account) [text/text {:weight :semi-bold} (:name account-props)]) + [rn/view + {:style {:flex-direction :row + :align-items :center}} + (when (= type :user) + [:<> + [rn/view {:style {:margin-right 4}} [account-avatar/view (:status-account account-props)]] + [text/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (get-in account-props [:status-account :name])] + [rn/view + {:style (style/dot-divider theme)}]]) + [text/text + {:size (when (not= type :account) :paragraph-2) + :weight (when (= type :account) :semi-bold) + :style {:color (when (not= type :account) + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}} + (:address account-props)]]]] + (when networks? + [:<> + [rn/view + {:style (style/line-divider theme)}] + [networks values theme]])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal summary-info-schema/?schema))) +(def view (schema/instrument #'view-internal summary-info-schema/?schema)) diff --git a/src/quo/components/wallet/token_input/view.cljs b/src/quo/components/wallet/token_input/view.cljs index 701197f889d..cf77007656b 100644 --- a/src/quo/components/wallet/token_input/view.cljs +++ b/src/quo/components/wallet/token_input/view.cljs @@ -125,7 +125,7 @@ (defn- view-internal [{:keys [container-style value on-swap] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) width (:width (rn/get-window)) [value-internal set-value-internal] (rn/use-state nil) [crypto? set-crypto] (rn/use-state true) diff --git a/src/quo/components/wallet/transaction_progress/schema.cljs b/src/quo/components/wallet/transaction_progress/schema.cljs index 2c2cb4840b8..fcd8ab06ad1 100644 --- a/src/quo/components/wallet/transaction_progress/schema.cljs +++ b/src/quo/components/wallet/transaction_progress/schema.cljs @@ -14,7 +14,6 @@ [:catn [:props [:map - [:theme :schema.common/theme] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:title {:optional true} [:maybe :string]] [:tag-name {:optional true} [:maybe :string]] diff --git a/src/quo/components/wallet/transaction_progress/view.cljs b/src/quo/components/wallet/transaction_progress/view.cljs index 7ddda95d6e9..5501e2ff078 100644 --- a/src/quo/components/wallet/transaction_progress/view.cljs +++ b/src/quo/components/wallet/transaction_progress/view.cljs @@ -170,22 +170,21 @@ :progress-value progress}]]) (defn- view-internal - [{:keys [title on-press accessibility-label theme tag-photo tag-name tag-number networks] + [{:keys [title on-press accessibility-label tag-photo tag-name tag-number networks] :or {accessibility-label :transaction-progress}}] - [rn/touchable-without-feedback - {:on-press on-press - :accessibility-label accessibility-label} - [rn/view {:style (style/box-style theme)} - [title-internal - {:title title - :theme theme - :networks networks}] - [tag-internal tag-photo tag-name tag-number theme] - (for [network networks] - (let [assoc-props #(get-network networks %)] - ^{:key (:network network)} - [view-network (assoc-props (:network network))]))]]) - -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) + (let [theme (quo.theme/use-theme)] + [rn/touchable-without-feedback + {:on-press on-press + :accessibility-label accessibility-label} + [rn/view {:style (style/box-style theme)} + [title-internal + {:title title + :theme theme + :networks networks}] + [tag-internal tag-photo tag-name tag-number theme] + (for [network networks] + (let [assoc-props #(get-network networks %)] + ^{:key (:network network)} + [view-network (assoc-props (:network network))]))]])) + +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/transaction_summary/schema.cljs b/src/quo/components/wallet/transaction_summary/schema.cljs index 908abb6477a..4cfe9e2173f 100644 --- a/src/quo/components/wallet/transaction_summary/schema.cljs +++ b/src/quo/components/wallet/transaction_summary/schema.cljs @@ -6,7 +6,6 @@ [:catn [:props [:map - [:theme :schema.common/theme] [:transaction {:optional true} [:maybe [:enum :send :swap :bridge]]] [:first-tag {:optional true} [:maybe context-tag-schema/?schema]] [:second-tag {:optional true} [:maybe context-tag-schema/?schema]] diff --git a/src/quo/components/wallet/transaction_summary/view.cljs b/src/quo/components/wallet/transaction_summary/view.cljs index eb253e692ad..a4fd2604521 100644 --- a/src/quo/components/wallet/transaction_summary/view.cljs +++ b/src/quo/components/wallet/transaction_summary/view.cljs @@ -68,40 +68,39 @@ content]]) (defn- view-internal - [{:keys [theme first-tag second-tag third-tag fourth-tag second-tag-prefix + [{:keys [first-tag second-tag third-tag fourth-tag second-tag-prefix third-tag-prefix fourth-tag-prefix fifth-tag max-fees nonce input-data] :as props}] - [rn/view - {:style (style/container theme) - :accessibility-label :transaction-summary} - [transaction-header props] - [rn/view {:style style/content} - [rn/view {:style style/content-line} - (when first-tag [prop-tag first-tag]) - (when second-tag-prefix [prop-text second-tag-prefix theme]) - (when second-tag [prop-tag second-tag])] - [rn/view {:style style/content-line} - (when third-tag-prefix [prop-text third-tag-prefix theme]) - (when third-tag [prop-tag third-tag]) - (when fourth-tag-prefix [prop-text fourth-tag-prefix theme]) - (when fourth-tag [prop-tag fourth-tag]) - (when fifth-tag [prop-tag fifth-tag])]] - [rn/view {:style (style/divider theme)}] - [rn/view {:style style/extras-container} - [extra-info - {:header (i18n/label :t/max-fees) - :content max-fees - :theme theme}] - [extra-info - {:header (i18n/label :t/nonce) - :content nonce - :theme theme}] - [extra-info - {:header (i18n/label :t/input-data) - :content input-data - :theme theme}]]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (style/container theme) + :accessibility-label :transaction-summary} + [transaction-header props] + [rn/view {:style style/content} + [rn/view {:style style/content-line} + (when first-tag [prop-tag first-tag]) + (when second-tag-prefix [prop-text second-tag-prefix theme]) + (when second-tag [prop-tag second-tag])] + [rn/view {:style style/content-line} + (when third-tag-prefix [prop-text third-tag-prefix theme]) + (when third-tag [prop-tag third-tag]) + (when fourth-tag-prefix [prop-text fourth-tag-prefix theme]) + (when fourth-tag [prop-tag fourth-tag]) + (when fifth-tag [prop-tag fifth-tag])]] + [rn/view {:style (style/divider theme)}] + [rn/view {:style style/extras-container} + [extra-info + {:header (i18n/label :t/max-fees) + :content max-fees + :theme theme}] + [extra-info + {:header (i18n/label :t/nonce) + :content nonce + :theme theme}] + [extra-info + {:header (i18n/label :t/input-data) + :content input-data + :theme theme}]]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/wallet/wallet_activity/view.cljs b/src/quo/components/wallet/wallet_activity/view.cljs index 1b9c8d0f0e8..4690cd3499e 100644 --- a/src/quo/components/wallet/wallet_activity/view.cljs +++ b/src/quo/components/wallet/wallet_activity/view.cljs @@ -102,7 +102,7 @@ [{:keys [state blur? first-tag second-tag third-tag fourth-tag on-press second-tag-prefix third-tag-prefix fourth-tag-prefix] :as props}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) on-press-in (rn/use-callback #(set-pressed true)) diff --git a/src/quo/components/wallet/wallet_overview/schema.cljs b/src/quo/components/wallet/wallet_overview/schema.cljs index d65836c7bc5..c2ed3f383f8 100644 --- a/src/quo/components/wallet/wallet_overview/schema.cljs +++ b/src/quo/components/wallet/wallet_overview/schema.cljs @@ -15,7 +15,6 @@ [:end-date {:optional true} [:maybe :string]] [:currency-change {:optional true} [:maybe :string]] [:percentage-change {:optional true} [:maybe :string]] - [:theme :schema.common/theme] [:dropdown-on-press {:optional true} [:maybe fn?]] [:networks {:optional true} [:maybe [:sequential [:map [:source [:maybe :schema.common/image-source]]]]]] diff --git a/src/quo/components/wallet/wallet_overview/view.cljs b/src/quo/components/wallet/wallet_overview/view.cljs index f3045225ba2..bd0b370bacf 100644 --- a/src/quo/components/wallet/wallet_overview/view.cljs +++ b/src/quo/components/wallet/wallet_overview/view.cljs @@ -25,20 +25,21 @@ bars)) (defn- view-info-top - [{:keys [state balance theme networks dropdown-on-press dropdown-state]}] - [rn/view {:style style/container-info-top} - (if (= state :loading) - (loading-bars [{:width 201 :height 20 :margin 0}] theme) - [text/text - {:weight :semi-bold - :size :heading-1 - :style (style/style-text-heading theme)} - balance]) - [network-dropdown/view - {:state (or dropdown-state :default) - :blur? true - :on-press dropdown-on-press} - networks]]) + [{:keys [state balance networks dropdown-on-press dropdown-state]}] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/container-info-top} + (if (= state :loading) + (loading-bars [{:width 201 :height 20 :margin 0}] theme) + [text/text + {:weight :semi-bold + :size :heading-1 + :style (style/style-text-heading theme)} + balance]) + [network-dropdown/view + {:state (or dropdown-state :default) + :blur? true + :on-press dropdown-on-press} + networks]])) (defn- view-metrics [{:keys [metrics currency-change percentage-change theme]}] @@ -118,6 +119,4 @@ [view-info-top props] [view-info-bottom props]]) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/foundations/colors.cljs b/src/quo/foundations/colors.cljs index 04248181d62..e0ade540f6a 100644 --- a/src/quo/foundations/colors.cljs +++ b/src/quo/foundations/colors.cljs @@ -1,7 +1,7 @@ (ns quo.foundations.colors (:require [clojure.string :as string] - [quo.theme :as theme] + [quo.theme] [react-native.platform :as platform])) (def account-colors @@ -40,7 +40,7 @@ ([color light-opacity dark-opacity] (theme-alpha color light-opacity color dark-opacity)) ([light-color light-opacity dark-color dark-opacity] - (if (theme/dark?) + (if (quo.theme/dark?) (alpha light-color light-opacity) (alpha dark-color dark-opacity)))))) @@ -375,5 +375,5 @@ ([light dark] (theme-colors light dark nil)) ([light dark override-theme] - (let [theme (or override-theme (theme/get-theme))] + (let [theme (or override-theme (quo.theme/get-theme))] (if (= theme :light) light dark)))) diff --git a/src/quo/foundations/gradients.cljs b/src/quo/foundations/gradients.cljs index 03338ddfcf0..76acc755169 100644 --- a/src/quo/foundations/gradients.cljs +++ b/src/quo/foundations/gradients.cljs @@ -25,7 +25,7 @@ (defn view [{:keys [color-index container-style] :or {color-index 1}}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [linear-gradient/linear-gradient {:style (merge {:border-radius 16} container-style) :accessibility-label :gradient-overlay diff --git a/src/quo/theme.cljs b/src/quo/theme.cljs index c92091d6b71..a421cde0ef9 100644 --- a/src/quo/theme.cljs +++ b/src/quo/theme.cljs @@ -14,7 +14,7 @@ (defn get-theme [] - @theme-state) + (or @theme-state :dark)) (defn set-theme [value] @@ -42,20 +42,4 @@ (defn use-theme "A hook that returns the current theme context." [] - (utils.transforms/js->clj (rn/use-context theme-context))) - -(defn use-theme-value - [] - (keyword (:theme (use-theme)))) - -(defn ^:private f-with-theme - [component props & args] - (let [theme (-> (use-theme) :theme keyword)] - (into [component (assoc props :theme theme)] args))) - -(defn with-theme - "Create a functional component that assoc `:theme` into the first arg of - `component`. The theme value is taken from the nearest `quo.theme/provider`." - [component] - (fn [& args] - (into [:f> f-with-theme component] args))) + (keyword (rn/use-context theme-context))) diff --git a/src/status_im/common/alert_banner/view.cljs b/src/status_im/common/alert_banner/view.cljs index 3cd4e341a34..4f34e4e2bb1 100644 --- a/src/status_im/common/alert_banner/view.cljs +++ b/src/status_im/common/alert_banner/view.cljs @@ -39,7 +39,7 @@ (defn view [] (let [banners (rf/sub [:alert-banners]) - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) banners-count (count banners) alert-banner (:alert banners) error-banner (:error banners) diff --git a/src/status_im/common/bottom_sheet/view.cljs b/src/status_im/common/bottom_sheet/view.cljs index a2191eb4474..905f1bcb5f2 100644 --- a/src/status_im/common/bottom_sheet/view.cljs +++ b/src/status_im/common/bottom_sheet/view.cljs @@ -66,7 +66,7 @@ {:keys [content selected-item padding-bottom-override border-radius on-close shell? gradient-cover? customization-color hide-handle? blur-radius] :or {border-radius 12}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) {window-height :height} (rn/get-window) [sheet-height set-sheet-height] (rn/use-state 0) [layout-height set-layout-height] (rn/use-state window-height) diff --git a/src/status_im/common/bottom_sheet_screen/style.cljs b/src/status_im/common/bottom_sheet_screen/style.cljs index 2d3e02d75ac..c7d264e35d2 100644 --- a/src/status_im/common/bottom_sheet_screen/style.cljs +++ b/src/status_im/common/bottom_sheet_screen/style.cljs @@ -1,7 +1,7 @@ (ns status-im.common.bottom-sheet-screen.style (:require [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.reanimated :as reanimated])) (defn container @@ -47,4 +47,4 @@ :height 4 :border-radius 100 :background-color (colors/theme-colors colors/neutral-100 colors/white theme) - :opacity (theme/theme-value 0.05 0.1)}) + :opacity (quo.theme/theme-value 0.05 0.1)}) diff --git a/src/status_im/common/bottom_sheet_screen/view.cljs b/src/status_im/common/bottom_sheet_screen/view.cljs index f3c08409d46..bef2baebe9d 100644 --- a/src/status_im/common/bottom_sheet_screen/view.cljs +++ b/src/status_im/common/bottom_sheet_screen/view.cljs @@ -1,7 +1,7 @@ (ns status-im.common.bottom-sheet-screen.view (:require [oops.core :as oops] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.platform :as platform] @@ -40,7 +40,7 @@ (let [y (oops/oget e "nativeEvent.contentOffset.y")] (reset! curr-scroll y))) -(defn- f-view +(defn view [_] (let [scroll-enabled? (reagent/atom true) curr-scroll (reagent/atom 0) @@ -48,8 +48,9 @@ set-animating-true #(reset! animating? true) set-animating-false (fn [ms] (js/setTimeout #(reset! animating? false) ms))] - (fn [{:keys [content skip-background? theme]}] - (let [{:keys [top] :as insets} (safe-area/get-insets) + (fn [{:keys [content skip-background?]}] + (let [theme (quo.theme/use-theme) + {:keys [top] :as insets} (safe-area/get-insets) alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) padding-top (+ alert-banners-top-margin (if platform/ios? top (+ top 10))) @@ -95,9 +96,3 @@ :current-scroll curr-scroll :on-scroll #(on-scroll % curr-scroll) :sheet-animating? animating?}]]]])))) - -(defn- internal-view - [params] - [:f> f-view params]) - -(def view (theme/with-theme internal-view)) diff --git a/src/status_im/common/contact_list/view.cljs b/src/status_im/common/contact_list/view.cljs index 3c384b64766..24a65abec73 100644 --- a/src/status_im/common/contact_list/view.cljs +++ b/src/status_im/common/contact_list/view.cljs @@ -11,6 +11,6 @@ (defn contacts-section-header [{:keys [title]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [quo/divider-label {:container-style (style/contacts-section-header theme)} title])) diff --git a/src/status_im/common/emoji_picker/view.cljs b/src/status_im/common/emoji_picker/view.cljs index 1e827f0d59c..905a8c43975 100644 --- a/src/status_im/common/emoji_picker/view.cljs +++ b/src/status_im/common/emoji_picker/view.cljs @@ -120,8 +120,9 @@ :window-size (if @sheet-animating? 1 10)}]) (defn- footer - [{:keys [theme active-category scroll-ref]}] - (let [on-press (fn [id index] + [{:keys [active-category scroll-ref]}] + (let [theme (quo.theme/use-theme) + on-press (fn [id index] (on-press-category {:id id :index index @@ -147,8 +148,8 @@ (reset! filtered-data nil) (reset! search-text "")) -(defn f-view - [{:keys [search-active? on-change-text clear-states active-category scroll-ref theme] +(defn sheet-view + [{:keys [search-active? on-change-text clear-states active-category scroll-ref] :as sheet-opts}] [rn/keyboard-avoiding-view {:style style/flex-spacer @@ -165,11 +166,10 @@ [render-list sheet-opts] (when-not search-active? [footer - {:theme theme - :active-category active-category + {:active-category active-category :scroll-ref scroll-ref}])]]) -(defn- view-internal +(defn view [_] (let [{:keys [on-select]} (rf/sub [:get-screen-params]) scroll-ref (atom nil) @@ -198,7 +198,7 @@ :active-category active-category :should-update-active-category? (nil? @filtered-data)}))] (fn [sheet-opts] - [:f> f-view + [sheet-view (assoc sheet-opts :search-active? (pos? (count @search-text)) :on-change-text on-change-text @@ -209,5 +209,3 @@ :on-viewable-items-changed on-viewable-items-changed :active-category active-category :scroll-ref scroll-ref)]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/common/floating_button_page/floating_container/view.cljs b/src/status_im/common/floating_button_page/floating_container/view.cljs index e069909f44b..65e6c226da7 100644 --- a/src/status_im/common/floating_button_page/floating_container/view.cljs +++ b/src/status_im/common/floating_button_page/floating_container/view.cljs @@ -5,21 +5,20 @@ [status-im.common.floating-button-page.floating-container.style :as style])) (defn- blur-container - [child theme] - [blur/view - {:blur-amount 12 - :blur-radius 12 - :blur-type (quo.theme/theme-value :light :dark theme)} - [rn/view {:style style/blur-inner-container} - child]]) + [child] + (let [theme (quo.theme/use-theme)] + [blur/view + {:blur-amount 12 + :blur-radius 12 + :blur-type (quo.theme/theme-value :light :dark theme)} + [rn/view {:style style/blur-inner-container} + child]])) -(defn view-internal - [{:keys [theme on-layout keyboard-shown? blur?]} child] +(defn view + [{:keys [on-layout keyboard-shown? blur?]} child] [rn/view {:style (style/content-container blur? keyboard-shown?) :on-layout on-layout} (if blur? - [blur-container child theme] + [blur-container child] child)]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/common/home/banner/view.cljs b/src/status_im/common/home/banner/view.cljs index 71414577aab..ec28f2cc9b2 100644 --- a/src/status_im/common/home/banner/view.cljs +++ b/src/status_im/common/home/banner/view.cljs @@ -32,7 +32,7 @@ (defn- banner-card-blur-layer [scroll-shared-value child] (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq) - theme (quo.theme/use-theme-value)] + theme (quo.theme/use-theme)] [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value theme)} [blur/view {:style style/fill-space @@ -72,7 +72,7 @@ (defn animated-banner [{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [:<> [:f> banner-card-blur-layer scroll-shared-value [:f> banner-card-hiding-layer diff --git a/src/status_im/common/scan_qr_code/view.cljs b/src/status_im/common/scan_qr_code/view.cljs index 3af38d4ca8c..0b45f31a9a8 100644 --- a/src/status_im/common/scan_qr_code/view.cljs +++ b/src/status_im/common/scan_qr_code/view.cljs @@ -185,7 +185,7 @@ (rf/dispatch [:navigate-back]) true) -(defn f-view-internal +(defn view [{:keys [title subtitle validate-fn on-success-scan error-message]}] (let [insets (safe-area/get-insets) qr-code-succeed? (reagent/atom false) @@ -237,7 +237,7 @@ [scan-qr-code-tab @qr-view-finder (when subtitle true)] [rn/view {:style style/flex-spacer}] (when show-camera? - [quo.theme/provider {:theme :light} + [quo.theme/provider :light [quo/button {:icon-only? true :type :grey @@ -247,9 +247,3 @@ :container-style (style/camera-flash-button @qr-view-finder) :on-press #(swap! torch? not)} flashlight-icon]])]])))) - -(defn view-internal - [props] - [:f> f-view-internal props]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/common/standard_authentication/password_input/view.cljs b/src/status_im/common/standard_authentication/password_input/view.cljs index 21abc3fc89e..316df7fec83 100644 --- a/src/status_im/common/standard_authentication/password_input/view.cljs +++ b/src/status_im/common/standard_authentication/password_input/view.cljs @@ -23,7 +23,7 @@ (defn- error-info [error-message processing shell?] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) on-press (rn/use-callback (fn [] (rn/dismiss-keyboard!) @@ -56,7 +56,7 @@ error? (boolean (seq error-message)) default-value (rn/use-ref-atom "") ;;bug on Android ;;https://github.com/status-im/status-mobile/issues/19004 - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) on-change-password (rn/use-callback (fn [entered-password] (reset! default-value entered-password) diff --git a/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs b/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs index cef4210ab4e..350a10458b0 100644 --- a/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs +++ b/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs @@ -10,7 +10,7 @@ [{:keys [track-text customization-color auth-button-label on-auth-success on-auth-fail auth-button-icon-left size blur? container-style disabled? dependencies] :or {container-style {:flex 1}}}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) auth-method (rf/sub [:auth-method]) biometric-auth? (= auth-method constants/auth-method-biometric) on-complete (rn/use-callback diff --git a/src/status_im/contexts/chat/group_create/view.cljs b/src/status_im/contexts/chat/group_create/view.cljs index 0d05c1ee4d4..427c7fe0884 100644 --- a/src/status_im/contexts/chat/group_create/view.cljs +++ b/src/status_im/contexts/chat/group_create/view.cljs @@ -42,7 +42,7 @@ (defn view [] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) {window-width :width} (rn/get-window) profile (rf/sub [:profile/profile-with-image]) contacts (rf/sub [:selected-group-contacts]) diff --git a/src/status_im/contexts/chat/home/contact_request/view.cljs b/src/status_im/contexts/chat/home/contact_request/view.cljs index a8dad53a1f0..ae9a94425ca 100644 --- a/src/status_im/contexts/chat/home/contact_request/view.cljs +++ b/src/status_im/contexts/chat/home/contact_request/view.cljs @@ -34,9 +34,10 @@ " " (- (count requests) 2) " " (i18n/label :t/more)))) -(defn- view-internal - [{:keys [theme requests]}] - (let [customization-color (rf/sub [:profile/customization-color])] +(defn view + [{:keys [requests]}] + (let [theme (quo.theme/use-theme) + customization-color (rf/sub [:profile/customization-color])] [rn/touchable-opacity {:active-opacity 1 :accessibility-label :open-activity-center-contact-requests @@ -62,5 +63,3 @@ :customization-color customization-color :accessibility-label :pending-contact-requests-count} (count requests)]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/chat/home/new_chat/view.cljs b/src/status_im/contexts/chat/home/new_chat/view.cljs index 28202773b29..8de42fbb399 100644 --- a/src/status_im/contexts/chat/home/new_chat/view.cljs +++ b/src/status_im/contexts/chat/home/new_chat/view.cljs @@ -87,7 +87,7 @@ (defn view [{:keys [scroll-enabled? on-scroll close]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) contacts (rf/sub [:contacts/sorted-and-grouped-by-first-letter]) selected-contacts-count (rf/sub [:selected-contacts-count]) selected-contacts (rf/sub [:group/selected-contacts]) diff --git a/src/status_im/contexts/chat/home/view.cljs b/src/status_im/contexts/chat/home/view.cljs index 5e44d1b56c3..f3d4d6389ad 100644 --- a/src/status_im/contexts/chat/home/view.cljs +++ b/src/status_im/contexts/chat/home/view.cljs @@ -129,7 +129,7 @@ (defn view [] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) scroll-ref (rn/use-ref-atom nil) set-scroll-ref (rn/use-callback #(reset! scroll-ref %)) {:keys [universal-profile-url]} (rf/sub [:profile/profile]) diff --git a/src/status_im/contexts/chat/messenger/composer/images/view.cljs b/src/status_im/contexts/chat/messenger/composer/images/view.cljs index dc2c1e16e95..201a8dcfc3c 100644 --- a/src/status_im/contexts/chat/messenger/composer/images/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/images/view.cljs @@ -28,7 +28,7 @@ (defn f-images-list [] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) images (rf/sub [:chats/sending-image]) height (reanimated/use-shared-value (if (seq images) constants/images-container-height 0))] (rn/use-effect (fn [] diff --git a/src/status_im/contexts/chat/messenger/composer/view.cljs b/src/status_im/contexts/chat/messenger/composer/view.cljs index 32e21e9b0ff..fe8b9306e6c 100644 --- a/src/status_im/contexts/chat/messenger/composer/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/view.cljs @@ -146,7 +146,7 @@ (defn f-composer [props] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) opacity (reanimated/use-shared-value 0) window-height (:height (rn/get-window)) background-y (reanimated/use-shared-value (- window-height)) diff --git a/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs b/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs index d963b7a8284..c2f53bba9ce 100644 --- a/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs +++ b/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs @@ -24,16 +24,17 @@ [message/message message context (atom false)]) (defn empty-pinned-messages-state - [{:keys [theme]}] - [rn/view {:style style/no-pinned-messages-container} - [quo/empty-state - {:blur? false - :image (resources/get-themed-image :no-pinned-messages theme) - :title (i18n/label :t/no-pinned-messages) - :description (i18n/label :t/no-pinned-messages-desc)}]]) + [] + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/no-pinned-messages-container} + [quo/empty-state + {:blur? false + :image (resources/get-themed-image :no-pinned-messages theme) + :title (i18n/label :t/no-pinned-messages) + :description (i18n/label :t/no-pinned-messages-desc)}]])) -(defn f-pinned-messages - [{:keys [theme chat-id disable-message-long-press?]}] +(defn view + [{:keys [chat-id disable-message-long-press?]}] (let [pinned (rf/sub [:chats/pinned-sorted-list chat-id]) render-data (rf/sub [:chats/current-chat-message-list-view-context :in-pinned-view]) current-chat (rf/sub [:chats/chat-by-id chat-id]) @@ -65,11 +66,4 @@ :footer [rn/view {:style style/list-footer}] :key-fn list-key-fn :separator [quo/separator {:style {:margin-vertical 8}}]}] - [empty-pinned-messages-state - {:theme theme}])])) - -(defn- internal-pinned-messages - [params] - [:f> f-pinned-messages params]) - -(def view (quo.theme/with-theme internal-pinned-messages)) + [empty-pinned-messages-state])])) diff --git a/src/status_im/contexts/chat/messenger/messages/content/audio/style.cljs b/src/status_im/contexts/chat/messenger/messages/content/audio/style.cljs index 31f772b5ab5..1ee25524652 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/audio/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/audio/style.cljs @@ -1,7 +1,7 @@ (ns status-im.contexts.chat.messenger.messages.content.audio.style (:require [quo.foundations.colors :as colors] - [quo.theme :as theme])) + [quo.theme])) (defn container [] @@ -28,7 +28,7 @@ (defn play-pause-container [] - {:background-color (get-in colors/customization [:blue (if (theme/dark?) 60 50)]) + {:background-color (get-in colors/customization [:blue (if (quo.theme/dark?) 60 50)]) :width 32 :height 32 :border-radius 16 diff --git a/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs index 72d9d6023e8..22651437f3d 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs @@ -51,9 +51,10 @@ :emoji (get constants/reactions (:emoji-id reaction)))) -(defn- view-internal - [{:keys [message-id chat-id pinned-by preview? theme]} user-message-content] - (let [reactions (rf/sub [:chats/message-reactions message-id chat-id])] +(defn message-reactions-row + [{:keys [message-id chat-id pinned-by preview?]} user-message-content] + (let [theme (quo.theme/use-theme) + reactions (rf/sub [:chats/message-reactions message-id chat-id])] [:<> (when (seq reactions) [quo/react @@ -71,5 +72,3 @@ :on-press-add #(on-press-add {:chat-id chat-id :message-id message-id :user-message-content user-message-content})}])])) - -(def message-reactions-row (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/chat/messenger/messages/content/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/view.cljs index 28af8469f8a..c3a64ec295a 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/view.cljs @@ -148,12 +148,13 @@ (declare on-long-press) -(defn- user-message-content-internal +(defn user-message-content [] (let [show-delivery-state? (reagent/atom false)] (fn [{:keys [message-data context keyboard-shown? show-reactions? in-reaction-and-action-menu? - show-user-info? preview? theme]}] - (let [{:keys [content-type quoted-message content outgoing outgoing-status pinned-by pinned + show-user-info? preview?]}] + (let [theme (quo.theme/use-theme) + {:keys [content-type quoted-message content outgoing outgoing-status pinned-by pinned last-in-group? message-id chat-id]} message-data {:keys [disable-message-long-press?]} context first-image (first (:album message-data)) @@ -262,15 +263,13 @@ (when show-reactions? [reactions/message-reactions-row (assoc message-data :preview? preview?) [rn/view {:pointer-events :none} - [user-message-content-internal + [user-message-content {:theme theme :message-data message-data :context context :keyboard-shown? keyboard-shown? :show-reactions? false}]]])]])))) -(def user-message-content (quo.theme/with-theme user-message-content-internal)) - (defn on-long-press [{:keys [deleted? deleted-for-me?] :as message-data} context keyboard-shown?] (rf/dispatch [:dismiss-keyboard]) diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs index 1e6b9bbda97..5cb3c3d9f9a 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -347,7 +347,7 @@ (defn messages-list-content [{:keys [insets distance-from-list-top content-height layout-height distance-atom chat-screen-layout-calculations-complete? chat-list-scroll-y]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) {:keys [chat-type chat-id] :as chat} (rf/sub [:chats/current-chat-chat-view]) one-to-one-chat? (= chat-type constants/one-to-one-chat-type) community-channel? (= constants/community-chat-type chat-type) diff --git a/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs b/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs index 9d664c45057..7ad5a3f4aae 100644 --- a/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/pin/banner/view.cljs @@ -1,7 +1,7 @@ (ns status-im.contexts.chat.messenger.messages.pin.banner.view (:require [quo.core :as quo] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.platform :as platform] [react-native.reanimated :as reanimated] @@ -14,7 +14,7 @@ [blur/view {:style style/container :blur-radius (if platform/ios? 20 10) - :blur-type (if (theme/dark?) :dark :light) + :blur-type (if (quo.theme/dark?) :dark :light) :blur-amount 20}] [quo/banner {:latest-pin-text latest-pin-text diff --git a/src/status_im/contexts/communities/actions/channel_view_details/view.cljs b/src/status_im/contexts/communities/actions/channel_view_details/view.cljs index 39e7009d989..1cb3a79deb5 100644 --- a/src/status_im/contexts/communities/actions/channel_view_details/view.cljs +++ b/src/status_im/contexts/communities/actions/channel_view_details/view.cljs @@ -19,7 +19,7 @@ [primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity public-key]) {:keys [ens-verified added? compressed-key]} (rf/sub [:contacts/contact-by-address public-key]) - theme (quo.theme/use-theme-value)] + theme (quo.theme/use-theme)] [contact-list-item/contact-list-item {:on-press #(rf/dispatch [:chat.ui/show-profile public-key]) :on-long-press show-profile-actions @@ -65,7 +65,7 @@ pins-count (rf/sub [:chats/pin-messages-count chat-id]) items (rf/sub [:communities/sorted-community-members-section-list community-id]) - theme (quo.theme/use-theme-value)] + theme (quo.theme/use-theme)] (rn/use-mount (fn [] (rf/dispatch [:pin-message/load-pin-messages chat-id]))) [:<> diff --git a/src/status_im/contexts/communities/actions/invite_contacts/view.cljs b/src/status_im/contexts/communities/actions/invite_contacts/view.cljs index c9b17214543..1e6fb74ee4f 100644 --- a/src/status_im/contexts/communities/actions/invite_contacts/view.cljs +++ b/src/status_im/contexts/communities/actions/invite_contacts/view.cljs @@ -71,11 +71,12 @@ :disabled? community-member?} item])) -(defn view-internal - [{:keys [theme]}] +(defn view + [] (fn [] (rn/use-unmount #(rf/dispatch [:group-chat/clear-contacts])) - (let [customization-color (rf/sub [:profile/customization-color]) + (let [theme (quo.theme/use-theme) + customization-color (rf/sub [:profile/customization-color]) {:keys [id]} (rf/sub [:get-screen-params]) contacts (rf/sub [:contacts/filtered-active-sections]) selected (rf/sub [:group/selected-contacts]) @@ -137,5 +138,3 @@ (if (= 1 selected-contacts-count) (i18n/label :t/invite-1-user) (i18n/label :t/invite-n-users {:count selected-contacts-count}))])])]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/communities/actions/request_to_join/view.cljs b/src/status_im/contexts/communities/actions/request_to_join/view.cljs index 37abefc50c0..b8511c99995 100644 --- a/src/status_im/contexts/communities/actions/request_to_join/view.cljs +++ b/src/status_im/contexts/communities/actions/request_to_join/view.cljs @@ -22,10 +22,11 @@ (rf/dispatch [:navigate-back])) -(defn- view-internal - [{:keys [theme]}] +(defn view + [] (fn [] - (let [{:keys [id]} (rf/sub [:get-screen-params]) + (let [theme (quo.theme/use-theme) + {:keys [id]} (rf/sub [:get-screen-params]) {:keys [color name images]} (rf/sub [:communities/community id])] [rn/safe-area-view {:flex 1} [gesture/scroll-view {:style style/container} @@ -67,5 +68,3 @@ {:size :paragraph-2 :style style/final-disclaimer-text} (i18n/label :t/request-to-join-disclaimer)]]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/communities/discover/view.cljs b/src/status_im/contexts/communities/discover/view.cljs index 7851ba83bf7..531892c944b 100644 --- a/src/status_im/contexts/communities/discover/view.cljs +++ b/src/status_im/contexts/communities/discover/view.cljs @@ -225,10 +225,12 @@ featured-communities @view-type]]))) -(defn f-view-internal - [{:keys [theme]}] - (let [featured-communities (rf/sub [:communities/featured-contract-communities]) +(defn view + [] + (let [theme (quo.theme/use-theme) + featured-communities (rf/sub [:communities/featured-contract-communities]) customization-color (rf/sub [:profile/customization-color])] + (rn/use-mount #(rf/dispatch [:fetch-contract-communities])) [rn/view {:style (style/discover-screen-container (colors/theme-colors colors/white @@ -240,11 +242,3 @@ :customization-color customization-color :label (i18n/label :t/jump-to)}} style/floating-shell-button]])) - - -(defn- internal-discover-view - [params] - (rf/dispatch [:fetch-contract-communities]) - [:f> f-view-internal params]) - -(def view (quo.theme/with-theme internal-discover-view)) diff --git a/src/status_im/contexts/communities/home/view.cljs b/src/status_im/contexts/communities/home/view.cljs index d8ac34ab543..954c4d03439 100644 --- a/src/status_im/contexts/communities/home/view.cljs +++ b/src/status_im/contexts/communities/home/view.cljs @@ -75,12 +75,13 @@ :banner (resources/get-image :discover) :accessibility-label :communities-home-discover-card}}) -(defn- f-view-internal - [{:keys [theme]}] +(defn view + [] (let [flat-list-ref (atom nil) set-flat-list-ref #(reset! flat-list-ref %)] (fn [] - (let [customization-color (rf/sub [:profile/customization-color]) + (let [theme (quo.theme/use-theme) + customization-color (rf/sub [:profile/customization-color]) selected-tab (or (rf/sub [:communities/selected-tab]) :joined) {:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status]) selected-items (case selected-tab @@ -117,9 +118,3 @@ :selected-tab selected-tab :on-tab-change (fn [tab] (rf/dispatch [:communities/select-tab tab])) :scroll-shared-value scroll-shared-value}]])))) - -(defn- internal-communities-home-view - [params] - [:f> f-view-internal params]) - -(def view (quo.theme/with-theme internal-communities-home-view)) diff --git a/src/status_im/contexts/communities/overview/view.cljs b/src/status_im/contexts/communities/overview/view.cljs index ca897d6ce45..1030a95daaa 100644 --- a/src/status_im/contexts/communities/overview/view.cljs +++ b/src/status_im/contexts/communities/overview/view.cljs @@ -3,7 +3,7 @@ [oops.core :as oops] [quo.core :as quo] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] @@ -98,7 +98,7 @@ (defn- info-button [] - (let [theme (theme/use-theme)] + (let [theme (quo.theme/use-theme)] [rn/pressable {:on-press #(rf/dispatch diff --git a/src/status_im/contexts/preview/quo/common.cljs b/src/status_im/contexts/preview/quo/common.cljs index db616afe602..46a16198f49 100644 --- a/src/status_im/contexts/preview/quo/common.cljs +++ b/src/status_im/contexts/preview/quo/common.cljs @@ -5,9 +5,10 @@ [utils.re-frame :as rf])) -(defn- view-internal - [{:keys [theme title]}] - (let [logged-in? (rf/sub [:multiaccount/logged-in?]) +(defn navigation-bar + [{:keys [title]}] + (let [theme (quo.theme/use-theme) + logged-in? (rf/sub [:multiaccount/logged-in?]) has-profiles? (boolean (rf/sub [:profile/profiles-overview])) root (if has-profiles? :screen/profile.profiles :screen/onboarding.intro) light? (= theme :light)] @@ -23,5 +24,3 @@ (do (quo.theme/set-theme :dark) (rf/dispatch [:init-root root])))}])) - -(def navigation-bar (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/preview/quo/empty_state/empty_state.cljs b/src/status_im/contexts/preview/quo/empty_state/empty_state.cljs index 03a75f7729f..76b71c7c635 100644 --- a/src/status_im/contexts/preview/quo/empty_state/empty_state.cljs +++ b/src/status_im/contexts/preview/quo/empty_state/empty_state.cljs @@ -22,9 +22,10 @@ {:key :blur? :type :boolean}]) -(defn view-internal - [{:keys [theme]}] - (let [state (reagent/atom {:image :no-contacts +(defn view + [] + (let [theme (quo.theme/use-theme) + state (reagent/atom {:image :no-contacts :title "A big friendly title" :description "Some cool description will be here" :blur? false @@ -46,5 +47,3 @@ {:text (:lower-button-text @state) :on-press #(js/alert "Lower button")}) (assoc :image (resources/get-themed-image (:image @state) theme)))]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs b/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs index e4602f3564a..555f37e8047 100644 --- a/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs +++ b/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs @@ -173,7 +173,7 @@ {:flex 1 :padding 16} [preview/customizer state descriptor]] - [quo.theme/provider {:theme :dark} + [quo.theme/provider :dark [rn/view {:background-color colors/neutral-90 :flex-direction :row diff --git a/src/status_im/contexts/preview/quo/preview.cljs b/src/status_im/contexts/preview/quo/preview.cljs index ea0745bd43c..226a829131f 100644 --- a/src/status_im/contexts/preview/quo/preview.cljs +++ b/src/status_im/contexts/preview/quo/preview.cljs @@ -325,7 +325,7 @@ blur-container-style blur-view-props blur-height show-blur-background? full-screen?] :or {blur-height 200}} & children] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) title (or title @(rf/subscribe [:view-id]))] (rn/use-effect (fn [] (when blur-dark-only? diff --git a/src/status_im/contexts/profile/contact/header/view.cljs b/src/status_im/contexts/profile/contact/header/view.cljs index a8f89962f9e..96f3263416f 100644 --- a/src/status_im/contexts/profile/contact/header/view.cljs +++ b/src/status_im/contexts/profile/contact/header/view.cljs @@ -33,7 +33,7 @@ full-name (profile.utils/displayed-name contact) profile-picture (profile.utils/photo contact) online? (rf/sub [:visibility-status-updates/online? public-key]) - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) contact-status (rn/use-memo (fn [] (cond (= contact-request-state diff --git a/src/status_im/contexts/profile/contact/view.cljs b/src/status_im/contexts/profile/contact/view.cljs index a3f31478a97..b777a3b6589 100644 --- a/src/status_im/contexts/profile/contact/view.cljs +++ b/src/status_im/contexts/profile/contact/view.cljs @@ -26,7 +26,7 @@ (let [{:keys [customization-color]} (rf/sub [:contacts/current-contact]) profile-customization-color (rf/sub [:profile/customization-color]) scroll-y (reanimated/use-shared-value 0) - theme (quo.theme/use-theme-value)] + theme (quo.theme/use-theme)] [:<> [scroll-page/scroll-page {:navigate-back? true diff --git a/src/status_im/contexts/profile/edit/view.cljs b/src/status_im/contexts/profile/edit/view.cljs index 691556fcfdc..96dc0b77be7 100644 --- a/src/status_im/contexts/profile/edit/view.cljs +++ b/src/status_im/contexts/profile/edit/view.cljs @@ -23,9 +23,10 @@ [_ index] #js {:length 100 :offset (* 100 index) :index index}) -(defn internal-view - [theme] - (let [insets (safe-area/get-insets)] +(defn view + [] + (let [theme (quo.theme/use-theme) + insets (safe-area/get-insets)] [quo/overlay {:type :shell :container-style (style/page-wrapper (:top insets))} @@ -46,5 +47,3 @@ :max-to-render-per-batch 3 :shows-vertical-scroll-indicator false :render-fn item-view}]])) - -(def view (quo.theme/with-theme internal-view)) diff --git a/src/status_im/contexts/profile/settings/header/view.cljs b/src/status_im/contexts/profile/settings/header/view.cljs index 699572ef5e7..d545fa37433 100644 --- a/src/status_im/contexts/profile/settings/header/view.cljs +++ b/src/status_im/contexts/profile/settings/header/view.cljs @@ -12,9 +12,10 @@ [status-im.contexts.profile.utils :as profile.utils] [utils.re-frame :as rf])) -(defn- f-view - [{:keys [theme scroll-y]}] - (let [{:keys [public-key emoji-hash bio] :as profile} (rf/sub [:profile/profile-with-image]) +(defn view + [{:keys [scroll-y]}] + (let [theme (quo.theme/use-theme) + {:keys [public-key emoji-hash bio] :as profile} (rf/sub [:profile/profile-with-image]) online? (rf/sub [:visibility-status-updates/online? public-key]) status (rf/sub @@ -60,5 +61,3 @@ :emoji-hash emoji-string :description bio :title full-name}]])) - -(def view (quo.theme/with-theme f-view)) diff --git a/src/status_im/contexts/profile/settings/screens/password/view.cljs b/src/status_im/contexts/profile/settings/screens/password/view.cljs index a029992a8b9..dc0df7a4edb 100644 --- a/src/status_im/contexts/profile/settings/screens/password/view.cljs +++ b/src/status_im/contexts/profile/settings/screens/password/view.cljs @@ -56,9 +56,10 @@ :image-props :i/password :action :arrow}) -(defn- view-internal - [{:keys [theme]}] - (let [insets (safe-area/get-insets)] +(defn view + [] + (let [theme (quo.theme/use-theme) + insets (safe-area/get-insets)] [quo/overlay {:type :shell} [rn/view {:key :navigation @@ -82,5 +83,3 @@ (get-change-password-item)] :blur? true :list-type :settings}]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/profile/settings/view.cljs b/src/status_im/contexts/profile/settings/view.cljs index 599eaaca3b1..cfd4f9e1899 100644 --- a/src/status_im/contexts/profile/settings/view.cljs +++ b/src/status_im/contexts/profile/settings/view.cljs @@ -38,9 +38,10 @@ [_ index] #js {:length 100 :offset (* 100 index) :index index}) -(defn- settings-view - [theme] - (let [insets (safe-area/get-insets) +(defn view + [] + (let [theme (quo.theme/use-theme) + insets (safe-area/get-insets) customization-color (rf/sub [:profile/customization-color]) scroll-y (reanimated/use-shared-value 0) logout-press #(rf/dispatch [:multiaccounts.logout.ui/logout-pressed]) @@ -82,9 +83,3 @@ :customization-color customization-color :label (i18n/label :t/jump-to)}} (style/floating-shell-button-style insets)]])) - -(defn- internal-view - [props] - [:f> settings-view props]) - -(def view (quo.theme/with-theme internal-view)) diff --git a/src/status_im/contexts/shell/activity_center/tabs/empty_tab/view.cljs b/src/status_im/contexts/shell/activity_center/tabs/empty_tab/view.cljs index a91eeb1a0b7..f524b6af7ed 100644 --- a/src/status_im/contexts/shell/activity_center/tabs/empty_tab/view.cljs +++ b/src/status_im/contexts/shell/activity_center/tabs/empty_tab/view.cljs @@ -20,9 +20,10 @@ types/membership (i18n/label :t/empty-notifications-membership-tab) types/system (i18n/label :t/empty-notifications-system-tab)}) -(defn empty-tab-internal - [{:keys [theme]}] - (let [filter-type (rf/sub [:activity-center/filter-type]) +(defn empty-tab + [] + (let [theme (quo.theme/use-theme) + filter-type (rf/sub [:activity-center/filter-type]) description (get empty-tab-description filter-type nil)] [rn/view {:style style/empty-container} [quo/empty-state @@ -30,5 +31,3 @@ :image (resources/get-themed-image :no-notifications theme) :title (i18n/label :t/empty-notifications-title-unread) :description description}]])) - -(def empty-tab (quo.theme/with-theme empty-tab-internal)) diff --git a/src/status_im/contexts/shell/jump_to/components/bottom_tabs/view.cljs b/src/status_im/contexts/shell/jump_to/components/bottom_tabs/view.cljs index fb9f2e9b24a..687441ba876 100644 --- a/src/status_im/contexts/shell/jump_to/components/bottom_tabs/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/bottom_tabs/view.cljs @@ -59,7 +59,7 @@ shared-values))] (utils/load-stack @state/selected-stack-id) (reanimated/set-shared-value (:pass-through? shared-values) pass-through?) - [quo.theme/provider {:theme :dark} + [quo.theme/provider :dark [reanimated/view {:style (style/bottom-tabs-container pass-through? (:bottom-tabs-height shared-values))} (when pass-through? diff --git a/src/status_im/contexts/shell/jump_to/components/floating_screens/view.cljs b/src/status_im/contexts/shell/jump_to/components/floating_screens/view.cljs index 33ba142ba9c..b5a62ef6a09 100644 --- a/src/status_im/contexts/shell/jump_to/components/floating_screens/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/floating_screens/view.cljs @@ -20,7 +20,7 @@ (defn f-screen [{:keys [screen-id id animation clock] :as screen-param}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] ;; First render screen, then animate (smoother animation) (rn/use-effect (fn [] diff --git a/src/status_im/contexts/shell/jump_to/components/home_stack/view.cljs b/src/status_im/contexts/shell/jump_to/components/home_stack/view.cljs index 734a6bc9c54..058e9b6af6e 100644 --- a/src/status_im/contexts/shell/jump_to/components/home_stack/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/home_stack/view.cljs @@ -44,7 +44,7 @@ (defn f-home-stack [] (let [shared-values @state/shared-values-atom - theme (quo.theme/use-theme-value) + theme (quo.theme/use-theme) {:keys [width height]} (utils/dimensions) alert-banners-top-margin (rf/sub [:alert-banners/top-margin])] [reanimated/view diff --git a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs index 1054922f552..f27c32b4320 100644 --- a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs @@ -2,7 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.blur :as blur] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient] @@ -90,7 +90,7 @@ [] (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards]) top (safe-area/get-top)] - [theme/provider {:theme :dark} + [quo.theme/provider :dark [rn/view {:style {:top 0 :left 0 diff --git a/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs b/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs index 8c798e69b81..60561f958bd 100644 --- a/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs +++ b/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs @@ -20,9 +20,10 @@ :add-divider? true :danger? true}]]]) -(defn- view-internal - [{:keys [theme]}] - (let [dapps-list []] +(defn view + [] + (let [theme (quo.theme/use-theme) + dapps-list []] (if (empty? dapps-list) [empty-tab/view {:title (i18n/label :t/no-dapps) @@ -34,5 +35,3 @@ :style (style/dapps-list theme) :render-fn (fn [item] [quo/dapp item]) :separator [rn/view {:style (style/separator theme)}]}]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs index 4973bbe1333..9c91714b201 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs @@ -15,7 +15,7 @@ [utils.re-frame :as rf] [utils.security.core :as security])) -(defn- view-internal +(defn view "States: default(filled) | -> (reveal-action) -> show @@ -30,8 +30,9 @@ (reset! path-value "") (when on-reset (on-reset)))] - (fn [{:keys [theme]}] - (let [{:keys [public-key address]} (rf/sub [:profile/profile]) + (fn [] + (let [theme (quo.theme/use-theme) + {:keys [public-key address]} (rf/sub [:profile/profile]) {:keys [password current-derivation-path]} (rf/sub [:get-screen-params]) primary-name (first (rf/sub [:contacts/contact-two-names-by-identity @@ -144,6 +145,3 @@ :on-delete (fn [] (reset! path-value (subs @path-value 0 (dec (count @path-value)))) (on-change-text))}])])))) - -(def view (quo.theme/with-theme view-internal)) - diff --git a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs index d2f8369f7c8..4e43bd5e89f 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/view.cljs @@ -37,8 +37,8 @@ :on-change #(swap! checked? assoc (keyword (str index)) %)}] [quo/text {:style {:margin-left 12}} (i18n/label item)]]) -(defn- f-view - [{:keys [theme]}] +(defn view + [] (let [step-labels [:t/backup-step-1 :t/backup-step-2 :t/backup-step-3 :t/backup-step-4] checked? (reagent/atom @@ -51,71 +51,67 @@ secret-phrase (reagent/atom []) random-phrase (reagent/atom [])] (fn [] - (rn/use-mount - (fn [] - (native-module/get-random-mnemonic #(reset! secret-phrase (string/split % #"\s"))) - (native-module/get-random-mnemonic #(reset! random-phrase (string/split % #"\s"))))) - [rn/view {:style {:flex 1}} - [quo/page-nav - {:icon-name :i/close - :on-press #(rf/dispatch [:navigate-back]) - :accessibility-label :top-bar}] - [quo/page-top - {:title (i18n/label :t/backup-recovery-phrase) - :description :text - :description-text (i18n/label :t/backup-recovery-phrase-description) - :container-style {:padding-bottom 8}}] - [rn/view {:style (style/seed-phrase-container theme)} - (when (pos? (count @secret-phrase)) - [:<> - [words-column - {:words @secret-phrase - :first-half? true}] - [rn/view {:style (style/separator theme)}] - [words-column - {:words @secret-phrase - :first-half? false}]]) - (when-not @revealed? - [rn/view {:style style/blur-container} - [blur/view (style/blur theme)]])] - (when-not @revealed? - [rn/view - {:style {:padding-horizontal 20 - :padding-top 20}} - [quo/text - {:weight :semi-bold - :style {:margin-bottom 8}} - (i18n/label :t/how-to-backup)] - [rn/flat-list - {:data step-labels - :render-fn step-item - :render-data {:checked? checked? - :customization-color customization-color} - :scroll-enabled false}]]) - (if @revealed? - [rn/view {:style style/slide-button} - [quo/bottom-actions - {:actions :one-action - :button-one-label (i18n/label :t/i-have-written) - :button-one-props {:disabled? (some false? (vals @checked?)) - :customization-color customization-color - :on-press #(rf/dispatch [:wallet/store-secret-phrase - {:secret-phrase @secret-phrase - :random-phrase @random-phrase}])}}] - [quo/text - {:size :paragraph-2 - :style (style/description-text theme)} - (i18n/label :t/next-you-will)]] - [quo/bottom-actions - {:actions :one-action - :button-one-label (i18n/label :t/reveal-phrase) - :button-one-props {:disabled? (some false? (vals @checked?)) - :customization-color customization-color - :on-press #(reset! revealed? true)} - :container-style style/slide-button}])]))) + (let [theme (quo.theme/use-theme)] -(defn view-internal - [params] - [:f> f-view params]) - -(def view (quo.theme/with-theme view-internal)) + (rn/use-mount + (fn [] + (native-module/get-random-mnemonic #(reset! secret-phrase (string/split % #"\s"))) + (native-module/get-random-mnemonic #(reset! random-phrase (string/split % #"\s"))))) + [rn/view {:style {:flex 1}} + [quo/page-nav + {:icon-name :i/close + :on-press #(rf/dispatch [:navigate-back]) + :accessibility-label :top-bar}] + [quo/page-top + {:title (i18n/label :t/backup-recovery-phrase) + :description :text + :description-text (i18n/label :t/backup-recovery-phrase-description) + :container-style {:padding-bottom 8}}] + [rn/view {:style (style/seed-phrase-container theme)} + (when (pos? (count @secret-phrase)) + [:<> + [words-column + {:words @secret-phrase + :first-half? true}] + [rn/view {:style (style/separator theme)}] + [words-column + {:words @secret-phrase + :first-half? false}]]) + (when-not @revealed? + [rn/view {:style style/blur-container} + [blur/view (style/blur theme)]])] + (when-not @revealed? + [rn/view + {:style {:padding-horizontal 20 + :padding-top 20}} + [quo/text + {:weight :semi-bold + :style {:margin-bottom 8}} + (i18n/label :t/how-to-backup)] + [rn/flat-list + {:data step-labels + :render-fn step-item + :render-data {:checked? checked? + :customization-color customization-color} + :scroll-enabled false}]]) + (if @revealed? + [rn/view {:style style/slide-button} + [quo/bottom-actions + {:actions :one-action + :button-one-label (i18n/label :t/i-have-written) + :button-one-props {:disabled? (some false? (vals @checked?)) + :customization-color customization-color + :on-press #(rf/dispatch [:wallet/store-secret-phrase + {:secret-phrase @secret-phrase + :random-phrase @random-phrase}])}}] + [quo/text + {:size :paragraph-2 + :style (style/description-text theme)} + (i18n/label :t/next-you-will)]] + [quo/bottom-actions + {:actions :one-action + :button-one-label (i18n/label :t/reveal-phrase) + :button-one-props {:disabled? (some false? (vals @checked?)) + :customization-color customization-color + :on-press #(reset! revealed? true)} + :container-style style/slide-button}])])))) diff --git a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs index 9d443f24fa2..acf6eb08a52 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.wallet.add-account.create-account.new-keypair.check-your-backup.view (:require [quo.core :as quo] - [quo.theme :as quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.wallet.add-account.create-account.new-keypair.check-your-backup.style :as style] @@ -59,7 +58,7 @@ :margin-right 12)] [button (assoc params :word (second options))]]) -(defn- view-internal +(defn view [] (let [random-indices (random-selection) quiz-index (reagent/atom 0) @@ -128,5 +127,3 @@ [buttons-row {:on-press on-button-press :options options-row-1}]]])))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/add_account/create_account/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/view.cljs index 43219cc9324..e05911a208a 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/view.cljs @@ -58,7 +58,7 @@ :description :text :description-props {:text formatted-path}}])) -(defn- f-view +(defn view [_] (let [top (safe-area/get-top) bottom (safe-area/get-bottom) @@ -69,8 +69,9 @@ on-change-text #(reset! account-name %) show-account-origin #(rf/dispatch [:show-bottom-sheet {:content account-origin/view}])] - (fn [{:keys [theme]}] - (let [number-of-accounts (count (rf/sub + (fn [] + (let [theme (quo.theme/use-theme) + number-of-accounts (count (rf/sub [:wallet/accounts-without-watched-accounts])) {:keys [address customization-color]} (rf/sub [:profile/profile]) {:keys [new-keypair]} (rf/sub [:wallet/create-account]) @@ -179,9 +180,3 @@ :new-keypair? (boolean new-keypair) :derivation-path derivation-path :customization-color customization-color})}]])))) - -(defn- view-internal - [] - [:f> f-view]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/bridge/bridge_to/view.cljs b/src/status_im/contexts/wallet/bridge/bridge_to/view.cljs index f318d28ace7..2796e34fa08 100644 --- a/src/status_im/contexts/wallet/bridge/bridge_to/view.cljs +++ b/src/status_im/contexts/wallet/bridge/bridge_to/view.cljs @@ -33,7 +33,7 @@ {:network-chain-id chain-id :stack-id :screen/wallet.bridge-to}])}]))) -(defn- view-internal +(defn view [] (let [send-bridge-data (rf/sub [:wallet/wallet-send]) network-details (rf/sub [:wallet/network-details]) @@ -61,5 +61,3 @@ :render-fn (fn [network] [bridge-token-component network account-token]) :content-container-style style/content-container}]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/bridge/input_amount/view.cljs b/src/status_im/contexts/wallet/bridge/input_amount/view.cljs index 05984cce5de..437c1a1630d 100644 --- a/src/status_im/contexts/wallet/bridge/input_amount/view.cljs +++ b/src/status_im/contexts/wallet/bridge/input_amount/view.cljs @@ -1,13 +1,12 @@ (ns status-im.contexts.wallet.bridge.input-amount.view (:require - [quo.theme] [react-native.core :as rn] [status-im.contexts.wallet.bridge.input-amount.style :as style] [status-im.contexts.wallet.send.input-amount.view :as input-amount] [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn- view-internal +(defn view [] [rn/view {:style style/bridge-send-wrapper} [input-amount/view @@ -17,5 +16,3 @@ :on-navigate-back (fn [] (rf/dispatch [:wallet/clean-disabled-from-networks]) (rf/dispatch [:navigate-back]))}]]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/collectible/tabs/about/view.cljs b/src/status_im/contexts/wallet/collectible/tabs/about/view.cljs index 41f60f36ca9..12a214c46da 100644 --- a/src/status_im/contexts/wallet/collectible/tabs/about/view.cljs +++ b/src/status_im/contexts/wallet/collectible/tabs/about/view.cljs @@ -1,6 +1,5 @@ (ns status-im.contexts.wallet.collectible.tabs.about.view (:require [quo.core :as quo] - [quo.theme] [react-native.core :as rn] [status-im.contexts.wallet.collectible.tabs.about.style :as style] [utils.i18n :as i18n] @@ -8,7 +7,7 @@ (def ^:private link-card-space 28) -(defn- view-internal +(defn view [] (let [window-width (rf/sub [:dimensions/window-width]) item-width (- (/ window-width 2) link-card-space) @@ -33,5 +32,3 @@ (for [item (:cards collectible-about)] ^{:key (:title item)} [quo/link-card (assoc item :container-style link-card-container-style)])])])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs b/src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs index c34e433c9eb..635b7d64c45 100644 --- a/src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs +++ b/src/status_im/contexts/wallet/collectible/tabs/overview/view.cljs @@ -63,10 +63,8 @@ :network-image (quo.resources/get-network network-name) :subtitle subtitle}]]])) -(defn- view-internal +(defn view [] [:<> [info] [traits-section]]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/collectible/tabs/view.cljs b/src/status_im/contexts/wallet/collectible/tabs/view.cljs index e0939d9599e..d695985a27c 100644 --- a/src/status_im/contexts/wallet/collectible/tabs/view.cljs +++ b/src/status_im/contexts/wallet/collectible/tabs/view.cljs @@ -4,12 +4,10 @@ [status-im.contexts.wallet.collectible.tabs.activity.view :as activity] [status-im.contexts.wallet.collectible.tabs.overview.view :as overview])) -(defn- view-internal +(defn view [{:keys [selected-tab]}] (case selected-tab :overview [overview/view] :about [about/view] :activity [activity/view] nil)) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index 594a718a887..6e70090adfc 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -50,12 +50,13 @@ :label (i18n/label :t/about) :accessibility-label :about-tab}]) -(defn f-view-internal - [{:keys [theme] :as _props}] +(defn view + [_] (let [selected-tab (reagent/atom :overview) on-tab-change #(reset! selected-tab %)] (fn [] - (let [collectible (rf/sub [:wallet/last-collectible-details]) + (let [theme (quo.theme/use-theme) + collectible (rf/sub [:wallet/last-collectible-details]) animation-shared-element-id (rf/sub [:animation-shared-element-id]) {:keys [id preview-url @@ -130,9 +131,3 @@ :on-change on-tab-change :data tabs-data}] [tabs/view {:selected-tab @selected-tab}]]])))) - -(defn- view-internal - [props] - [:f> f-view-internal props]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/common/activity_tab/view.cljs b/src/status_im/contexts/wallet/common/activity_tab/view.cljs index 75b8632ce1e..00c7b38e70b 100644 --- a/src/status_im/contexts/wallet/common/activity_tab/view.cljs +++ b/src/status_im/contexts/wallet/common/activity_tab/view.cljs @@ -15,9 +15,10 @@ (merge {:on-press #(js/alert "Item pressed")} item)]]) -(defn- view-internal - [{:keys [theme]}] - (let [activity-list []] +(defn view + [] + (let [theme (quo.theme/use-theme) + activity-list []] (if (empty? activity-list) [empty-tab/view {:title (i18n/label :t/no-activity) @@ -27,5 +28,3 @@ {:data activity-list :style {:flex 1} :render-fn activity-item}]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs b/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs index 506611b740f..b46326ee765 100644 --- a/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs +++ b/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs @@ -7,9 +7,10 @@ [status-im.contexts.wallet.common.empty-tab.view :as empty-tab] [utils.i18n :as i18n])) -(defn- view-internal - [{:keys [theme collectibles filtered? on-collectible-press on-collectible-long-press on-end-reached]}] - (let [no-results-match-query? (and filtered? (empty? collectibles))] +(defn view + [{:keys [collectibles filtered? on-collectible-press on-collectible-long-press on-end-reached]}] + (let [theme (quo.theme/use-theme) + no-results-match-query? (and filtered? (empty? collectibles))] (cond no-results-match-query? [rn/view {:style {:flex 1 :justify-content :center}} @@ -40,5 +41,3 @@ (on-collectible-long-press collectible))}]) :on-end-reached on-end-reached :on-end-reached-threshold 4}]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/input_amount/view.cljs b/src/status_im/contexts/wallet/send/input_amount/view.cljs index b2505e062ad..8e515df2364 100644 --- a/src/status_im/contexts/wallet/send/input_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/input_amount/view.cljs @@ -2,7 +2,6 @@ (:require [clojure.string :as string] [quo.core :as quo] - [quo.theme :as quo.theme] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -136,7 +135,7 @@ (rf/dispatch [:wallet/edit-token-to-send token]) (clear-input!))}]])) -(defn- f-view-internal +(defn view ;; crypto-decimals, limit-crypto and initial-crypto-currency? args are needed ;; for component tests only [{default-on-confirm :on-confirm @@ -372,9 +371,3 @@ :on-press #(handle-keyboard-press % loading-routes? (current-limit)) :on-delete #(handle-delete loading-routes? (current-limit)) :on-long-press-delete #(on-long-press-delete loading-routes?)}]])))) - -(defn- view-internal - [props] - [:f> f-view-internal props]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/routes/view.cljs b/src/status_im/contexts/wallet/send/routes/view.cljs index 81f460fa466..e0268ee22f6 100644 --- a/src/status_im/contexts/wallet/send/routes/view.cljs +++ b/src/status_im/contexts/wallet/send/routes/view.cljs @@ -200,10 +200,11 @@ :on-press-from-network on-press-from-network :on-press-to-network on-press-to-network}])) -(defn- view-internal - [{:keys [from-values-by-chain to-values-by-chain routes token theme fetch-routes +(defn view + [{:keys [from-values-by-chain to-values-by-chain routes token fetch-routes affordable-networks disabled-from-networks on-press-from-network on-press-to-network]}] - (let [token-symbol (:symbol token) + (let [theme (quo.theme/use-theme) + token-symbol (:symbol token) loading-suggested-routes? (rf/sub [:wallet/wallet-send-loading-suggested-routes?]) network-links (if loading-suggested-routes? affordable-networks routes)] (if (or (and (not-empty affordable-networks) loading-suggested-routes?) (not-empty routes)) @@ -241,5 +242,3 @@ [rn/view {:style style/empty-container} (when (and (not (nil? routes)) (not loading-suggested-routes?)) [quo/text (i18n/label :t/no-routes-found)])]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/select_address/tabs/view.cljs b/src/status_im/contexts/wallet/send/select_address/tabs/view.cljs index fcca70f35e8..bf54d0567e8 100644 --- a/src/status_im/contexts/wallet/send/select_address/tabs/view.cljs +++ b/src/status_im/contexts/wallet/send/select_address/tabs/view.cljs @@ -27,24 +27,23 @@ :stack-id :screen/wallet.select-address}])}])) other-accounts)))) -(defn view-internal - [{:keys [selected-tab theme]}] - (case selected-tab - :tab/recent [quo/empty-state - {:title (i18n/label :t/no-recent-transactions) - :description (i18n/label :t/make-one-it-is-easy-we-promise) - :image (resources/get-themed-image :angry-man theme) - :container-style style/empty-container-style}] - :tab/saved [quo/empty-state - {:title (i18n/label :t/no-saved-addresses) - :description (i18n/label :t/you-like-to-type-43-characters) - :image (resources/get-themed-image :sweating-man theme) - :container-style style/empty-container-style}] - :tab/contacts [quo/empty-state - {:title (i18n/label :t/no-contacts) - :description (i18n/label :t/no-contacts-description) - :image (resources/get-themed-image :no-contacts theme) - :container-style style/empty-container-style}] - :tab/my-accounts [my-accounts theme])) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [selected-tab]}] + (let [theme (quo.theme/use-theme)] + (case selected-tab + :tab/recent [quo/empty-state + {:title (i18n/label :t/no-recent-transactions) + :description (i18n/label :t/make-one-it-is-easy-we-promise) + :image (resources/get-themed-image :angry-man theme) + :container-style style/empty-container-style}] + :tab/saved [quo/empty-state + {:title (i18n/label :t/no-saved-addresses) + :description (i18n/label :t/you-like-to-type-43-characters) + :image (resources/get-themed-image :sweating-man theme) + :container-style style/empty-container-style}] + :tab/contacts [quo/empty-state + {:title (i18n/label :t/no-contacts) + :description (i18n/label :t/no-contacts-description) + :image (resources/get-themed-image :no-contacts theme) + :container-style style/empty-container-style}] + :tab/my-accounts [my-accounts theme]))) diff --git a/src/status_im/contexts/wallet/send/select_asset/view.cljs b/src/status_im/contexts/wallet/send/select_asset/view.cljs index 27c2e4675f6..1911173945d 100644 --- a/src/status_im/contexts/wallet/send/select_asset/view.cljs +++ b/src/status_im/contexts/wallet/send/select_asset/view.cljs @@ -2,7 +2,6 @@ (:require [clojure.string :as string] [quo.core :as quo] - [quo.theme :as quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.wallet.collectible.utils :as utils] @@ -64,7 +63,7 @@ :on-token-press on-token-press}] :tab/collectibles [collectibles-grid search-text])])) -(defn- f-view-internal +(defn view [] (let [selected-tab (reagent/atom (:id (first tabs-data))) search-text (reagent/atom "") @@ -93,9 +92,3 @@ :data tabs-data :on-change on-change-tab}] [tab-view @search-text @selected-tab on-change-text]]))) - -(defn- view-internal - [] - [:f> f-view-internal]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/send_amount/view.cljs b/src/status_im/contexts/wallet/send/send_amount/view.cljs index 8f7ec9041e6..85aa8d1cf3b 100644 --- a/src/status_im/contexts/wallet/send/send_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/send_amount/view.cljs @@ -5,7 +5,7 @@ [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn- view-internal +(defn view [] [input-amount/view {:current-screen-id :screen/wallet.send-input-amount @@ -13,5 +13,3 @@ :on-navigate-back (fn [] (rf/dispatch [:wallet/clean-disabled-from-networks]) (rf/dispatch [:navigate-back]))}]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs b/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs index c136fb04989..d4b16bd57e4 100644 --- a/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs +++ b/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs @@ -207,13 +207,14 @@ [quo/text {:style {:align-self :center}} (i18n/label :t/no-routes-found-confirmation)])]])) -(defn- view-internal +(defn view [_] (let [on-close (fn [] (rf/dispatch [:wallet/clean-suggested-routes]) (rf/dispatch [:navigate-back]))] - (fn [{:keys [theme]}] - (let [send-transaction-data (rf/sub [:wallet/wallet-send]) + (fn [] + (let [theme (quo.theme/use-theme) + send-transaction-data (rf/sub [:wallet/wallet-send]) {:keys [token-display-name collectible amount route to-address bridge-to-chain-id from-values-by-chain @@ -303,5 +304,3 @@ :theme theme :route route :transaction-type transaction-type}]]]])))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/account_options/view.cljs b/src/status_im/contexts/wallet/sheets/account_options/view.cljs index 5e6fc4ece51..691cbd05112 100644 --- a/src/status_im/contexts/wallet/sheets/account_options/view.cljs +++ b/src/status_im/contexts/wallet/sheets/account_options/view.cljs @@ -107,11 +107,12 @@ {:section (i18n/label :t/select-another-account) :container-style style/drawer-section-label}]])])) -(defn- view-internal +(defn view [] (let [options-height (reagent/atom 0)] - (fn [{:keys [theme]}] - (let [accounts (rf/sub [:wallet/accounts-without-current-viewing-account]) + (fn [] + (let [theme (quo.theme/use-theme) + accounts (rf/sub [:wallet/accounts-without-current-viewing-account]) show-account-selector? (pos? (count accounts))] [:<> (when show-account-selector? @@ -124,5 +125,3 @@ {:show-account-selector? show-account-selector? :theme theme :options-height options-height}]])))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/account_origin/view.cljs b/src/status_im/contexts/wallet/sheets/account_origin/view.cljs index bd47b9cfb5c..b0626de2ae8 100644 --- a/src/status_im/contexts/wallet/sheets/account_origin/view.cljs +++ b/src/status_im/contexts/wallet/sheets/account_origin/view.cljs @@ -27,7 +27,7 @@ [header title] [description desc]]) -(defn- view-internal +(defn view [] [rn/view [quo/drawer-top {:title (i18n/label :t/account-origin-header)}] @@ -43,5 +43,3 @@ :container-style style/action-container :on-press #(rn/open-url const/create-account-link)} (i18n/label :t/read-more)]]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs index f04e051f9e6..37ec3ba0cf7 100644 --- a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs +++ b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs @@ -10,7 +10,7 @@ [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn- view-internal +(defn view [{:keys [selected-networks account watch-only?]}] (let [state (reagent/atom :default) {:keys [color address @@ -34,8 +34,9 @@ (if (= @state :default) initial-network-preferences-names @network-preferences-names-state))] - (fn [{:keys [on-save blur? theme button-label]}] - (let [network-details (rf/sub [:wallet/network-details]) + (fn [{:keys [on-save blur? button-label]}] + (let [theme (quo.theme/use-theme) + network-details (rf/sub [:wallet/network-details]) mainnet (first network-details) layer-2-networks (rest network-details) current-networks (filter (fn [network] @@ -105,5 +106,3 @@ (let [chain-ids (map :chain-id current-networks)] (on-save chain-ids))) :customization-color color}}]])))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/remove_account/view.cljs b/src/status_im/contexts/wallet/sheets/remove_account/view.cljs index 169f48074d7..3c91f5cb55a 100644 --- a/src/status_im/contexts/wallet/sheets/remove_account/view.cljs +++ b/src/status_im/contexts/wallet/sheets/remove_account/view.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.wallet.sheets.remove-account.view (:require [quo.core :as quo] - [quo.theme] [react-native.clipboard :as clipboard] [react-native.core :as rn] [reagent.core :as reagent] @@ -90,12 +89,10 @@ :address address :toast-message (i18n/label :t/watched-account-removed)}]]) -(defn- view-internal +(defn view [] (let [{:keys [type] :as account} (rf/sub [:wallet/current-viewing-account])] (case type :generated [recovery-phase-flow account] :watch [watched-address-flow account] nil))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/sheets/select_account/view.cljs b/src/status_im/contexts/wallet/sheets/select_account/view.cljs index 230195d78f2..5a3df1d0f05 100644 --- a/src/status_im/contexts/wallet/sheets/select_account/view.cljs +++ b/src/status_im/contexts/wallet/sheets/select_account/view.cljs @@ -17,7 +17,7 @@ (rf/dispatch [:wallet/switch-current-viewing-account address]) (rf/dispatch [:hide-bottom-sheet]))}]) -(defn- view-internal +(defn view [] (let [selected-account-address (rf/sub [:wallet/current-viewing-account-address]) accounts (rf/sub [:wallet/accounts-without-watched-accounts])] @@ -29,5 +29,3 @@ :render-data {:selected-account-address selected-account-address} :content-container-style style/list-container :shows-vertical-scroll-indicator false}]])) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/navigation/view.cljs b/src/status_im/navigation/view.cljs index e7443225a34..c350effe525 100644 --- a/src/status_im/navigation/view.cljs +++ b/src/status_im/navigation/view.cljs @@ -3,7 +3,7 @@ [legacy.status-im.bottom-sheet.sheets :as bottom-sheets-old] [legacy.status-im.ui.screens.popover.views :as popover] [quo.foundations.colors :as colors] - [quo.theme :as theme] + [quo.theme] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -67,12 +67,12 @@ {:keys [component options]} (or qualified-screen-details screen-details) {:keys [insets sheet? theme skip-background?]} options - user-theme (theme/get-theme) + user-theme (quo.theme/get-theme) alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) background-color (or (get-in options [:layout :backgroundColor]) (when sheet? :transparent))] ^{:key (str "root" screen-key @reloader/cnt)} - [theme/provider {:theme (or theme user-theme)} + [quo.theme/provider (or theme user-theme) [rn/view {:style (wrapped-screen-style (assoc insets @@ -95,10 +95,10 @@ sheet (last sheets) {:keys [theme]} sheet insets (safe-area/get-insets) - user-theme (theme/get-theme) + user-theme (quo.theme/get-theme) keyboard-vertical-offset (- (max 20 (:bottom insets)))] ^{:key (str "sheet" @reloader/cnt)} - [theme/provider {:theme (or theme user-theme)} + [quo.theme/provider (or theme user-theme) [inactive] [rn/keyboard-avoiding-view {:style {:position :relative :flex 1} @@ -115,7 +115,7 @@ (reagent/reactify-component (fn [] ^{:key (str "alert-banner" @reloader/cnt)} - [theme/provider {:theme :dark} + [quo.theme/provider :dark [alert-banner/view]]) functional-compiler)) diff --git a/src/status_im/subs/contact.cljs b/src/status_im/subs/contact.cljs index 624302871f8..83d10cf36a5 100644 --- a/src/status_im/subs/contact.cljs +++ b/src/status_im/subs/contact.cljs @@ -3,7 +3,7 @@ [clojure.string :as string] [legacy.status-im.contact.db :as contact.db] [legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame] [status-im.common.pixel-ratio :as pixel-ratio] [status-im.constants :as constants] @@ -34,7 +34,7 @@ (defn- replace-contact-image-uri [contact port public-key font-file] - (let [theme (theme/get-theme) + (let [theme (quo.theme/get-theme) {:keys [images ens-name customization-color]} contact images (reduce (fn [acc image] diff --git a/src/status_im/subs/profile.cljs b/src/status_im/subs/profile.cljs index 441bfa02bcb..4db29285e9d 100644 --- a/src/status_im/subs/profile.cljs +++ b/src/status_im/subs/profile.cljs @@ -5,7 +5,7 @@ [legacy.status-im.fleet.core :as fleet] [legacy.status-im.multiaccounts.db :as multiaccounts.db] [legacy.status-im.utils.currency :as currency] - [quo.theme :as theme] + [quo.theme] [re-frame.core :as re-frame] [status-im.common.pixel-ratio :as pixel-ratio] [status-im.constants :as constants] @@ -48,13 +48,13 @@ :ratio pixel-ratio/ratio :image-name image-name :key-uid target-key-uid - :theme (theme/get-theme) + :theme (quo.theme/get-theme) :override-ring? override-ring?}) (image-server/get-initials-avatar-uri-fn {:port port :ratio pixel-ratio/ratio :key-uid target-key-uid - :theme (theme/get-theme) + :theme (quo.theme/get-theme) :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) :customization-color customization-color :override-ring? override-ring? @@ -235,7 +235,7 @@ (let [{:keys [key-uid ens-name? images customization-color]} profile ens-name? (or ens-name? (seq ens-names)) - theme (theme/get-theme) + theme (quo.theme/get-theme) avatar-opts (assoc avatar-opts :override-ring? (when ens-name? false)) images-with-uri (mapv (fn [{key-uid :keyUid image-name :type :as image}] (let [uri-fn (image-server/get-account-image-uri-fn diff --git a/src/test_helpers/component.cljs b/src/test_helpers/component.cljs index abf30c565c4..7e6f03c4893 100644 --- a/src/test_helpers/component.cljs +++ b/src/test_helpers/component.cljs @@ -56,7 +56,7 @@ ([component] (render-with-theme-provider component :light)) ([component theme] - (rtl/render (reagent/as-element [quo.theme/provider {:theme theme} component])))) + (rtl/render (reagent/as-element [quo.theme/provider theme component])))) (def unmount "Unmount rendered component. diff --git a/src/tests/contract_test/wallet_test.cljs b/src/tests/contract_test/wallet_test.cljs index 6fe23900d95..8f780b3bd15 100644 --- a/src/tests/contract_test/wallet_test.cljs +++ b/src/tests/contract_test/wallet_test.cljs @@ -105,28 +105,30 @@ chain-id ens-address)] (assert-address-details response))))) + (defn assert-search-ens [expected-result actual-result] (is (= expected-result actual-result))) -(deftest wallet-search-ens-test - (h/test-async :wallet/search-ens - (fn [] - (promesa/let [_ (h/enable-testnet!)] - (let [test-cases [{:description "Test on Ethereum mainnet" - :ens-name "test.eth" - :chain-id constants/ethereum-mainnet-chain-id - :expected-result "0xeefb13c7d42efcc655e528da6d6f7bbcf9a2251d"} - {:description "Test on Goerli testnet" - :ens-name "qoqobolo.stateofus.eth" - :chain-id constants/ethereum-goerli-chain-id - :expected-result "0xf8f4f6b5c73f4fb561eb2676326d81b7aba180b0"} - {:description "Test on Sepolia testnet" - :ens-name "code.eth" - :chain-id constants/ethereum-sepolia-chain-id - :expected-result "0x035ebd096afa6b98372494c7f08f3402324117d3"}]] - (promesa/all - (map (fn [{:keys [ens-name chain-id expected-result]}] - (promesa/let [ens-address (contract-utils/call-rpc "ens_addressOf" chain-id ens-name)] - (assert-search-ens expected-result ens-address))) - test-cases))))))) +#_(deftest wallet-search-ens-test + (h/test-async :wallet/search-ens + (fn [] + (promesa/let [_ (h/enable-testnet!)] + (let [test-cases [{:description "Test on Ethereum mainnet" + :ens-name "test.eth" + :chain-id constants/ethereum-mainnet-chain-id + :expected-result "0xeefb13c7d42efcc655e528da6d6f7bbcf9a2251d"} + {:description "Test on Goerli testnet" + :ens-name "qoqobolo.stateofus.eth" + :chain-id constants/ethereum-goerli-chain-id + :expected-result "0xf8f4f6b5c73f4fb561eb2676326d81b7aba180b0"} + {:description "Test on Sepolia testnet" + :ens-name "code.eth" + :chain-id constants/ethereum-sepolia-chain-id + :expected-result "0x035ebd096afa6b98372494c7f08f3402324117d3"}]] + (promesa/all + (map (fn [{:keys [ens-name chain-id expected-result]}] + (promesa/let [ens-address + (contract-utils/call-rpc "ens_addressOf" chain-id ens-name)] + (assert-search-ens expected-result ens-address))) + test-cases))))))) diff --git a/src/utils/image_server.cljs b/src/utils/image_server.cljs index d1ef8019b46..344d8877d92 100644 --- a/src/utils/image_server.cljs +++ b/src/utils/image_server.cljs @@ -190,7 +190,6 @@ [:cat [:map [:color string?] - [:theme :schema.common/theme] [:background-color {:optional true} [:maybe string?]] [:size number?] [:ratio float?] From eddad86747d0e9c2246eb68ea13575b6ff9a1315 Mon Sep 17 00:00:00 2001 From: andrey Date: Tue, 16 Apr 2024 14:32:35 +0200 Subject: [PATCH 2/2] tests --- src/quo/components/avatars/account_avatar/component_spec.cljs | 4 ++-- src/quo/components/list_items/network_list/view.cljs | 1 + .../wallet/transaction_progress/component_spec.cljs | 2 +- src/utils/image_server.cljs | 1 + 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/quo/components/avatars/account_avatar/component_spec.cljs b/src/quo/components/avatars/account_avatar/component_spec.cljs index 0be906c59ad..f63de93c59e 100644 --- a/src/quo/components/avatars/account_avatar/component_spec.cljs +++ b/src/quo/components/avatars/account_avatar/component_spec.cljs @@ -29,7 +29,7 @@ {:height (:size opts) :width (:size opts) :borderRadius (style/get-border-radius (:size opts)) - :backgroundColor (colors/resolve-color (:customization-color opts) :dark)}) + :backgroundColor (colors/resolve-color (:customization-color opts) :light)}) (h/is-truthy (h/query-by-label-text :account-emoji)) (h/has-style (h/query-by-label-text :account-emoji) {:fontSize (style/get-emoji-size (:size opts))}) @@ -65,7 +65,7 @@ {:height (:size opts) :width (:size opts) :borderRadius (style/get-border-radius (:size opts)) - :backgroundColor (colors/resolve-color (:customization-color opts) :dark)}) + :backgroundColor (colors/resolve-color (:customization-color opts) :light)}) (h/is-truthy (h/query-by-label-text :account-emoji)) (h/has-style (h/query-by-label-text :account-emoji) {:fontSize (style/get-emoji-size (:size opts))}) diff --git a/src/quo/components/list_items/network_list/view.cljs b/src/quo/components/list_items/network_list/view.cljs index 9bdcb4f0faf..ec2a57baeae 100644 --- a/src/quo/components/list_items/network_list/view.cljs +++ b/src/quo/components/list_items/network_list/view.cljs @@ -40,6 +40,7 @@ [:catn [:props [:map {:closed true} + [:theme :schema.common/theme] [:network-image :int] [:label :string] [:fiat-value :string] diff --git a/src/quo/components/wallet/transaction_progress/component_spec.cljs b/src/quo/components/wallet/transaction_progress/component_spec.cljs index 347fea1e97b..0a277732b10 100644 --- a/src/quo/components/wallet/transaction_progress/component_spec.cljs +++ b/src/quo/components/wallet/transaction_progress/component_spec.cljs @@ -30,7 +30,7 @@ (h/describe "Transaction Progress" (h/test "component renders without props" (h/render-with-theme-provider - [quo/transaction-progress]) + [quo/transaction-progress {}]) (h/is-truthy (h/get-by-label-text :transaction-progress))) (h/test "component renders when state is pending and network is mainnet" diff --git a/src/utils/image_server.cljs b/src/utils/image_server.cljs index 344d8877d92..834933087a0 100644 --- a/src/utils/image_server.cljs +++ b/src/utils/image_server.cljs @@ -189,6 +189,7 @@ [:=> [:cat [:map + [:theme :schema.common/theme] [:color string?] [:background-color {:optional true} [:maybe string?]] [:size number?]