From 17afff272e3517ec4d5d6af6a9f4ecd2c8e59313 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Thu, 18 Apr 2024 10:35:18 -0300 Subject: [PATCH 1/4] fix: fix fees calculation and add support for L1 fees for Optimism transactions (#19603) Signed-off-by: Brian Sztamfater --- .../contexts/wallet/common/utils/send.cljs | 25 +++--- .../wallet/common/utils/send_test.cljs | 83 +++++++++++++++---- .../wallet/send/input_amount/view.cljs | 3 +- 3 files changed, 81 insertions(+), 30 deletions(-) diff --git a/src/status_im/contexts/wallet/common/utils/send.cljs b/src/status_im/contexts/wallet/common/utils/send.cljs index 4128976b6f..df225b8080 100644 --- a/src/status_im/contexts/wallet/common/utils/send.cljs +++ b/src/status_im/contexts/wallet/common/utils/send.cljs @@ -4,23 +4,20 @@ (defn calculate-gas-fee [data] - (let [gas-amount (money/bignumber (get data :gas-amount)) - gas-fees (get data :gas-fees) - eip1559-enabled? (get gas-fees :eip1559-enabled) - billion (money/bignumber "1000000000")] - (if eip1559-enabled? - (let [base-fee (money/bignumber (get gas-fees :base-fee)) - priority-fee (money/bignumber (get gas-fees :max-priority-fee-per-gas)) - fee-with-tip (money/bignumber (money/add base-fee priority-fee)) - total-gas-fee (money/mul gas-amount fee-with-tip)] - (money/with-precision (money/div total-gas-fee billion) 10)) - (let [gas-price (money/bignumber (get gas-fees :gas-price)) - total-gas-fee (money/mul gas-amount gas-price)] - (money/with-precision (money/div total-gas-fee billion) 10))))) + (let [gas-amount (money/bignumber (get data :gas-amount)) + gas-fees (get data :gas-fees) + eip1559-enabled? (get gas-fees :eip-1559-enabled) + optimal-price-gwei (money/bignumber (if eip1559-enabled? + (get gas-fees :max-fee-per-gas-medium) + (get gas-fees :gas-price))) + total-gas-fee-wei (money/mul (money/->wei :gwei optimal-price-gwei) gas-amount) + l1-fee-wei (money/->wei :gwei (get gas-fees :l-1-gas-fee))] + (money/add total-gas-fee-wei l1-fee-wei))) (defn calculate-full-route-gas-fee + "Sums all the routes fees in wei and then convert the total value to ether" [route] - (reduce money/add (map calculate-gas-fee route))) + (money/wei->ether (reduce money/add (map calculate-gas-fee route)))) (defn find-affordable-networks [{:keys [balances-per-chain input-value selected-networks disabled-chain-ids]}] diff --git a/src/status_im/contexts/wallet/common/utils/send_test.cljs b/src/status_im/contexts/wallet/common/utils/send_test.cljs index d41de995c9..0d0e46ce66 100644 --- a/src/status_im/contexts/wallet/common/utils/send_test.cljs +++ b/src/status_im/contexts/wallet/common/utils/send_test.cljs @@ -4,22 +4,75 @@ [utils.money :as money])) (deftest test-calculate-gas-fee - (testing "Test calculate-gas-fee function with EIP-1559 enabled" - (let [data-eip1559-enabled {:gas-amount "23487" - :gas-fees {:base-fee "32.325296406" - :max-priority-fee-per-gas "0.011000001" - :eip1559-enabled true}} - expected-eip1559-enabled-result (money/bignumber 0.0007594826)] - (is (money/equal-to (utils/calculate-gas-fee data-eip1559-enabled) - expected-eip1559-enabled-result))) + (testing "EIP-1559 transaction without L1 fee" + (let [data {:gas-amount "23487" + :gas-fees {:max-fee-per-gas-medium "2.259274911" + :eip-1559-enabled true + :l-1-gas-fee "0"}} + expected-result (money/bignumber "53063589834657")] ; This is in Wei + (is (money/equal-to (utils/calculate-gas-fee data) + expected-result)))) - (testing "Test calculate-gas-fee function with EIP-1559 disabled" - (let [data-eip1559-disabled {:gas-amount "23487" - :gas-fees {:gas-price "32.375609968" - :eip1559-enabled false}} - expected-eip1559-disabled-result (money/bignumber 0.000760406)] - (is (money/equal-to (utils/calculate-gas-fee data-eip1559-disabled) - expected-eip1559-disabled-result)))))) + (testing "EIP-1559 transaction with L1 fee of 60,000 Gwei" + (let [data {:gas-amount "23487" + :gas-fees {:max-fee-per-gas-medium "2.259274911" + :eip-1559-enabled true + :l-1-gas-fee "60000"}} + expected-result (money/bignumber "113063589834657")] ; Added 60,000 Gwei in Wei to the + ; previous result + (is (money/equal-to (utils/calculate-gas-fee data) + expected-result)))) + + (testing "Non-EIP-1559 transaction with specified gas price" + (let [data {:gas-amount "23487" + :gas-fees {:gas-price "2.872721089" + :eip-1559-enabled false + :l-1-gas-fee "0"}} + expected-result (money/bignumber "67471600217343")] ; This is in Wei, for the specified + ; gas amount and price + (is (money/equal-to (utils/calculate-gas-fee data) + expected-result))))) + +(deftest test-calculate-full-route-gas-fee + (testing "Route with a single EIP-1559 transaction, no L1 fees" + (let [route [{:gas-amount "23487" + :gas-fees {:max-fee-per-gas-medium "2.259274911" + :eip-1559-enabled true + :l-1-gas-fee "0"}}] + expected-result (money/bignumber "0.000053063589834657")] ; The Wei amount for the + ; transaction, converted to + ; Ether + (is (money/equal-to (utils/calculate-full-route-gas-fee route) + expected-result)))) + + (testing "Route with two EIP-1559 transactions, no L1 fees" + (let [route [{:gas-amount "23487" + :gas-fees {:max-fee-per-gas-medium "2.259274911" + :eip-1559-enabled true + :l-1-gas-fee "0"}} + {:gas-amount "23487" + :gas-fees {:max-fee-per-gas-medium "2.259274911" + :eip-1559-enabled true + :l-1-gas-fee "0"}}] + expected-result (money/bignumber "0.000106127179669314")] ; Sum of both transactions' Wei + ; amounts, converted to Ether + (is (money/equal-to (utils/calculate-full-route-gas-fee route) + expected-result)))) + + (testing "Route with two EIP-1559 transactions, one with L1 fee of 60,000 Gwei" + (let [route [{:gas-amount "23487" + :gas-fees {:max-fee-per-gas-medium "2.259274911" + :eip-1559-enabled true + :l-1-gas-fee "0"}} + {:gas-amount "23487" + :gas-fees {:max-fee-per-gas-medium "2.259274911" + :eip-1559-enabled true + :l-1-gas-fee "60000"}}] + expected-result (money/bignumber "0.000166127179669314")] ; Added 60,000 Gwei in Wei to + ; the previous total and + ; converted to Ether + (is (money/equal-to (utils/calculate-full-route-gas-fee route) + expected-result))))) (deftest test-find-affordable-networks (testing "All networks affordable and selected, none disabled" 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 b2505e062a..95df3a0db8 100644 --- a/src/status_im/contexts/wallet/send/input_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/input_amount/view.cljs @@ -256,8 +256,9 @@ (<= input-num-value 0) (> input-num-value (current-limit))) amount-text (str @input-value " " token-symbol) + first-route (first route) native-currency-symbol (when-not confirm-disabled? - (get-in route [:from :native-currency-symbol])) + (get-in first-route [:from :native-currency-symbol])) native-token (when native-currency-symbol (rf/sub [:wallet/token-by-symbol native-currency-symbol])) From 2b40a4d0c42fca8e14de1cbc92d50de7acf9001f Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Thu, 18 Apr 2024 16:14:17 +0200 Subject: [PATCH 2/4] Feature/remove reagent atom from theme (#19706) --- scripts/lint/re-frame-in-quo-components.sh | 4 +- src/legacy/status_im/bottom_sheet/sheets.cljs | 7 +- src/legacy/status_im/events.cljs | 4 +- .../ui/components/chat_icon/screen.cljs | 8 +- .../status_im/ui/components/topbar.cljs | 7 +- .../ui/screens/chat/message/legacy_style.cljs | 70 +++--- .../ui/screens/chat/message/legacy_view.cljs | 71 +++--- .../ui/screens/profile/contact/views.cljs | 6 +- .../ui/screens/profile/user/views.cljs | 5 +- .../profile/visibility_status/styles.cljs | 9 +- .../profile/visibility_status/utils.cljs | 5 +- .../profile/visibility_status/views.cljs | 8 +- .../animated_header_flatlist/view.cljs | 2 +- .../account_avatar/component_spec.cljs | 4 +- .../avatars/account_avatar/style.cljs | 5 +- .../avatars/account_avatar/view.cljs | 9 +- .../avatars/channel_avatar/view.cljs | 39 ++- .../avatars/collection_avatar/view.cljs | 19 +- .../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/style.cljs | 4 +- .../components/avatars/user_avatar/view.cljs | 20 +- .../avatars/wallet_user_avatar/view.cljs | 9 +- src/quo/components/banners/banner/view.cljs | 47 ++-- .../browser/browser_input/style.cljs | 10 +- .../browser/browser_input/view.cljs | 2 +- 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/common/separator/view.cljs | 21 +- .../common/unread_grey_dot/style.cljs | 6 +- .../common/unread_grey_dot/view.cljs | 8 +- src/quo/components/community/banner/view.cljs | 27 +-- .../community/channel_action/view.cljs | 2 +- .../community/community_card_view.cljs | 55 +++-- .../community_detail_token_gating/view.cljs | 30 +-- .../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 +- src/quo/components/dividers/date.cljs | 32 +-- .../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 | 6 +- .../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 | 11 +- src/quo/components/header.cljs | 2 +- src/quo/components/icon.cljs | 46 ++-- 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 | 4 +- src/quo/components/inputs/input/style.cljs | 2 +- src/quo/components/inputs/input/view.cljs | 4 +- .../components/inputs/locked_input/view.cljs | 30 ++- .../inputs/recovery_phrase/style.cljs | 2 +- .../inputs/recovery_phrase/view.cljs | 4 +- .../components/inputs/search_input/style.cljs | 3 +- .../components/inputs/title_input/style.cljs | 2 +- .../components/inputs/title_input/view.cljs | 7 +- 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/links/link_preview/style.cljs | 10 +- .../components/links/link_preview/view.cljs | 36 +-- .../components/links/url_preview/style.cljs | 20 +- .../components/links/url_preview/view.cljs | 73 +++--- .../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 +- .../list_items/community/style.cljs | 2 +- .../components/list_items/community/view.cljs | 2 +- src/quo/components/list_items/dapp/view.cljs | 2 +- src/quo/components/list_items/menu_item.cljs | 22 +- .../list_items/network_list/view.cljs | 8 +- .../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/list_items/user.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 | 13 +- src/quo/components/messages/author/view.cljs | 131 +++++----- src/quo/components/messages/gap.cljs | 98 ++++---- .../messages/system_message/view.cljs | 150 ++++++------ .../components/navigation/page_nav/view.cljs | 206 ++++++++-------- .../components/navigation/top_nav/view.cljs | 27 +-- .../notifications/count_down_circle.cljs | 2 +- .../notifications/notification/view.cljs | 4 +- .../components/notifications/toast/view.cljs | 92 ++++---- .../numbered_keyboard/keyboard_key/view.cljs | 2 +- .../numbered_keyboard/view.cljs | 103 ++++---- .../components/profile/collectible/style.cljs | 8 +- .../components/profile/collectible/view.cljs | 6 +- .../profile/collectible_list_item/style.cljs | 2 +- .../profile/collectible_list_item/view.cljs | 4 +- .../profile/expanded_collectible/style.cljs | 5 +- .../profile/expanded_collectible/view.cljs | 6 +- .../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 | 7 +- .../buttons/record_button_big.cljs | 4 +- .../record_audio/record_audio/style.cljs | 34 +-- .../record_audio/record_audio/view.cljs | 22 +- .../record_audio/soundtrack/view.cljs | 4 +- .../selectors/disclaimer/style.cljs | 6 +- .../components/selectors/disclaimer/view.cljs | 30 +-- src/quo/components/selectors/filter/view.cljs | 2 +- .../selectors/react_selector/view.cljs | 10 +- .../selectors/reactions_selector/style.cljs | 6 +- .../selectors/reactions_selector/view.cljs | 4 +- .../components/selectors/selectors/style.cljs | 3 +- .../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 | 8 +- .../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 | 75 +++--- .../reorder_item/items/item_placeholder.cljs | 6 +- .../reorder_item/items/item_skeleton.cljs | 4 +- .../reorder_item/items/item_tabs.cljs | 25 +- .../settings/reorder_item/style.cljs | 45 ++-- .../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 | 15 +- 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 | 133 ++++++----- .../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/permission_tag.cljs | 32 ++- 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 +- .../transaction_progress/component_spec.cljs | 2 +- .../wallet/transaction_progress/schema.cljs | 1 - .../wallet/transaction_progress/view.cljs | 33 ++- .../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 | 23 +- src/quo/foundations/gradients.cljs | 2 +- src/quo/foundations/shadows.cljs | 3 - src/quo/theme.cljs | 55 +---- src/status_im/common/alert_banner/events.cljs | 6 +- .../common/alert_banner/events_test.cljs | 6 +- 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 +- .../common/confirmation_drawer/style.cljs | 4 +- .../common/confirmation_drawer/view.cljs | 4 +- src/status_im/common/contact_list/view.cljs | 2 +- src/status_im/common/emoji_picker/view.cljs | 22 +- .../floating_container/view.cljs | 23 +- src/status_im/common/home/banner/view.cljs | 10 +- src/status_im/common/mute_drawer/style.cljs | 4 +- src/status_im/common/mute_drawer/view.cljs | 154 ++++++------ src/status_im/common/scan_qr_code/view.cljs | 10 +- src/status_im/common/scroll_page/style.cljs | 5 +- src/status_im/common/scroll_page/view.cljs | 6 +- .../password_input/view.cljs | 4 +- .../standard_auth/slide_button/view.cljs | 2 +- src/status_im/common/theme/core.cljs | 4 +- src/status_im/common/theme/events.cljs | 5 + src/status_im/common/toasts/events.cljs | 4 +- .../drawers/nickname_drawer/style.cljs | 8 +- .../drawers/nickname_drawer/view.cljs | 8 +- .../contexts/chat/group_create/view.cljs | 2 +- .../contexts/chat/group_details/style.cljs | 16 +- .../contexts/chat/group_details/view.cljs | 8 +- .../chat/home/add_new_contact/style.cljs | 29 ++- .../chat/home/add_new_contact/views.cljs | 17 +- .../chat/home/chat_list_item/style.cljs | 4 +- .../chat/home/chat_list_item/view.cljs | 10 +- .../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/edit/view.cljs | 44 ++-- .../messenger/composer/gradients/style.cljs | 12 +- .../messenger/composer/gradients/view.cljs | 8 +- .../chat/messenger/composer/images/view.cljs | 2 +- .../messenger/composer/mentions/style.cljs | 14 +- .../messenger/composer/mentions/view.cljs | 4 +- .../chat/messenger/composer/reply/view.cljs | 10 +- .../chat/messenger/composer/style.cljs | 3 +- .../chat/messenger/composer/view.cljs | 6 +- .../messenger/menus/pinned_messages/view.cljs | 28 +-- .../messages/content/audio/style.cljs | 12 +- .../messages/content/audio/view.cljs | 8 +- .../messenger/messages/content/pin/style.cljs | 4 +- .../messages/content/reactions/view.cljs | 9 +- .../messages/content/status/style.cljs | 4 +- .../messages/content/status/view.cljs | 32 +-- .../messages/content/text/style.cljs | 21 +- .../messenger/messages/content/text/view.cljs | 41 ++-- .../chat/messenger/messages/content/view.cljs | 11 +- .../messages/link_preview/style.cljs | 81 ------- .../messenger/messages/link_preview/view.cljs | 177 -------------- .../chat/messenger/messages/list/style.cljs | 3 +- .../chat/messenger/messages/list/view.cljs | 2 +- .../messenger/messages/navigation/style.cljs | 8 +- .../messenger/messages/navigation/view.cljs | 13 +- .../messenger/messages/pin/banner/view.cljs | 27 ++- .../photo_selector/album_selector/style.cljs | 5 +- .../photo_selector/album_selector/view.cljs | 13 +- .../chat/messenger/photo_selector/style.cljs | 16 +- .../chat/messenger/photo_selector/view.cljs | 6 +- .../chat/messenger/placeholder/style.cljs | 4 +- .../chat/messenger/placeholder/view.cljs | 6 +- .../actions/accounts_selection/style.cljs | 4 +- .../actions/accounts_selection/view.cljs | 6 +- .../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 | 56 ++--- .../contexts/communities/home/view.cljs | 13 +- .../contexts/communities/overview/style.cljs | 4 +- .../contexts/communities/overview/view.cljs | 14 +- .../animated_header_list.cljs | 11 +- .../contexts/preview/quo/common.cljs | 15 +- .../preview/quo/community/list_item.cljs | 29 +-- .../preview/quo/empty_state/empty_state.cljs | 9 +- .../preview/quo/foundations/shadows.cljs | 23 +- .../preview/quo/gradient/gradient_cover.cljs | 3 +- .../preview/quo/graph/interactive_graph.cljs | 44 ++-- src/status_im/contexts/preview/quo/main.cljs | 14 +- .../quo/notifications/activity_logs.cljs | 7 +- .../contexts/preview/quo/preview.cljs | 223 +++++++++--------- src/status_im/contexts/preview/quo/style.cljs | 96 ++++---- .../preview/quo/tags/permission_tag.cljs | 35 +-- .../contexts/preview/status_im/main.cljs | 14 +- .../contexts/preview/status_im/style.cljs | 4 +- .../contexts/profile/contact/header/view.cljs | 2 +- .../contexts/profile/contact/view.cljs | 2 +- src/status_im/contexts/profile/edit/view.cljs | 9 +- .../contexts/profile/settings/effects.cljs | 3 +- .../profile/settings/header/view.cljs | 11 +- .../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/style.cljs | 3 +- .../backup_recovery_phrase/view.cljs | 134 +++++------ .../new_keypair/check_your_backup/view.cljs | 5 +- .../add_account/create_account/view.cljs | 9 +- .../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 | 46 ++-- .../wallet/common/activity_tab/view.cljs | 9 +- .../wallet/common/collectibles_tab/view.cljs | 4 +- .../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 | 15 +- .../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/db.cljs | 3 +- src/status_im/navigation/effects.cljs | 24 +- src/status_im/navigation/events.cljs | 6 +- src/status_im/navigation/options.cljs | 21 +- src/status_im/navigation/view.cljs | 43 ++-- src/status_im/subs/contact.cljs | 25 +- src/status_im/subs/profile.cljs | 17 +- src/status_im/subs/root.cljs | 3 + src/test_helpers/component.cljs | 2 +- src/tests/contract_test/wallet_test.cljs | 43 ++-- src/utils/image_server.cljs | 2 +- 371 files changed, 3617 insertions(+), 4080 deletions(-) delete mode 100644 src/status_im/contexts/chat/messenger/messages/link_preview/style.cljs delete mode 100644 src/status_im/contexts/chat/messenger/messages/link_preview/view.cljs diff --git a/scripts/lint/re-frame-in-quo-components.sh b/scripts/lint/re-frame-in-quo-components.sh index 645dd47f6e..bdb098ef82 100755 --- a/scripts/lint/re-frame-in-quo-components.sh +++ b/scripts/lint/re-frame-in-quo-components.sh @@ -1,9 +1,9 @@ #!/usr/bin/env sh -INVALID_CHANGES=$(grep -E -r '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|evt|status-im\.)' --include '*.cljs' --include '*.clj' './src/quo') +INVALID_CHANGES=$(grep -E -r '(/atom|re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|evt|status-im\.)' --include '*.cljs' --include '*.clj' './src/quo') if test -n "$INVALID_CHANGES"; then - echo "WARNING: re-frame, status-im are not allowed in quo components" + echo "WARNING: re-frame, status-im, reagent atoms are not allowed in quo components" echo '' echo "$INVALID_CHANGES" exit 1 diff --git a/src/legacy/status_im/bottom_sheet/sheets.cljs b/src/legacy/status_im/bottom_sheet/sheets.cljs index 537d4117b0..c8de382b5a 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])) @@ -23,8 +23,7 @@ (merge mobile-network-settings/offline-sheet) (= view :learn-more) - (merge about-app/learn-more)) - page-theme (:theme options)] + (merge about-app/learn-more))] [:f> (fn [] @@ -32,7 +31,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 (:theme options)) [bottom-sheet/bottom-sheet opts (when content [content (when options options)])]])])) diff --git a/src/legacy/status_im/events.cljs b/src/legacy/status_im/events.cljs index aab3f6c096..84d381e76e 100644 --- a/src/legacy/status_im/events.cljs +++ b/src/legacy/status_im/events.cljs @@ -189,8 +189,8 @@ :db (assoc db :screens/was-focused-once? true)} (not (get db :screens/was-focused-once?)) - {:db (assoc db :screens/was-focused-once? true)}) - )) + {:db (assoc db :screens/was-focused-once? true)}))) + ;;TODO :replace by named events (rf/defn set-event 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 f1cc9efcd8..b19d3e2fc9 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] @@ -52,7 +52,8 @@ (defn profile-photo-plus-dot-view [{:keys [public-key full-name customization-color photo-container photo-path community?]}] - (let [photo-container (if (nil? photo-container) + (let [theme @(re-frame.core/subscribe [:theme]) + photo-container (if (nil? photo-container) styles/container-chat-list photo-container) size (:width photo-container) @@ -71,8 +72,7 @@ {:size size :full-name full-name :font-size (get text-style :font-size) - :background-color (user-avatar.style/customization-color customization-color - (theme/get-theme)) + :background-color (user-avatar.style/customization-color customization-color theme) :indicator-size 0 :indicator-border 0 :indicator-color "#000000" diff --git a/src/legacy/status_im/ui/components/topbar.cljs b/src/legacy/status_im/ui/components/topbar.cljs index d8543b0767..60142957de 100644 --- a/src/legacy/status_im/ui/components/topbar.cljs +++ b/src/legacy/status_im/ui/components/topbar.cljs @@ -2,6 +2,7 @@ (:require [legacy.status-im.ui.components.core :as quo] [quo.foundations.colors :as quo.colors] + [quo.theme] [re-frame.core :as re-frame] [react-native.safe-area :as safe-area])) @@ -32,7 +33,8 @@ :or {border-bottom? true new-ui? false} :as props}] - (let [navigation (if (= navigation :none) + (let [theme (quo.theme/use-theme) + navigation (if (= navigation :none) nil [(default-navigation modal? navigation)])] [quo/header @@ -47,4 +49,5 @@ {:right-accessories right-accessories}) (when new-ui? {:background (quo.colors/theme-colors quo.colors/neutral-5 - quo.colors/neutral-95)}))])) + quo.colors/neutral-95 + theme)}))])) diff --git a/src/legacy/status_im/ui/screens/chat/message/legacy_style.cljs b/src/legacy/status_im/ui/screens/chat/message/legacy_style.cljs index 2774b21c34..012fa121ea 100644 --- a/src/legacy/status_im/ui/screens/chat/message/legacy_style.cljs +++ b/src/legacy/status_im/ui/screens/chat/message/legacy_style.cljs @@ -46,22 +46,22 @@ :color colors/gray}) (defn message-default-style - [] + [theme] {:font-family "Inter-Regular" - :color (quo.colors/theme-colors quo.colors/neutral-100 quo.colors/white) + :color (quo.colors/theme-colors quo.colors/neutral-100 quo.colors/white theme) :font-size 15 :line-height 21.75 :letter-spacing -0.135}) ;; Markdown styles (defn default-text-style - [] + [theme] {:max-font-size-multiplier react/max-font-size-multiplier - :style (message-default-style)}) + :style (message-default-style theme)}) (defn system-text-style - [] - (update (default-text-style) + [theme] + (update (default-text-style theme) :style assoc :color colors/gray :line-height 20 @@ -70,65 +70,65 @@ :font-weight "400")) (defn text-style - [content-type in-popover?] + [content-type in-popover? theme] (merge (when in-popover? {:number-of-lines 2}) (cond - (= content-type constants/content-type-system-text) (system-text-style) - (= content-type constants/content-type-system-pinned-message) (system-text-style) - :else (default-text-style)))) + (= content-type constants/content-type-system-text) (system-text-style theme) + (= content-type constants/content-type-system-pinned-message) (system-text-style theme) + :else (default-text-style theme)))) (defn emph-text-style - [] - (update (default-text-style) + [theme] + (update (default-text-style theme) :style assoc :font-style :italic)) (defn emph-style - [] - (emph-text-style)) + [theme] + (emph-text-style theme)) (defn strong-text-style - [] - (update (default-text-style) + [theme] + (update (default-text-style theme) :style assoc :font-weight "700")) (defn outgoing-strong-text-style - [] - (update (strong-text-style) + [theme] + (update (strong-text-style theme) :style assoc :color colors/white-persist)) (defn strong-style - [] - (outgoing-strong-text-style) - (strong-text-style)) + [theme] + (outgoing-strong-text-style theme) + (strong-text-style theme)) (defn strong-emph-style - [] - (update (strong-style) + [theme] + (update (strong-style theme) :style assoc :font-style :italic)) (defn strikethrough-style - [] - (cond-> (update (default-text-style) + [theme] + (cond-> (update (default-text-style theme) :style assoc :text-decoration-line :line-through))) (defn edited-style - [] + [theme] (cond-> - (update (default-text-style) + (update (default-text-style theme) :style assoc - :color (quo.colors/theme-colors quo.colors/neutral-40 quo.colors/neutral-50) + :color (quo.colors/theme-colors quo.colors/neutral-40 quo.colors/neutral-50 theme) :font-size 13 :line-height 18.2 :letter-spacing (typography/tracking 13)))) @@ -149,8 +149,8 @@ (default-blockquote-style)) (defn default-blockquote-text-style - [] - (update (default-text-style) + [theme] + (update (default-text-style theme) :style assoc :line-height 19 @@ -158,16 +158,16 @@ :color colors/black-transparent-50)) (defn outgoing-blockquote-text-style - [] - (update (default-blockquote-text-style) + [theme] + (update (default-blockquote-text-style theme) :style assoc :color colors/white-transparent-70-persist)) (defn blockquote-text-style - [] - (outgoing-blockquote-text-style) - (default-blockquote-text-style)) + [theme] + (outgoing-blockquote-text-style theme) + (default-blockquote-text-style theme)) (defn community-verified [] diff --git a/src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs b/src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs index 64a57c0bb8..41c6295b56 100644 --- a/src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs +++ b/src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs @@ -6,6 +6,7 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.foundations.typography :as typography] + [quo.theme] [react-native.core :as rn] [status-im.constants :as constants] [status-im.contexts.chat.messenger.messages.delete-message-for-me.events] @@ -26,7 +27,7 @@ (defn render-inline [_message-text content-type acc {:keys [type literal destination]} - community-id] + community-id theme] (case type "" (conj acc literal) @@ -35,24 +36,25 @@ (conj acc [rn/text literal]) "emph" - (conj acc [rn/text (style/emph-style) literal]) + (conj acc [rn/text (style/emph-style theme) literal]) "strong" - (conj acc [rn/text (style/strong-style) literal]) + (conj acc [rn/text (style/strong-style theme) literal]) "strong-emph" - (conj acc [quo/text (style/strong-emph-style) literal]) + (conj acc [quo/text (style/strong-emph-style theme) literal]) "del" - (conj acc [rn/text (style/strikethrough-style) literal]) + (conj acc [rn/text (style/strikethrough-style theme) literal]) "link" - (conj acc - [rn/text - {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60) - :text-decoration-line :underline} - :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])} - destination]) + (conj + acc + [rn/text + {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme) + :text-decoration-line :underline} + :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])} + destination]) "mention" (conj @@ -66,17 +68,18 @@ #(rf/dispatch [:chat.ui/show-profile literal]))} [mention-element literal]]]) "status-tag" - (conj acc - [rn/text - (when community-id - {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60) - :text-decoration-line :underline} - :on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])}) - "#" - literal]) + (conj + acc + [rn/text + (when community-id + {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme) + :text-decoration-line :underline} + :on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])}) + "#" + literal]) "edited" - (conj acc [rn/text (style/edited-style) (str " (" (i18n/label :t/edited) ")")]) + (conj acc [rn/text (style/edited-style theme) (str " (" (i18n/label :t/edited) ")")]) (conj acc literal))) @@ -84,7 +87,7 @@ (defn render-block [{:keys [content content-type edited-at in-popover?]} acc {:keys [type ^js literal children]} - community-id] + community-id theme] (case type @@ -96,8 +99,9 @@ content-type acc e - community-id)) - [rn/text (style/text-style content-type in-popover?)] + community-id + theme)) + [rn/text (style/text-style content-type in-popover? theme)] (conj children (when edited-at @@ -106,7 +110,7 @@ "blockquote" (conj acc [rn/view (style/blockquote-style) - [rn/text (style/blockquote-text-style) + [rn/text (style/blockquote-text-style theme) (.substring literal 0 (.-length literal))]]) "codeblock" @@ -119,12 +123,14 @@ (defn render-parsed-text [{:keys [content chat-id] :as message-data}] - (let [community-id (rf/sub [:community-id-by-chat-id chat-id])] + (let [community-id (rf/sub [:community-id-by-chat-id chat-id]) + theme (quo.theme/use-theme)] (reduce (fn [acc e] (render-block message-data acc e - community-id)) + community-id + theme)) [:<>] (:parsed-text content)))) @@ -137,12 +143,13 @@ ;; STATUS ? whats that ? (defmethod ->message constants/content-type-status [{:keys [content content-type]}] - [rn/view style/status-container - [rn/text {:style (style/status-text)} - (reduce - (fn [acc e] (render-inline (:text content) content-type acc e nil)) - [rn/text {:style (style/status-text)}] - (-> content :parsed-text peek :children))]]) + (let [theme (quo.theme/use-theme)] + [rn/view style/status-container + [rn/text {:style (style/status-text)} + (reduce + (fn [acc e] (render-inline (:text content) content-type acc e nil theme)) + [rn/text {:style (style/status-text)}] + (-> content :parsed-text peek :children))]])) (defn contact-request-status-pending [] 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 deea93e5a4..8d18f4ec21 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] @@ -184,6 +184,7 @@ :as profile} @(re-frame/subscribe [:contacts/current-contact]) muted? @(re-frame/subscribe [:chats/muted public-key]) customization-color (or customization-color :primary) + theme @(re-frame/subscribe [:theme]) on-share #(re-frame/dispatch [:show-popover (merge {:view :share-chat-key @@ -205,8 +206,7 @@ {:on-press on-share :bottom-separator false :title (profile.utils/displayed-name profile) - :color (user-avatar.style/customization-color customization-color - (theme/get-theme)) + :color (user-avatar.style/customization-color customization-color 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 d1bb8bef38..129bb74b6c 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] @@ -200,6 +200,7 @@ @(re-frame/subscribe [:profile/profile-with-image]) customization-color (or (:color @(re-frame/subscribe [:onboarding/profile])) @(re-frame/subscribe [:profile/customization-color key-uid])) + theme @(re-frame/subscribe [:theme]) on-share #(re-frame/dispatch [:show-popover {:view :share-chat-key :address (or compressed-key @@ -221,7 +222,7 @@ {:content (edit/bottom-sheet has-picture)}]) :color (user-avatar.style/customization-color customization-color - (theme/get-theme)) + theme) :title (profile.utils/displayed-name profile) :photo (profile.utils/photo profile) :monospace (not ens-verified) diff --git a/src/legacy/status_im/ui/screens/profile/visibility_status/styles.cljs b/src/legacy/status_im/ui/screens/profile/visibility_status/styles.cljs index 7a81abcdf4..dd53ca0d18 100644 --- a/src/legacy/status_im/ui/screens/profile/visibility_status/styles.cljs +++ b/src/legacy/status_im/ui/screens/profile/visibility_status/styles.cljs @@ -17,14 +17,14 @@ :padding-right 12}) (defn visibility-status-dot - [{:keys [color size new-ui?]}] + [{:keys [color size new-ui?]} theme] (if new-ui? {:background-color color :width size :height size :border-radius (/ size 2) :border-width 3.5 - :border-color (quo.colors/theme-colors quo.colors/white quo.colors/neutral-90)} + :border-color (quo.colors/theme-colors quo.colors/white quo.colors/neutral-90 theme)} {:background-color color :width size :height size @@ -33,10 +33,11 @@ :border-color colors/white})) (defn visibility-status-profile-dot - [{:keys [color size border-width margin-left new-ui?]}] + [{:keys [color size border-width margin-left new-ui?]} theme] (merge (visibility-status-dot {:color color :size size - :new-ui? new-ui?}) + :new-ui? new-ui?} + theme) {:margin-right 6 :margin-left margin-left :border-width border-width})) diff --git a/src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs b/src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs index 5d10d4bf1b..5895361110 100644 --- a/src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs +++ b/src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs @@ -3,6 +3,7 @@ [legacy.status-im.ui.components.colors :as colors] [legacy.status-im.ui.screens.profile.visibility-status.styles :as styles] [quo.foundations.colors :as quo.colors] + [quo.theme] [status-im.constants :as constants] [utils.datetime :as datetime] [utils.i18n :as i18n] @@ -90,13 +91,15 @@ (defn icon-visibility-status-dot [public-key container-size] (let [status (rf/sub [:visibility-status-updates/visibility-status-update public-key]) + theme (quo.theme/use-theme) size (icon-dot-size container-size) margin -2 dot-color (icon-dot-color status) new-ui? true] (merge (styles/visibility-status-dot {:color dot-color :size size - :new-ui? new-ui?}) + :new-ui? new-ui?} + theme) {:bottom margin :right margin :position :absolute diff --git a/src/legacy/status_im/ui/screens/profile/visibility_status/views.cljs b/src/legacy/status_im/ui/screens/profile/visibility_status/views.cljs index 0402dc7018..b5936ad687 100644 --- a/src/legacy/status_im/ui/screens/profile/visibility_status/views.cljs +++ b/src/legacy/status_im/ui/screens/profile/visibility_status/views.cljs @@ -37,7 +37,7 @@ (dispatch-popover page-y)))) (defn profile-visibility-status-dot - [status-type color] + [status-type color theme] (let [automatic? (= status-type constants/visibility-status-automatic) [border-width margin-left size] (if automatic? [1 -10 12] [0 6 10]) @@ -50,14 +50,16 @@ :size size :border-width border-width :margin-left 6 - :new-ui? new-ui?})}]) + :new-ui? new-ui?} + theme)}]) [rn/view {:style (styles/visibility-status-profile-dot {:color color :size size :border-width border-width :margin-left margin-left - :new-ui? new-ui?})}]])) + :new-ui? new-ui?} + theme)}]])) (defn visibility-status-button [on-press props] diff --git a/src/quo/components/animated_header_flatlist/view.cljs b/src/quo/components/animated_header_flatlist/view.cljs index 17920a318d..5e3e14e2e2 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/component_spec.cljs b/src/quo/components/avatars/account_avatar/component_spec.cljs index 0be906c59a..f63de93c59 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/avatars/account_avatar/style.cljs b/src/quo/components/avatars/account_avatar/style.cljs index 97fbc34aaf..25d87527cb 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 570ea5fe9a..6364df33c0 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 d48c477ecb..9a3747df94 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 96bafbadd1..9d1fe45b9d 100644 --- a/src/quo/components/avatars/collection_avatar/view.cljs +++ b/src/quo/components/avatars/collection_avatar/view.cljs @@ -4,17 +4,16 @@ [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 on-load-end on-error] :or {size :size-24}}] - [fast-image/fast-image - {:accessibility-label :collection-avatar - :source image - :on-load-end on-load-end - :on-error on-error - :style (style/collection-avatar theme size)}]) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [image size on-load-end on-error] :or {size :size-24}}] + (let [theme (quo.theme/use-theme)] + [fast-image/fast-image + {:accessibility-label :collection-avatar + :source image + :on-load-end on-load-end + :on-error on-error + :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 b9440dc64c..8f5f50349d 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 fe3ac54301..3ee56af290 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 a75299762c..3c113616ad 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/style.cljs b/src/quo/components/avatars/user_avatar/style.cljs index 3d978ae852..0d16b049b5 100644 --- a/src/quo/components/avatars/user_avatar/style.cljs +++ b/src/quo/components/avatars/user_avatar/style.cljs @@ -66,8 +66,8 @@ :background-color (colors/resolve-color customization-color theme)})) (defn indicator-color - [] - {:online (colors/theme-colors colors/success-50 colors/success-60) + [theme] + {:online (colors/theme-colors colors/success-50 colors/success-60 theme) :offline colors/neutral-40}) (defn outer diff --git a/src/quo/components/avatars/user_avatar/view.cljs b/src/quo/components/avatars/user_avatar/view.cljs index 3fe4100b73..fa93e06ab8 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))) @@ -49,7 +50,7 @@ font-size (get-in style/sizes [size :font-size]) amount-initials (if (#{:xs :xxs :xxxs} size) 1 2) sizes (get style/sizes size) - indicator-color (get (style/indicator-color) (if online? :online :offline)) + indicator-color (get (style/indicator-color theme) (if online? :online :offline)) profile-picture-fn (:fn profile-picture)] [rn/view {:style outer-styles :accessibility-label :user-avatar} @@ -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 2c39204344..357b5598c9 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 e932e401dc..9f873956bc 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 021324c5b1..4eb8b82a62 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 @@ -45,11 +46,12 @@ :z-index 10}) (defn text - [] + [theme] (assoc (text/text-style {:size :paragraph-1 - :weight :medium}) + :weight :medium} + nil) :color - (colors/theme-colors colors/neutral-100 colors/white))) + (colors/theme-colors colors/neutral-100 colors/white theme))) (def root-container {:height 60 diff --git a/src/quo/components/browser/browser_input/view.cljs b/src/quo/components/browser/browser_input/view.cljs index 488c3e5973..63f7cf9ecb 100644 --- a/src/quo/components/browser/browser_input/view.cljs +++ b/src/quo/components/browser/browser_input/view.cljs @@ -121,7 +121,7 @@ :size favicon-size}]) [rn/text {:accessibility-label :browser-input-label - :style (style/text)} + :style (style/text theme)} (remove-http-https-www value)] (when locked? [lock-icon {:blur? blur? :theme theme}])]) diff --git a/src/quo/components/buttons/button/view.cljs b/src/quo/components/buttons/button/view.cljs index 8f56d44d96..79993ba56b 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 3c9161aa6f..bbaa4a90dc 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 d9f0f85d91..7c249f7563 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 056f6ade4f..6faf2d46a5 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 7dc7cd10c4..42feb25a73 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 76bf523bfd..dc9504f5e4 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 e92416d468..f1602c4c4e 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 fc77f4f08d..6fe9ab4be6 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 6efa19c1fd..80449ea18c 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 efc5d946ce..fafbdeaeba 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 ffb269c392..4c05a2807c 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 c7b379ca6f..5c40945f33 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 1f169b7753..df5073cabd 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 7fc37cdefe..6eb7566952 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 569e00e663..2999ca8b9f 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 b32450ff3f..76d36724fb 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 0f0e8a34dd..0cbeea575e 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 1ab62bce8e..c9cd0d601e 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/common/separator/view.cljs b/src/quo/components/common/separator/view.cljs index b54a0fda75..158edca45e 100644 --- a/src/quo/components/common/separator/view.cljs +++ b/src/quo/components/common/separator/view.cljs @@ -1,16 +1,19 @@ (ns quo.components.common.separator.view (:require [quo.foundations.colors :as quo.colors] + [quo.theme] [react-native.core :as rn])) (defn separator [{:keys [style]}] - [rn/view - {:style - (merge - style - {:background-color (quo.colors/theme-colors - quo.colors/neutral-10 - quo.colors/neutral-80) - :align-self :stretch - :height 1})}]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style + (merge + style + {:background-color (quo.colors/theme-colors + quo.colors/neutral-10 + quo.colors/neutral-80 + theme) + :align-self :stretch + :height 1})}])) diff --git a/src/quo/components/common/unread_grey_dot/style.cljs b/src/quo/components/common/unread_grey_dot/style.cljs index 61e4d4e4da..2249d414dc 100644 --- a/src/quo/components/common/unread_grey_dot/style.cljs +++ b/src/quo/components/common/unread_grey_dot/style.cljs @@ -2,10 +2,12 @@ (:require [quo.foundations.colors :as colors])) -(def unread-grey-dot +(defn unread-grey-dot + [theme] {:width 8 :height 8 :border-radius 4 :background-color (colors/theme-colors colors/neutral-40 - colors/neutral-60)}) + colors/neutral-60 + theme)}) diff --git a/src/quo/components/common/unread_grey_dot/view.cljs b/src/quo/components/common/unread_grey_dot/view.cljs index a1877b0691..f05afe7739 100644 --- a/src/quo/components/common/unread_grey_dot/view.cljs +++ b/src/quo/components/common/unread_grey_dot/view.cljs @@ -1,10 +1,12 @@ (ns quo.components.common.unread-grey-dot.view (:require [quo.components.common.unread-grey-dot.style :as style] + [quo.theme] [react-native.core :as rn])) (defn unread-grey-dot [accessibility-label] - [rn/view - (cond-> {:style style/unread-grey-dot} - accessibility-label (assoc :accessibility-label accessibility-label :accessible true))]) + (let [theme (quo.theme/use-theme)] + [rn/view + (cond-> {:style (style/unread-grey-dot theme)} + accessibility-label (assoc :accessibility-label accessibility-label :accessible true))])) diff --git a/src/quo/components/community/banner/view.cljs b/src/quo/components/community/banner/view.cljs index 07eb36b3e1..c56de8fb6c 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 80e9408b33..aa1c6cb3a3 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 52d25b6600..542cfdfb53 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_detail_token_gating/view.cljs b/src/quo/components/community/community_detail_token_gating/view.cljs index 1db3df9cab..52b70ea564 100644 --- a/src/quo/components/community/community_detail_token_gating/view.cljs +++ b/src/quo/components/community/community_detail_token_gating/view.cljs @@ -6,6 +6,7 @@ [quo.components.tags.collectible-tag.view :as collectible-tag] [quo.components.tags.token-tag.view :as token-tag] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [utils.i18n :as i18n])) @@ -28,20 +29,21 @@ (defn- tokens-row [{:keys [tokens divider? first?]}] - [:<> - [rn/view - {:style (style/token-row first?)} - (map-indexed (fn [token-index token] - ^{:key (str "token-" token-index)} - [token-view token]) - tokens)] - (when-not divider? - [divider-label/view - {:container-style style/divider} - [text/text - {:size :label - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} - (string/lower-case (i18n/label :t/or))]])]) + (let [theme (quo.theme/use-theme)] + [:<> + [rn/view + {:style (style/token-row first?)} + (map-indexed (fn [token-index token] + ^{:key (str "token-" token-index)} + [token-view token]) + tokens)] + (when-not divider? + [divider-label/view + {:container-style style/divider} + [text/text + {:size :label + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (string/lower-case (i18n/label :t/or))]])])) (defn- role-view [{:keys [role tokens satisfied? role-text]}] diff --git a/src/quo/components/community/community_list_view.cljs b/src/quo/components/community/community_list_view.cljs index 91b63e4a5e..2fc3a594bc 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 68e6a99123..218bf83bb0 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 ebdc3ef564..65c159e125 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 18fe8d9464..0d7254127d 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 53fc548e5f..efcbb53b03 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 65cb2a029d..9dc0fea23e 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 fdaedc5a82..6874fdabd8 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 2a5797865e..199459c530 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/date.cljs b/src/quo/components/dividers/date.cljs index 50b3e405b5..9d8cb7a9a6 100644 --- a/src/quo/components/dividers/date.cljs +++ b/src/quo/components/dividers/date.cljs @@ -3,21 +3,25 @@ [quo.components.common.separator.view :as separator] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn])) (defn date [value] - [rn/view - {:padding-top 8 - :padding-bottom 12 - :padding-right 20 - :padding-left 60} - [text/text - {:weight :medium - :accessibility-label :divider-date-text - :size :label - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40) - :text-transform :capitalize - :margin-bottom 4}} - value] - [separator/separator]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:padding-top 8 + :padding-bottom 12 + :padding-right 20 + :padding-left 60} + [text/text + {:weight :medium + :accessibility-label :divider-date-text + :size :label + :style {:color (colors/theme-colors colors/neutral-50 + colors/neutral-40 + theme) + :text-transform :capitalize + :margin-bottom 4}} + value] + [separator/separator]])) diff --git a/src/quo/components/dividers/divider_label/view.cljs b/src/quo/components/dividers/divider_label/view.cljs index 5207e3c441..053b4eb4d0 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 aaef0944af..bfa71b85d1 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 d9b57bf661..3af7ed2fd2 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 53cab96b2e..4e09da86af 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 b34acdbd6c..22786fdb59 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 46d97a22c1..fdde7f26c9 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 3e0d598262..f2f7b692cc 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 c0af3dad54..7f8cdad3d4 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 b200c706e1..5ecc2c3fcc 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 bb67ca910a..ef5ae1b298 100644 --- a/src/quo/components/drawers/permission_context/view.cljs +++ b/src/quo/components/drawers/permission_context/view.cljs @@ -69,12 +69,12 @@ (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] :paint-inside false - :start-color (colors/theme-colors colors/neutral-100-opa-8 colors/neutral-100-opa-60) + :start-color (colors/theme-colors colors/neutral-100-opa-8 colors/neutral-100-opa-60 theme) :distance 25 :style {:align-self :stretch}} [rn/view {:style (merge (style/container blur? theme) container-style)} @@ -83,7 +83,7 @@ {:style style/blur-container :blur-amount 20 :blur-radius (if platform/ios? 20 10) - :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur) + :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur theme) :blur-type :transparent}]) [button/button {:type :ghost diff --git a/src/quo/components/dropdowns/dropdown/properties.cljs b/src/quo/components/dropdowns/dropdown/properties.cljs index a727214232..8cd447bd40 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 655e3b8d04..e1479144b6 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 bdf74d6f9d..af5c5d9aeb 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 6bce73abdc..adf9b34aef 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 7c27e3818a..996dac9138 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 @@ -50,5 +49,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 5d2ae3dae1..2d610b31f8 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 94c997bec7..dbed59abec 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 93758fdc52..197c06a882 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) @@ -41,7 +42,7 @@ width (:width (rn/get-window)) line-color (get-line-color customization-color state theme) gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)] - fill-color (colors/theme-colors colors/white colors/neutral-95)] + fill-color (colors/theme-colors colors/white colors/neutral-95 theme)] (if (= time-frame :empty) [fast-image/fast-image {:style style/empty-state @@ -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 0b26f73c17..2696e44c67 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 6ad3ed7257..286da22374 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,31 @@ :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 + theme] + (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) 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))) + (let [theme (quo.theme/use-theme)] + (memoized-icon params icon-name theme)))) diff --git a/src/quo/components/info/info_message.cljs b/src/quo/components/info/info_message.cljs index 92896b7079..612643f105 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 f983df0e98..2ddae9693b 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/use-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 fe44f770a8..2bd9e6dbe9 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 2a31ff9412..43cda6a4ee 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) @@ -128,7 +128,7 @@ :auto-capitalize :none :auto-correct false :spell-check false - :keyboard-appearance (quo.theme/theme-value :light :dark theme) + :keyboard-appearance theme :on-focus on-focus :on-blur on-blur :on-change-text on-change}] diff --git a/src/quo/components/inputs/input/style.cljs b/src/quo/components/inputs/input/style.cljs index 6ff41e3f9d..ece7c7267b 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 7d998d271b..95760dca06 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) @@ -134,7 +134,7 @@ :style (style/input colors-by-status small? multiple-lines? weight) :accessibility-label :input :placeholder-text-color (:placeholder colors-by-status) - :keyboard-appearance (quo.theme/theme-value :light :dark theme) + :keyboard-appearance theme :cursor-color (:cursor variant-colors) :editable (not disabled?) :placeholder modified-placeholder diff --git a/src/quo/components/inputs/locked_input/view.cljs b/src/quo/components/inputs/locked_input/view.cljs index cd1c3daf51..ccd069fa57 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 58e9108886..a248875e83 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 382a1daf73..6a81691199 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 [] @@ -64,7 +64,7 @@ :style (style/input) :placeholder-text-color (style/placeholder-color state theme blur?) :cursor-color (style/cursor-color customization-color theme) - :keyboard-appearance (quo.theme/theme-value :light :dark theme) + :keyboard-appearance theme :multiline true :on-focus on-focus :on-blur on-blur} diff --git a/src/quo/components/inputs/search_input/style.cljs b/src/quo/components/inputs/search_input/style.cljs index 0b4d92c405..fa1f641840 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/style.cljs b/src/quo/components/inputs/title_input/style.cljs index f596faf6bc..896034acfe 100644 --- a/src/quo/components/inputs/title_input/style.cljs +++ b/src/quo/components/inputs/title_input/style.cljs @@ -18,7 +18,7 @@ (defn get-char-count-color [blur? theme] (if blur? - (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40) + (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme) (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) (defn get-selection-color diff --git a/src/quo/components/inputs/title_input/view.cljs b/src/quo/components/inputs/title_input/view.cljs index e2d3864fea..834a70a05b 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,10 +45,11 @@ {: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) + :keyboard-appearance theme :return-key-type return-key-type :on-focus on-focus :on-blur on-blur diff --git a/src/quo/components/ios/drawer_bar/style.cljs b/src/quo/components/ios/drawer_bar/style.cljs index 7476dde195..c7dd7efd60 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 (if (= theme :light) 0.05 0.1) :border-radius 100}) diff --git a/src/quo/components/ios/drawer_bar/view.cljs b/src/quo/components/ios/drawer_bar/view.cljs index 6dc9c3c690..0743d5dcf8 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 f5a35ad60f..11d801175d 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 4f67e64ea0..10bae19299 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 eee7123f15..92a9461536 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 b69963fd02..a3a1a47f84 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 59ba70cfa0..7b8e37f448 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/links/link_preview/style.cljs b/src/quo/components/links/link_preview/style.cljs index a5d476e732..2801a1b978 100644 --- a/src/quo/components/links/link_preview/style.cljs +++ b/src/quo/components/links/link_preview/style.cljs @@ -3,10 +3,10 @@ [quo.foundations.colors :as colors])) (defn container - [preview-enabled?] + [preview-enabled? theme] (merge {:border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) - :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) + :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme) :border-radius 16 :padding-horizontal 12 :padding-top 10 @@ -25,9 +25,9 @@ :margin-bottom 2}) (defn link - [] + [theme] {:margin-top 8 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) (defn thumbnail [size] diff --git a/src/quo/components/links/link_preview/view.cljs b/src/quo/components/links/link_preview/view.cljs index d4852ded51..56e278343c 100644 --- a/src/quo/components/links/link_preview/view.cljs +++ b/src/quo/components/links/link_preview/view.cljs @@ -5,6 +5,7 @@ [quo.components.buttons.button.view :as button] [quo.components.links.link-preview.style :as style] [quo.components.markdown.text :as text] + [quo.theme] [react-native.core :as rn] [react-native.platform :as platform] [react-native.svg :as svg] @@ -29,11 +30,11 @@ description]) (defn- link-comp - [link] + [link theme] [text/text {:size :paragraph-2 :weight :medium - :style (style/link) + :style (style/link theme) :accessibility-label :link} link]) @@ -86,18 +87,19 @@ enabled? on-enable disabled-text container-style thumbnail-size] :or {enabled? true}}] - [rn/view - {:style (merge (style/container enabled?) container-style) - :accessibility-label :link-preview} - (if enabled? - [:<> - [rn/view {:style style/header-container} - (when logo - [logo-comp logo]) - [title-comp title]] - (when description - [description-comp description]) - [link-comp link] - (when thumbnail - [thumbnail-comp thumbnail thumbnail-size])] - [button-disabled disabled-text on-enable])]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style (merge (style/container enabled? theme) container-style) + :accessibility-label :link-preview} + (if enabled? + [:<> + [rn/view {:style style/header-container} + (when logo + [logo-comp logo]) + [title-comp title]] + (when description + [description-comp description]) + [link-comp link] + (when thumbnail + [thumbnail-comp thumbnail thumbnail-size])] + [button-disabled disabled-text on-enable])])) diff --git a/src/quo/components/links/url_preview/style.cljs b/src/quo/components/links/url_preview/style.cljs index 7632753339..247b3dc00b 100644 --- a/src/quo/components/links/url_preview/style.cljs +++ b/src/quo/components/links/url_preview/style.cljs @@ -5,9 +5,9 @@ (def horizontal-padding 12) (defn container - [] + [theme] {:height 56 - :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90) + :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme) :padding-vertical 10 :padding-horizontal horizontal-padding :border-radius 12 @@ -15,7 +15,7 @@ :flex-direction :row}) (defn loading-container - [] + [theme] {:height 56 :border-width 1 :border-radius 12 @@ -25,11 +25,11 @@ :justify-content :center :align-self :stretch :padding horizontal-padding - :border-color (colors/theme-colors colors/neutral-30 colors/neutral-80)}) + :border-color (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)}) (defn loading-message - [] - {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + [theme] + {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) (def logo {:width 16 @@ -42,13 +42,13 @@ :flex 1}) (defn title - [] - {:color (colors/theme-colors colors/neutral-100 colors/white)}) + [theme] + {:color (colors/theme-colors colors/neutral-100 colors/white theme)}) (defn body - [] + [theme] {:text-transform :lowercase - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) (def clear-button-container {:width 20 diff --git a/src/quo/components/links/url_preview/view.cljs b/src/quo/components/links/url_preview/view.cljs index 808ee0704e..db069d83ce 100644 --- a/src/quo/components/links/url_preview/view.cljs +++ b/src/quo/components/links/url_preview/view.cljs @@ -5,6 +5,7 @@ [quo.components.links.url-preview.style :as style] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.svg :as svg])) @@ -28,57 +29,59 @@ :resize-mode :cover}])) (defn- content - [{:keys [title body]}] + [{:keys [title body]} theme] [rn/view {:style style/content-container} [text/text {:accessibility-label :title :size :paragraph-2 :weight :semi-bold :number-of-lines 1 - :style (style/title)} + :style (style/title theme)} title] [text/text {:accessibility-label :body :size :paragraph-2 :weight :medium :number-of-lines 1 - :style (style/body)} + :style (style/body theme)} body]]) (defn- clear-button [{:keys [on-press]}] - [rn/touchable-opacity - {:on-press on-press - :style style/clear-button-container - :hit-slop {:top 3 :right 3 :bottom 3 :left 3} - :accessibility-label :button-clear-preview} - [icon/icon :i/clear - {:size 20 - :color (colors/theme-colors colors/neutral-50 colors/neutral-60)}]]) + (let [theme (quo.theme/use-theme)] + [rn/touchable-opacity + {:on-press on-press + :style style/clear-button-container + :hit-slop {:top 3 :right 3 :bottom 3 :left 3} + :accessibility-label :button-clear-preview} + [icon/icon :i/clear + {:size 20 + :color (colors/theme-colors colors/neutral-50 colors/neutral-60 theme)}]])) (defn view [{:keys [title body logo on-clear loading? loading-message container-style]}] - (if loading? - [rn/view - {:accessibility-label :url-preview-loading - :style (merge (style/loading-container) container-style)} - [icon/icon :i/loading - {:size 12 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40) - :container-style {:margin-right 8}}] - [rn/text - {:size :paragraph-2 - :weight :medium - :number-of-lines 1 - :style (style/loading-message)} - loading-message]] - [rn/view - {:accessibility-label :url-preview - :style (merge (style/container) container-style)} - (when logo - [logo-comp - {:logo (if (map? logo) - (:data-uri logo) - logo)}]) - [content {:title title :body body}] - [clear-button {:on-press on-clear}]])) + (let [theme (quo.theme/use-theme)] + (if loading? + [rn/view + {:accessibility-label :url-preview-loading + :style (merge (style/loading-container theme) container-style)} + [icon/icon :i/loading + {:size 12 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) + :container-style {:margin-right 8}}] + [rn/text + {:size :paragraph-2 + :weight :medium + :number-of-lines 1 + :style (style/loading-message theme)} + loading-message]] + [rn/view + {:accessibility-label :url-preview + :style (merge (style/container theme) container-style)} + (when logo + [logo-comp + {:logo (if (map? logo) + (:data-uri logo) + logo)}]) + [content {:title title :body body}] + [clear-button {:on-press on-clear}]]))) diff --git a/src/quo/components/list_items/account/view.cljs b/src/quo/components/list_items/account/view.cljs index 1806437619..62066ef4e3 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 4a8c59111e..e1e6bc8e96 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 e04b9f096e..02d67d4d3e 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 3269f31eb7..fb9d51d905 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/style.cljs b/src/quo/components/list_items/community/style.cljs index b7c8cec236..255f0e773d 100644 --- a/src/quo/components/list_items/community/style.cljs +++ b/src/quo/components/list_items/community/style.cljs @@ -63,4 +63,4 @@ (and pressed? (= type :discover)) (colors/theme-colors colors/white :transparent theme))} (when (and (= type :discover) (not pressed?)) - (shadows/get 3)))) + (shadows/get 3 theme)))) diff --git a/src/quo/components/list_items/community/view.cljs b/src/quo/components/list_items/community/view.cljs index 4b0eaf3af8..a4bedda9c7 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 461fc6d2a6..9a6ec20926 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/menu_item.cljs b/src/quo/components/list_items/menu_item.cljs index 4ab2a366ed..9a68e28192 100644 --- a/src/quo/components/list_items/menu_item.cljs +++ b/src/quo/components/list_items/menu_item.cljs @@ -3,24 +3,26 @@ [quo.components.icon :as icons] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors :refer [theme-colors]] + [quo.theme] [react-native.core :as rn])) (defn themes - [type] + [type theme] (case type - :main {:icon-color (theme-colors colors/neutral-50 colors/neutral-40) - :background (theme-colors colors/white colors/neutral-95) - :text-color (theme-colors colors/neutral-100 colors/white)} - :danger {:icon-color (theme-colors colors/danger-50 colors/danger-60) - :background (theme-colors colors/white colors/neutral-95) - :text-color (theme-colors colors/danger-50 colors/danger-60)} - :transparent {:icon-color (theme-colors colors/neutral-50 colors/neutral-10) - :text-color (theme-colors colors/neutral-100 colors/white)})) + :main {:icon-color (theme-colors colors/neutral-50 colors/neutral-40 theme) + :background (theme-colors colors/white colors/neutral-95 theme) + :text-color (theme-colors colors/neutral-100 colors/white theme)} + :danger {:icon-color (theme-colors colors/danger-50 colors/danger-60 theme) + :background (theme-colors colors/white colors/neutral-95 theme) + :text-color (theme-colors colors/danger-50 colors/danger-60 theme)} + :transparent {:icon-color (theme-colors colors/neutral-50 colors/neutral-10 theme) + :text-color (theme-colors colors/neutral-100 colors/white theme)})) (defn menu-item [{:keys [type title accessibility-label icon on-press style-props subtitle subtitle-color] :or {type :main}}] - (let [{:keys [icon-color text-color background]} (themes type)] + (let [theme (quo.theme/use-theme) + {:keys [icon-color text-color background]} (themes type theme)] [rn/touchable-opacity (merge {:accessibility-label accessibility-label :style (merge style-props diff --git a/src/quo/components/list_items/network_list/view.cljs b/src/quo/components/list_items/network_list/view.cljs index b8331a9bba..ec2a57baea 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 @@ -40,21 +40,21 @@ [:catn [:props [:map {:closed true} + [:theme :schema.common/theme] [:network-image :int] [:label :string] [:fiat-value :string] [: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 b6bd0ab985..048bdec5c3 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 6459be26c7..f19504cfa9 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 3bfa1d58bd..f3eacf31c6 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 8fa19652ed..34c2c967df 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 dfe9bd3d38..1857ab888e 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 862606dc17..b596cfe7e1 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 4f22380a00..d3743aed7a 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/list_items/user.cljs b/src/quo/components/list_items/user.cljs index 5779098426..9c704e9ace 100644 --- a/src/quo/components/list_items/user.cljs +++ b/src/quo/components/list_items/user.cljs @@ -69,7 +69,7 @@ (when short-chat-key [text/text {:size :paragraph-2 - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} short-chat-key])] (when accessory [action-icon accessory customization-color disabled? theme])]]) diff --git a/src/quo/components/loaders/skeleton.cljs b/src/quo/components/loaders/skeleton.cljs index 81d523469c..cb403af7d7 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 d9b7b91ad8..b20fbd6140 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 85ac931023..a819cd952e 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 ffda3ac81f..30cece76e7 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 @@ -28,18 +28,17 @@ style (assoc style :color - (if (= (or theme (quo.theme/get-theme)) :dark) colors/white colors/neutral-100))))) + (if (= 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 02a5e3be50..8971e5372d 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 62c89e48ba..f7d8f51392 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 @@ -17,8 +17,8 @@ :background colors/neutral-95}}) (defn get-color - [k] - (get-in themes [(theme/get-theme) k])) + [k theme] + (get-in themes [theme k])) (def ui-images {:light {:horizontal (js/require "../resources/images/ui/message-gap-hborder-light.png") @@ -28,33 +28,35 @@ :circles (js/require "../resources/images/ui/message-gap-circle-bg-dark.png")}}) (defn get-image - [k] - (get-in ui-images [(theme/get-theme) k])) + [k theme] + (get-in ui-images [theme k])) ;;; components ;;;; borders (defn hborder [{:keys [type style]}] - [rn/image - {:source (get-image :horizontal) - :resize-mode :repeat - :style (merge {:position :absolute - :left 0 - :padding-horizontal 4 - :overflow :hidden - :width "110%" - :height 8 - :margin-left -4} - (if (= type :top) - {:top 0} - {:transform [{:rotateZ "180deg"}] - :bottom 0}) - style)}]) + (let [theme (quo.theme/use-theme)] + [rn/image + {:source (get-image :horizontal theme) + :resize-mode :repeat + :style (merge {:position :absolute + :left 0 + :padding-horizontal 4 + :overflow :hidden + :width "110%" + :height 8 + :margin-left -4} + (if (= type :top) + {:top 0} + {:transform [{:rotateZ "180deg"}] + :bottom 0}) + style)}])) (defn vborder [type body-height] - (let [height @body-height - img (get-image :vertical)] + (let [theme (quo.theme/use-theme) + height @body-height + img (get-image :vertical theme)] (when (and img height) [rn/image {:source img @@ -72,22 +74,24 @@ ;;;; others (defn circle [] - [rn/view - {:width 9 - :height 9 - :border-width 1 - :margin 4 - :flex 0 - :border-color (get-color :icon) - :border-radius 50}]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:width 9 + :height 9 + :border-width 1 + :margin 4 + :flex 0 + :border-color (get-color :icon theme) + :border-radius 50}])) (defn timestamp [s] - [text/text - {:size :label - :style {:text-transform :none - :color (get-color :time)}} - s]) + (let [theme (quo.theme/use-theme)] + [text/text + {:size :label + :style {:text-transform :none + :color (get-color :time theme)}} + s])) (defn info-button [on-press] @@ -98,15 +102,16 @@ ;;;; timeline/body (defn timeline [] - [rn/view - {:flex 0 - :margin-right 20 - :align-items :center - :width 9 - :justify-content :space-between} - [circle] - [rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}] - [circle]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:flex 0 + :margin-right 20 + :align-items :center + :width 9 + :justify-content :space-between} + [circle] + [rn/image {:style {:flex 1} :source (get-image :circles theme) :resize-mode :repeat}] + [circle]])) (defn body [timestamp-far timestamp-near on-info-button-pressed on-press warning-label] @@ -136,7 +141,8 @@ style on-press warning-label]}] - (let [[body-height set-body-height] (rn/use-state nil) + (let [theme (quo.theme/use-theme) + [body-height set-body-height] (rn/use-state nil) on-layout (rn/use-callback #(set-body-height (oget % "nativeEvent.layout.height")))] [rn/view @@ -147,7 +153,7 @@ [hborder {:type :bottom}] [rn/view (merge {:width "100%" - :background-color (get-color :background) + :background-color (get-color :background theme) :flex-direction :row :padding 20 :padding-left 31 diff --git a/src/quo/components/messages/system_message/view.cljs b/src/quo/components/messages/system_message/view.cljs index b84d9a1a8f..9ee41eb0ff 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]]]) +(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]]])) -(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-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]]]) +(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]]])) -(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-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 6495f69614..ae41e10347 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 30dcea1971..5691e2fba7 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 82abad70b1..42ad4d48c8 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 c189cd31b9..60fae46150 100644 --- a/src/quo/components/notifications/notification/view.cljs +++ b/src/quo/components/notifications/notification/view.cljs @@ -63,7 +63,7 @@ (defn notification [{title-text :title :keys [avatar user header title-weight text body container-style theme]}] - (let [theme (or theme (quo.theme/get-theme)) + (let [theme theme body (or body (when text [message text theme])) header (or header (when title-text @@ -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 d409528d01..b39d8c306e 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: @@ -74,7 +72,7 @@ " [{:keys [type icon title text action undo-duration undo-on-press container-style theme user] :or {type :neutral icon :i/placeholder}}] - (let [context-theme (or theme (quo.theme/get-theme)) + (let [context-theme theme icon-name (case type :positive (if (= theme :light) :i/correct @@ -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 337b7e938a..c7874c6f9d 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 80f42e1116..7d4aa2fa7a 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/style.cljs b/src/quo/components/profile/collectible/style.cljs index c49f89ba76..bfc7031eb8 100644 --- a/src/quo/components/profile/collectible/style.cljs +++ b/src/quo/components/profile/collectible/style.cljs @@ -56,8 +56,8 @@ :right 0}) (defn remaining-tiles - [] - (let [bg-color (colors/theme-colors colors/neutral-20 colors/neutral-80) + [theme] + (let [bg-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) tile-size (tile-style-by-size :xs)] (assoc tile-size :justify-content :center @@ -65,5 +65,5 @@ :background-color bg-color))) (defn remaining-tiles-text - [] - {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}) + [theme] + {:color (colors/theme-colors colors/neutral-60 colors/neutral-40 theme)}) diff --git a/src/quo/components/profile/collectible/view.cljs b/src/quo/components/profile/collectible/view.cljs index 543f1c8b6d..6c7092b9ba 100644 --- a/src/quo/components/profile/collectible/view.cljs +++ b/src/quo/components/profile/collectible/view.cljs @@ -6,10 +6,10 @@ [react-native.core :as rn])) (defn remaining-tiles - [amount] - [rn/view {:style (merge style/bottom-right (style/remaining-tiles))} + [amount theme] + [rn/view {:style (merge style/bottom-right (style/remaining-tiles theme))} [text/text - {:style (style/remaining-tiles-text) + {:style (style/remaining-tiles-text theme) :size :paragraph-2 :weight :medium} (str "+" amount)]]) diff --git a/src/quo/components/profile/collectible_list_item/style.cljs b/src/quo/components/profile/collectible_list_item/style.cljs index fb9a4b606c..3b187a5b5a 100644 --- a/src/quo/components/profile/collectible_list_item/style.cljs +++ b/src/quo/components/profile/collectible_list_item/style.cljs @@ -39,7 +39,7 @@ :border-radius 14 :border-width 1 :border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)} - (shadows/get 2))) + (shadows/get 2 theme))) (def image {:width "100%" diff --git a/src/quo/components/profile/collectible_list_item/view.cljs b/src/quo/components/profile/collectible_list_item/view.cljs index f807c6db78..b0e58ff6b0 100644 --- a/src/quo/components/profile/collectible_list_item/view.cljs +++ b/src/quo/components/profile/collectible_list_item/view.cljs @@ -80,7 +80,7 @@ (defn- card-view [{:keys [avatar-image-src collectible-name community? counter state set-state gradient-color-index image-src supported-file?]}] - (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 @@ -121,7 +121,7 @@ (defn- image-view [{:keys [avatar-image-src community? counter state set-state gradient-color-index image-src supported-file?]}] - (let [theme (quo.theme/use-theme-value)] + (let [theme (quo.theme/use-theme)] [rn/view {:style style/image-view-container} (cond (:image-error? state) diff --git a/src/quo/components/profile/expanded_collectible/style.cljs b/src/quo/components/profile/expanded_collectible/style.cljs index 1d76283af7..e58d2c4988 100644 --- a/src/quo/components/profile/expanded_collectible/style.cljs +++ b/src/quo/components/profile/expanded_collectible/style.cljs @@ -2,8 +2,9 @@ (:require [quo.foundations.colors :as colors] [quo.foundations.shadows :as shadows])) -(def container - (merge (shadows/get 2) +(defn container + [theme] + (merge (shadows/get 2 theme) {:align-items :center :justify-content :center :border-radius 16})) diff --git a/src/quo/components/profile/expanded_collectible/view.cljs b/src/quo/components/profile/expanded_collectible/view.cljs index 82641afd1e..8c612d0195 100644 --- a/src/quo/components/profile/expanded_collectible/view.cljs +++ b/src/quo/components/profile/expanded_collectible/view.cljs @@ -7,6 +7,8 @@ [quo.components.profile.expanded-collectible.style :as style] [quo.foundations.colors :as colors] [quo.theme] + [quo.theme] + [quo.theme] [react-native.core :as rn] [schema.core :as schema] [utils.i18n :as i18n])) @@ -33,7 +35,7 @@ (defn view-internal [{:keys [container-style square? on-press counter image-src native-ID supported-file?]}] - (let [theme (quo.theme/use-theme-value) + (let [theme (quo.theme/use-theme) [image-size set-image-size] (rn/use-state {}) [image-error? set-image-error] (rn/use-state false)] (rn/use-effect @@ -46,7 +48,7 @@ [rn/pressable {:on-press (when (and (not image-error?) supported-file?) on-press) :accessibility-label :expanded-collectible - :style (merge container-style style/container)} + :style (merge container-style (style/container theme))} (cond (not supported-file?) [fallback-view diff --git a/src/quo/components/profile/link_card/view.cljs b/src/quo/components/profile/link_card/view.cljs index 056e97f2ca..6bd2a713e2 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 90ded3c556..9b3b22cf13 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 ec2ad57267..ee4739e13a 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 018b3bb182..8d1c2eec79 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) @@ -77,9 +77,10 @@ width height border-radius-first-half - border-radius-second-half)}]] + border-radius-second-half + theme)}]] [reanimated/view - {:style (style/lock-button translate-x-y opacity) + {:style (style/lock-button translate-x-y opacity theme) :pointer-events :none} [icons/icon (if ready-to-lock? :i/locked :i/unlocked) {:color (colors/theme-colors colors/black colors/white theme) 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 2254a36495..f1ca41ccc1 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) @@ -212,7 +212,7 @@ animations)] [rn/view {:style (style/record-button-big-body button-color)} [reanimated/view {:style (style/record-button-big-red-overlay red-overlay-opacity)}] - [reanimated/view {:style (style/record-button-big-gray-overlay gray-overlay-opacity)}] + [reanimated/view {:style (style/record-button-big-gray-overlay gray-overlay-opacity theme)}] [reanimated/view {:style (style/record-button-big-icon-container icon-opacity)} (if locked? [rn/view {:style style/stop-icon}] diff --git a/src/quo/components/record_audio/record_audio/style.cljs b/src/quo/components/record_audio/record_audio/style.cljs index 65a70d2d94..b7687d702f 100644 --- a/src/quo/components/record_audio/record_audio/style.cljs +++ b/src/quo/components/record_audio/record_audio/style.cljs @@ -55,7 +55,7 @@ :background-color colors/danger-50})) (defn record-button-big-gray-overlay - [gray-overlay-opacity] + [gray-overlay-opacity theme] (reanimated/apply-animations-to-style {:opacity gray-overlay-opacity} {:position :absolute @@ -63,7 +63,7 @@ :left 0 :right 0 :bottom 0 - :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80)})) + :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80 theme)})) (defn record-button-big-icon-container [icon-opacity] @@ -138,7 +138,7 @@ :left 20})) (defn lock-button-connector - [opacity width height border-radius-first-half border-radius-second-half] + [opacity width height border-radius-first-half border-radius-second-half theme] (reanimated/apply-animations-to-style {:opacity opacity :width width @@ -150,11 +150,11 @@ {:justify-content :center :align-items :center :align-self :center - :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80 theme) :overflow :hidden})) (defn lock-button - [translate-x-y opacity] + [translate-x-y opacity theme] (reanimated/apply-animations-to-style {:transform [{:translateX translate-x-y} {:translateY translate-x-y}] @@ -163,7 +163,7 @@ :height 32 :justify-content :center :align-items :center - :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-80-opa-5-opaque colors/neutral-80 theme) :border-radius 16 :position :absolute :top 24 @@ -236,10 +236,10 @@ :height 128}) (defn recording-bar-container - [] + [theme] {:height 4 :border-radius 2 - :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) :overflow :hidden :position :absolute :left 80 @@ -247,13 +247,13 @@ :bottom 34}) (defn recording-bar - [fill-percentage ready-to-delete?] + [fill-percentage ready-to-delete? theme] {:width (str fill-percentage "%") :height 4 :border-radius 2 :background-color (if ready-to-delete? - (colors/theme-colors colors/danger-50 colors/danger-60) - (colors/theme-colors colors/primary-50 colors/primary-60))}) + (colors/theme-colors colors/danger-50 colors/danger-60 theme) + (colors/theme-colors colors/primary-50 colors/primary-60 theme))}) (defn timer-container [reviewing-audio?] @@ -264,19 +264,19 @@ :align-items :center}) (defn timer-circle - [] + [theme] {:width 8 :height 8 :border-radius 4 :margin-right 6 - :background-color (colors/theme-colors colors/danger-50 colors/danger-60)}) + :background-color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}) (defn timer-text - [] - {:color (colors/theme-colors colors/danger-50 colors/danger-60)}) + [theme] + {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}) (defn play-button - [] + [theme] {:position :absolute :bottom 20 :left 20 @@ -285,4 +285,4 @@ :border-radius 16 :align-items :center :justify-content :center - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-90)}) + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)}) diff --git a/src/quo/components/record_audio/record_audio/view.cljs b/src/quo/components/record_audio/record_audio/view.cljs index 1729a9f6ca..c2abcb5b61 100644 --- a/src/quo/components/record_audio/record_audio/view.cljs +++ b/src/quo/components/record_audio/record_audio/view.cljs @@ -14,6 +14,7 @@ [quo.components.record-audio.record-audio.style :as style] [quo.components.record-audio.soundtrack.view :as soundtrack] [quo.foundations.colors :as colors] + [quo.theme] [react-native.audio-toolkit :as audio] [react-native.core :as rn] [taoensso.timbre :as log] @@ -21,30 +22,33 @@ (defn- recording-bar [recording-length-ms ready-to-delete?] - (let [fill-percentage (/ (* recording-length-ms 100) record-audio.constants/max-audio-duration-ms)] - [rn/view {:style (style/recording-bar-container)} - [rn/view {:style (style/recording-bar fill-percentage ready-to-delete?)}]])) + (let [theme (quo.theme/use-theme) + fill-percentage (/ (* recording-length-ms 100) record-audio.constants/max-audio-duration-ms)] + [rn/view {:style (style/recording-bar-container theme)} + [rn/view {:style (style/recording-bar fill-percentage ready-to-delete? theme)}]])) (defn- time-counter [recording? recording-length-ms ready-to-delete? reviewing-audio? audio-current-time-ms] - (let [s (quot (if recording? recording-length-ms audio-current-time-ms) 1000) + (let [theme (quo.theme/use-theme) + s (quot (if recording? recording-length-ms audio-current-time-ms) 1000) time-str (gstring/format "%02d:%02d" (quot s 60) (mod s 60))] [rn/view {:style (style/timer-container reviewing-audio?)} (when-not reviewing-audio? - [rn/view {:style (style/timer-circle)}]) + [rn/view {:style (style/timer-circle theme)}]) [text/text (merge {:size :label :weight :semi-bold} (when ready-to-delete? - {:style (style/timer-text)})) + {:style (style/timer-text theme)})) time-str]])) (defn- play-button [playing-audio? set-playing-audio player-ref playing-timer set-audio-current-time-ms seeking-audio? set-seeking-audio max-duration-ms] - (let [on-play (fn [] + (let [theme (quo.theme/use-theme) + on-play (fn [] (set-playing-audio true) (reset! playing-timer (js/setInterval @@ -82,11 +86,11 @@ on-pause #(log/error "[record-audio] toggle play / pause - error: " %)))] [rn/touchable-opacity - {:style (style/play-button) + {:style (style/play-button theme) :on-press on-press} [icons/icon (if playing-audio? :i/pause :i/play) - {:color (colors/theme-colors colors/neutral-100 colors/white)}]])) + {:color (colors/theme-colors colors/neutral-100 colors/white theme)}]])) (defn record-audio [{:keys [on-init on-start-recording on-send on-cancel on-reviewing-audio audio-file on-lock diff --git a/src/quo/components/record_audio/soundtrack/view.cljs b/src/quo/components/record_audio/soundtrack/view.cljs index 4cb6e675a6..b5144d8671 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] @@ -39,7 +39,7 @@ :on-sliding-start on-sliding-start :on-sliding-complete on-sliding-complete :on-value-change on-value-change - :thumb-image (quo.theme/theme-value thumb-light thumb-dark theme) + :thumb-image (if (= theme :light) thumb-light thumb-dark) :minimum-track-tint-color (colors/theme-colors colors/primary-50 colors/primary-60 theme) :maximum-track-tint-color (colors/theme-colors (if platform/ios? colors/neutral-20 colors/neutral-40) diff --git a/src/quo/components/selectors/disclaimer/style.cljs b/src/quo/components/selectors/disclaimer/style.cljs index 03471bdc6a..fa648a4715 100644 --- a/src/quo/components/selectors/disclaimer/style.cljs +++ b/src/quo/components/selectors/disclaimer/style.cljs @@ -3,16 +3,16 @@ [quo.foundations.colors :as colors])) (defn container - [blur?] + [blur? theme] (let [dark-background (if blur? colors/white-opa-5 colors/neutral-80-opa-40) dark-border (if blur? colors/white-opa-10 colors/neutral-70)] {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-5 dark-background) + :background-color (colors/theme-colors colors/neutral-5 dark-background theme) :padding 11 :align-self :stretch :border-radius 12 :border-width 1 - :border-color (colors/theme-colors colors/neutral-20 dark-border)})) + :border-color (colors/theme-colors colors/neutral-20 dark-border theme)})) (def text {:margin-left 8}) diff --git a/src/quo/components/selectors/disclaimer/view.cljs b/src/quo/components/selectors/disclaimer/view.cljs index 5935eb40a4..89057038ac 100644 --- a/src/quo/components/selectors/disclaimer/view.cljs +++ b/src/quo/components/selectors/disclaimer/view.cljs @@ -3,21 +3,23 @@ [quo.components.markdown.text :as text] [quo.components.selectors.disclaimer.style :as style] [quo.components.selectors.selectors.view :as selectors] + [quo.theme] [react-native.core :as rn])) (defn view [{:keys [checked? blur? accessibility-label container-style on-change]} label] - [rn/touchable-without-feedback - {:on-press on-change - :accessibility-label :disclaimer-touchable-opacity} - [rn/view {:style (merge container-style (style/container blur?))} - [selectors/view - {:type :checkbox - :accessibility-label accessibility-label - :blur? blur? - :checked? checked? - :on-change on-change}] - [text/text - {:size :paragraph-2 - :style style/text} - label]]]) + (let [theme (quo.theme/use-theme)] + [rn/touchable-without-feedback + {:on-press on-change + :accessibility-label :disclaimer-touchable-opacity} + [rn/view {:style (merge container-style (style/container blur? theme))} + [selectors/view + {:type :checkbox + :accessibility-label accessibility-label + :blur? blur? + :checked? checked? + :on-change on-change}] + [text/text + {:size :paragraph-2 + :style style/text} + label]]])) diff --git a/src/quo/components/selectors/filter/view.cljs b/src/quo/components/selectors/filter/view.cljs index 9a07d5b473..dd5e75e492 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 2bcb0eac0e..7168242194 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/reactions_selector/style.cljs b/src/quo/components/selectors/reactions_selector/style.cljs index 0afb785740..3acc6345fe 100644 --- a/src/quo/components/selectors/reactions_selector/style.cljs +++ b/src/quo/components/selectors/reactions_selector/style.cljs @@ -3,10 +3,10 @@ [quo.foundations.colors :as colors])) (defn container - [pressed?] + [pressed? theme] {:padding 10 :border-radius 12 :border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) :background-color (when pressed? - (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40))}) + (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))}) diff --git a/src/quo/components/selectors/reactions_selector/view.cljs b/src/quo/components/selectors/reactions_selector/view.cljs index 393273c6c2..b12adbc65d 100644 --- a/src/quo/components/selectors/reactions_selector/view.cljs +++ b/src/quo/components/selectors/reactions_selector/view.cljs @@ -2,6 +2,7 @@ (:require [quo.components.selectors.reaction-resource :as reactions.resource] [quo.components.selectors.reactions-selector.style :as style] + [quo.theme] [react-native.core :as rn])) (defn view @@ -9,13 +10,14 @@ accessibility-label start-pressed?] :or {accessibility-label :reaction}}] (let [[pressed? set-pressed] (rn/use-state start-pressed?) + theme (quo.theme/use-theme) on-press (fn [e] (set-pressed (not pressed?)) (when on-press (on-press e)))] [rn/pressable {:accessibility-label accessibility-label :allow-multiple-presses? true - :style (merge (style/container pressed?) + :style (merge (style/container pressed? theme) container-style) :on-press on-press} [rn/text (reactions.resource/system-emojis emoji)]])) diff --git a/src/quo/components/selectors/selectors/style.cljs b/src/quo/components/selectors/selectors/style.cljs index 144082f8d9..c41eebe189 100644 --- a/src/quo/components/selectors/selectors/style.cljs +++ b/src/quo/components/selectors/selectors/style.cljs @@ -30,7 +30,8 @@ {:normal {:checked (colors/resolve-color customization-color theme) :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)} :blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme) - colors/white) + colors/white + theme) :unchecked colors/white-opa-5}}) (defn- checkbox-border-unchecked-color diff --git a/src/quo/components/selectors/selectors/view.cljs b/src/quo/components/selectors/selectors/view.cljs index db7fcb84c9..fd46077f55 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 2638be7b90..2cf3f81b39 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 fc72a9a071..0e57ed90c1 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 e347d2de41..ee228d584c 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 3aad999e0c..c36dd9f9b0 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))}) @@ -55,8 +55,8 @@ :overflow :hidden}) (defn blur-view - [] + [theme] {:style {:flex 1} :blur-radius 10 - :blur-type (colors/theme-colors :light :dark) + :blur-type theme :blur-amount 20}) diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index 452a7bb424..2bd80f7b2f 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 a377544606..9ace4e4b25 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 5032f64917..f3f9499de2 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 674b7dbb7c..85d7234dfd 100644 --- a/src/quo/components/settings/reorder_item/items/item.cljs +++ b/src/quo/components/settings/reorder_item/items/item.cljs @@ -8,49 +8,42 @@ [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? theme) + (when subtitle style/item-container-extended))} + [icon/icon :main-icons/drag + {:color (colors/theme-colors + colors/neutral-50 + colors/neutral-40 + theme)}] [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 theme)]])]] + [icon/icon :tiny-icons/chevron-right (style/chevron theme)]])) diff --git a/src/quo/components/settings/reorder_item/items/item_placeholder.cljs b/src/quo/components/settings/reorder_item/items/item_placeholder.cljs index b2266381a6..61009111a3 100644 --- a/src/quo/components/settings/reorder_item/items/item_placeholder.cljs +++ b/src/quo/components/settings/reorder_item/items/item_placeholder.cljs @@ -5,12 +5,12 @@ [react-native.core :as rn])) (defn view - [item] + [item theme] (let [label (:label item)] [rn/view {:accessibility-label :reorder-placerholder-drag-handle - :style (style/placeholder-container)} + :style (style/placeholder-container theme)} [text/text - {:style (style/placeholder-text) + {:style (style/placeholder-text theme) :weight :regular} label]])) diff --git a/src/quo/components/settings/reorder_item/items/item_skeleton.cljs b/src/quo/components/settings/reorder_item/items/item_skeleton.cljs index 372495a4c7..c92cfaf23a 100644 --- a/src/quo/components/settings/reorder_item/items/item_skeleton.cljs +++ b/src/quo/components/settings/reorder_item/items/item_skeleton.cljs @@ -4,6 +4,6 @@ [react-native.core :as rn])) (defn view - [] + [theme] [rn/view - {:style (style/skeleton-container)}]) + {:style (style/skeleton-container theme)}]) diff --git a/src/quo/components/settings/reorder_item/items/item_tabs.cljs b/src/quo/components/settings/reorder_item/items/item_tabs.cljs index 451a00e4fc..a8a99357d5 100644 --- a/src/quo/components/settings/reorder_item/items/item_tabs.cljs +++ b/src/quo/components/settings/reorder_item/items/item_tabs.cljs @@ -4,16 +4,18 @@ [quo.components.markdown.text :as text] [quo.components.settings.reorder-item.style :as style] [quo.components.tabs.segmented-tab :as quo] + [quo.theme] [react-native.core :as rn])) (defn render-tab-item [item] - (let [tab-image (cond + (let [theme (quo.theme/use-theme) + tab-image (cond (item :image) [rn/image {:source (:image item) :style style/tab-item-image}] (item :icon) [rn/view {:style style/tab-item-image} - (quo-icons/icon (:icon item) (style/tab-icon))])] + (quo-icons/icon (:icon item) (style/tab-icon theme))])] [rn/view {:style style/tab-item-container} tab-image @@ -30,12 +32,13 @@ [{:keys [data default-active on-change] :or {default-active 1 on-change (constantly nil)}}] - [quo/segmented-control - {:default-active default-active - :size 32 - :blur? false - :container-style (style/tab-container) - :item-container-style (style/segmented-tab-item-container) - :active-item-container-style (style/active-segmented-tab-item-container) - :data (transform-data data) - :on-change on-change}]) + (let [theme (quo.theme/use-theme)] + [quo/segmented-control + {:default-active default-active + :size 32 + :blur? false + :container-style (style/tab-container theme) + :item-container-style (style/segmented-tab-item-container theme) + :active-item-container-style (style/active-segmented-tab-item-container theme) + :data (transform-data data) + :on-change on-change}])) diff --git a/src/quo/components/settings/reorder_item/style.cljs b/src/quo/components/settings/reorder_item/style.cljs index dbec6597e1..308d85d6a1 100644 --- a/src/quo/components/settings/reorder_item/style.cljs +++ b/src/quo/components/settings/reorder_item/style.cljs @@ -3,7 +3,7 @@ [quo.foundations.colors :as colors])) (defn item-container - [blur?] + [blur? theme] {:flex-direction :row :align-items :center :border-radius 16 @@ -14,7 +14,8 @@ colors/white-opa-5 (colors/theme-colors colors/white - colors/neutral-90))}) + colors/neutral-90 + theme))}) (def item-container-extended {:height 56}) @@ -57,23 +58,25 @@ :margin-right 8}) (defn right-icon - [] + [theme] {:height 20 :width 20 :color (colors/theme-colors colors/neutral-40 - colors/neutral-40)}) + colors/neutral-40 + theme)}) (def right-icon-container {:justify-content :center}) (defn placeholder-container - [] + [theme] {:background-color :transparent :border-width 1 :border-color (colors/theme-colors colors/neutral-30 - colors/neutral-80) + colors/neutral-80 + theme) :padding 12 :justify-content :center :align-items :center @@ -82,46 +85,51 @@ :border-style :dashed}) (defn placeholder-text - [] + [theme] {:color (colors/theme-colors colors/neutral-40 - colors/neutral-50) + colors/neutral-50 + theme) :font-size 13}) (defn skeleton-container - [] + [theme] {:background-color (colors/theme-colors colors/neutral-5 - colors/neutral-95) + colors/neutral-95 + theme) :border-radius 16 :margin-bottom 24 :height 48}) (defn tab-container - [] + [theme] {:background-color (colors/theme-colors colors/neutral-5 - colors/neutral-95) + colors/neutral-95 + theme) :padding-horizontal 4 :padding-vertical 6 :margin-bottom 24}) (defn segmented-tab-item-container - [] + [theme] {:height 40 :border-width 1 :border-style :dashed :margin-horizontal 2 :border-color (colors/theme-colors colors/neutral-30 - colors/neutral-60)}) + colors/neutral-60 + theme)}) (defn active-segmented-tab-item-container - [] + [theme] {:height 40 :background-color (colors/theme-colors colors/neutral-30 - colors/neutral-90)}) + colors/neutral-90 + theme)}) (def tab-item-container {:flex-direction :row @@ -137,9 +145,10 @@ {:font-size 14}) (defn tab-icon - [] + [theme] {:height 16 :width 16 :color (colors/theme-colors colors/neutral-40 - colors/neutral-40)}) + colors/neutral-40 + theme)}) diff --git a/src/quo/components/settings/section_label/view.cljs b/src/quo/components/settings/section_label/view.cljs index e664e49f76..345cd76662 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 4dcd38334a..5ebc7f53ae 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 a327198633..7d86ef94d8 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 e5f5ca2aa0..dcf468c36b 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 @@ -34,8 +34,8 @@ :margin-right 8}) (defn get-color-by-type - [type k] - (get-in themes [(theme/get-theme) type k])) + [type k theme] + (get-in themes [theme type k])) (defn account-selector "[account-selector opts] @@ -47,9 +47,12 @@ :account-text \"My Savings\" ;; content in place of account name }" [{:keys [show-label? account-text account-emoji transparent? label-text style]}] - (let [background-color (get-color-by-type (if transparent? :transparent :default) :bg) - account-text-color (get-color-by-type (if transparent? :transparent :default) :account-text) - label-text-color (get-color-by-type (if transparent? :transparent :default) :label-text)] + (let [theme (quo.theme/use-theme) + background-color (get-color-by-type (if transparent? :transparent :default) :bg theme) + account-text-color (get-color-by-type (if transparent? :transparent :default) + :account-text + theme) + label-text-color (get-color-by-type (if transparent? :transparent :default) :label-text theme)] [rn/view {:style style} (when show-label? [quo/text diff --git a/src/quo/components/tabs/segmented_tab.cljs b/src/quo/components/tabs/segmented_tab.cljs index de93566046..3aac6accfa 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 ffce2e235d..b068716f45 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 f5059573f0..0540946e6c 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 0fe884beaa..15bf8b7ac0 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 5aa3fdf300..0d434074a9 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}]] + (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] + :multiuser + [preview-list/view {:type :user :size :size-20} + users] - :multinetwork - [preview-list/view {:type :network :size :size-20} - networks] + :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}]]] + :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)}]] + :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))] + (: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)}]] + :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}]] + :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}]] + :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)}]] + :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] + :address + [address-tag props] - :icon - [icon-tag props] + :icon + [icon-tag props] - nil)]]) + 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/tags/network_tags/view.cljs b/src/quo/components/tags/network_tags/view.cljs index 059e46bb66..189bd2123f 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 9c1fc83e84..1d1fff8306 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 dc82d416ae..174561b8f6 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/permission_tag.cljs b/src/quo/components/tags/permission_tag.cljs index a828ab1fbd..2ddf8b11b5 100644 --- a/src/quo/components/tags/permission_tag.cljs +++ b/src/quo/components/tags/permission_tag.cljs @@ -4,6 +4,7 @@ [quo.components.markdown.text :as text] [quo.components.tags.base-tag :as base-tag] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn])) (defn outer-resource-container @@ -19,10 +20,11 @@ :justify-content :center}) (defn extra-count-styles - [size] + [size theme] {:background-color (colors/theme-colors colors/neutral-20 - colors/neutral-70) + colors/neutral-70 + theme) :height (case size 32 28 24 20) @@ -35,24 +37,27 @@ (defn extra-count [total-group-count selected-count size background-color] - (let [extra-group-count (- total-group-count selected-count)] + (let [theme (quo.theme/use-theme) + extra-group-count (- total-group-count selected-count)] (when (> extra-group-count 0) [rn/view (outer-resource-container size background-color) - [rn/view (extra-count-styles size) + [rn/view (extra-count-styles size theme) (if (< extra-group-count 4) [text/text {:size :label :style {:align-items :center :color (colors/theme-colors colors/neutral-50 - colors/neutral-40)}} + colors/neutral-40 + theme)}} (str "+" extra-group-count)] [icons/icon :i/pending-default {:container-style {:align-items :center :justify-content :center} :color (colors/theme-colors colors/neutral-50 - colors/neutral-40) + colors/neutral-40 + theme) :size 12}])]]))) (defn selected-token-count @@ -69,7 +74,8 @@ [] (fn [{:keys [group size last-group background-color] :or {size 24}}] - (let [tokens-count (count group) + (let [theme (quo.theme/use-theme) + tokens-count (count group) selected-tokens (take (selected-token-count group) group)] [rn/view {:flex-direction :row @@ -98,7 +104,8 @@ 24 :label) :style {:color (colors/theme-colors colors/neutral-50 - colors/neutral-40) + colors/neutral-40 + theme) :padding-left 4 :text-transform :lowercase :padding-right (case size @@ -132,9 +139,9 @@ :background-color background-color}])]))) (defn tag - [_ _] - (fn [{:keys [locked? tokens size background-color on-press accessibility-label] - :or {size 24}}] + [{:keys [locked? tokens size background-color on-press accessibility-label] + :or {size 24}}] + (let [theme (quo.theme/use-theme)] [base-tag/base-tag {:accessibility-label accessibility-label :background-color background-color @@ -162,7 +169,8 @@ 24 16) :color (colors/theme-colors colors/neutral-50 - colors/neutral-40)}]] + colors/neutral-40 + theme)}]] [tag-tokens {:tokens tokens :size size diff --git a/src/quo/components/tags/status_tags.cljs b/src/quo/components/tags/status_tags.cljs index b438fdec58..457e3c8dbc 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 bd18f37e4d..f33654ff82 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 e26de4f835..c652c5a17d 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 4bca27bd28..2b0ac6b5b5 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 ba25310546..e7c7236792 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 5de5cdd90e..660d78a115 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 c20f5ed8a0..d65985420b 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 f50c1c9286..dfbc77c62a 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 9e9d7efdf4..8698324ea4 100644 --- a/src/quo/components/text_combinations/page_top/view.cljs +++ b/src/quo/components/text_combinations/page_top/view.cljs @@ -119,35 +119,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 65312a8120..609b4eeacc 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 5c1450a9e4..9932c0e447 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 6a412d93b0..422db85e77 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 c148d1e291..84c912b629 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 da3d9765a2..56f322496a 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 b35d3c7e22..91371fe6ce 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 2cbe81493b..66f90642d4 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 8893b6b52a..7eebfe0327 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 b26f1c0598..0444a2d904 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 ea68139e84..6f917403e2 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 9cb5106356..760d377abd 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 77433872a0..926ade8625 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 c3c8ef2ebc..a6dcb19eb2 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 02deb81086..173ead8131 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 a995fc4a67..f6065daab0 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 a7baa54e5f..12ebd1fc13 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 2e92a8c6de..207f5acfd4 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 c070baabb2..67d9a57825 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 c033ee953a..119c46c86a 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 c0b89e2351..e8d2ec086b 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 2b9f56a53d..a0c7114536 100644 --- a/src/quo/components/wallet/network_link/view.cljs +++ b/src/quo/components/wallet/network_link/view.cljs @@ -35,8 +35,9 @@ :stroke-width "1"}]]) (defn link-linear - [{:keys [source theme]}] - (let [[container-width + [{:keys [source]}] + (let [theme (quo.theme/use-theme) + [container-width set-container-width] (rn/use-state 100) stroke-color (colors/resolve-color source theme) fill-color (colors/theme-colors colors/white colors/neutral-90 theme) @@ -52,8 +53,9 @@ [circle fill-color stroke-color]]])) (defn link-1x - [{:keys [source destination theme]}] - (let [[container-width + [{:keys [source destination]}] + (let [theme (quo.theme/use-theme) + [container-width set-container-width] (rn/use-state 100) stroke-color "url(#gradient)" source-color (colors/resolve-color source theme) @@ -100,8 +102,9 @@ [circle fill-color destination-color]]])) (defn link-2x - [{:keys [source destination theme]}] - (let [[container-width + [{:keys [source destination]}] + (let [theme (quo.theme/use-theme) + [container-width set-container-width] (rn/use-state 100) stroke-color "url(#gradient)" source-color (colors/resolve-color source theme) @@ -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 cb3475988a..2a4487ddec 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 25331398c0..577acec69a 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 6ef509a6ac..25be8a4268 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 8a1ebe76c1..a8fb77f117 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 f7c7e9e8f7..6d9c422bcb 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 8bf19f6864..6ad329d869 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 6a70955570..3cfb7a9657 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 3d604830b5..83f9e912e3 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 23593e2877..ea97aef79f 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 701197f889..cf77007656 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/component_spec.cljs b/src/quo/components/wallet/transaction_progress/component_spec.cljs index 347fea1e97..0a277732b1 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/quo/components/wallet/transaction_progress/schema.cljs b/src/quo/components/wallet/transaction_progress/schema.cljs index 2c2cb4840b..fcd8ab06ad 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 7ddda95d6e..5501e2ff07 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))]))]]) + (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 - (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/transaction_summary/schema.cljs b/src/quo/components/wallet/transaction_summary/schema.cljs index 908abb6477..4cfe9e2173 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 eb253e692a..a4fd260452 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 1b9c8d0f0e..4690cd3499 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 d65836c7bc..c2ed3f383f 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 f3045225ba..bd0b370bac 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 04248181d6..6275d13b41 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 @@ -37,10 +37,10 @@ (def theme-alpha (memoize (fn - ([color light-opacity dark-opacity] - (theme-alpha color light-opacity color dark-opacity)) - ([light-color light-opacity dark-color dark-opacity] - (if (theme/dark?) + ([color light-opacity dark-opacity theme] + (theme-alpha color light-opacity color dark-opacity theme)) + ([light-color light-opacity dark-color dark-opacity theme] + (if (= :dark theme) (alpha light-color light-opacity) (alpha dark-color dark-opacity)))))) @@ -364,16 +364,7 @@ (def shadow "rgba(9,16,28,0.08)") -;;General - -;; divider -(def divider-light "#EDF2f4") -(def divider-dark "#0E1620") - (defn theme-colors "(theme-colors light dark override-theme)" - ([light dark] - (theme-colors light dark nil)) - ([light dark override-theme] - (let [theme (or override-theme (theme/get-theme))] - (if (= theme :light) light dark)))) + [light dark theme] + (if (= theme :light) light dark)) diff --git a/src/quo/foundations/gradients.cljs b/src/quo/foundations/gradients.cljs index 03338ddfcf..76acc75516 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/foundations/shadows.cljs b/src/quo/foundations/shadows.cljs index d6f1244ec7..431378f482 100644 --- a/src/quo/foundations/shadows.cljs +++ b/src/quo/foundations/shadows.cljs @@ -2,7 +2,6 @@ (:refer-clojure :exclude [get]) (:require [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] [react-native.platform :as platform] [utils.number])) @@ -83,8 +82,6 @@ `theme` - :light/:dark (optional). `scale-type` - :normal/:inverted (optional). " - ([weight] - (get weight (quo.theme/get-theme))) ([weight theme] (get weight theme :normal)) ([weight theme scale-type] diff --git a/src/quo/theme.cljs b/src/quo/theme.cljs index c92091d6b7..ef2d61d72a 100644 --- a/src/quo/theme.cljs +++ b/src/quo/theme.cljs @@ -1,61 +1,16 @@ (ns quo.theme (:require ["react" :as react] - [react-native.core :as rn] - [reagent.core :as reagent] - utils.transforms)) + [react-native.core :as rn])) (defonce ^:private theme-context (react/createContext :light)) -(defonce ^:private theme-state (reagent/atom :light)) - -(defn dark? - [] - (= :dark @theme-state)) - -(defn get-theme - [] - @theme-state) - -(defn set-theme - [value] - (reset! theme-state value)) - -(defn theme-value - "Returns a value based on the current/override-theme theme." - ([light-value dark-value] - (theme-value light-value dark-value nil)) - ([light-value dark-value override-theme] - (let [theme (or override-theme (get-theme))] - (if (= theme :light) light-value dark-value)))) (defn provider - "Wrap `children` in a React Provider using `quo.theme/theme-context` as the - context. - - `options`: Clojure map. Currently we only use the `:theme` key. In the future - we may support other settings. - " - [options & children] - (into [:> (.-Provider theme-context) {:value options}] + [theme & children] + (into [:> (.-Provider theme-context) {:value theme}] children)) (defn use-theme - "A hook that returns the current theme context." + "A hook that returns the current theme keyword." [] - (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/events.cljs b/src/status_im/common/alert_banner/events.cljs index ff5cf853da..56fc0f62e4 100644 --- a/src/status_im/common/alert_banner/events.cljs +++ b/src/status_im/common/alert_banner/events.cljs @@ -7,7 +7,7 @@ db (assoc-in db [:alert-banners (:type banner)] banner)] (cond-> {:db db} (zero? current-banners-count) - (assoc :show-alert-banner (:view-id db))))) + (assoc :show-alert-banner [(:view-id db) (:theme db)])))) (defn remove-alert-banner [{:keys [db]} [banner-type]] @@ -15,12 +15,12 @@ new-count (count (get db :alert-banners))] (cond-> {:db db} (zero? new-count) - (assoc :hide-alert-banner (:view-id db))))) + (assoc :hide-alert-banner [(:view-id db) (:theme db)])))) (defn remove-all-alert-banners [{:keys [db]}] {:db (dissoc db :alert-banners) - :hide-alert-banner (:view-id db)}) + :hide-alert-banner [(:view-id db) (:theme db)]}) (re-frame/reg-event-fx :alert-banners/add add-alert-banner) (re-frame/reg-event-fx :alert-banners/remove remove-alert-banner) diff --git a/src/status_im/common/alert_banner/events_test.cljs b/src/status_im/common/alert_banner/events_test.cljs index 6244a483ef..1061fb7b81 100644 --- a/src/status_im/common/alert_banner/events_test.cljs +++ b/src/status_im/common/alert_banner/events_test.cljs @@ -9,7 +9,7 @@ (is (match? {:db {:alert-banners {:alert {:text "Alert" :type :alert}}} - :show-alert-banner nil} + :show-alert-banner [nil nil]} (events/add-alert-banner {:db {}} [{:text "Alert" :type :alert}]))))) @@ -17,7 +17,7 @@ (deftest remove-alert-banner (testing "Alert banner is removed" (is (match? {:db {} - :hide-alert-banner nil} + :hide-alert-banner [nil nil]} (events/remove-alert-banner {:db {:alert-banners {:alert {:text "Alert" :type :alert}}}} @@ -34,7 +34,7 @@ (deftest remove-all-alert-banners (testing "All Alert banners are removed" (is (match? {:db {} - :hide-alert-banner nil} + :hide-alert-banner [nil nil]} (events/remove-all-alert-banners {:db {:alert-banners {:alert {:text "Alert" :type :alert} diff --git a/src/status_im/common/alert_banner/view.cljs b/src/status_im/common/alert_banner/view.cljs index 3cd4e341a3..4f34e4e2bb 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 a2191eb447..905f1bcb5f 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 2d3e02d75a..bc0e074f18 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 (if (= theme :light) 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 f3c08409d4..bef2baebe9 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/confirmation_drawer/style.cljs b/src/status_im/common/confirmation_drawer/style.cljs index f81af5d98c..581235183e 100644 --- a/src/status_im/common/confirmation_drawer/style.cljs +++ b/src/status_im/common/confirmation_drawer/style.cljs @@ -3,9 +3,9 @@ [quo.foundations.colors :as colors])) (defn context-container - [] + [theme] {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :border-radius 20 :align-items :center :align-self :flex-start diff --git a/src/status_im/common/confirmation_drawer/view.cljs b/src/status_im/common/confirmation_drawer/view.cljs index 658a7c4d7b..d615e9ae02 100644 --- a/src/status_im/common/confirmation_drawer/view.cljs +++ b/src/status_im/common/confirmation_drawer/view.cljs @@ -1,6 +1,7 @@ (ns status-im.common.confirmation-drawer.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.common.confirmation-drawer.style :as style] @@ -37,6 +38,7 @@ (let [{:keys [group-chat chat-id public-key color profile-picture name]} context id (or chat-id public-key) + theme (quo.theme/use-theme) [primary-name _] (when-not group-chat (rf/sub [:contacts/contact-two-names-by-identity id])) display-name (cond @@ -53,7 +55,7 @@ [quo/text {:weight :semi-bold :size :heading-2} title] - [rn/view {:style (style/context-container)} + [rn/view {:style (style/context-container theme)} [avatar group-chat color display-name photo-path] [quo/text {:weight :medium diff --git a/src/status_im/common/contact_list/view.cljs b/src/status_im/common/contact_list/view.cljs index 3c384b6476..24a65abec7 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 1e827f0d59..3e1b4ac8d8 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 @@ -133,8 +134,8 @@ {:style style/category-blur-container :blur-radius (if platform/android? 20 10) :blur-amount (if platform/ios? 20 10) - :blur-type (quo.theme/theme-value (if platform/ios? :light :xlight) :dark theme) - :overlay-color (quo.theme/theme-value colors/white-70-blur colors/neutral-95-opa-70-blur theme)} + :blur-type (if (= theme :light) (if platform/ios? :light :xlight) :dark) + :overlay-color (if (= theme :light) colors/white-70-blur colors/neutral-95-opa-70-blur)} [quo/showcase-nav {:state :scroll :active-id @active-category @@ -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 e069909f44..a601609aa9 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 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 71414577aa..723cad745b 100644 --- a/src/status_im/common/home/banner/view.cljs +++ b/src/status_im/common/home/banner/view.cljs @@ -32,15 +32,15 @@ (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 :blur-amount (if platform/ios? 20 10) - :blur-type (quo.theme/theme-value (if platform/ios? :light :xlight) :dark) + :blur-type (if (= theme :light) (if platform/ios? :light :xlight) :dark) :overlay-color (if open-sheet? - (colors/theme-colors colors/white colors/neutral-95-opa-70) - (quo.theme/theme-value nil colors/neutral-95-opa-70))} + (colors/theme-colors colors/white colors/neutral-95-opa-70 theme) + (if (= theme :light) nil colors/neutral-95-opa-70))} child]])) (defn- banner-card-hiding-layer @@ -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/mute_drawer/style.cljs b/src/status_im/common/mute_drawer/style.cljs index 565e46a877..80a28d5d66 100644 --- a/src/status_im/common/mute_drawer/style.cljs +++ b/src/status_im/common/mute_drawer/style.cljs @@ -3,7 +3,7 @@ [quo.foundations.colors :as colors])) (defn header-text - [] + [theme] {:margin-left 20 :margin-bottom 10 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) diff --git a/src/status_im/common/mute_drawer/view.cljs b/src/status_im/common/mute_drawer/view.cljs index 3f688750b9..a80d3ebcb9 100644 --- a/src/status_im/common/mute_drawer/view.cljs +++ b/src/status_im/common/mute_drawer/view.cljs @@ -1,6 +1,7 @@ (ns status-im.common.mute-drawer.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [status-im.common.mute-drawer.style :as style] [status-im.constants :as constants] @@ -23,79 +24,80 @@ (defn mute-drawer [{:keys [id accessibility-label muted? chat-type community?]}] - [rn/view {:accessibility-label accessibility-label} - [quo/text - {:weight :medium - :size :paragraph-2 - :style (style/header-text)} - (i18n/label - (if community? - :t/mute-community - (if (not-community-chat? chat-type) - :t/mute-chat-capitialized - :t/mute-channel)))] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-for-15-mins) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-for-15-mins-type}))}] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-for-1-hour) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-for-1-hour-type}))}] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-for-8-hours) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-for-8-hours-type}))}] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-for-1-week) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-for-1-week}))}] - [quo/menu-item - {:type :transparent - :title (i18n/label :t/mute-till-unmute) - :icon-bg-color :transparent - :container-padding-vertical 12 - :title-column-style {:margin-left 2} - :on-press (fn [] - (hide-sheet-and-dispatch - {:id id - :chat-type chat-type - :muted? muted? - :community? community? - :muted-type constants/mute-till-unmuted}))}]]) + (let [theme (quo.theme/use-theme)] + [rn/view {:accessibility-label accessibility-label} + [quo/text + {:weight :medium + :size :paragraph-2 + :style (style/header-text theme)} + (i18n/label + (if community? + :t/mute-community + (if (not-community-chat? chat-type) + :t/mute-chat-capitialized + :t/mute-channel)))] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-for-15-mins) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-for-15-mins-type}))}] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-for-1-hour) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-for-1-hour-type}))}] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-for-8-hours) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-for-8-hours-type}))}] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-for-1-week) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-for-1-week}))}] + [quo/menu-item + {:type :transparent + :title (i18n/label :t/mute-till-unmute) + :icon-bg-color :transparent + :container-padding-vertical 12 + :title-column-style {:margin-left 2} + :on-press (fn [] + (hide-sheet-and-dispatch + {:id id + :chat-type chat-type + :muted? muted? + :community? community? + :muted-type constants/mute-till-unmuted}))}]])) diff --git a/src/status_im/common/scan_qr_code/view.cljs b/src/status_im/common/scan_qr_code/view.cljs index 3af38d4ca8..0b45f31a9a 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/scroll_page/style.cljs b/src/status_im/common/scroll_page/style.cljs index a4763a872a..476e490b2b 100644 --- a/src/status_im/common/scroll_page/style.cljs +++ b/src/status_im/common/scroll_page/style.cljs @@ -13,7 +13,7 @@ :flex 1}) (defn blur-slider - [animation height] + [animation height theme] (reanimated/apply-animations-to-style {:transform [{:translateY animation}]} {:z-index 5 @@ -25,7 +25,8 @@ :background-color (if platform/ios? (colors/theme-colors colors/white-opa-70 - colors/neutral-95-opa-70) + colors/neutral-95-opa-70 + theme) :transparent)})) (defn sticky-header-title diff --git a/src/status_im/common/scroll_page/view.cljs b/src/status_im/common/scroll_page/view.cljs index 2a48b116fa..806c4fe690 100644 --- a/src/status_im/common/scroll_page/view.cljs +++ b/src/status_im/common/scroll_page/view.cljs @@ -2,6 +2,7 @@ (:require [oops.core :as oops] [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] @@ -27,7 +28,8 @@ (defn f-scroll-page-header [{:keys [scroll-height height page-nav-right-section-buttons sticky-header top-nav title-colum navigate-back? collapsed? page-nav-props overlay-shown?]}] - (let [input-range [0 10] + (let [theme (quo.theme/use-theme) + input-range [0 10] output-range [-208 -45] y (reanimated/use-shared-value scroll-height) translate-animation (reanimated/interpolate y @@ -49,7 +51,7 @@ {:blur-amount 20 :blur-type :transparent :overlay-color :transparent - :style (style/blur-slider translate-animation height)}] + :style (style/blur-slider translate-animation height theme)}] [rn/view {:style {:z-index 6 :position :absolute 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 21abc3fc89..316df7fec8 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 cef4210ab4..350a10458b 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/common/theme/core.cljs b/src/status_im/common/theme/core.cljs index ed415db4eb..64df9a5350 100644 --- a/src/status_im/common/theme/core.cljs +++ b/src/status_im/common/theme/core.cljs @@ -2,7 +2,6 @@ (:require [legacy.status-im.ui.components.colors :as legacy-colors] [oops.core :refer [oget]] - [quo.theme :as quo] [react-native.core :as rn] [react-native.platform :as platform] [utils.re-frame :as rf])) @@ -30,9 +29,8 @@ [] (= @device-theme "dark")) -(defn set-theme +(defn set-legacy-theme [value] - (quo/set-theme value) (reset! legacy-colors/theme (case value :dark legacy-colors/dark-theme legacy-colors/light-theme)) diff --git a/src/status_im/common/theme/events.cljs b/src/status_im/common/theme/events.cljs index 01d256ffff..40aa9ef3b3 100644 --- a/src/status_im/common/theme/events.cljs +++ b/src/status_im/common/theme/events.cljs @@ -7,3 +7,8 @@ :theme/init-theme (fn [] (theme/add-device-theme-change-listener))) + +(re-frame/reg-event-fx + :theme/switch + (fn [{db :db} [theme]] + {:db (assoc db :theme theme)})) diff --git a/src/status_im/common/toasts/events.cljs b/src/status_im/common/toasts/events.cljs index 7eb046b382..5daa25716e 100644 --- a/src/status_im/common/toasts/events.cljs +++ b/src/status_im/common/toasts/events.cljs @@ -19,7 +19,7 @@ (update :toasts dissoc :hide-toasts-timer-set))} (and (not update?) (= (count ordered) 1)) - (assoc :show-toasts (:view-id db)) + (assoc :show-toasts [(:view-id db) (:theme db)]) (not (:id opts)) (update-in [:db :toasts :next-toast-number] inc)))) @@ -30,7 +30,7 @@ (when (get-in db [:toasts :hide-toasts-timer-set]) {:db (update db :toasts dissoc :hide-toasts-timer-set) :hide-toasts nil - :reload-status-nav-color-fx (:view-id db)})) + :reload-status-nav-color-fx [(:view-id db) (:theme db)]})) (rf/defn close {:events [:toasts/close]} diff --git a/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/style.cljs b/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/style.cljs index 508a381c0d..2e54042418 100644 --- a/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/style.cljs +++ b/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/style.cljs @@ -4,9 +4,9 @@ [react-native.platform :as platform])) (defn context-container - [] + [theme] {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :border-radius 20 :align-items :center :align-self :flex-start @@ -25,9 +25,9 @@ :margin-bottom (when platform/ios? (max (:bottom insets) 20))}) (defn nickname-description - [] + [theme] {:margin-left 4 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) (def nickname-description-container {:flex-direction :row diff --git a/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/view.cljs b/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/view.cljs index d5082cf4e0..239b12e268 100644 --- a/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/view.cljs +++ b/src/status_im/contexts/chat/contacts/drawers/nickname_drawer/view.cljs @@ -3,6 +3,7 @@ [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -29,6 +30,7 @@ (let [{:keys [primary-name nickname public-key]} contact entered-nickname (reagent/atom (or nickname "")) photo-path (rf/sub [:chats/photo-path public-key]) + theme (quo.theme/use-theme) insets (safe-area/get-insets)] (fn [{:keys [title description accessibility-label close-button-text]}] @@ -38,7 +40,7 @@ [quo/text {:weight :semi-bold :size :heading-2} title] - [rn/view {:style (style/context-container)} + [rn/view {:style (style/context-container theme)} [quo/context-tag {:type :default :blur? false @@ -60,11 +62,11 @@ {:style style/nickname-description-container} [quo/icon :i/info {:size 16 - :color (colors/theme-colors colors/black colors/white)}] + :color (colors/theme-colors colors/black colors/white theme)}] [quo/text {:weight :regular :size :paragraph-2 - :style (style/nickname-description)} + :style (style/nickname-description theme)} description]] [rn/view {:style style/buttons-container} [quo/button diff --git a/src/status_im/contexts/chat/group_create/view.cljs b/src/status_im/contexts/chat/group_create/view.cljs index 0d05c1ee4d..427c7fe088 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/group_details/style.cljs b/src/status_im/contexts/chat/group_details/style.cljs index 3e19784a40..d288993b00 100644 --- a/src/status_im/contexts/chat/group_details/style.cljs +++ b/src/status_im/contexts/chat/group_details/style.cljs @@ -8,22 +8,22 @@ :padding-horizontal 20}) (defn action-container - [color] - {:background-color (colors/theme-alpha color 0.1 0.1) + [color theme] + {:background-color (colors/theme-alpha color 0.1 0.1 theme) :flex 0.29 :border-radius 16 :padding 12}) (defn count-container - [] + [theme] {:width 16 :height 16 :border-radius 6 - :background-color (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5)}) + :background-color (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)}) (defn close-icon - [] - {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + [theme] + {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :margin-left 20 :width 32 :height 32 @@ -33,11 +33,11 @@ :margin-bottom 24}) (defn bottom-container - [bottom] + [bottom theme] {:padding-horizontal 20 :padding-vertical 12 :margin-bottom bottom - :background-color (colors/theme-colors colors/white colors/neutral-95-opa-70) + :background-color (colors/theme-colors colors/white colors/neutral-95-opa-70 theme) :flex-direction :row}) (def floating-shell-button diff --git a/src/status_im/contexts/chat/group_details/view.cljs b/src/status_im/contexts/chat/group_details/view.cljs index caaa5aaafe..6839bd5953 100644 --- a/src/status_im/contexts/chat/group_details/view.cljs +++ b/src/status_im/contexts/chat/group_details/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -46,13 +47,14 @@ deselected-members (rf/sub [:group-chat/deselected-members]) chat-id (rf/sub [:get-screen-params :group-details]) {:keys [admins] :as group} (rf/sub [:chats/chat-by-id chat-id]) + theme (quo.theme/use-theme) admin? (get admins (rf/sub [:multiaccount/public-key]))] [rn/view {:flex 1 :margin-top 20} [rn/touchable-opacity {:on-press #(rf/dispatch [:navigate-back]) :accessibility-label :close-manage-members - :style (style/close-icon)} - [quo/icon :i/close {:color (colors/theme-colors colors/neutral-100 colors/white)}]] + :style (style/close-icon theme)} + [quo/icon :i/close {:color (colors/theme-colors colors/neutral-100 colors/white theme)}]] [quo/text {:size :heading-1 :weight :semi-bold @@ -67,7 +69,7 @@ :content-container-style {:padding-bottom 20} :render-data {:group group} :render-fn add-member-contact-item-render}] - [rn/view {:style (style/bottom-container 30)} + [rn/view {:style (style/bottom-container 30 theme)} [quo/button {:container-style {:flex 1} :type :primary diff --git a/src/status_im/contexts/chat/home/add_new_contact/style.cljs b/src/status_im/contexts/chat/home/add_new_contact/style.cljs index a868cb928a..f9fa3c2769 100644 --- a/src/status_im/contexts/chat/home/add_new_contact/style.cljs +++ b/src/status_im/contexts/chat/home/add_new_contact/style.cljs @@ -2,9 +2,9 @@ (:require [quo.foundations.colors :as colors])) (defn container-outer - [] + [theme] {:flex 1 - :background-color (colors/theme-colors colors/white colors/neutral-95) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme) :justify-content :space-between :align-items :center :margin-top 2 @@ -16,11 +16,11 @@ :margin-top 8}}) (defn text-description - [] + [theme] {:size :paragraph-2 :weight :medium :style {:margin-bottom 6 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}) + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}) (def icon-invalid {:size 16 @@ -47,7 +47,7 @@ :align-self :stretch}) (defn found-user-container - [] + [theme] {:flex-direction :row :align-items :center :padding-top 8 @@ -56,31 +56,36 @@ :padding-bottom 8 :color (colors/theme-colors colors/black - colors/white) + colors/white + theme) :background-color (colors/theme-colors colors/white - colors/neutral-95) + colors/neutral-95 + theme) :border-width 1 :border-radius 12 :border-color (colors/theme-colors colors/neutral-20 - colors/neutral-80)}) + colors/neutral-80 + theme)}) (def found-user-text {:margin-left 8 :flex-direction :column}) (defn found-user-display-name - [] + [theme] {:color (colors/theme-colors colors/black - colors/white)}) + colors/white + theme)}) (defn found-user-key - [] + [theme] {:color (colors/theme-colors colors/neutral-50 - colors/neutral-40)}) + colors/neutral-40 + theme)}) (def button-view-profile {:margin-top 24 diff --git a/src/status_im/contexts/chat/home/add_new_contact/views.cljs b/src/status_im/contexts/chat/home/add_new_contact/views.cljs index 4be041fcfa..c687e9776c 100644 --- a/src/status_im/contexts/chat/home/add_new_contact/views.cljs +++ b/src/status_im/contexts/chat/home/add_new_contact/views.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.chat.home.add-new-contact.views (:require [clojure.string :as string] [quo.core :as quo] + [quo.theme] [react-native.clipboard :as clipboard] [react-native.core :as rn] [status-im.common.floating-button-page.view :as floating-button-page] @@ -13,12 +14,13 @@ (defn found-contact [public-key] (let [{:keys [primary-name compressed-key]} (rf/sub [:contacts/contact-by-identity public-key]) - photo-path (rf/sub [:chats/photo-path public-key])] + photo-path (rf/sub [:chats/photo-path public-key]) + theme (quo.theme/use-theme)] (when primary-name [rn/view style/found-user - [quo/text (style/text-description) + [quo/text (style/text-description theme) (i18n/label :t/user-found)] - [rn/view (style/found-user-container) + [rn/view (style/found-user-container theme) [quo/user-avatar {:full-name primary-name :profile-picture photo-path @@ -28,12 +30,12 @@ [quo/text {:weight :semi-bold :size :paragraph-1 - :style (style/found-user-display-name)} + :style (style/found-user-display-name theme)} primary-name] [quo/text {:weight :regular :size :paragraph-2 - :style (style/found-user-key)} + :style (style/found-user-key theme)} (address/get-shortened-compressed-key compressed-key)]]]]))) (defn- search-input @@ -111,7 +113,8 @@ (defn new-contact [] (let [{:keys [public-key ens state msg]} (rf/sub [:contacts/new-identity]) - customization-color (rf/sub [:profile/customization-color])] + customization-color (rf/sub [:profile/customization-color]) + theme (quo.theme/use-theme)] [floating-button-page/view {:header-container-style {:margin-top 8} :header [quo/page-nav @@ -139,7 +142,7 @@ :description :text :description-text (i18n/label :t/find-your-friends) :container-style {:padding-vertical 8}}] - [rn/view {:style (style/container-outer)} + [rn/view {:style (style/container-outer theme)} [search-input] (case state :invalid [invalid-text msg] diff --git a/src/status_im/contexts/chat/home/chat_list_item/style.cljs b/src/status_im/contexts/chat/home/chat_list_item/style.cljs index 2a4189b8f6..8a58589e48 100644 --- a/src/status_im/contexts/chat/home/chat_list_item/style.cljs +++ b/src/status_im/contexts/chat/home/chat_list_item/style.cljs @@ -29,8 +29,8 @@ ;; TODO: duplicate of `quo.components.common.unread-grey-dot.style` ;; Replace it when this component is defined as part of `quo.components` (defn grey-dot - [] + [theme] {:width 8 :height 8 :border-radius 4 - :background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)}) + :background-color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)}) diff --git a/src/status_im/contexts/chat/home/chat_list_item/view.cljs b/src/status_im/contexts/chat/home/chat_list_item/view.cljs index c69079db2d..9c8c65dc15 100644 --- a/src/status_im/contexts/chat/home/chat_list_item/view.cljs +++ b/src/status_im/contexts/chat/home/chat_list_item/view.cljs @@ -3,6 +3,7 @@ [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [status-im.common.home.actions.view :as actions] [status-im.constants :as constants] @@ -148,7 +149,8 @@ (defn last-message-preview "Render the preview of a last message to a maximum of max-subheader-length characters" [group-chat {:keys [deleted? outgoing from deleted-for-me?] :as message}] - (let [[primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from]) + (let [theme (quo.theme/use-theme) + [primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from]) preview-text (if deleted-for-me? (i18n/label :t/you-deleted-a-message) (if deleted? @@ -161,7 +163,8 @@ [quo/text {:size :paragraph-2 :style {:color (colors/theme-colors colors/neutral-50 - colors/neutral-40) + colors/neutral-40 + theme) :flex 1} :number-of-lines 1 :ellipsize-mode :tail @@ -195,6 +198,7 @@ (defn notification [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}] (let [customization-color (rf/sub [:profile/customization-color]) + theme (quo.theme/use-theme) unread-messages? (pos? unviewed-messages-count) unread-mentions? (pos? unviewed-mentions-count)] (cond @@ -214,7 +218,7 @@ (and group-chat unread-messages?) [notification-layout [rn/view - {:style (style/grey-dot) + {:style (style/grey-dot theme) :accessibility-label :unviewed-messages-public}]] unread-messages? 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 a8dad53a1f..ae9a94425c 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 28202773b2..8de42fbb39 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 5dedf968b8..d9903aef40 100644 --- a/src/status_im/contexts/chat/home/view.cljs +++ b/src/status_im/contexts/chat/home/view.cljs @@ -128,7 +128,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/edit/view.cljs b/src/status_im/contexts/chat/messenger/composer/edit/view.cljs index 0b33024b3b..5daba1c0bf 100644 --- a/src/status_im/contexts/chat/messenger/composer/edit/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/edit/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [status-im.contexts.chat.messenger.composer.constants :as constants] @@ -12,27 +13,28 @@ (defn edit-message [{:keys [text-value input-ref]}] - [rn/view - {:style style/container - :accessibility-label :edit-message} - [rn/view {:style style/content-container} - [quo/icon - :i/connector-dotted - {:size 16 - :color (colors/theme-colors colors/neutral-40 colors/neutral-60) - :container-style style/icon-container}] - [rn/view {:style style/text-container} - [quo/text - {:weight :medium - :size :paragraph-2} - (i18n/label :t/editing-message)]]] - [quo/button - {:size 24 - :icon-only? true - :accessibility-label :edit-cancel-button - :on-press #(utils/cancel-edit-message text-value input-ref) - :type :outline} - :i/close]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style style/container + :accessibility-label :edit-message} + [rn/view {:style style/content-container} + [quo/icon + :i/connector-dotted + {:size 16 + :color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme) + :container-style style/icon-container}] + [rn/view {:style style/text-container} + [quo/text + {:weight :medium + :size :paragraph-2} + (i18n/label :t/editing-message)]]] + [quo/button + {:size 24 + :icon-only? true + :accessibility-label :edit-cancel-button + :on-press #(utils/cancel-edit-message text-value input-ref) + :type :outline} + :i/close]])) (defn- f-view [props] diff --git a/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs b/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs index 65c8f5b484..c500eccb75 100644 --- a/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs @@ -19,9 +19,9 @@ :right 0})) (defn top-gradient - [opacity z-index showing-extra-space?] - {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-95-opa-0) - (colors/theme-colors colors/white colors/neutral-95)] + [opacity z-index showing-extra-space? theme] + {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-95-opa-0 theme) + (colors/theme-colors colors/white colors/neutral-95 theme)] :start {:x 0 :y 1} :end {:x 0 :y 0} :style (top-gradient-style opacity z-index showing-extra-space?)}) @@ -34,9 +34,9 @@ :right 0}) (defn bottom-gradient - [] - {:colors [(colors/theme-colors colors/white colors/neutral-95) - (colors/theme-colors colors/white-opa-0 colors/neutral-95-opa-0)] + [theme] + {:colors [(colors/theme-colors colors/white colors/neutral-95 theme) + (colors/theme-colors colors/white-opa-0 colors/neutral-95-opa-0 theme)] :start {:x 0 :y 1} :end {:x 0 :y 0} :style bottom-gradient-style}) diff --git a/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs b/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs index f4417412c9..998954e01c 100644 --- a/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs @@ -1,5 +1,6 @@ (ns status-im.contexts.chat.messenger.composer.gradients.view (:require + [quo.theme] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient] [react-native.reanimated :as reanimated] @@ -11,17 +12,18 @@ {:keys [gradient-z-index]} {:keys [gradient-opacity]} show-bottom-gradient?] - (let [showing-extra-space? (boolean (or (rf/sub [:chats/edit-message]) + (let [theme (quo.theme/use-theme) + showing-extra-space? (boolean (or (rf/sub [:chats/edit-message]) (rf/sub [:chats/reply-message])))] [:<> [reanimated/linear-gradient - (style/top-gradient gradient-opacity @gradient-z-index showing-extra-space?)] + (style/top-gradient gradient-opacity @gradient-z-index showing-extra-space? theme)] (when show-bottom-gradient? [rn/pressable {:on-press #(when @input-ref (.focus ^js @input-ref)) :style {:z-index 1} :accessibility-label :bottom-gradient} - [linear-gradient/linear-gradient (style/bottom-gradient)]])])) + [linear-gradient/linear-gradient (style/bottom-gradient theme)]])])) (defn view [props state animations show-bottom-gradient?] 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 dc2c1e16e9..201a8dcfc3 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/mentions/style.cljs b/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs index fd5c1e57f9..65cc12ff27 100644 --- a/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/mentions/style.cljs @@ -7,16 +7,16 @@ (defn shadow - [] + [theme] (if platform/ios? - {:shadow-radius (colors/theme-colors 30 50) - :shadow-opacity (colors/theme-colors 0.1 0.7) + {:shadow-radius (colors/theme-colors 30 50 theme) + :shadow-opacity (colors/theme-colors 0.1 0.7 theme) :shadow-color colors/neutral-100 - :shadow-offset {:width 0 :height (colors/theme-colors 8 12)}} + :shadow-offset {:width 0 :height (colors/theme-colors 8 12 theme)}} {:elevation 10})) (defn container - [opacity bottom] + [opacity bottom theme] (reanimated/apply-animations-to-style {:opacity opacity} (merge @@ -27,5 +27,5 @@ :border-radius 16 :z-index 4 :max-height constants/mentions-max-height - :background-color (colors/theme-colors colors/white colors/neutral-95)} - (shadow)))) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)} + (shadow theme)))) diff --git a/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs b/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs index 4f96cb1732..4e12d88be1 100644 --- a/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/mentions/view.cljs @@ -1,5 +1,6 @@ (ns status-im.contexts.chat.messenger.composer.mentions.view (:require + [quo.theme] [react-native.core :as rn] [react-native.platform :as platform] [react-native.reanimated :as reanimated] @@ -32,6 +33,7 @@ (defn- f-view [suggestions-atom props state animations max-height cursor-pos images link-previews? reply edit] (let [suggestions (rf/sub [:chat/mention-suggestions]) + theme (quo.theme/use-theme) opacity (reanimated/use-shared-value (if (seq suggestions) 1 0)) size (count suggestions) data {:keyboard-height @(:kb-height state) @@ -52,7 +54,7 @@ (reanimated/animate opacity (if (seq suggestions) 1 0))) [(seq suggestions)]) [reanimated/view - {:style (style/container opacity mentions-pos)} + {:style (style/container opacity mentions-pos theme)} [rn/flat-list {:keyboard-should-persist-taps :always :data (vals @suggestions-atom) diff --git a/src/status_im/contexts/chat/messenger/composer/reply/view.cljs b/src/status_im/contexts/chat/messenger/composer/reply/view.cljs index 68272c6e37..14eaa92d61 100644 --- a/src/status_im/contexts/chat/messenger/composer/reply/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/reply/view.cljs @@ -3,6 +3,7 @@ [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient] [react-native.reanimated :as reanimated] @@ -89,6 +90,7 @@ in-chat-input? pin? recording-audio? input-ref] (let [[primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from]) current-public-key (rf/sub [:multiaccount/public-key]) + theme (quo.theme/use-theme) content-type (or content-type contentType) text (get-quoted-text-with-mentions (or parsed-text (:parsed-text content)))] [rn/view @@ -98,7 +100,7 @@ (when-not pin? [quo/icon :i/connector {:size 16 - :color (colors/theme-colors colors/neutral-40 colors/neutral-60) + :color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme) :container-style {:position :absolute :left 0 :bottom -4 :width 16 :height 16}}]) (if (or deleted? deleted-for-me?) [rn/view {:style (style/quoted-message pin?)} @@ -121,7 +123,7 @@ [quo/text {:size :label :weight :regular - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40) + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) :margin-top 2}} (str " " (condp = (or content-type contentType) @@ -142,8 +144,8 @@ :i/close]) (when (and in-chat-input? recording-audio?) [linear-gradient/linear-gradient - {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-90-opa-0) - (colors/theme-colors colors/white colors/neutral-90)] + {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-90-opa-0 theme) + (colors/theme-colors colors/white colors/neutral-90 theme)] :start {:x 0 :y 0} :end {:x 0.7 :y 0} :style style/gradient}])])) diff --git a/src/status_im/contexts/chat/messenger/composer/style.cljs b/src/status_im/contexts/chat/messenger/composer/style.cljs index c52fbee521..3e3c985052 100644 --- a/src/status_im/contexts/chat/messenger/composer/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/style.cljs @@ -2,7 +2,6 @@ (:require [quo.foundations.colors :as colors] [quo.foundations.typography :as typography] - [quo.theme :as quo.theme] [react-native.platform :as platform] [react-native.reanimated :as reanimated] [status-im.contexts.chat.messenger.composer.constants :as constants])) @@ -110,7 +109,7 @@ [theme] {:style {:flex 1} :blur-radius (if platform/ios? 20 10) - :blur-type (quo.theme/theme-value :light :dark theme) + :blur-type theme :blur-amount 20}) (defn shell-button diff --git a/src/status_im/contexts/chat/messenger/composer/view.cljs b/src/status_im/contexts/chat/messenger/composer/view.cljs index 32e21e9b0f..d11a73c93b 100644 --- a/src/status_im/contexts/chat/messenger/composer/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/view.cljs @@ -127,11 +127,11 @@ :on-change-text #(handler/change-text % props state) :on-selection-change #(handler/selection-change % props state) :on-selection #(selection/on-selection % props state) - :keyboard-appearance (quo.theme/theme-value :light :dark) + :keyboard-appearance theme :max-font-size-multiplier 1 :multiline true :placeholder (i18n/label :t/type-something) - :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50) + :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) :style (style/input-text props state {:max-height max-height @@ -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 d963b7a828..c2f53bba9c 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 31f772b5ab..4abf63943d 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,10 +1,10 @@ (ns status-im.contexts.chat.messenger.messages.content.audio.style (:require [quo.foundations.colors :as colors] - [quo.theme :as theme])) + [quo.theme])) (defn container - [] + [theme] {:width 295 :height 56 :border-radius 12 @@ -13,8 +13,8 @@ :flex-direction :row :align-items :center :justify-content :space-between - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) - :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)}) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) + :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40 theme)}) (def play-pause-slider-container {:flex-direction :row @@ -27,8 +27,8 @@ :bottom nil}) (defn play-pause-container - [] - {:background-color (get-in colors/customization [:blue (if (theme/dark?) 60 50)]) + [theme] + {:background-color (get-in colors/customization [:blue (if (= :dark theme) 60 50)]) :width 32 :height 32 :border-radius 16 diff --git a/src/status_im/contexts/chat/messenger/messages/content/audio/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/audio/view.cljs index 58ad55061d..313e500e76 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/audio/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/audio/view.cljs @@ -4,6 +4,7 @@ [goog.string :as gstring] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.audio-toolkit :as audio] [react-native.core :as rn] [react-native.platform :as platform] @@ -148,7 +149,8 @@ (defn f-audio-message [player-state progress seeking-audio? {:keys [audio-duration-ms message-id]} {:keys [in-pinned-view?]}] - (let [player-key (get-player-key message-id in-pinned-view?) + (let [theme (quo.theme/use-theme) + player-key (get-player-key message-id in-pinned-view?) player (@active-players player-key) duration (min constants/audio-max-duration-ms audio-duration-ms) time-secs (quot @@ -188,7 +190,7 @@ (i18n/label :t/error-loading-audio)] [rn/view {:accessibility-label :audio-message-container - :style (style/container)} + :style (style/container theme)} [rn/touchable-opacity {:accessibility-label :play-pause-audio-message-button :allow-multiple-presses? true @@ -200,7 +202,7 @@ :seeking-audio? seeking-audio? :user-interaction? true :mediaserver-port mediaserver-port}) - :style (style/play-pause-container)} + :style (style/play-pause-container theme)} [quo/icon (cond (= @player-state :preparing) diff --git a/src/status_im/contexts/chat/messenger/messages/content/pin/style.cljs b/src/status_im/contexts/chat/messenger/messages/content/pin/style.cljs index e7159c0f2a..f1c52b2ea6 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/pin/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/pin/style.cljs @@ -16,8 +16,8 @@ :margin-left 2}) (defn pinned-message-text - [] - {:color (colors/theme-colors colors/neutral-100 colors/white) + [theme] + {:color (colors/theme-colors colors/neutral-100 colors/white theme) :margin-left 4}) (def system-message-container 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 72d9d6023e..22651437f3 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/status/style.cljs b/src/status_im/contexts/chat/messenger/messages/content/status/style.cljs index 15a829b7e8..c83ed4d6ac 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/status/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/status/style.cljs @@ -7,6 +7,6 @@ :align-items :center}) (defn message-status-text - [] + [theme] {:margin-left 4 - :color (colors/theme-colors colors/neutral-40 colors/neutral-50)}) + :color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}) diff --git a/src/status_im/contexts/chat/messenger/messages/content/status/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/status/view.cljs index 4f2d4389b4..7780041d70 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/status/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/status/view.cljs @@ -2,24 +2,26 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [status-im.contexts.chat.messenger.messages.content.status.style :as style] [utils.i18n :as i18n])) (defn status [outgoing-status] - [rn/view - {:accessibility-label :message-status - :style style/status-container} - [quo/icon - (if (= outgoing-status :delivered) - :i/delivered - :i/sent) - {:size 12 - :color (colors/theme-colors colors/neutral-40 colors/neutral-50)}] - [quo/text - {:size :label - :style (style/message-status-text)} - (if (= outgoing-status :delivered) - (i18n/label :t/delivered) - (i18n/label :t/sent))]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:accessibility-label :message-status + :style style/status-container} + [quo/icon + (if (= outgoing-status :delivered) + :i/delivered + :i/sent) + {:size 12 + :color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}] + [quo/text + {:size :label + :style (style/message-status-text theme)} + (if (= outgoing-status :delivered) + (i18n/label :t/delivered) + (i18n/label :t/sent))]])) diff --git a/src/status_im/contexts/chat/messenger/messages/content/text/style.cljs b/src/status_im/contexts/chat/messenger/messages/content/text/style.cljs index c5afbe9c2c..209c9aa28a 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/text/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/text/style.cljs @@ -22,23 +22,16 @@ :border-radius 6 :transform [{:translateY (if platform/ios? (if first-child-mention 4.5 3) 4.5)}]}) -(def mention-tag-text +(defn mention-tag-text + [theme] {:color (colors/theme-colors colors/primary-50 - colors/primary-60) + colors/primary-60 + theme) :selection-color :transparent :suppress-highlighting true}) (defn code - [] - {:background-color (colors/theme-colors colors/neutral-5 colors/white-opa-5) + [theme] + {:background-color (colors/theme-colors colors/neutral-5 colors/white-opa-5 theme) :border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/white-opa-20)}) - -(def edited-block - {:margin-top 4}) - -(defn edited-tag - [] - {:font-size 11 - :margin-top 4 - :color (colors/theme-colors colors/neutral-40 colors/neutral-50)}) + :border-color (colors/theme-colors colors/neutral-20 colors/white-opa-20 theme)}) diff --git a/src/status_im/contexts/chat/messenger/messages/content/text/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/text/view.cljs index a544a35149..70ea0779c7 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/text/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/text/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.platform :as platform] [status-im.contexts.chat.messenger.messages.content.link-preview.view :as link-preview] @@ -11,7 +12,7 @@ [utils.re-frame :as rf])) (defn render-inline - [units {:keys [type literal destination]} chat-id style-override first-child-mention] + [units {:keys [type literal destination]} chat-id style-override first-child-mention theme] (let [show-as-plain-text? (seq style-override)] (case (keyword type) :code @@ -19,7 +20,7 @@ [quo/text {:style (if show-as-plain-text? {:color colors/white} - (merge style/block (style/code))) + (merge style/block (style/code theme))) :weight :code} literal]) :emph @@ -50,7 +51,7 @@ :link (conj units [quo/text - {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60)} + {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme)} :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])} destination]) @@ -62,7 +63,7 @@ :style (style/mention-tag-wrapper first-child-mention)} [quo/text {:weight :medium - :style style/mention-tag-text + :style (style/mention-tag-text theme) :size :paragraph-1} (rf/sub [:messages/resolve-mention literal])]]) @@ -73,7 +74,8 @@ :style {:font-size 11 ; Font-size must be used instead of props or the ; styles will clash with original message text :color (colors/theme-colors colors/neutral-40 - colors/neutral-50)}} + colors/neutral-50 + theme)}} literal]) :status-tag (let [community-id (rf/sub [:community-id-by-chat-id chat-id])] @@ -95,7 +97,7 @@ (empty? (get-in children [0 :literal])))) (defn render-block - [blocks {:keys [type literal children]} chat-id style-override] + [blocks {:keys [type literal children]} chat-id style-override theme] (let [mention-first (first-child-mention children)] (case (keyword type) :paragraph @@ -103,7 +105,7 @@ [rn/view (reduce (fn [acc e] - (render-inline acc e chat-id style-override mention-first)) + (render-inline acc e chat-id style-override mention-first theme)) [quo/text {:size :paragraph-1 :key (rand-int 1000000) ;; https://github.com/status-im/status-mobile/pull/19203 @@ -117,7 +119,7 @@ (conj blocks (reduce (fn [acc e] - (render-inline acc e chat-id style-override first-child-mention)) + (render-inline acc e chat-id style-override first-child-mention theme)) [quo/text {:size :paragraph-1}] children)) @@ -128,7 +130,7 @@ :codeblock (conj blocks - [rn/view {:style (merge style/block (style/code))} + [rn/view {:style (merge style/block (style/code theme))} [quo/text (subs literal 0 (dec (count literal)))]]) blocks))) @@ -150,16 +152,17 @@ (defn render-parsed-text [{:keys [content chat-id edited-at style-override on-layout]}] ^{:key (:parsed-text content)} - [rn/view - {:style style-override - :on-layout on-layout - :accessibility-label :message-text-content} - (reduce (fn [acc e] - (render-block acc e chat-id style-override)) - [:<>] - (cond-> (:parsed-text content) - edited-at - add-edited-tag))]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style style-override + :on-layout on-layout + :accessibility-label :message-text-content} + (reduce (fn [acc e] + (render-block acc e chat-id style-override theme)) + [:<>] + (cond-> (:parsed-text content) + edited-at + add-edited-tag))])) (defn text-content [message-data] 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 4b3cdcde46..d937dbecb3 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/link_preview/style.cljs b/src/status_im/contexts/chat/messenger/messages/link_preview/style.cljs deleted file mode 100644 index 614058777f..0000000000 --- a/src/status_im/contexts/chat/messenger/messages/link_preview/style.cljs +++ /dev/null @@ -1,81 +0,0 @@ -(ns status-im.contexts.chat.messenger.messages.link-preview.style - (:require - [quo.foundations.colors :as colors] - [quo.foundations.typography :as typography] - [react-native.core :as rn])) - -(def screen-width (:width (rn/get-window))) - -(defn scale-dimensions - "Scale a given height and width to be maximum percentage allowed of the screen width" - [{:keys [height width] :as dimensions}] - (let [max-cover 0.5 - aspect-ratio (/ height width) - max-width (* max-cover screen-width)] - (if (< width max-width) - dimensions - {:width max-width - :height (* aspect-ratio max-width)}))) - -(defn link-preview-enable-request-wrapper - [] - {:border-left-width 2 - :border-left-color (colors/theme-colors colors/neutral-10 colors/neutral-80) - :padding-horizontal 16 - :margin-top 8}) - -(defn wrapper - [] - {:overflow :hidden - :border-left-width 2 - :border-left-color (colors/theme-colors colors/neutral-10 colors/neutral-60) - :padding-horizontal 16 - :margin-top 8}) - -(defn separator - [] - {:height 4}) - -(defn title-wrapper - [] - {:flex-direction :row - :align-items :center}) - -(defn title-site-image - [] - {:width 16 - :height 16 - :background-color (colors/theme-colors colors/neutral-20 colors/neutral-60) - :border-radius 8 - :margin-right 6}) - -(defn title-text - [] - (merge - {:color (colors/theme-colors colors/black colors/white)} - typography/font-semi-bold - typography/paragraph-1)) - -(defn main-text - [] - (merge - {:color (colors/theme-colors colors/black colors/white) - :margin-top 4 - :margin-bottom 8} - typography/paragraph-2)) - -(defn extra-text - [] - (merge - {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)} - typography/font-medium - typography/paragraph-2)) - -(defn image - [{:keys [height width] :as dimensions}] - (merge (if (and (pos? height) - (pos? width)) - (scale-dimensions dimensions) - {:height 170}) - {:overflow :hidden - :border-radius 12})) diff --git a/src/status_im/contexts/chat/messenger/messages/link_preview/view.cljs b/src/status_im/contexts/chat/messenger/messages/link_preview/view.cljs deleted file mode 100644 index 8bf0b081d1..0000000000 --- a/src/status_im/contexts/chat/messenger/messages/link_preview/view.cljs +++ /dev/null @@ -1,177 +0,0 @@ -(ns status-im.contexts.chat.messenger.messages.link-preview.view - (:require - [clojure.string :as string] - [quo.core :as quo] - [react-native.core :as rn] - [react-native.fast-image :as fast-image] - [reagent.core :as reagent] - [status-im.constants :as constants] - [status-im.contexts.chat.messenger.messages.link-preview.events] - [status-im.contexts.chat.messenger.messages.link-preview.style :as style] - [utils.i18n :as i18n] - [utils.re-frame :as rf] - [utils.security.core :as security])) - -(defn link-belongs-to-domain - [link domain] - (string/starts-with? link (str "https://" domain))) - -(defn community-id-from-link - [link] - (nth (re-find constants/regx-community-universal-link link) 4)) - -(defn domain-info-if-whitelisted - [link whitelist] - (->> whitelist - (filter #(link-belongs-to-domain link (:address %))) - first)) - -(defn link-extended-info - [link whitelist enabled-list] - (if-not (community-id-from-link link) - (let [domain-info (domain-info-if-whitelisted link whitelist)] - {:whitelisted? (boolean domain-info) - :enabled? (contains? enabled-list (:title domain-info)) - :link link}) - {:whitelisted? true - :enabled? true - :link link - :community? true})) - -(defn previewable-link - [links whitelist enabled-list] - (->> links - (map #(link-extended-info % whitelist enabled-list)) - (filter #(:whitelisted? %)) - (first))) - -(defn is-gif? - [url] - (and url (string/ends-with? url ".gif"))) - -(defn community-preview - [{:keys [name members description verified] :as community}] - (let [members-count (count members)] - [rn/view (style/wrapper) - [rn/view (style/title-wrapper) - [rn/image {:style (style/title-site-image)}] - [rn/text {:style (style/title-text)} - name]] - [rn/text {:style (style/extra-text)} - (if verified - (i18n/label :t/verified-community) - (i18n/label :t/community))] - [rn/text {:style (style/main-text)} - description] - [rn/text {:style (style/extra-text)} - (i18n/label-pluralize members-count :t/community-members {:count members-count})] - [rn/view (style/separator)] - [quo/button - {:type :grey - :on-press #(rf/dispatch [:navigate-to :community - {:from-chat true - :community-id (:id community)}])} - (i18n/label :t/view)]])) - -(defn community-preview-loader - [community-link] - (let [cached-preview-data (rf/sub [:link-preview/cache community-link])] - (reagent/create-class - {:component-did-mount - (fn [] - (when-not cached-preview-data - (let [community-id (community-id-from-link community-link)] - (rf/dispatch [:communities/fetch-community - {:community-id community-id - :update-last-opened-at? false}])))) - :reagent-render - (fn [] - (when cached-preview-data - [community-preview cached-preview-data]))}))) - -(defn link-preview-loader - [link _] - (let [measured-width (reagent/atom 0) - measured-height (reagent/atom 0)] - (reagent/create-class - {:component-did-mount - (fn [] - (rf/dispatch [:chat.ui/load-link-preview-data link])) - :component-did-update - (fn [this [_ previous-props]] - (let [[_ props] (.-argv (.-props ^js this)) - refresh-photo? (not= previous-props props)] - (when refresh-photo? - (rf/dispatch [:chat.ui/load-link-preview-data props])))) - :reagent-render - (fn [link {:keys [on-long-press]}] - (let [cached-preview-data (rf/sub [:link-preview/cache link])] - (when-let [{:keys [site title thumbnail-url error]} cached-preview-data] - (when (and (not error) site title) - [rn/touchable-opacity - {:style (when-not (is-gif? thumbnail-url) - {:align-self :stretch}) - :on-press #(when (security/safe-link? link) - (rf/dispatch [:browser.ui/message-link-pressed link])) - :on-long-press on-long-press} - [rn/view (style/wrapper) - (when-not (is-gif? thumbnail-url) - [:<> - [rn/view (style/title-wrapper) - [rn/image {:style (style/title-site-image)}] - [rn/text {:style (style/title-text)} - site]] - [rn/text {:style (style/main-text)} - title] - [rn/text {:style (style/extra-text)} - link]]) - (when-not (string/blank? thumbnail-url) - [:<> - [rn/view (style/separator)] - [fast-image/fast-image - {:source {:uri thumbnail-url} - :on-load (fn [e] - (let [{:keys [width height]} (js->clj (.-nativeEvent e) - :keywordize-keys - true)] - (reset! measured-width width) - (reset! measured-height height))) - :style (style/image {:width @measured-width - :height @measured-height}) - :accessibility-label :member-photo}]])]]))))}))) - -(defn link-preview-enable-request - [] - [rn/view (style/link-preview-enable-request-wrapper) - [rn/text {:style (style/title-text)} - (i18n/label :t/enable-link-previews)] - [rn/text {:style (style/main-text)} - (i18n/label :t/once-enabled-share-metadata)] - [rn/view (style/separator)] - [quo/button - {:type :grey - :on-press #(rf/dispatch [:open-modal :link-preview-settings])} - (i18n/label :t/enable)] - [rn/view (style/separator)] - [quo/button - {:type :grey - :on-press #(rf/dispatch [:chat.ui/should-suggest-link-preview false])} - (i18n/label :t/dont-ask)]]) - -(defn link-preview - [{:keys [message-id chat-id]} context] - (let [links (get-in (rf/sub [:chats/chat-messages chat-id]) [message-id :content :links]) - ask-user? (rf/sub [:link-preview/link-preview-request-enabled]) - enabled-sites (rf/sub [:link-preview/enabled-sites]) - whitelist (rf/sub [:link-previews-whitelist])] - (when links - (let [{:keys [link - whitelisted? - enabled? - community?]} - (previewable-link links whitelist enabled-sites) - link-whitelisted? (and link whitelisted?)] - (cond - community? [community-preview-loader link] - (and link-whitelisted? enabled?) [link-preview-loader link context] - (and link-whitelisted? ask-user?) [link-preview-enable-request]))))) diff --git a/src/status_im/contexts/chat/messenger/messages/list/style.cljs b/src/status_im/contexts/chat/messenger/messages/list/style.cljs index c8cf9fb1ed..e78cfe7488 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/style.cljs @@ -2,7 +2,6 @@ (:require [quo.foundations.colors :as colors] [quo.foundations.shadows :as shadows] - [quo.theme :as quo.theme] [react-native.reanimated :as reanimated] [status-im.contexts.chat.messenger.messages.constants :as messages.constants])) @@ -26,7 +25,7 @@ (reanimated/apply-animations-to-style {:bottom bottom} (merge - (shadows/get 2 (quo.theme/get-theme) :inverted) + (shadows/get 2 theme :inverted) {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) :padding-horizontal 20 :border-radius 20 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 1e6b9bbda9..5cb3c3d9f9 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/navigation/style.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs index f28e04c7a5..5e70daf6fe 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/style.cljs @@ -55,9 +55,9 @@ {:margin-left 8}) (defn header-display-name - [] - {:color (colors/theme-colors colors/black colors/white)}) + [theme] + {:color (colors/theme-colors colors/black colors/white theme)}) (defn header-status - [] - {:color (colors/theme-colors colors/neutral-80-opa-50 colors/white-opa-40)}) + [theme] + {:color (colors/theme-colors colors/neutral-80-opa-50 colors/white-opa-40 theme)}) diff --git a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs index 060a480333..18adc97b33 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs @@ -3,6 +3,7 @@ [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [re-frame.db] [react-native.blur :as blur] [react-native.core :as rn] @@ -21,7 +22,8 @@ (defn header-content-container [{:keys [chat distance-from-list-top all-loaded? chat-screen-layout-calculations-complete?]}] - (let [{:keys [chat-id group-chat chat-type chat-name + (let [theme (quo.theme/use-theme) + {:keys [chat-id group-chat chat-type chat-name emoji color]} chat display-name (cond (= chat-type constants/one-to-one-chat-type) @@ -68,20 +70,21 @@ {:weight :semi-bold :size :paragraph-1 :number-of-lines 1 - :style (style/header-display-name)} + :style (style/header-display-name theme)} display-name] (when-not group-chat [quo/text {:number-of-lines 1 :weight :medium :size :paragraph-2 - :style (style/header-status)} + :style (style/header-status theme)} (i18n/label (if online? :t/online :t/offline))])]])) (defn animated-background-and-pinned-banner [{:keys [chat-id navigation-view-height distance-from-list-top all-loaded?]}] - (let [animation-distance messages.constants/header-animation-distance + (let [theme (quo.theme/use-theme) + animation-distance messages.constants/header-animation-distance props {:distance-from-list-top distance-from-list-top :all-loaded? all-loaded?} background-opacity (worklets/interpolate-navigation-view-opacity @@ -106,7 +109,7 @@ {:style {:flex 1} :blur-amount 20 :blur-type :transparent - :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur) + :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur theme) :blur-radius (if platform/ios? 20 10)}]] [pin.banner/banner {:chat-id chat-id 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 9d664c4505..a533a02abc 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] @@ -10,18 +10,19 @@ (defn f-banner [{:keys [chat-id banner-opacity top-offset]} latest-pin-text pins-count] - [reanimated/view {:style (style/container-animated-style top-offset banner-opacity)} - [blur/view - {:style style/container - :blur-radius (if platform/ios? 20 10) - :blur-type (if (theme/dark?) :dark :light) - :blur-amount 20}] - [quo/banner - {:latest-pin-text latest-pin-text - :pins-count pins-count - :on-press (fn [] - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]]) + (let [theme (quo.theme/use-theme)] + [reanimated/view {:style (style/container-animated-style top-offset banner-opacity)} + [blur/view + {:style style/container + :blur-radius (if platform/ios? 20 10) + :blur-type theme + :blur-amount 20}] + [quo/banner + {:latest-pin-text latest-pin-text + :pins-count pins-count + :on-press (fn [] + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}]])) (defn banner [{:keys [chat-id] :as props}] diff --git a/src/status_im/contexts/chat/messenger/photo_selector/album_selector/style.cljs b/src/status_im/contexts/chat/messenger/photo_selector/album_selector/style.cljs index 756fd90012..932ed6d4b8 100644 --- a/src/status_im/contexts/chat/messenger/photo_selector/album_selector/style.cljs +++ b/src/status_im/contexts/chat/messenger/photo_selector/album_selector/style.cljs @@ -4,13 +4,14 @@ [react-native.reanimated :as reanimated])) (defn selector-container - [top] + [top theme] (reanimated/apply-animations-to-style {:top top} {:position :absolute :z-index 1 :background-color (colors/theme-colors colors/white - colors/neutral-100) + colors/neutral-100 + theme) :left 0 :right 0})) diff --git a/src/status_im/contexts/chat/messenger/photo_selector/album_selector/view.cljs b/src/status_im/contexts/chat/messenger/photo_selector/album_selector/view.cljs index ab4b20c7d6..84531e1fa1 100644 --- a/src/status_im/contexts/chat/messenger/photo_selector/album_selector/view.cljs +++ b/src/status_im/contexts/chat/messenger/photo_selector/album_selector/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.platform :as platform] @@ -12,7 +13,8 @@ (defn render-album [{title :title size :count uri :uri} index _ {:keys [album? selected-album top]}] - (let [selected? (= selected-album title)] + (let [selected? (= selected-album title) + theme (quo.theme/use-theme)] [rn/touchable-opacity {:on-press (fn [] (rf/dispatch [:chat.ui/camera-roll-select-album title]) @@ -33,7 +35,7 @@ title] [quo/text {:size :paragraph-2 - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} (when size (str size " " @@ -45,7 +47,7 @@ {:style {:position :absolute :right 16}} [quo/icon :i/check - {:size 20 :color (colors/theme-colors colors/primary-50 colors/primary-60)}]])])) + {:size 20 :color (colors/theme-colors colors/primary-50 colors/primary-60 theme)}]])])) (def no-title "no-title") @@ -63,7 +65,8 @@ (defn- f-album-selector [{:keys [scroll-enabled? on-scroll]} album? selected-album top] - (let [albums (rf/sub [:camera-roll/albums]) + (let [theme (quo.theme/use-theme) + albums (rf/sub [:camera-roll/albums]) total-photos-count-android (rf/sub [:camera-roll/total-photos-count-android]) total-photos-count-ios (rf/sub [:camera-roll/total-photos-count-ios]) albums-sections [{:title no-title @@ -75,7 +78,7 @@ {:title (i18n/label :t/my-albums) :data (:my-albums albums)}] window-height (:height (rn/get-window))] - [reanimated/view {:style (style/selector-container top)} + [reanimated/view {:style (style/selector-container top theme)} [gesture/section-list {:data albums-sections :sections albums-sections diff --git a/src/status_im/contexts/chat/messenger/photo_selector/style.cljs b/src/status_im/contexts/chat/messenger/photo_selector/style.cljs index 130c99c8d1..6bffc473bb 100644 --- a/src/status_im/contexts/chat/messenger/photo_selector/style.cljs +++ b/src/status_im/contexts/chat/messenger/photo_selector/style.cljs @@ -25,8 +25,8 @@ :right 20}) (defn close-button-container - [] - {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + [theme] + {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :width 32 :height 32 :border-radius 10 @@ -36,17 +36,17 @@ :left 20}) (defn title-container - [] + [theme] {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :border-radius 10 :padding-horizontal 12 :padding-vertical 5 :align-self :center}) (defn chevron-container - [] - {:background-color (colors/theme-colors colors/neutral-30 colors/neutral-100) + [theme] + {:background-color (colors/theme-colors colors/neutral-30 colors/neutral-100 theme) :width 14 :height 14 :border-radius 7 @@ -65,11 +65,11 @@ :border-top-right-radius (when (= index 2) 20)}) (defn overlay - [window-width] + [window-width theme] {:position :absolute :width (- (/ window-width 3) 0.67) :height (/ window-width 3) - :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}) + :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)}) (def image-count {:position :absolute diff --git a/src/status_im/contexts/chat/messenger/photo_selector/view.cljs b/src/status_im/contexts/chat/messenger/photo_selector/view.cljs index 25b655c896..75d1165335 100644 --- a/src/status_im/contexts/chat/messenger/photo_selector/view.cljs +++ b/src/status_im/contexts/chat/messenger/photo_selector/view.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.chat.messenger.photo-selector.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.linear-gradient :as linear-gradient] @@ -67,7 +68,8 @@ (defn render-image [item index _ {:keys [window-width selected]}] - (let [customization-color (rf/sub [:profile/customization-color]) + (let [theme (quo.theme/use-theme) + customization-color (rf/sub [:profile/customization-color]) item-selected? (some #(= (:uri item) (:uri %)) @selected)] [rn/touchable-opacity {:on-press (fn [] @@ -83,7 +85,7 @@ :style (style/image window-width index)}] (when item-selected? [:<> - [rn/view {:style (style/overlay window-width)}] + [rn/view {:style (style/overlay window-width theme)}] [quo/counter {:container-style style/image-count :customization-color customization-color diff --git a/src/status_im/contexts/chat/messenger/placeholder/style.cljs b/src/status_im/contexts/chat/messenger/placeholder/style.cljs index a6309f17cb..b58677d420 100644 --- a/src/status_im/contexts/chat/messenger/placeholder/style.cljs +++ b/src/status_im/contexts/chat/messenger/placeholder/style.cljs @@ -3,7 +3,7 @@ [react-native.reanimated :as reanimated])) (defn container - [top opacity z-index] + [top opacity z-index theme] (reanimated/apply-animations-to-style {:opacity opacity :z-index z-index} @@ -13,4 +13,4 @@ :left 0 :right 0 :bottom 0 - :background-color (colors/theme-colors colors/white colors/neutral-95)})) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})) diff --git a/src/status_im/contexts/chat/messenger/placeholder/view.cljs b/src/status_im/contexts/chat/messenger/placeholder/view.cljs index a8fc68a8d2..729997b1ec 100644 --- a/src/status_im/contexts/chat/messenger/placeholder/view.cljs +++ b/src/status_im/contexts/chat/messenger/placeholder/view.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.chat.messenger.placeholder.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] @@ -16,8 +17,9 @@ (defn view [chat-screen-layout-calculations-complete?] - (let [top (safe-area/get-top) + (let [theme (quo.theme/use-theme) + top (safe-area/get-top) opacity (worklets/placeholder-opacity chat-screen-layout-calculations-complete?) z-index (worklets/placeholder-z-index chat-screen-layout-calculations-complete?)] - [reanimated/view {:style (style/container top opacity z-index)} + [reanimated/view {:style (style/container top opacity z-index theme)} [loading-skeleton]])) diff --git a/src/status_im/contexts/communities/actions/accounts_selection/style.cljs b/src/status_im/contexts/communities/actions/accounts_selection/style.cljs index 3742bd32d2..8334d90e58 100644 --- a/src/status_im/contexts/communities/actions/accounts_selection/style.cljs +++ b/src/status_im/contexts/communities/actions/accounts_selection/style.cljs @@ -14,7 +14,7 @@ :padding-horizontal screen-horizontal-padding}) (defn bottom-actions - [] + [theme] {:padding-vertical 12 :padding-horizontal screen-horizontal-padding - :background-color (colors/theme-colors colors/white colors/neutral-95)}) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}) diff --git a/src/status_im/contexts/communities/actions/accounts_selection/view.cljs b/src/status_im/contexts/communities/actions/accounts_selection/view.cljs index 6f04893ba5..1dea111e27 100644 --- a/src/status_im/contexts/communities/actions/accounts_selection/view.cljs +++ b/src/status_im/contexts/communities/actions/accounts_selection/view.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.communities.actions.accounts-selection.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture] [status-im.contexts.communities.actions.accounts-selection.style :as style] @@ -14,7 +15,8 @@ (defn view [] - (let [{id :community-id} (rf/sub [:get-screen-params]) + (let [theme (quo.theme/use-theme) + {id :community-id} (rf/sub [:get-screen-params]) {:keys [name color images joined]} (rf/sub [:communities/community id]) has-permissions? (rf/sub [:communities/has-permissions? id]) airdrop-account (rf/sub [:communities/airdrop-account id]) @@ -138,7 +140,7 @@ (when-not can-edit-addresses? [community-rules/view id])]] (when-not can-edit-addresses? - [rn/view {:style (style/bottom-actions)} + [rn/view {:style (style/bottom-actions theme)} [quo/slide-button {:size :size-48 :track-text (i18n/label :t/slide-to-request-to-join) 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 39e7009d98..1cb3a79deb 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 c9b1721454..1e6fb74ee4 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 37abefc50c..b8511c9999 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 7851ba83bf..c34b3c07d4 100644 --- a/src/status_im/contexts/communities/discover/view.cljs +++ b/src/status_im/contexts/communities/discover/view.cljs @@ -43,24 +43,26 @@ (defn featured-communities-header [communities-count] - [rn/view - {:style style/featured-communities-header} - [rn/view - {:style style/featured-communities-title-container} - [quo/text - {:accessibility-label :featured-communities-title - :weight :semi-bold - :size :paragraph-1 - :style {:margin-right 6}} - (i18n/label :t/featured)] - [quo/counter {:type :grey} communities-count]] - [quo/icon :i/info - {:container-style style/communities-header-container - :resize-mode :center - :size 20 - :color (colors/theme-colors - colors/neutral-50 - colors/neutral-40)}]]) + (let [theme (quo.theme/use-theme)] + [rn/view + {:style style/featured-communities-header} + [rn/view + {:style style/featured-communities-title-container} + [quo/text + {:accessibility-label :featured-communities-title + :weight :semi-bold + :size :paragraph-1 + :style {:margin-right 6}} + (i18n/label :t/featured)] + [quo/counter {:type :grey} communities-count]] + [quo/icon :i/info + {:container-style style/communities-header-container + :resize-mode :center + :size 20 + :color (colors/theme-colors + colors/neutral-50 + colors/neutral-40 + theme)}]])) (defn discover-communities-segments [selected-tab fixed] @@ -214,7 +216,7 @@ :height (if (> @scroll-height 360) 208 148) - :background-color (colors/theme-colors colors/white colors/neutral-95) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme) :sticky-header [render-sticky-header {:selected-tab selected-tab :scroll-height scroll-height}]} @@ -225,10 +227,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 +244,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 d8ac34ab54..954c4d0343 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/style.cljs b/src/status_im/contexts/communities/overview/style.cljs index be2a301697..2807a479e2 100644 --- a/src/status_im/contexts/communities/overview/style.cljs +++ b/src/status_im/contexts/communities/overview/style.cljs @@ -60,9 +60,9 @@ :flex 1}) (defn token-gated-container - [] + [theme] {:border-radius 16 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) :border-width 1 :padding-top 10 :margin-bottom 106}) diff --git a/src/status_im/contexts/communities/overview/view.cljs b/src/status_im/contexts/communities/overview/view.cljs index 7257ce4965..3d1d9afde1 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] @@ -99,7 +99,7 @@ (defn- info-button [] - (let [theme (theme/use-theme)] + (let [theme (quo.theme/use-theme)] [rn/pressable {:on-press #(rf/dispatch @@ -133,7 +133,8 @@ (defn- token-requirements [{:keys [id color role-permissions?]}] - (let [{:keys [can-request-access? + (let [theme (quo.theme/use-theme) + {:keys [can-request-access? no-member-permission? tokens networks-not-supported? @@ -150,7 +151,7 @@ [request-access-button id color] :else - [rn/view {:style (style/token-gated-container)} + [rn/view {:style (style/token-gated-container theme)} [rn/view {:style {:padding-horizontal 12 :flex-direction :row @@ -323,7 +324,8 @@ (swap! categories-heights select-keys categories) (reset! first-channel-height height))] (fn [id joined name images] - (let [cover {:uri (get-in images [:banner :uri])} + (let [theme (quo.theme/use-theme) + cover {:uri (get-in images [:banner :uri])} logo {:uri (get-in images [:thumbnail :uri])} collapsed? (and initial-joined? joined) first-category-height (->> @categories-heights @@ -340,7 +342,7 @@ :navigate-back? true :height 148 :overlay-shown? overlay-shown? - :background-color (colors/theme-colors colors/white colors/neutral-95) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme) :page-nav-props {:type :community :right-side (page-nav-right-section-buttons id) :community-name name diff --git a/src/status_im/contexts/preview/quo/animated_header_list/animated_header_list.cljs b/src/status_im/contexts/preview/quo/animated_header_list/animated_header_list.cljs index 60de2e8ba6..5a16f4750d 100644 --- a/src/status_im/contexts/preview/quo/animated_header_list/animated_header_list.cljs +++ b/src/status_im/contexts/preview/quo/animated_header_list/animated_header_list.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [re-frame.core :as rf] [react-native.core :as rn] [react-native.fast-image :as fast-image] @@ -68,10 +69,9 @@ :style {:margin-top 56 :margin-left 20}} "Alicia Keys"]) -(def theme-color (colors/theme-alpha "#5BCC95" 0.2 0.2)) - -(def parameters - {:theme-color theme-color +(defn parameters + [theme] + {:theme-color (colors/theme-alpha "#5BCC95" 0.2 0.2 theme) :cover-uri "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/kitten-playing-with-toy-mouse-royalty-free-image-590055188-1542816918.jpg?crop=1.00xw:0.758xh;0,0.132xh&resize=480:*" :f-display-picture-comp f-display-picture-comp @@ -82,4 +82,5 @@ (defn mock-screen [] - [quo/animated-header-list parameters]) + (let [theme (quo.theme/use-theme)] + [quo/animated-header-list (parameters theme)])) diff --git a/src/status_im/contexts/preview/quo/common.cljs b/src/status_im/contexts/preview/quo/common.cljs index db616afe60..cea42ce91a 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)] @@ -17,11 +18,11 @@ :text-align :left :icon-name :i/close :right-side [{:icon-name (if light? :i/dark :i/light) - :on-press #(if light? (quo.theme/set-theme :dark) (quo.theme/set-theme :light))}] + :on-press #(if light? + (rf/dispatch [:theme/switch :dark]) + (rf/dispatch [:theme/switch :light]))}] :on-press #(if (or logged-in? (not= (rf/sub [:view-id]) :quo-preview)) (rf/dispatch [:navigate-back]) (do - (quo.theme/set-theme :dark) + (rf/dispatch [:theme/switch :dark]) (rf/dispatch [:init-root root])))}])) - -(def navigation-bar (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/preview/quo/community/list_item.cljs b/src/status_im/contexts/preview/quo/community/list_item.cljs index 74be8a6ae8..62edb5b832 100644 --- a/src/status_im/contexts/preview/quo/community/list_item.cljs +++ b/src/status_im/contexts/preview/quo/community/list_item.cljs @@ -60,7 +60,7 @@ (conj descriptors-base {:type :text :key :subtitle})) (defn descriptors - [{:keys [members? info] :as state}] + [{:keys [members? info] :as state} theme] (let [descs (case (:type state) :discover (cond-> descriptors-type-discover members? @@ -76,7 +76,7 @@ (into [descriptor-unread-count])) :share descriptors-type-share nil)] - (if (quo.theme/dark?) + (if (= :dark theme) (into [descriptor-blur] descs) descs))) @@ -94,15 +94,16 @@ :active-count 112100 :unread-count 5})] (fn [] - [preview/preview-container {:state state :descriptor (descriptors @state)} - [quo/community-list - (merge @state - {:container-style {:width 335} - :logo (resources/get-mock-image :status-logo) - :tokens (:tokens data/community) - :on-press #(js/alert "List item pressed") - :on-long-press #(js/alert "Long pressed item") - :on-press-info #(js/alert "Info pressed") - :members (when (:members? @state) - {:members-count (:members-count @state) - :active-count (:active-count @state)})})]]))) + (let [theme (quo.theme/use-theme)] + [preview/preview-container {:state state :descriptor (descriptors @state theme)} + [quo/community-list + (merge @state + {:container-style {:width 335} + :logo (resources/get-mock-image :status-logo) + :tokens (:tokens data/community) + :on-press #(js/alert "List item pressed") + :on-long-press #(js/alert "Long pressed item") + :on-press-info #(js/alert "Info pressed") + :members (when (:members? @state) + {:members-count (:members-count @state) + :active-count (:active-count @state)})})]])))) 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 03a75f7729..76b71c7c63 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/foundations/shadows.cljs b/src/status_im/contexts/preview/quo/foundations/shadows.cljs index b2c9a3b9bf..5c7af21fbf 100644 --- a/src/status_im/contexts/preview/quo/foundations/shadows.cljs +++ b/src/status_im/contexts/preview/quo/foundations/shadows.cljs @@ -9,7 +9,7 @@ [status-im.contexts.preview.quo.preview :as preview])) (defn demo-box - [shadow? description shadow-style] + [shadow? description shadow-style theme] [rn/view {:style {:margin-left :auto :margin-right :auto @@ -21,7 +21,7 @@ {:style (merge {:width 60 :height 60 :border-radius 16 - :background-color (colors/theme-colors colors/white colors/neutral-90)} + :background-color (colors/theme-colors colors/white colors/neutral-90 theme)} (when shadow? shadow-style))}]]) (def descriptor @@ -31,7 +31,8 @@ (defn view [] (let [state (reagent/atom {:shadow? true}) - shadow? (reagent/cursor state [:shadow?])] + shadow? (reagent/cursor state [:shadow?]) + theme (quo.theme/use-theme)] (fn [] [preview/preview-container {:state state :descriptor descriptor} [quo/text @@ -39,19 +40,19 @@ :margin-right :auto :align-items :center}} "Normal Scales"] - [demo-box @shadow? "Shadow 1" (shadows/get 1)] - [demo-box @shadow? "Shadow 2" (shadows/get 2)] - [demo-box @shadow? "Shadow 3" (shadows/get 3)] - [demo-box @shadow? "Shadow 4" (shadows/get 4)] + [demo-box @shadow? "Shadow 1" (shadows/get 1 theme) theme] + [demo-box @shadow? "Shadow 2" (shadows/get 2 theme) theme] + [demo-box @shadow? "Shadow 3" (shadows/get 3 theme) theme] + [demo-box @shadow? "Shadow 4" (shadows/get 4 theme) theme] [quo/text {:style {:margin-left :auto :margin-right :auto :align-items :center}} "Inverted Scales"] - [demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)] - [demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)] - [demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)] - [demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)] + [demo-box @shadow? "Shadow 1" (shadows/get 1 theme :inverted) theme] + [demo-box @shadow? "Shadow 2" (shadows/get 2 theme :inverted) theme] + [demo-box @shadow? "Shadow 3" (shadows/get 3 theme :inverted) theme] + [demo-box @shadow? "Shadow 4" (shadows/get 4 theme :inverted) theme] [quo/text {:style {:margin-left :auto :margin-right :auto diff --git a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs index 73c76c8c93..4d05912ab8 100644 --- a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs +++ b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.preview.quo.gradient.gradient-cover (:require [quo.core :as quo] - [quo.theme :as quo.theme] [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] @@ -52,7 +51,7 @@ (fn [] (rn/use-effect (fn [] (when @blur? - (quo.theme/set-theme :dark))) + (rf/dispatch [:theme/switch :dark]))) [@blur?]) [preview/preview-container {:state state :descriptor descriptor} [rn/view diff --git a/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs b/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs index c06bc35051..9f21326322 100644 --- a/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs +++ b/src/status_im/contexts/preview/quo/graph/interactive_graph.cljs @@ -4,6 +4,7 @@ [quo.components.graph.utils :as utils] [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.preview.quo.preview :as preview])) @@ -112,28 +113,30 @@ (defn f-view [state] (fn [] - (rn/use-effect (fn [] - (let [time-frame (:time-frame @state) - data (generate-data time-frame) - highest-value (utils/find-highest-value data) - lowest-value (utils/find-lowest-value data) - average-value (gstring/format "%.2f" (/ (+ highest-value lowest-value) 2))] - (swap! state assoc :data data :reference-value average-value))) - [(:time-frame @state)]) - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [quo/interactive-graph - {:data (:data @state) - :state (:state @state) - :reference-value (:reference-value @state) - :reference-prefix (:reference-prefix @state) - :customization-color (:customization-color @state) - :decimal-separator (:decimal-separator @state)}]]])) + (let [theme (quo.theme/use-theme)] + (rn/use-effect (fn [] + (let [time-frame (:time-frame @state) + data (generate-data time-frame) + highest-value (utils/find-highest-value data) + lowest-value (utils/find-lowest-value data) + average-value (gstring/format "%.2f" (/ (+ highest-value lowest-value) 2))] + (swap! state assoc :data data :reference-value average-value))) + [(:time-frame @state)]) + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor theme] + [quo/interactive-graph + {:data (:data @state) + :state (:state @state) + :reference-value (:reference-value @state) + :reference-prefix (:reference-prefix @state) + :customization-color (:customization-color @state) + :decimal-separator (:decimal-separator @state)}]]]))) (defn view [] - (let [data (generate-data :1-week) + (let [theme (quo.theme/use-theme) + data (generate-data :1-week) highest-value (utils/find-highest-value data) lowest-value (utils/find-lowest-value data) average-value (gstring/format "%.2f" (/ (+ highest-value lowest-value) 2)) @@ -148,6 +151,7 @@ {:style {:background-color (colors/theme-colors colors/white - colors/neutral-95) + colors/neutral-95 + theme) :flex 1}} [:f> f-view state]])) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index 247f16de05..4b6205e7b0 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -2,6 +2,7 @@ (:refer-clojure :exclude [filter]) (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.preview.quo.animated-header-list.animated-header-list @@ -564,12 +565,13 @@ (defn- main-screen [] - [:<> - [common/navigation-bar {:title "Quo components preview"}] - [rn/scroll-view {:style (style/main)} - (for [category (sort screens-categories)] - ^{:key (first category)} - [category-view category])]]) + (let [theme (quo.theme/use-theme)] + [:<> + [common/navigation-bar {:title "Quo components preview"}] + [rn/scroll-view {:style (style/main theme)} + (for [category (sort screens-categories)] + ^{:key (first category)} + [category-view category])]])) (def screens (->> screens-categories 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 e4602f3564..1f1bd81cd9 100644 --- a/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs +++ b/src/status_im/contexts/preview/quo/notifications/activity_logs.cljs @@ -119,7 +119,8 @@ :unread? true :items []})] (fn [] - (let [{:keys [button-1-type + (let [theme (quo.theme/use-theme) + {:keys [button-1-type button-1-label button-2-type button-2-label @@ -172,8 +173,8 @@ [rn/view {:flex 1 :padding 16} - [preview/customizer state descriptor]] - [quo.theme/provider {:theme :dark} + [preview/customizer state descriptor theme]] + [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 ea0745bd43..3a423dd230 100644 --- a/src/status_im/contexts/preview/quo/preview.cljs +++ b/src/status_im/contexts/preview/quo/preview.cljs @@ -6,7 +6,6 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [re-frame.core :as rf] [react-native.blur :as blur] [react-native.clipboard :as clipboard] [react-native.core :as rn] @@ -15,13 +14,14 @@ [status-im.common.resources :as resources] [status-im.contexts.preview.quo.common :as common] [status-im.contexts.preview.quo.style :as style] - utils.number) + utils.number + [utils.re-frame :as rf]) (:require-macros status-im.contexts.preview.quo.preview)) (defn- label-view - [_ label] + [_ label theme] [rn/view {:style style/label-container} - [rn/text {:style (style/label)} + [rn/text {:style (style/label theme)} label]]) (defn- humanize @@ -47,25 +47,26 @@ (defn- customizer-boolean [{:keys [label state] :as args}] - (let [label (or label (key->boolean-label (:key args))) + (let [theme (quo.theme/use-theme) + label (or label (key->boolean-label (:key args))) field-value (reagent/cursor state [(:key args)]) active? @field-value] [rn/view {:style style/field-row} [label-view state label] [rn/view {:style (style/boolean-container)} [rn/pressable - {:style (style/boolean-button {:active? active? :left? true}) + {:style (style/boolean-button {:active? active? :left? true} theme) :on-press #(reset! field-value true)} - [rn/text {:style (style/field-text active?)} + [rn/text {:style (style/field-text active? theme)} "True"]] [rn/pressable - {:style (style/boolean-button {:active? (not active?) :left? false}) + {:style (style/boolean-button {:active? (not active?) :left? false} theme) :on-press #(reset! field-value false)} - [rn/text {:style (style/field-text (not active?))} + [rn/text {:style (style/field-text (not active?) theme)} "False"]]]])) (defn- customizer-text - [{:keys [label state limit suffix] :as args}] + [{:keys [label state limit suffix] :as args} theme] (let [label (or label (key->text-label (:key args))) field-value (reagent/cursor state [(:key args)])] [rn/view {:style style/field-row} @@ -75,8 +76,8 @@ (merge {:value @field-value :show-cancel false - :style (style/field-container false) - :keyboard-appearance (quo.theme/theme-value :light :dark) + :style (style/field-container false theme) + :keyboard-appearance theme :on-change-text (fn [text] (reset! field-value (if (and suffix (> (count text) (count @field-value))) @@ -87,7 +88,7 @@ {:max-length limit}))]]])) (defn- customizer-number - [{:keys [label state default] :as args}] + [{:keys [label state default] :as args} theme] (let [label (or label (key->text-label (:key args))) field-value (reagent/cursor state [(:key args)])] [rn/view {:style style/field-row} @@ -97,8 +98,8 @@ (merge {:value (str @field-value) :show-cancel false - :style (style/field-container false) - :keyboard-appearance (quo.theme/theme-value :light :dark) + :style (style/field-container false theme) + :keyboard-appearance theme :on-change-text (fn [text] (reset! field-value (utils.number/parse-int text default)) (reagent/flush))})]]])) @@ -109,48 +110,49 @@ (defn- customizer-select-modal [{:keys [open options field-value]}] - [rn/modal - {:visible @open - :on-request-close #(reset! open false) - :status-bar-translucent true - :transparent true - :animation :slide} - [rn/view {:style (style/modal-overlay)} - [rn/view {:style (style/modal-container)} - [rn/scroll-view {:shows-vertical-scroll-indicator false} - (doall - (for [{k :key v :value} options - :let [v (or v (humanize k))]] - ^{:key k} - [rn/pressable - {:style (style/select-option (= @field-value k)) - :on-press (fn [] - (reset! open false) - (reset! field-value k))} - [rn/text {:style (style/field-text (= @field-value k))} - v]]))] - [rn/view {:style (style/footer)} - [rn/pressable - {:style (style/select-button) - :on-press (fn [] - (reset! field-value nil) - (reset! open false))} - [rn/text {:style (style/field-text false)} - "Clear"]] - [rn/view {:style {:width 16}}] - [rn/touchable-opacity - {:style (style/select-button) - :on-press #(reset! open false)} - [rn/text {:style (style/field-text false)} - "Close"]]]]]]) + (let [theme (quo.theme/use-theme)] + [rn/modal + {:visible @open + :on-request-close #(reset! open false) + :status-bar-translucent true + :transparent true + :animation :slide} + [rn/view {:style (style/modal-overlay theme)} + [rn/view {:style (style/modal-container theme)} + [rn/scroll-view {:shows-vertical-scroll-indicator false} + (doall + (for [{k :key v :value} options + :let [v (or v (humanize k))]] + ^{:key k} + [rn/pressable + {:style (style/select-option (= @field-value k) theme) + :on-press (fn [] + (reset! open false) + (reset! field-value k))} + [rn/text {:style (style/field-text (= @field-value k) theme)} + v]]))] + [rn/view {:style (style/footer theme)} + [rn/pressable + {:style (style/select-button theme) + :on-press (fn [] + (reset! field-value nil) + (reset! open false))} + [rn/text {:style (style/field-text false theme)} + "Clear"]] + [rn/view {:style {:width 16}}] + [rn/touchable-opacity + {:style (style/select-button theme) + :on-press #(reset! open false)} + [rn/text {:style (style/field-text false theme)} + "Close"]]]]]])) (defn- customizer-select-button - [{:keys [open selected-option]}] + [{:keys [open selected-option]} theme] [rn/pressable - {:style (style/select-container) + {:style (style/select-container theme) :on-press #(reset! open true)} [rn/text - {:style (style/field-select) + {:style (style/field-select theme) :number-of-lines 1} (if selected-option (or (:value selected-option) (humanize (:key selected-option))) @@ -162,7 +164,8 @@ [] (let [open (reagent/atom nil)] (fn [{:keys [label state options] :as args}] - (let [label (or label (key->text-label (:key args))) + (let [theme (quo.theme/use-theme) + label (or label (key->text-label (:key args))) field-value (reagent/cursor state [(:key args)]) selected-option (find-selected-option @field-value options)] [rn/view {:style style/field-row} @@ -172,52 +175,53 @@ {:open open :options options :field-value field-value}] - [customizer-select-button {:open open :selected-option selected-option}]]])))) + [customizer-select-button {:open open :selected-option selected-option} theme]]])))) (defn- customizer-multi-select-modal [{:keys [open-atom options selected-keys-atom]}] - [rn/modal - {:visible @open-atom - :on-request-close #(reset! open-atom false) - :status-bar-translucent true - :transparent true - :animation :slide} - [rn/view {:style (style/modal-overlay)} - [rn/view {:style (style/modal-container)} - [rn/scroll-view {:shows-vertical-scroll-indicator false} - (doall - (for [{k :key v :value} options - :let [v (or v (humanize k))]] - ^{:key k} + (let [theme (quo.theme/use-theme)] + [rn/modal + {:visible @open-atom + :on-request-close #(reset! open-atom false) + :status-bar-translucent true + :transparent true + :animation :slide} + [rn/view {:style (style/modal-overlay theme)} + [rn/view {:style (style/modal-container theme)} + [rn/scroll-view {:shows-vertical-scroll-indicator false} + (doall + (for [{k :key v :value} options + :let [v (or v (humanize k))]] + ^{:key k} - (let [checked? (boolean (some #(= k %) @selected-keys-atom)) - remove-key (fn [v] (filterv #(not= % k) v)) - on-press (fn [] - (swap! selected-keys-atom - (if checked? remove-key conj) - k))] - [rn/pressable - {:style (style/multi-select-option) - :on-press on-press} - [rn/text {:style (style/field-text false)} v] - [quo/selectors - {:type :checkbox - :checked? checked? - :on-change on-press}]])))] - [rn/view {:style (style/footer)} - [rn/pressable - {:style (style/select-button) - :on-press (fn [] - (reset! selected-keys-atom nil) - (reset! open-atom false))} - [rn/text {:style (style/field-text false)} - "Clear"]] - [rn/view {:style {:width 16}}] - [rn/touchable-opacity - {:style (style/select-button) - :on-press #(reset! open-atom false)} - [rn/text {:style (style/field-text false)} - "Close"]]]]]]) + (let [checked? (boolean (some #(= k %) @selected-keys-atom)) + remove-key (fn [v] (filterv #(not= % k) v)) + on-press (fn [] + (swap! selected-keys-atom + (if checked? remove-key conj) + k))] + [rn/pressable + {:style (style/multi-select-option theme) + :on-press on-press} + [rn/text {:style (style/field-text false theme)} v] + [quo/selectors + {:type :checkbox + :checked? checked? + :on-change on-press}]])))] + [rn/view {:style (style/footer theme)} + [rn/pressable + {:style (style/select-button theme) + :on-press (fn [] + (reset! selected-keys-atom nil) + (reset! open-atom false))} + [rn/text {:style (style/field-text false theme)} + "Clear"]] + [rn/view {:style {:width 16}}] + [rn/touchable-opacity + {:style (style/select-button theme) + :on-press #(reset! open-atom false)} + [rn/text {:style (style/field-text false theme)} + "Close"]]]]]])) (defn filter-by-keys [items ks] @@ -226,12 +230,12 @@ items)) (defn- customizer-multi-select-button - [{:keys [open selected-options]}] + [{:keys [open selected-options]} theme] [rn/pressable - {:style (style/select-container) + {:style (style/select-container theme) :on-press #(reset! open true)} [rn/text - {:style (style/field-select) + {:style (style/field-select theme) :number-of-lines 1} (if (seq selected-options) (string/join ", " (map :value selected-options)) @@ -243,7 +247,8 @@ [] (let [open (reagent/atom nil)] (fn [{:keys [label state options] :as args}] - (let [label (or label (key->text-label (:key args))) + (let [theme (quo.theme/use-theme) + label (or label (key->text-label (:key args))) selected-keys (reagent/cursor state [(:key args)]) selected-options (filter-by-keys options @selected-keys)] [rn/view {:style style/field-row} @@ -253,10 +258,10 @@ {:open-atom open :selected-keys-atom selected-keys :options options}] - [customizer-multi-select-button {:open open :selected-options selected-options}]]])))) + [customizer-multi-select-button {:open open :selected-options selected-options} theme]]])))) (defn customizer - [state descriptors] + [state descriptors theme] [rn/view {:style {:flex-shrink 1 :padding-horizontal 20}} @@ -271,8 +276,8 @@ [:<> (case (:type desc) :boolean [customizer-boolean descriptor] - :text [customizer-text descriptor] - :number [customizer-number descriptor] + :text [customizer-text descriptor theme] + :number [customizer-number descriptor theme] :select [customizer-select descriptor] :multi-select [customizer-multi-select descriptor] nil)]))]) @@ -325,20 +330,20 @@ 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) - title (or title @(rf/subscribe [:view-id]))] + (let [theme (quo.theme/use-theme) + title (or title (rf/sub [:view-id]))] (rn/use-effect (fn [] (when blur-dark-only? (if blur? - (quo.theme/set-theme :dark) - (quo.theme/set-theme :light)))) + (rf/dispatch [:theme/switch :dark]) + (rf/dispatch [:theme/switch :light])))) [blur? blur-dark-only?]) [rn/view {:style {:top (safe-area/get-top) :flex 1}} [common/navigation-bar {:title title}] [rn/scroll-view - {:style (style/panel-basic) + {:style (style/panel-basic theme) :shows-vertical-scroll-indicator false :content-container-style (when full-screen? {:flex 1})} [:<> @@ -347,7 +352,7 @@ :on-press rn/dismiss-keyboard!} (when descriptor [rn/view {:style style/customizer-container} - [customizer state descriptor]]) + [customizer state descriptor theme]]) (if blur? [rn/view {:style (merge style/component-container component-container-style)} (into [blur-view diff --git a/src/status_im/contexts/preview/quo/style.cljs b/src/status_im/contexts/preview/quo/style.cljs index 98288818cd..7296228863 100644 --- a/src/status_im/contexts/preview/quo/style.cljs +++ b/src/status_im/contexts/preview/quo/style.cljs @@ -10,20 +10,20 @@ (def text-default typography/paragraph-1) (defn field-active-bg-color - [] - (colors/theme-colors colors/primary-50 colors/primary-60)) + [theme] + (colors/theme-colors colors/primary-50 colors/primary-60 theme)) (defn field-default-color - [] - (colors/theme-colors colors/neutral-100 colors/white)) + [theme] + (colors/theme-colors colors/neutral-100 colors/white theme)) (defn field-default-bg-color - [] - (colors/theme-colors colors/neutral-20 colors/neutral-80)) + [theme] + (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)) (defn field-default-border-color - [] - (colors/theme-colors colors/neutral-30 colors/neutral-70)) + [theme] + (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)) (def field-row {:flex-direction :row @@ -34,78 +34,78 @@ {:flex field-flex-percentage}) (defn field-container - [active?] + [active? theme] (merge text-default {:color (if active? - (colors/theme-colors colors/white colors/white-opa-95) - (colors/theme-colors colors/neutral-100 colors/white)) + (colors/theme-colors colors/white colors/white-opa-95 theme) + (colors/theme-colors colors/neutral-100 colors/white theme)) :border-width 1 - :border-color (field-default-border-color) + :border-color (field-default-border-color theme) :border-radius field-border-radius :padding-vertical 9 :padding-horizontal 12})) (defn field-text - [active?] + [active? theme] (merge text-default {:color (if active? - (colors/theme-colors colors/white colors/white-opa-95) - (field-default-color))})) + (colors/theme-colors colors/white colors/white-opa-95 theme) + (field-default-color theme))})) (def customizer-container {:flex-shrink 1 :padding-top 12}) (defn multi-select-option - [] - (merge (field-container false) + [theme] + (merge (field-container false theme) {:justify-content :space-between :align-items :space-between :flex 1 :flex-direction :row :margin-vertical 4 - :background-color (field-default-bg-color)})) + :background-color (field-default-bg-color theme)})) (defn select-container - [] - (merge (field-container false) + [theme] + (merge (field-container false theme) {:flex-direction :row :align-items :center :border-radius field-border-radius - :background-color (field-default-bg-color) + :background-color (field-default-bg-color theme) :border-width 1 - :border-color (field-default-border-color)})) + :border-color (field-default-border-color theme)})) (defn field-select - [] + [theme] (merge text-default {:flex-grow 1 - :color (field-default-color)})) + :color (field-default-color theme)})) (defn select-option - [selected?] - (merge (field-container selected?) + [selected? theme] + (merge (field-container selected? theme) {:justify-content :center :flex 1 :margin-vertical 4} (if selected? - {:border-color (field-active-bg-color) - :background-color (field-active-bg-color)} - {:background-color (field-default-bg-color)}))) + {:border-color (field-active-bg-color theme) + :background-color (field-active-bg-color theme)} + {:background-color (field-default-bg-color theme)}))) (defn select-button - [] - (merge (select-option false) {:align-items :center})) + [theme] + (merge (select-option false theme) {:align-items :center})) (def label-container {:flex (- 1 field-flex-percentage) :padding-right 8}) (defn label - [] + [theme] (merge text-default typography/font-medium - {:color (field-default-color)})) + {:color (field-default-color theme)})) (defn boolean-container [] @@ -114,20 +114,20 @@ :border-radius field-border-radius}) (defn boolean-button - [{:keys [active? left?]}] + [{:keys [active? left?]} theme] (cond-> {:flex 1 :align-items :center :justify-content :center :padding-vertical 9 :padding-horizontal 12 :border-color (if active? - (field-active-bg-color) - (field-default-border-color)) + (field-active-bg-color theme) + (field-default-border-color theme)) :border-top-width 1 :border-bottom-width 1 :background-color (if active? - (field-active-bg-color) - (field-default-bg-color))} + (field-active-bg-color theme) + (field-default-bg-color theme))} left? (assoc :border-top-left-radius field-border-radius :border-bottom-left-radius field-border-radius @@ -141,33 +141,33 @@ ;;;; Modal (defn modal-overlay - [] + [theme] {:flex 1 :justify-content :center :padding-horizontal 24 - :background-color (colors/theme-colors colors/neutral-80-opa-60 colors/neutral-80-opa-80)}) + :background-color (colors/theme-colors colors/neutral-80-opa-60 colors/neutral-80-opa-80 theme)}) (defn modal-container - [] + [theme] {:padding-horizontal 16 :padding-vertical 8 :border-radius 12 :margin-vertical 100 - :background-color (colors/theme-colors colors/white colors/neutral-95)}) + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}) (defn footer - [] + [theme] {:flex-direction :row :padding-top 10 :margin-top 10 :border-top-width 1 - :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}) + :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}) ;;;; Misc (defn panel-basic - [] - {:background-color (colors/theme-colors colors/white colors/neutral-95) + [theme] + {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) :flex 1}) (def component-container @@ -177,8 +177,8 @@ :padding-horizontal 20}) (defn main - [] + [theme] {:flex 1 :padding-bottom 8 :padding-horizontal 16 - :background-color (colors/theme-colors colors/white colors/neutral-90)}) + :background-color (colors/theme-colors colors/white colors/neutral-90 theme)}) diff --git a/src/status_im/contexts/preview/quo/tags/permission_tag.cljs b/src/status_im/contexts/preview/quo/tags/permission_tag.cljs index 5be5a2c1d8..4cd012d622 100644 --- a/src/status_im/contexts/preview/quo/tags/permission_tag.cljs +++ b/src/status_im/contexts/preview/quo/tags/permission_tag.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.common.resources :as resources] @@ -170,19 +171,21 @@ [] (let [state (reagent/atom {:size 32})] (fn [] - [preview/preview-container - {:state state - :component-container-style {:margin-bottom 40} - :descriptor descriptor} - (when @state - (for [{:keys [tokens]} community-tokens] - ^{:key tokens} - [rn/view - {:margin-top 20 - :align-self :flex-end} - [quo/permission-tag - (merge @state - {:tokens tokens - :background-color (colors/theme-colors - colors/neutral-10 - colors/neutral-80)})]]))]))) + (let [theme (quo.theme/use-theme)] + [preview/preview-container + {:state state + :component-container-style {:margin-bottom 40} + :descriptor descriptor} + (when @state + (for [{:keys [tokens]} community-tokens] + ^{:key tokens} + [rn/view + {:margin-top 20 + :align-self :flex-end} + [quo/permission-tag + (merge @state + {:tokens tokens + :background-color (colors/theme-colors + colors/neutral-10 + colors/neutral-80 + theme)})]]))])))) diff --git a/src/status_im/contexts/preview/status_im/main.cljs b/src/status_im/contexts/preview/status_im/main.cljs index 9a850f046f..866908db8d 100644 --- a/src/status_im/contexts/preview/status_im/main.cljs +++ b/src/status_im/contexts/preview/status_im/main.cljs @@ -2,6 +2,7 @@ (:refer-clojure :exclude [filter]) (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [reagent.core :as reagent] [status-im.contexts.preview.quo.common :as common] @@ -40,12 +41,13 @@ (defn- main-screen [] - [:<> - [common/navigation-bar {:title "Status IM components"}] - [rn/scroll-view {:style (style/main)} - (for [category (sort screens-categories)] - ^{:key (first category)} - [category-view category])]]) + (let [theme (quo.theme/use-theme)] + [:<> + [common/navigation-bar {:title "Status IM components"}] + [rn/scroll-view {:style (style/main theme)} + (for [category (sort screens-categories)] + ^{:key (first category)} + [category-view category])]])) (def screens (->> screens-categories diff --git a/src/status_im/contexts/preview/status_im/style.cljs b/src/status_im/contexts/preview/status_im/style.cljs index 169701559f..195ca9296f 100644 --- a/src/status_im/contexts/preview/status_im/style.cljs +++ b/src/status_im/contexts/preview/status_im/style.cljs @@ -3,8 +3,8 @@ [quo.foundations.colors :as colors])) (defn main - [] + [theme] {:flex 1 :padding-bottom 8 :padding-horizontal 16 - :background-color (colors/theme-colors colors/white colors/neutral-90)}) + :background-color (colors/theme-colors colors/white colors/neutral-90 theme)}) diff --git a/src/status_im/contexts/profile/contact/header/view.cljs b/src/status_im/contexts/profile/contact/header/view.cljs index a8f89962f9..96f3263416 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 a3f31478a9..b777a3b658 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 691556fcfd..96dc0b77be 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/effects.cljs b/src/status_im/contexts/profile/settings/effects.cljs index 9f49cb9879..221b7e95af 100644 --- a/src/status_im/contexts/profile/settings/effects.cljs +++ b/src/status_im/contexts/profile/settings/effects.cljs @@ -26,7 +26,8 @@ (theme/device-theme-dark?))) :dark :light)] - (theme/set-theme theme) + (theme/set-legacy-theme theme) + (rf/dispatch [:theme/switch theme]) (rf/dispatch [:reload-status-nav-color view-id]) (when reload-ui? (re-frame/dispatch [:dismiss-all-overlays]) diff --git a/src/status_im/contexts/profile/settings/header/view.cljs b/src/status_im/contexts/profile/settings/header/view.cljs index 699572ef5e..75f11fbca1 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 @@ -25,7 +26,7 @@ profile-picture (profile.utils/photo profile) emoji-string (string/join emoji-hash) {:keys [status-title status-icon]} (header.utils/visibility-status-type-data status) - border-theme (quo.theme/get-theme)] + border-theme theme] [:<> [header.shape/view {:scroll-y scroll-y @@ -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 a029992a8b..dc0df7a4ed 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 a20957ed39..64fa834386 100644 --- a/src/status_im/contexts/profile/settings/view.cljs +++ b/src/status_im/contexts/profile/settings/view.cljs @@ -37,9 +37,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]) @@ -84,9 +85,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 a91eeb1a0b..f524b6af7e 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 fb9f2e9b24..687441ba87 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 33ba142ba9..b5a62ef6a0 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 734a6bc9c5..058e9b6af6 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 1054922f55..f27c32b432 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 8c798e69b8..60561f958b 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 4973bbe133..9c91714b20 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/style.cljs b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/style.cljs index fcae251000..e9db5c6116 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/style.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/new_keypair/backup_recovery_phrase/style.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.wallet.add-account.create-account.new-keypair.backup-recovery-phrase.style (:require [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] [react-native.platform :as platform])) (defn seed-phrase-container @@ -45,7 +44,7 @@ [theme] {:style {:flex 1} :blur-radius 25 - :blur-type (quo.theme/theme-value :light :dark theme) + :blur-type theme :blur-amount 20}) (def slide-button 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 d2f8369f7c..4e43bd5e89 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 9d443f24fa..acf6eb08a5 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 1c6102d8d1..dbb09737c0 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 @@ -57,7 +57,7 @@ :description :text :description-props {:text formatted-path}}])) -(defn- view-internal +(defn view [_] (let [top (safe-area/get-top) bottom (safe-area/get-bottom) @@ -68,8 +68,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]) @@ -178,5 +179,3 @@ :new-keypair? (boolean new-keypair) :derivation-path derivation-path :customization-color customization-color})}]])))) - -(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 d917b55c77..0cf26d28b1 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]) @@ -62,5 +62,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 05984cce5d..437c1a1630 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 41f60f36ca..12a214c46d 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 c34e433c9e..635b7d64c4 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 e0939d9599..d695985a27 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 68eabc6ad3..e478e7bbbf 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -29,22 +29,23 @@ (defn cta-buttons [] - [rn/view {:style style/buttons-container} - [quo/button - {:container-style style/send-button - :type :outline - :size 40 - :icon-left :i/send} - (i18n/label :t/send)] - [quo/button - {:container-style style/opensea-button - :type :outline - :size 40 - :icon-left :i/opensea - :icon-left-color (colors/theme-colors colors/neutral-100 colors/neutral-40) - :icon-right :i/external - :icon-right-color (colors/theme-colors colors/neutral-50 colors/neutral-40)} - (i18n/label :t/opensea)]]) + (let [theme (quo.theme/use-theme)] + [rn/view {:style style/buttons-container} + [quo/button + {:container-style style/send-button + :type :outline + :size 40 + :icon-left :i/send} + (i18n/label :t/send)] + [quo/button + {:container-style style/opensea-button + :type :outline + :size 40 + :icon-left :i/opensea + :icon-left-color (colors/theme-colors colors/neutral-100 colors/neutral-40 theme) + :icon-right :i/external + :icon-right-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)} + (i18n/label :t/opensea)]])) (def tabs-data [{:id :overview @@ -54,12 +55,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]) wallet-address (rf/sub [:wallet/current-viewing-account-address]) {:keys [id @@ -130,9 +132,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 75b8632ce1..00c7b38e70 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 a311aeff43..e1bbb3b22e 100644 --- a/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs +++ b/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs @@ -27,7 +27,7 @@ :on-long-press #(when on-long-press (on-long-press collectible))}])) -(defn- view-internal +(defn view [{:keys [theme collectibles filtered? on-collectible-press on-end-reached current-account-address on-collectible-long-press]}] (let [no-results-match-query? (and filtered? (empty? collectibles))] @@ -60,5 +60,3 @@ on-collectible-long-press)) :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 95df3a0db8..7861c2b735 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 @@ -373,9 +372,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 81f460fa46..e0268ee22f 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 fcca70f35e..bf54d0567e 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 27c2e4675f..1911173945 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 8f7ec9041e..85aa8d1cf3 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 c136fb0498..d4b16bd57e 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 5e6fc4ece5..4ad6072927 100644 --- a/src/status_im/contexts/wallet/sheets/account_options/view.cljs +++ b/src/status_im/contexts/wallet/sheets/account_options/view.cljs @@ -47,10 +47,8 @@ {:style (style/blur-container @options-height) :blur-radius (if platform/android? 20 10) :blur-amount (if platform/ios? 20 10) - :blur-type (quo.theme/theme-value (if platform/ios? :light :xlight) :dark theme) - :overlay-color (quo.theme/theme-value colors/white-70-blur - colors/neutral-95-opa-70-blur - theme)}]) + :blur-type (if (= theme :light) (if platform/ios? :light :xlight) :dark) + :overlay-color (if (= theme :light) colors/white-70-blur colors/neutral-95-opa-70-blur)}]) [quo/gradient-cover {:customization-color color :opacity 0.4}] @@ -107,11 +105,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 +123,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 bd47b9cfb5..b0626de2ae 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 f04e051f9e..37ec3ba0cf 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 169f48074d..3c91f5cb55 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 230195d78f..5a3df1d0f0 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/db.cljs b/src/status_im/db.cljs index 98628fddb6..772ca493e1 100644 --- a/src/status_im/db.cljs +++ b/src/status_im/db.cljs @@ -45,4 +45,5 @@ :confirmation [] :current [] :puk [] - :enter-step :original}}}) + :enter-step :original}} + :theme :light}) diff --git a/src/status_im/navigation/effects.cljs b/src/status_im/navigation/effects.cljs index 369c6a4394..740133018d 100644 --- a/src/status_im/navigation/effects.cljs +++ b/src/status_im/navigation/effects.cljs @@ -16,9 +16,9 @@ [utils.re-frame :as rf])) (defn get-status-nav-color - [view-id] + [view-id theme] (let [theme (or (get-in views/screens [view-id :options :theme]) - (quo.theme/get-theme)) + theme) [rnn-status-bar rn-status-bar] (if (or (= theme :dark) @state/alert-banner-shown? @@ -40,9 +40,9 @@ [rnn-status-bar rn-status-bar nav-bar-color comp-id])) (defn reload-status-nav-color-fx - [view-id] + [[view-id theme]] (when (and (= @state/root-id :shell-stack) view-id) - (let [[rnn-status-bar rn-status-bar nav-bar-color comp-id] (get-status-nav-color view-id)] + (let [[rnn-status-bar rn-status-bar nav-bar-color comp-id] (get-status-nav-color view-id theme)] (if platform/ios? (rn/set-status-bar-style rn-status-bar true) (navigation/merge-options @@ -53,8 +53,8 @@ (rf/reg-fx :reload-status-nav-color-fx reload-status-nav-color-fx) (rf/reg-fx :set-view-id-fx - (fn [view-id] - (reload-status-nav-color-fx view-id) + (fn [[view-id theme]] + (reload-status-nav-color-fx [view-id theme]) (rf/dispatch [:screens/on-will-focus view-id]) (when-let [{:keys [on-focus]} (get views/screens view-id)] (when on-focus @@ -213,8 +213,8 @@ opts)}}))) (rf/reg-fx :show-toasts - (fn [view-id] - (let [[rnn-status-bar nav-bar-color] (get-status-nav-color view-id)] + (fn [[view-id theme]] + (let [[rnn-status-bar nav-bar-color] (get-status-nav-color view-id theme)] (show-overlay "toasts" (assoc (options/statusbar-and-navbar-options nil rnn-status-bar nav-bar-color) :overlay @@ -233,16 +233,16 @@ ;;;; Alert Banner (rf/reg-fx :show-alert-banner - (fn [view-id] + (fn [[view-id theme]] (show-overlay "alert-banner" {:overlay {:interceptTouchOutside false}}) (reset! state/alert-banner-shown? true) - (reload-status-nav-color-fx view-id))) + (reload-status-nav-color-fx [view-id theme]))) (rf/reg-fx :hide-alert-banner - (fn [view-id] + (fn [[view-id theme]] (navigation/dissmiss-overlay "alert-banner") (reset! state/alert-banner-shown? false) - (reload-status-nav-color-fx view-id))) + (reload-status-nav-color-fx [view-id theme]))) ;;;; Merge options diff --git a/src/status_im/navigation/events.cljs b/src/status_im/navigation/events.cljs index ad5b6d4e66..3313462acb 100644 --- a/src/status_im/navigation/events.cljs +++ b/src/status_im/navigation/events.cljs @@ -104,7 +104,7 @@ (merge {:db (assoc db :bottom-sheet {:sheets rest-sheets :hide? false}) :hide-bottom-sheet nil - :reload-status-nav-color-fx (:view-id db)} + :reload-status-nav-color-fx [(:view-id db) (:theme db)]} (when (seq rest-sheets) {:dispatch [:show-next-bottom-sheet]})))) @@ -138,12 +138,12 @@ [{:keys [db]} view-id] (let [view-id (if (= view-id :shell-stack) (shell.utils/calculate-view-id) view-id)] {:db (assoc db :view-id view-id) - :set-view-id-fx view-id})) + :set-view-id-fx [view-id (:theme db)]})) (rf/defn reload-status-nav-color {:events [:reload-status-nav-color]} [{:keys [db]} view-id] - {:reload-status-nav-color-fx (or view-id (:view-id db))}) + {:reload-status-nav-color-fx [(or view-id (:view-id db)) (:theme db)]}) (defn open-share [_ [config]] diff --git a/src/status_im/navigation/options.cljs b/src/status_im/navigation/options.cljs index e228c401b8..f79645ded6 100644 --- a/src/status_im/navigation/options.cljs +++ b/src/status_im/navigation/options.cljs @@ -1,7 +1,6 @@ (ns status-im.navigation.options (:require [quo.foundations.colors :as colors] - [quo.theme :as quo.theme] [react-native.platform :as platform] [status-im.navigation.transitions :as transitions])) @@ -13,7 +12,7 @@ (defn statusbar-and-navbar-options [theme status-bar-theme nav-bar-color] (let [[status-bar-theme nav-bar-color] - (if (= :dark (or theme (quo.theme/get-theme))) + (if (= :dark theme) [(or status-bar-theme :light) (or nav-bar-color colors/neutral-100)] [(or status-bar-theme :dark) (or nav-bar-color colors/white)])] (if platform/android? @@ -26,14 +25,16 @@ (defn root-options [{:keys [background-color theme status-bar-theme nav-bar-color]}] - (merge (statusbar-and-navbar-options theme status-bar-theme nav-bar-color) - {:topBar {:visible false} - :layout {:componentBackgroundColor (or background-color - (colors/theme-colors colors/white colors/neutral-100)) - :orientation ["portrait"] - :backgroundColor (or background-color - (colors/theme-colors colors/white - colors/neutral-100))}})) + (merge + (statusbar-and-navbar-options theme status-bar-theme nav-bar-color) + {:topBar {:visible false} + :layout {:componentBackgroundColor (or background-color + (colors/theme-colors colors/white colors/neutral-100 theme)) + :orientation ["portrait"] + :backgroundColor (or background-color + (colors/theme-colors colors/white + colors/neutral-100 + theme))}})) (defn dark-root-options [] diff --git a/src/status_im/navigation/view.cljs b/src/status_im/navigation/view.cljs index e7443225a3..602e3c3521 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] @@ -30,23 +30,24 @@ (defn inactive [] - (when (rf/sub [:hide-screen?]) - [rn/view - {:position :absolute - :flex 1 - :top 0 - :bottom 0 - :left 0 - :right 0 - :background-color (colors/theme-colors colors/white colors/neutral-100) - :z-index 999999999999999999}])) + (let [theme (rf/sub [:theme])] + (when (rf/sub [:hide-screen?]) + [rn/view + {:position :absolute + :flex 1 + :top 0 + :bottom 0 + :left 0 + :right 0 + :background-color (colors/theme-colors colors/white colors/neutral-100 theme) + :z-index 999999999999999999}]))) (defn wrapped-screen-style - [{:keys [top? bottom? background-color alert-banners-top-margin]}] + [{:keys [top? bottom? background-color alert-banners-top-margin theme]}] (merge {:flex 1 :margin-top alert-banners-top-margin - :background-color (or background-color (colors/theme-colors colors/white colors/neutral-100))} + :background-color (or background-color (colors/theme-colors colors/white colors/neutral-100 theme))} (when bottom? {:padding-bottom (safe-area/get-bottom)}) (when top? @@ -67,15 +68,17 @@ {:keys [component options]} (or qualified-screen-details screen-details) {:keys [insets sheet? theme skip-background?]} options - user-theme (theme/get-theme) alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) background-color (or (get-in options [:layout :backgroundColor]) - (when sheet? :transparent))] + (when sheet? :transparent)) + app-theme (rf/sub [:theme]) + theme (or theme app-theme)] ^{:key (str "root" screen-key @reloader/cnt)} - [theme/provider {:theme (or theme user-theme)} + [quo.theme/provider theme [rn/view {:style (wrapped-screen-style (assoc insets + :theme theme :background-color background-color :alert-banners-top-margin alert-banners-top-margin))} [inactive] @@ -91,14 +94,14 @@ (def bottom-sheet (reagent/reactify-component (fn [] - (let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet]) + (let [app-theme (rf/sub [:theme]) + {:keys [sheets hide?]} (rf/sub [:bottom-sheet]) sheet (last sheets) {:keys [theme]} sheet insets (safe-area/get-insets) - user-theme (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 app-theme) [inactive] [rn/keyboard-avoiding-view {:style {:position :relative :flex 1} @@ -115,7 +118,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 624302871f..4b1a7ee2a2 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] @@ -33,9 +33,8 @@ (get multiaccount :profile-pictures-visibility))) (defn- replace-contact-image-uri - [contact port public-key font-file] - (let [theme (theme/get-theme) - {:keys [images ens-name customization-color]} contact + [contact port public-key font-file theme] + (let [{:keys [images ens-name customization-color]} contact images (reduce (fn [acc image] (let [image-name (:type image) @@ -75,9 +74,9 @@ (assoc contact :images images))) (defn- reduce-contacts-image-uri - [contacts port font-file] + [contacts port font-file theme] (reduce-kv (fn [acc public-key contact] - (let [contact (replace-contact-image-uri contact port public-key font-file)] + (let [contact (replace-contact-image-uri contact port public-key font-file theme)] (assoc acc public-key contact))) {} contacts)) @@ -89,9 +88,10 @@ :<- [:multiaccount/public-key] :<- [:mediaserver/port] :<- [:initials-avatar-font-file] - (fn [[contacts profile-pictures-visibility public-key port font-file]] + :<- [:theme] + (fn [[contacts profile-pictures-visibility public-key port font-file theme]] (let [contacts (contact.db/enrich-contacts contacts profile-pictures-visibility public-key)] - (reduce-contacts-image-uri contacts port font-file)))) + (reduce-contacts-image-uri contacts port font-file theme)))) (re-frame/reg-sub :contacts/active @@ -180,10 +180,10 @@ (count blocked-contacts))) (defn- enrich-contact - [_ contact-identity ens-name port font-file] + [_ contact-identity ens-name port font-file theme] (let [contact (contact.db/enrich-contact (contact.db/public-key-and-ens-name->new-contact contact-identity ens-name))] - (replace-contact-image-uri contact port contact-identity font-file))) + (replace-contact-image-uri contact port contact-identity font-file theme))) (re-frame/reg-sub :contacts/current-contact @@ -192,11 +192,12 @@ :<- [:contacts/current-contact-ens-name] :<- [:mediaserver/port] :<- [:initials-avatar-font-file] - (fn [[contacts contact-identity ens-name port font-file]] + :<- [:theme] + (fn [[contacts contact-identity ens-name port font-file theme]] (let [contact (get contacts contact-identity)] (cond-> contact (nil? contact) - (enrich-contact contact-identity ens-name port font-file))))) + (enrich-contact contact-identity ens-name port font-file theme))))) (re-frame/reg-sub :contacts/contact-by-identity diff --git a/src/status_im/subs/profile.cljs b/src/status_im/subs/profile.cljs index 441bfa02bc..fc66578d65 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] @@ -37,7 +37,8 @@ :<- [:profile/profiles-overview] :<- [:mediaserver/port] :<- [:initials-avatar-font-file] - (fn [[profiles port font-file] [_ target-key-uid]] + :<- [:theme] + (fn [[profiles port font-file theme] [_ target-key-uid]] (let [{:keys [images ens-name? customization-color] :as profile} (get profiles target-key-uid) image-name (-> images first :type) override-ring? (when ens-name? false)] @@ -48,13 +49,13 @@ :ratio pixel-ratio/ratio :image-name image-name :key-uid target-key-uid - :theme (theme/get-theme) + :theme 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 theme :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) :customization-color customization-color :override-ring? override-ring? @@ -231,11 +232,10 @@ (pos? (count (get multiaccount :images))))) (defn- replace-multiaccount-image-uri - [profile ens-names port font-file avatar-opts] + [profile ens-names port font-file avatar-opts theme] (let [{:keys [key-uid ens-name? images customization-color]} profile ens-name? (or ens-name? (seq ens-names)) - theme (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 @@ -269,8 +269,9 @@ :<- [:ens/current-names] :<- [:mediaserver/port] :<- [:initials-avatar-font-file] - (fn [[profile ens-names port font-file] [_ avatar-opts]] - (replace-multiaccount-image-uri profile ens-names port font-file avatar-opts))) + :<- [:theme] + (fn [[profile ens-names port font-file theme] [_ avatar-opts]] + (replace-multiaccount-image-uri profile ens-names port font-file avatar-opts theme))) (re-frame/reg-sub :profile/image diff --git a/src/status_im/subs/root.cljs b/src/status_im/subs/root.cljs index dbaba2b4e1..f562301acc 100644 --- a/src/status_im/subs/root.cljs +++ b/src/status_im/subs/root.cljs @@ -168,3 +168,6 @@ ;;debug (when js/goog.DEBUG (reg-root-key-sub :dev/previewed-component :dev/previewed-component)) + +;;theme +(reg-root-key-sub :theme :theme) diff --git a/src/test_helpers/component.cljs b/src/test_helpers/component.cljs index abf30c565c..7e6f03c489 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 1a52e7ee12..8f780b3bd1 100644 --- a/src/tests/contract_test/wallet_test.cljs +++ b/src/tests/contract_test/wallet_test.cljs @@ -110,24 +110,25 @@ [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 d1ef8019b4..834933087a 100644 --- a/src/utils/image_server.cljs +++ b/src/utils/image_server.cljs @@ -189,8 +189,8 @@ [:=> [:cat [:map - [:color string?] [:theme :schema.common/theme] + [:color string?] [:background-color {:optional true} [:maybe string?]] [:size number?] [:ratio float?] From ea4578b3e027a1e0c94243fa0034b877ef73342d Mon Sep 17 00:00:00 2001 From: Churikova Tetiana Date: Thu, 18 Apr 2024 14:28:14 +0200 Subject: [PATCH 3/4] pipleine: update doc --- doc/pipeline_process.md | 37 ++++++++++++++++++------------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/doc/pipeline_process.md b/doc/pipeline_process.md index a71c9e9a9a..8d73e26282 100644 --- a/doc/pipeline_process.md +++ b/doc/pipeline_process.md @@ -8,7 +8,7 @@ The generally accepted requirements for its use are described below: - Once a PR is created, it moves to the ```REVIEW``` column where a review will be requested automatically. - You can also request a review inside the PR from a particular person if needed. - When creating a PR, do not forget to assign it to yourself. -- Also in case the PR adds new functionality, a short description would be appreciated. +- Also in case the PR adds new functionality, a description **MUST** be added. ### What if the work is still in progress? @@ -28,26 +28,11 @@ Ready for testing, a PR should meet the following criteria: 4. Has the label: `request-manual-qa` or `skip-manual-qa`. 5. PRs **MUST** identify what area is affected and should have a description. -**NOTE:** Make sure that QAs are OK with that - -### Adding `skip-manual-qa` - -- Please ask another team member before adding the `skip-manual-qa` label (PR/Status community/DMs) so that there's a second opinion. -- The PR MUST have a proper reasoning why manual QA is skipped. -- The PR MUST include the steps of testing that has been done by the developer prior to moving it forward. -**From the perspective of a developer it means that once work on PR is finished:** - -1. It should be rebased to the latest `develop`. If there are conflicts - they should be resolved if possible. -2. If the PR was in the `Contributor` column - it should be moved to `Review` column. -3. Wait for the review. -4. Make sure that after review and before requesting manual QA your PR is rebased to current develop. -5. The PR **MUST** be moved to the E2E column when it is ready for testing (**mandatory for all PRs**). -That will also trigger e2e tests run. QAs are monitoring PRs from E2E column and take it into test. - -6. After that - PR will be taken into manual testing by the QA team. ### E2E tests and analyzing the results +The PR **MUST** be moved to the E2E column when it is ready for testing (**mandatory for all PRs**). +That will also trigger e2e tests run. QAs are monitoring PRs from E2E column and take it into test. This step cannot be skipped. So, at least one comment from the `status-im-auto` bot with results is a prerequisite for moving forward. Information on how to analyze tests can be found [here](https://github.com/status-im/status-mobile/blob/develop/doc/how-to-launch-e2e.md). Tests might be flaky, as they depend on infrastructure - SauceLabs and Waku. @@ -59,6 +44,20 @@ Please, respect this rule.** ## Testing PR +### Adding `skip-manual-qa` + +**Do not hesitate to use a `skip-manual-qa`** if you're sure that it is a simple flow and you checked it. +- Please ask another team member before adding the `skip-manual-qa` label (PR/Status community/DMs) so that there's a second opinion. +- The PR MUST have a proper reasoning why manual QA is skipped. +- The PR MUST include the steps of testing that has been done by the developer prior to moving it forward. + +**NOTE:** Make sure that QAs are OK with that; + +Before merging PRs, please make sure that information is added about how you tested the PRs, that e2s have been passed and their results have been reviewed. + +The QA team appreciates your help! + + ### Manual testing #### Prerequisites for manual testing @@ -99,7 +98,7 @@ There are three possible scenarios when the design review is completed: --- **Notes:** - If your PR has a long story and started from `develop` branch several days ago, please rebase it to current develop before adding label -- if PR can be tested by developer (in case of small changes) and/or developer is sure that the changes made cannot introduce a regression, then PR can be merged without manual testing. Also, currently, PRs are not manually tested if the changes relate only the design (creation of components, etc.) and do not affect the functionality. +- if PR can be tested by developer (in case of small changes) and/or developer is sure that the changes made cannot introduce a regression, then PR can be merged without manual testing. Also, currently, PRs are not manually tested if the changes relate only the design (creation of components, etc.) and do not affect the functionality (see `skip-manual-qa` label) --- #### Why my PR is in `Contributor` column? From 8f67f38de9c87681cb6d54dfb0ce210f11c76287 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Thu, 18 Apr 2024 18:12:29 +0300 Subject: [PATCH 4/4] [#19182] fix: shell share design feedback (#19617) Co-authored-by: Yevheniia Berdnyk --- .../components/share/share_qr_code/view.cljs | 22 +++++++++---------- src/status_im/contexts/shell/share/style.cljs | 3 ++- .../shell/share/wallet/component_spec.cljs | 7 +++--- .../contexts/shell/share/wallet/view.cljs | 2 +- test/appium/tests/critical/test_wallet.py | 20 ++++++++++++----- 5 files changed, 32 insertions(+), 22 deletions(-) diff --git a/src/quo/components/share/share_qr_code/view.cljs b/src/quo/components/share/share_qr_code/view.cljs index 7d86ef94d8..9f26fb54c0 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/src/quo/components/share/share_qr_code/view.cljs @@ -22,16 +22,6 @@ (defn- header [{:keys [on-legacy-press on-multichain-press address]}] [rn/view {:style style/header-container} - [tab/view - {:accessibility-label :share-qr-code-legacy-tab - :id :wallet-legacy-tab - :active-item-container-style style/header-tab-active - :item-container-style style/header-tab-inactive - :size 24 - :active (= :legacy address) - :on-press on-legacy-press} - (i18n/label :t/legacy)] - [rn/view {:style style/space-between-tabs}] [tab/view {:accessibility-label :share-qr-code-multichain-tab :id :wallet-multichain-tab @@ -40,7 +30,17 @@ :size 24 :active (= :multichain address) :on-press on-multichain-press} - (i18n/label :t/multichain)]]) + (i18n/label :t/multichain)] + [rn/view {:style style/space-between-tabs}] + [tab/view + {:accessibility-label :share-qr-code-legacy-tab + :id :wallet-legacy-tab + :active-item-container-style style/header-tab-active + :item-container-style style/header-tab-inactive + :size 24 + :active (= :legacy address) + :on-press on-legacy-press} + (i18n/label :t/legacy)]]) (defn- info-label [share-qr-code-type] diff --git a/src/status_im/contexts/shell/share/style.cljs b/src/status_im/contexts/shell/share/style.cljs index a5753fcf22..0249da936f 100644 --- a/src/status_im/contexts/shell/share/style.cljs +++ b/src/status_im/contexts/shell/share/style.cljs @@ -84,7 +84,8 @@ (def tabs-container {:padding-horizontal screen-padding - :margin-vertical 8}) + :margin-top 8 + :margin-bottom 16}) (def wip-style {:color colors/white diff --git a/src/status_im/contexts/shell/share/wallet/component_spec.cljs b/src/status_im/contexts/shell/share/wallet/component_spec.cljs index 82b1ecde40..076b6be10c 100644 --- a/src/status_im/contexts/shell/share/wallet/component_spec.cljs +++ b/src/status_im/contexts/shell/share/wallet/component_spec.cljs @@ -11,7 +11,8 @@ share-qr-code (h/get-by-label-text :share-qr-code)] ;; Fires on-layout since it's needed to render the content (h/fire-event :layout share-qr-code #js {:nativeEvent #js {:layout #js {:width 500}}}) - (rerender-fn [wallet-view/wallet-tab]))) + (rerender-fn [wallet-view/wallet-tab]) + (h/fire-event :press (h/get-by-label-text :share-qr-code-legacy-tab)))) (h/describe "share wallet addresses" (h/setup-restorable-re-frame) @@ -26,8 +27,8 @@ (h/test "should display the wallet tab" (render-wallet-view) - (-> (h/wait-for #(h/get-by-text "Wallet One")) - (.then (fn [] (h/is-truthy (h/get-by-text "Wallet One")))))) + (-> (h/expect (h/query-by-text "Wallet One")) + (h/is-truthy))) (h/test "should display the legacy account" (render-wallet-view) diff --git a/src/status_im/contexts/shell/share/wallet/view.cljs b/src/status_im/contexts/shell/share/wallet/view.cljs index dd9e0fa669..d82287916c 100644 --- a/src/status_im/contexts/shell/share/wallet/view.cljs +++ b/src/status_im/contexts/shell/share/wallet/view.cljs @@ -53,7 +53,7 @@ [{:keys [account index]}] (let [{window-width :width} (rn/get-window) selected-networks (reagent/atom constants/default-network-names) - wallet-type (reagent/atom :legacy) + wallet-type (reagent/atom :multichain) on-settings-press #(open-preferences selected-networks account) on-legacy-press #(reset! wallet-type :legacy) on-multichain-press #(reset! wallet-type :multichain)] diff --git a/test/appium/tests/critical/test_wallet.py b/test/appium/tests/critical/test_wallet.py index 6c1e6260c3..6c67590010 100644 --- a/test/appium/tests/critical/test_wallet.py +++ b/test/appium/tests/critical/test_wallet.py @@ -154,7 +154,7 @@ class TestWalletOneDevice(MultipleSharedDeviceTestCase): self.wallet_view.click_system_back_button() self.wallet_view.close_account_button.click_until_presence_of_element(self.home_view.show_qr_code_button) - self.wallet_view.just_fyi("Checking that the new wallet is added to the Sare QR Code menu") + self.wallet_view.just_fyi("Checking that the new wallet is added to the Share QR Code menu") self.home_view.show_qr_code_button.click() self.home_view.share_wallet_tab_button.click() if self.home_view.account_name_text.text != 'Account 1': @@ -162,10 +162,14 @@ class TestWalletOneDevice(MultipleSharedDeviceTestCase): self.home_view.qr_code_image_element.swipe_left_on_element() try: self.home_view.account_name_text.wait_for_element_text(text=new_account_name, wait_time=3) - if self.home_view.copy_wallet_address() != new_wallet_address.split(':')[-1]: - self.home_view.driver.fail("Incorrect address") except Failed: self.errors.append("Can't swipe between accounts, newly added account is not shown") + else: + shown_address = self.home_view.copy_wallet_address() + if set(shown_address.split(':')) != set(new_wallet_address.split(':')): + self.errors.append( + "Incorrect address '%s' is shown when swiping between accounts, expected one is '%s'" % ( + shown_address, new_wallet_address)) self.home_view.click_system_back_button() self.wallet_view.just_fyi("Removing newly added account") @@ -189,7 +193,7 @@ class TestWalletOneDevice(MultipleSharedDeviceTestCase): pytest.fail("Account to watch was not added") self.wallet_view.close_account_button.click_until_presence_of_element(self.home_view.show_qr_code_button) - self.wallet_view.just_fyi("Checking that the new wallet is added to the Sare QR Code menu") + self.wallet_view.just_fyi("Checking that the new wallet is added to the Share QR Code menu") self.home_view.show_qr_code_button.click() self.home_view.share_wallet_tab_button.click() if self.home_view.account_name_text.text != 'Account 1': @@ -197,10 +201,14 @@ class TestWalletOneDevice(MultipleSharedDeviceTestCase): self.home_view.qr_code_image_element.swipe_left_on_element() try: self.home_view.account_name_text.wait_for_element_text(text=new_account_name, wait_time=3) - if self.home_view.copy_wallet_address() != address_to_watch: - self.home_view.driver.fail("Incorrect address") except Failed: self.errors.append("Can't swipe between accounts, account to watch is not shown") + else: + shown_address = self.home_view.copy_wallet_address() + if set(shown_address.split(':')) != {'eth', 'arb1', 'opt', address_to_watch}: + self.home_view.driver.fail( + "Incorrect address '%s' is shown when swiping between accounts, expected one is '%s'" % ( + shown_address, ':'.join(address_to_watch))) self.home_view.click_system_back_button() self.wallet_view.just_fyi("Removing account to watch")