From 497af38a7fbd87f1efa466ef1d2a8663f7c1bc6d Mon Sep 17 00:00:00 2001 From: Gheorghe Pinzaru Date: Tue, 19 May 2020 13:40:39 +0300 Subject: [PATCH] Update usage for toolbars Replace all the usage of the button without component Use quo Fix tests List item in multiaccounts Use list items in contacts Fix welcome screen button Experiment long press Big list item Remove old bottom sheet Use bottom sheet Keycard Add error to list item Stickers panel button Images panel Fix z-index in profile Fix android crash Fix signing list item Try fixing test iOs gas sheet keyboard Disable root alert in e2e keycard signing sheet height Clean up bottom sheet events Replace flat list in profile Memorise the manual-close value for bottom sheet Mailserver QR scanner Fix e2e tests E2e fix 2 Fix e2e 3 Remove extra fn Reduce bridging time for animation Trick android layout Try hooks Fix profile missing ens-name Disable press on control in list-view allow disabling animations in list item Use simple list in wallet assets settings TBD - this screen should be rewritten from scratch. Now on every interaction the full list is re-rendered, also it makes the wallet main screen to re-render. Fix send sheet Handle long press in main thread UI fixes perf Update e2e fix missing user name in image long press Signed-off-by: Gheorghe Pinzaru --- .env | 1 + .env.e2e | 1 + .env.jenkins | 1 + .env.nightly | 1 + .env.release | 1 + .../java/im/status/ethereum/MainActivity.java | 2 +- src/mocks/js_dependencies.cljs | 2 +- src/quo/animated.cljs | 11 +- src/quo/components/animated/pressable.cljs | 137 +++--- src/quo/components/animated_header.cljs | 9 +- src/quo/components/bottom_sheet/view.cljs | 206 +++++---- src/quo/components/button/view.cljs | 29 +- src/quo/components/controls/view.cljs | 8 +- src/quo/components/header.cljs | 28 +- src/quo/components/list/item.cljs | 169 +++++--- src/quo/react_native.cljs | 14 + src/status_im/events.cljs | 33 +- src/status_im/hardwallet/recovery.cljs | 2 +- .../network/ui/edit_network/styles.cljs | 5 +- .../network/ui/edit_network/views.cljs | 12 +- .../network/ui/network_details/views.cljs | 8 +- src/status_im/network/ui/styles.cljs | 6 - .../ui/components/bottom_sheet/core.cljs | 5 +- .../ui/components/bottom_sheet/events.cljs | 8 + .../ui/components/bottom_sheet/styles.cljs | 49 --- .../ui/components/bottom_sheet/view.cljs | 199 --------- src/status_im/ui/components/button.cljs | 84 ---- .../ui/components/chat_icon/screen.cljs | 27 +- .../ui/components/common/common.cljs | 37 -- .../ui/components/common/styles.cljs | 19 - src/status_im/ui/components/list/styles.cljs | 78 ---- src/status_im/ui/components/list/views.cljs | 86 +--- .../ui/components/list_item/styles.cljs | 199 --------- .../ui/components/list_item/views.cljs | 410 ------------------ src/status_im/ui/components/toolbar.cljs | 36 +- src/status_im/ui/components/topbar.cljs | 22 +- src/status_im/ui/screens/about_app/views.cljs | 74 ++-- .../ui/screens/add_new/new_chat/views.cljs | 18 +- .../ui/screens/advanced_settings/views.cljs | 108 +++-- .../ui/screens/appearance/views.cljs | 4 +- src/status_im/ui/screens/biometric/views.cljs | 19 +- .../edit_bootnode/styles.cljs | 9 - .../edit_bootnode/views.cljs | 85 ++-- .../ui/screens/browser/accounts.cljs | 19 +- .../ui/screens/browser/open_dapp/styles.cljs | 1 - .../ui/screens/browser/open_dapp/views.cljs | 31 +- .../ui/screens/browser/permissions/views.cljs | 30 +- .../ui/screens/chat/extensions/views.cljs | 10 +- src/status_im/ui/screens/chat/group.cljs | 8 +- .../ui/screens/chat/image/preview/views.cljs | 17 +- .../ui/screens/chat/image/views.cljs | 46 +- .../ui/screens/chat/input/send_button.cljs | 8 +- src/status_im/ui/screens/chat/sheets.cljs | 300 +++++++------ .../ui/screens/chat/stickers/views.cljs | 29 +- .../ui/screens/chat/styles/input/input.cljs | 2 +- .../ui/screens/chat/styles/main.cljs | 5 - src/status_im/ui/screens/chat/views.cljs | 7 - .../ui/screens/contacts_list/views.cljs | 37 +- .../ui/screens/dapps_permissions/views.cljs | 36 +- src/status_im/ui/screens/ens/views.cljs | 184 ++++---- src/status_im/ui/screens/group/views.cljs | 96 ++-- .../screens/hardwallet/frozen_card/view.cljs | 20 +- .../ui/screens/hardwallet/pin/styles.cljs | 2 +- .../ui/screens/hardwallet/settings/views.cljs | 87 ++-- .../ui/screens/help_center/views.cljs | 28 +- .../ui/screens/home/sheet/views.cljs | 39 +- src/status_im/ui/screens/home/styles.cljs | 3 - src/status_im/ui/screens/home/views.cljs | 32 +- .../ui/screens/home/views/inner_item.cljs | 90 ++-- src/status_im/ui/screens/intro/styles.cljs | 31 +- src/status_im/ui/screens/intro/views.cljs | 127 +++--- .../screens/keycard/components/turn_nfc.cljs | 11 +- .../screens/keycard/keycard_interaction.cljs | 3 +- .../ui/screens/keycard/onboarding/views.cljs | 102 ++--- .../ui/screens/keycard/recovery/views.cljs | 88 ++-- src/status_im/ui/screens/keycard/views.cljs | 137 +++--- .../mobile_network_settings/sheets.cljs | 26 +- .../screens/mobile_network_settings/view.cljs | 17 +- .../screens/multiaccounts/login/styles.cljs | 16 - .../ui/screens/multiaccounts/login/views.cljs | 38 +- .../screens/multiaccounts/recover/views.cljs | 65 ++- .../ui/screens/multiaccounts/sheets.cljs | 15 +- .../ui/screens/multiaccounts/styles.cljs | 29 +- .../ui/screens/multiaccounts/views.cljs | 74 ++-- .../edit_mailserver/styles.cljs | 5 - .../edit_mailserver/views.cljs | 105 ++--- src/status_im/ui/screens/pairing/views.cljs | 12 +- .../privacy_and_security_settings/views.cljs | 133 +++--- .../ui/screens/profile/components/sheets.cljs | 15 +- .../ui/screens/profile/contact/views.cljs | 48 +- src/status_im/ui/screens/profile/db.cljs | 4 - .../ui/screens/profile/group_chat/views.cljs | 64 +-- .../ui/screens/profile/seed/styles.cljs | 3 - .../ui/screens/profile/seed/views.cljs | 114 ++--- .../profile/tribute_to_talk/styles.cljs | 12 - .../profile/tribute_to_talk/views.cljs | 47 +- .../ui/screens/profile/user/styles.cljs | 3 +- .../ui/screens/profile/user/views.cljs | 268 ++++++------ .../ui/screens/qr_scanner/views.cljs | 16 +- src/status_im/ui/screens/routing/core.cljs | 1 - .../ui/screens/routing/intro_login_stack.cljs | 5 +- src/status_im/ui/screens/signing/sheets.cljs | 15 +- src/status_im/ui/screens/signing/views.cljs | 242 ++++++----- .../ui/screens/sync_settings/views.cljs | 77 ++-- src/status_im/ui/screens/views.cljs | 43 +- .../ui/screens/wallet/account/views.cljs | 25 +- .../wallet/account_settings/views.cljs | 25 +- .../ui/screens/wallet/accounts/sheets.cljs | 73 ++-- .../ui/screens/wallet/accounts/views.cljs | 41 +- .../ui/screens/wallet/add_new/views.cljs | 39 +- .../collectibles/cryptokitties/views.cljs | 12 +- .../collectibles/cryptostrikers/views.cljs | 6 +- .../wallet/collectibles/etheremon/views.cljs | 6 +- .../wallet/collectibles/kudos/views.cljs | 6 +- .../wallet/collectibles/superrare/views.cljs | 9 +- .../screens/wallet/custom_tokens/views.cljs | 29 +- .../ui/screens/wallet/request/views.cljs | 13 +- .../ui/screens/wallet/send/sheets.cljs | 47 +- .../ui/screens/wallet/send/views.cljs | 146 ++++--- .../ui/screens/wallet/settings/views.cljs | 56 ++- .../screens/wallet/signing_phrase/views.cljs | 30 +- .../ui/screens/wallet/transactions/views.cljs | 28 +- .../atomic/account_management/test_keycard.py | 2 +- .../atomic/account_management/test_recover.py | 1 + .../test_wallet_management.py | 9 +- .../transactions/test_dapps_transactions.py | 2 +- .../transactions/test_keycard_wallet.py | 2 +- .../tests/atomic/transactions/test_wallet.py | 4 +- test/appium/views/base_element.py | 2 +- test/appium/views/base_view.py | 2 +- test/appium/views/chat_view.py | 2 +- .../multi_account_color.png | Bin 1543 -> 1286 bytes test/appium/views/profile_view.py | 2 +- test/appium/views/recover_access_view.py | 2 +- test/appium/views/send_transaction_view.py | 2 +- test/appium/views/sign_in_view.py | 2 +- test/appium/views/wallet_view.py | 9 +- 137 files changed, 2383 insertions(+), 3691 deletions(-) delete mode 100644 src/status_im/ui/components/bottom_sheet/styles.cljs delete mode 100644 src/status_im/ui/components/bottom_sheet/view.cljs delete mode 100644 src/status_im/ui/components/button.cljs delete mode 100644 src/status_im/ui/components/list_item/styles.cljs delete mode 100644 src/status_im/ui/components/list_item/views.cljs diff --git a/.env b/.env index a639b47094..9c0cfe4beb 100644 --- a/.env +++ b/.env @@ -23,3 +23,4 @@ STATUS_GO_PROTOCOL=0 STATUS_GO_ENABLE_NIMBUS=0 KEYCARD_TEST_MENU=0 QR_READ_TEST_MENU=1 +ENABLE_ROOT_ALERT=1 diff --git a/.env.e2e b/.env.e2e index d61e57e955..cb0a0bee6a 100644 --- a/.env.e2e +++ b/.env.e2e @@ -23,3 +23,4 @@ TOOLTIP_EVENTS=1 COMMANDS_ENABLED=1 KEYCARD_TEST_MENU=1 QR_READ_TEST_MENU=1 +ENABLE_ROOT_ALERT=0 \ No newline at end of file diff --git a/.env.jenkins b/.env.jenkins index bef6e03065..18c27184bf 100644 --- a/.env.jenkins +++ b/.env.jenkins @@ -21,3 +21,4 @@ CONTRACT_NODES=1 MOBILE_UI_FOR_DESKTOP=1 STATUS_GO_ENABLE_NIMBUS=0 KEYCARD_TEST_MENU=0 +ENABLE_ROOT_ALERT=1 \ No newline at end of file diff --git a/.env.nightly b/.env.nightly index 4b516cc816..90c5fc44fd 100644 --- a/.env.nightly +++ b/.env.nightly @@ -18,3 +18,4 @@ PARTITIONED_TOPIC=0 CONTRACT_NODES=1 MOBILE_UI_FOR_DESKTOP=1 HARDWALLET_ENABLED=1 +ENABLE_ROOT_ALERT=1 \ No newline at end of file diff --git a/.env.release b/.env.release index fa83e76841..adc2b27867 100644 --- a/.env.release +++ b/.env.release @@ -17,3 +17,4 @@ RPC_NETWORKS_ONLY=1 PARTITIONED_TOPIC=0 MOBILE_UI_FOR_DESKTOP=1 HARDWALLET_ENABLED=1 +ENABLE_ROOT_ALERT=1 \ No newline at end of file diff --git a/android/app/src/main/java/im/status/ethereum/MainActivity.java b/android/app/src/main/java/im/status/ethereum/MainActivity.java index fcaf643264..1c8ba89b49 100644 --- a/android/app/src/main/java/im/status/ethereum/MainActivity.java +++ b/android/app/src/main/java/im/status/ethereum/MainActivity.java @@ -199,7 +199,7 @@ public class MainActivity extends ReactFragmentActivity private static final Integer FREQUENCY_OF_REMINDER_IN_PERCENT = 5; private boolean shouldShowRootedNotification() { - if (RootUtil.isDeviceRooted()) { + if (RootUtil.isDeviceRooted() && BuildConfig.ENABLE_ROOT_ALERT == "1") { if (userRejectedRootedNotification()) { return ((Math.random() * 100) < FREQUENCY_OF_REMINDER_IN_PERCENT); } else return true; diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index e1a3ab4897..910249cde0 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -17,7 +17,7 @@ (def react-native (clj->js {:NativeModules {:RNGestureHandlerModule {:Direction (fn [])} - :ReanimatedModule {:configureProps (fn [])}} + :ReanimatedModule {:configureProps (fn [])}} :View {} :FlatList {} diff --git a/src/quo/animated.cljs b/src/quo/animated.cljs index 6402746575..44dd23b824 100644 --- a/src/quo/animated.cljs +++ b/src/quo/animated.cljs @@ -174,11 +174,14 @@ (defn loop* [opts] (ocall redash "loop" (clj->js opts))) -(defn use-value [value] - (.useValue ^js redash value)) +(def use-value (.-useValue ^js redash)) -(defn use-clock [] - (.useClock ^js redash)) +(def use-clock (.-useClock ^js redash)) + +(defn use-gesture [opts] + (let [gesture (.useGestureHandler ^js redash (clj->js opts))] + {:onHandlerStateChange (.-onHandlerStateChange ^js gesture) + :onGestureEvent (.-onGestureEvent ^js gesture)})) (defn snap-point [value velocity snap-points] (.snapPoint ^js redash value velocity (to-array snap-points))) diff --git a/src/quo/components/animated/pressable.cljs b/src/quo/components/animated/pressable.cljs index 9b6a57b199..4360f29f41 100644 --- a/src/quo/components/animated/pressable.cljs +++ b/src/quo/components/animated/pressable.cljs @@ -1,5 +1,8 @@ (ns quo.components.animated.pressable (:require [quo.animated :as animated] + [quo.react :as react] + [reagent.core :as reagent] + [cljs-bean.core :as bean] [quo.gesture-handler :as gesture-handler])) (def long-press-duration 500) @@ -38,6 +41,12 @@ :foreground {:transform [{:scale (animated/mix animation 1 scale-down-small)}] :opacity (animated/mix animation 1 opactiy)}}) +(defmethod type->animation :scale + [{:keys [animation]}] + {:background {:opacity 0} + :foreground {:transform [{:scale (animated/mix animation 1 scale-down-small)}] + :opacity (animated/mix animation 1 opactiy)}}) + (def absolute-fill {:top 0 :bottom 0 @@ -45,58 +54,76 @@ :right 0 :position :absolute}) -(defn pressable [] - (let [state (animated/value (:undetermined gesture-handler/states)) - active (animated/eq state (:began gesture-handler/states)) - gesture-handler (animated/on-gesture {:state state}) - duration (animated/cond* active time-in time-out) - long-pressed (animated/value 0) - long-duration (animated/cond* active long-press-duration 0) - long-timing (animated/with-timing-transition active - {:duration long-duration}) - animation (animated/with-timing-transition active - {:duration duration - :easing (:ease-in animated/easings)})] - (fn [{:keys [background-color border-radius type disabled - on-press on-long-press on-press-start - accessibility-label] - :or {border-radius 0 - type :primary}} - & children] - (let [{:keys [background foreground]} - (type->animation {:type type - :animation animation}) - handle-press (fn [] (when on-press (on-press))) - handle-press-start (fn [] (when on-press-start (on-press-start))) - handle-long-press (fn [] (when on-long-press (on-long-press)))] - [:<> - (when on-long-press - [animated/code - {:exec (animated/block - [(animated/cond* (animated/eq long-timing 1) - (animated/set long-pressed 1)) - (animated/cond* long-pressed - [(animated/set long-pressed 0) - (animated/call* [] handle-long-press) - (animated/set state (:undetermined gesture-handler/states))])])}]) - [animated/code - {:key (str on-press on-long-press on-press-start) - :exec (animated/on-change state - [(animated/cond* (animated/eq state (:began gesture-handler/states)) - (animated/call* [] handle-press-start)) - (animated/cond* (animated/and* (animated/eq state (:end gesture-handler/states)) - (animated/not* long-pressed)) - [(animated/call* [] handle-press) - (animated/set state (:undetermined gesture-handler/states))])])}] - [gesture-handler/tap-gesture-handler - (merge gesture-handler - {:shouldCancelWhenOutside true - :enabled (not disabled)}) - [animated/view {:accessible true - :accessibility-label accessibility-label} - [animated/view {:style (merge absolute-fill - background - {:background-color background-color - :border-radius border-radius})}] - (into [animated/view {:style foreground}] - children)]]])))) +(defn pressable-hooks [props] + (let [{background-color :bgColor + border-radius :borderRadius + type :type + disabled :disabled + on-press :onPress + on-long-press :onLongPress + on-press-start :onPressStart + accessibility-label :accessibilityLabel + children :children + :or {border-radius 0 + type "primary"}} + (bean/bean props) + long-press-ref (react/create-ref) + state (animated/use-value (:undetermined gesture-handler/states)) + active (animated/eq state (:began gesture-handler/states)) + gesture-handler (animated/use-gesture {:state state}) + animation (react/use-memo + (fn [] + (animated/with-timing-transition active + {:duration (animated/cond* active time-in time-out) + :easing (:ease-in animated/easings)})) + []) + {:keys [background + foreground]} (react/use-memo + (fn [] + (type->animation {:type (keyword type) + :animation animation})) + [type]) + handle-press (fn [] (when on-press (on-press))) + handle-press-start (fn [] (when on-press-start (on-press-start))) + long-gesture-handler (fn [^js evt] + (when (and on-long-press + (= (-> evt .-nativeEvent .-state) + (:active gesture-handler/states))) + (on-long-press) + (animated/set-value state (:undetermined gesture-handler/states))))] + (animated/code! + (fn [] + (when on-press-start + (animated/cond* (animated/eq state (:began gesture-handler/states)) + (animated/call* [] handle-press-start)))) + [on-press-start]) + (animated/code! + (fn [] + (when on-press + (animated/cond* (animated/eq state (:end gesture-handler/states)) + [(animated/set state (:undetermined gesture-handler/states)) + (animated/call* [] handle-press)]))) + [on-press]) + (reagent/as-element + [gesture-handler/long-press-gesture-handler + {:enabled (boolean (and on-long-press (not disabled))) + :on-handler-state-change long-gesture-handler + :min-duration-ms long-press-duration + :ref long-press-ref} + [animated/view {:accessible true + :accessibility-label accessibility-label} + [gesture-handler/tap-gesture-handler + (merge gesture-handler + {:shouldCancelWhenOutside true + :wait-for long-press-ref + :enabled (boolean (and (or on-press on-long-press on-press-start) + (not disabled)))}) + [animated/view + [animated/view {:style (merge absolute-fill + background + {:background-color background-color + :border-radius border-radius})}] + (into [animated/view {:style foreground}] + (react/get-children children))]]]]))) + +(def pressable (reagent/adapt-react-class (react/memo pressable-hooks))) diff --git a/src/quo/components/animated_header.cljs b/src/quo/components/animated_header.cljs index 26ecb55c34..a237754191 100644 --- a/src/quo/components/animated_header.cljs +++ b/src/quo/components/animated_header.cljs @@ -5,7 +5,6 @@ [quo.components.safe-area :as safe-area] [quo.design-system.colors :as colors] [quo.platform :as platform] - [quo.react-native :as rn] [reagent.core :as reagent])) (defn header-wrapper-style [{:keys [value offset]}] @@ -18,7 +17,8 @@ :outputRange [0 4] :extrapolate (:clamp animated/extrapolate)})}) (when (and offset platform/ios?) - {:shadow-opacity (animated/interpolate + {:z-index 2 + :shadow-opacity (animated/interpolate value {:inputRange [0 offset] :outputRange [0 1] @@ -66,8 +66,9 @@ :title-align :left} (dissoc props :extended-header))]] (into [animated/scroll-view {:on-scroll on-scroll - :scrollEventThrottle 1} - [rn/view {:pointer-events :box-none} + :style {:z-index 1} + :scrollEventThrottle 16} + [animated/view {:pointer-events :box-none} [animated/view {:pointer-events :box-none :on-layout on-layout} [extended-header {:value y diff --git a/src/quo/components/bottom_sheet/view.cljs b/src/quo/components/bottom_sheet/view.cljs index 94100ec41e..961aadbef6 100644 --- a/src/quo/components/bottom_sheet/view.cljs +++ b/src/quo/components/bottom_sheet/view.cljs @@ -21,10 +21,12 @@ ;; NOTE(Ferossgp): RNGH does not work in modal react native (defn modal [{:keys [visible] :as props} & children] (if platform/android? - (when visible (into [:<>] children)) + (into [rn/view {:style styles/container + :pointer-events (if visible :box-none :none)}] + children) (into [rn/modal props] children))) -(defn bottom-sheet-raw [props] +(defn bottom-sheet-hooks [props] (let [{on-cancel :onCancel disable-drag? :disableDrag? show-handle? :showHandle? @@ -37,86 +39,102 @@ back-button-cancel true}} (bean/bean props) + {:keys [on-layout height]} + (rn/use-layout) {window-height :height} (rn/use-window-dimensions) + {:keys [keyboard-shown keyboard-height]} + (rn/use-keyboard) safe-area (safe-area/use-safe-area) + min-height (+ (* styles/vertical-padding 2) (:bottom safe-area)) max-height (- window-height (:top safe-area) styles/margin-top) - content-height (react/state 0) visible (react/state false) - on-close (fn [] - (when @visible - (reset! visible false) - (when on-cancel (on-cancel)))) - master-translation-y (animated/use-value 0) master-velocity-y (animated/use-value (:undetermined gesture-handler/states)) master-state (animated/use-value (:undetermined gesture-handler/states)) tap-state (animated/use-value 0) manual-open (animated/use-value 0) - manual-close (animated/value 0) + manual-close (animated/use-value 0) offset (animated/use-value 0) clock (animated/use-clock) body-ref (react/create-ref) master-ref (react/create-ref) - tap-gesture-handler (animated/on-gesture {:state tap-state}) - on-master-event (animated/event [{:nativeEvent - {:translationY master-translation-y - :state master-state - :velocityY master-velocity-y}}]) + tap-gesture-handler (animated/use-gesture {:state tap-state}) + on-master-event (animated/use-gesture + {:translationY master-translation-y + :state master-state + :velocityY master-velocity-y}) on-body-event on-master-event - sheet-height (min max-height @content-height) - open-snap-point (* -1 sheet-height) - close-snap-point 0 - close-sheet (fn [] - (animated/set-value manual-close 1)) - open-sheet (fn [] - (animated/set-value manual-open 1)) - on-snap (fn [pos] - (when (= close-snap-point (aget pos 0)) - (on-close))) - resistance (animated/cond* (animated/less-or-eq master-translation-y 0) - (animated/divide master-translation-y 2) - master-translation-y) - translate-y (animated/with-easing - {:value resistance - :velocity master-velocity-y - :offset offset - :state master-state - :on-snap on-snap - :snap-points [open-snap-point close-snap-point]}) - opacity (animated/cond* - open-snap-point - (animated/interpolate - translate-y - {:inputRange [(animated/multiply open-snap-point opacity-coeff) 0] - :outputRange [1 0] - :extrapolate (:clamp animated/extrapolate)})) - on-layout (fn [evt] - (->> ^js evt - .-nativeEvent - .-layout - .-height - (+ styles/border-radius) - (reset! content-height)) - (js/requestAnimationFrame open-sheet))] + sheet-height (min max-height + (+ styles/border-radius height)) + + open-snap-point (animated/use-value 0) + close-snap-point 0 + on-close (fn [] + (when @visible + (reset! visible false) + (when on-cancel + (on-cancel)))) + close-sheet (fn [] + (animated/set-value manual-close 1)) + on-snap (fn [pos] + (when (= close-snap-point (aget pos 0)) + (on-close))) + interrupted (animated/and* (animated/eq master-state (:began gesture-handler/states)) + (animated/clock-running clock)) + translate-y (react/use-memo + (fn [] + (animated/with-easing + {:value (animated/cond* (animated/less-or-eq master-translation-y 0) + (animated/divide master-translation-y 2) + master-translation-y) + :velocity master-velocity-y + :offset offset + :state master-state + :on-snap on-snap + :snap-points [open-snap-point close-snap-point]})) + [on-close]) + opacity (react/use-memo + (fn [] + (animated/cond* + open-snap-point + (animated/interpolate + translate-y + {:inputRange [(animated/multiply open-snap-point opacity-coeff) 0] + :outputRange [1 0] + :extrapolate (:clamp animated/extrapolate)}))) + [])] (animated/code! (fn [] (animated/block - [(animated/on-change tap-state - [(animated/cond* (animated/and* (animated/eq tap-state (:end gesture-handler/states)) - (animated/not* manual-close)) - [(animated/set manual-close 1) - (animated/set tap-state (:undetermined gesture-handler/states))])]) - (animated/cond* manual-open + [(animated/cond* (animated/and* interrupted manual-open) + [(animated/set manual-open 0) + (animated/set offset open-snap-point) + (animated/stop-clock clock)]) + (animated/cond* (animated/and* manual-open + (animated/not* manual-close)) [(animated/set offset (animated/re-spring {:from offset :to open-snap-point :clock clock :config spring-config})) (animated/cond* (animated/not* (animated/clock-running clock)) - (animated/set manual-open 0))]) - (animated/cond* (animated/and* manual-close - (animated/not* manual-open)) + (animated/set manual-open 0))])])) + []) + (animated/code! + (fn [] + (animated/block + [(animated/cond* (animated/and* interrupted manual-close) + [(animated/set manual-close 0) + (animated/set offset close-snap-point) + (animated/call* [] on-close) + (animated/stop-clock clock)]) + (animated/cond* (animated/eq tap-state (:end gesture-handler/states)) + [(animated/cond* (animated/and* (animated/not* manual-close)) + [(animated/stop-clock clock) + (animated/set manual-close 1)]) + (animated/set tap-state (:undetermined gesture-handler/states))]) + (animated/cond* manual-close [(animated/set offset (animated/re-timing {:from offset :to close-snap-point @@ -125,14 +143,24 @@ :duration close-duration})) (animated/cond* (animated/not* (animated/clock-running clock)) [(animated/set manual-close 0) + (animated/set manual-open 0) (animated/call* [] on-close)])])])) - [open-snap-point on-close]) + [on-cancel]) + (animated/code! + (fn [] + (when (and (> height min-height) + @visible) + (animated/block + [(animated/stop-clock clock) + (animated/set open-snap-point (* -1 sheet-height)) + (animated/set manual-open 1)]))) + [height @visible]) ;; NOTE(Ferossgp): Remove me when RNGH will suport modal (rn/use-back-handler (fn [] (when back-button-cancel (close-sheet)) - true)) + @visible)) (react/effect! (fn [] (cond @@ -145,14 +173,14 @@ (close-sheet))) [visible?]) (reagent/as-element - [rn/modal {:visible @visible - :transparent true - :status-bar-translucent true - :presentation-style :overFullScreen - :hardware-accelerated true - :on-request-close (fn [] - (when back-button-cancel - (close-sheet)))} + [modal {:visible @visible + :transparent true + :status-bar-translucent true + :presentation-style :overFullScreen + :hardware-accelerated true + :on-request-close (fn [] + (when back-button-cancel + (close-sheet)))} [rn/view {:style styles/container :pointer-events :box-none} [gesture-handler/tap-gesture-handler (merge {:enabled backdrop-dismiss?} @@ -162,30 +190,34 @@ [animated/view {:style (merge (styles/content-container window-height) {:transform [{:translateY translate-y} {:translateY (* window-height 2)}]})} - [gesture-handler/pan-gesture-handler {:ref master-ref - :wait-for body-ref - :enabled (not disable-drag?) - :onGestureEvent on-master-event - :onHandlerStateChange on-master-event} + [gesture-handler/pan-gesture-handler (merge on-master-event + {:ref master-ref + :wait-for body-ref + :enabled (not disable-drag?)}) [animated/view {:style styles/content-header} (when show-handle? [rn/view {:style styles/handle}])]] - [gesture-handler/pan-gesture-handler {:ref body-ref - :wait-for master-ref - :enabled (and (not disable-drag?) - (not= sheet-height max-height)) - :onGestureEvent on-body-event - :onHandlerStateChange on-body-event} - [animated/view {:pointer-events :box-none - :height sheet-height} + [gesture-handler/pan-gesture-handler (merge on-body-event + {:ref body-ref + :wait-for master-ref + :enabled (and (not disable-drag?) + (not= sheet-height max-height))}) + [animated/view {:height sheet-height} [animated/scroll-view {:bounces false :flex 1 :scroll-enabled (= sheet-height max-height)} - [animated/view {:style {:padding-top styles/vertical-padding - :padding-bottom (+ styles/vertical-padding - (:bottom safe-area))} + [animated/view {:style (merge + (when (and platform/android? (not @visible)) + ;; NOTE(Ferossgp): Remove when RNGH will support modals, + ;; now need to trigger on-layout when closed + {:height 0}) + {:padding-top styles/vertical-padding + :padding-bottom (+ styles/vertical-padding + (if (and platform/ios? keyboard-shown) + keyboard-height + (:bottom safe-area)))}) :on-layout on-layout} - (into [:<>] (react/get-children children))]]]]]]]))) + (into [:<>] + (react/get-children children))]]]]]]]))) -(defn bottom-sheet [props & children] - (into [:> bottom-sheet-raw props] children)) +(def bottom-sheet (reagent/adapt-react-class (react/memo bottom-sheet-hooks))) diff --git a/src/quo/components/button/view.cljs b/src/quo/components/button/view.cljs index 0983c4ad16..30cbba9721 100644 --- a/src/quo/components/button/view.cljs +++ b/src/quo/components/button/view.cljs @@ -6,8 +6,7 @@ [quo.design-system.spacing :as spacing] [quo.components.text :as text] ;; FIXME: - [status-im.ui.components.icons.vector-icons :as icons] - [status-im.utils.label :as utils.label])) + [status-im.ui.components.icons.vector-icons :as icons])) (defn style-container [type] (merge {:height 44 @@ -16,8 +15,8 @@ :flex-direction :row} (case type :primary (:base spacing/padding-horizontal) - :secondary (:tiny spacing/padding-horizontal) - :icon {:padding-horizontal 2} + :secondary (:x-tiny spacing/padding-horizontal) + :icon {} nil))) (defn content-style [type] @@ -32,6 +31,9 @@ :main {:icon-color (:icon-04 @colors/theme) :background-color (:interactive-02 @colors/theme) :text-color (:text-04 @colors/theme)} + :icon {:icon-color (:icon-01 @colors/theme) + :background-color (:interactive-02 @colors/theme) + :text-color (:text-01 @colors/theme)} :negative {:icon-color (:negative-01 @colors/theme) :background-color (:negative-02 @colors/theme) :text-color (:negative-01 @colors/theme)} @@ -45,15 +47,18 @@ :background-color (:ui-01 @colors/theme) :text-color (:text-02 @colors/theme)})) -(defn button [{:keys [on-press disabled type theme before after icon +(defn button [{:keys [on-press disabled type theme before after haptic-feedback haptic-type on-long-press on-press-start - accessibility-label loading] + accessibility-label loading border-radius] :or {theme :main type :primary haptic-feedback true + border-radius 8 haptic-type :selection}} children] - (let [theme' (if disabled :disabled theme) + (let [theme' (cond + disabled :disabled + :else theme) {:keys [icon-color background-color text-color]} (themes theme') @@ -61,8 +66,8 @@ (when haptic-feedback (haptic/trigger haptic-type)))] - [animation/pressable (merge {:background-color background-color - :border-radius 8 + [animation/pressable (merge {:bg-color background-color + :border-radius border-radius :type type :disabled disabled :accessibility-label accessibility-label} @@ -90,13 +95,13 @@ {:opacity 0}))} (cond (= type :icon) - [icons/icon icon {:color icon-color}] + [icons/icon children {:color icon-color}] - (or (keyword? children) (string? children)) + (string? children) [text/text {:weight :medium :number-of-lines 1 :style {:color text-color}} - (utils.label/stringify children)] + children] (vector? children) children)] diff --git a/src/quo/components/controls/view.cljs b/src/quo/components/controls/view.cljs index cfa6ed67ec..c1c8c90e5e 100644 --- a/src/quo/components/controls/view.cljs +++ b/src/quo/components/controls/view.cljs @@ -48,7 +48,7 @@ (reagent/as-element [gh/tap-gesture-handler (merge tap-handler {:shouldCancelWhenOutside true - :enabled (not disabled)}) + :enabled (boolean (and onChange (not disabled)))}) [animated/view [component {:transition transition :hold hold}]]])))) @@ -66,6 +66,6 @@ [animated/view {:style (styles/check-icon-style transition hold)} [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]]) -(def switch (reagent/adapt-react-class (control-builder switch-view))) -(def radio (reagent/adapt-react-class (control-builder radio-view))) -(def checkbox (reagent/adapt-react-class (control-builder checkbox-view))) +(def switch (reagent/adapt-react-class (react/memo (control-builder switch-view)))) +(def radio (reagent/adapt-react-class (react/memo (control-builder radio-view)))) +(def checkbox (reagent/adapt-react-class (react/memo (control-builder checkbox-view)))) diff --git a/src/quo/components/header.cljs b/src/quo/components/header.cljs index 4a8f14e5a4..14baa5f947 100644 --- a/src/quo/components/header.cljs +++ b/src/quo/components/header.cljs @@ -1,12 +1,12 @@ (ns quo.components.header (:require [oops.core :refer [oget]] [quo.animated :as animated] + [quo.components.button.view :as button] [quo.components.text :as text] [quo.design-system.colors :as colors] [quo.design-system.spacing :as spacing] [quo.react-native :as rn] - [reagent.core :as reagent] - [status-im.ui.components.icons.vector-icons :as icons])) + [reagent.core :as reagent])) (def header-height 56) @@ -64,25 +64,21 @@ (def header-action-placeholder {:width (:base spacing/spacing)}) -(def header-icon-touchable - (merge - {:flex 1 - :align-items :center - :justify-content :center} - (:tiny spacing/padding-horizontal))) - (def element {:align-items :center :justify-content :center :flex 1}) (defn header-action [{:keys [icon label on-press accessibility-label]}] - [rn/touchable-opacity {:on-press on-press} - [rn/view (merge {:style header-icon-touchable} - (when accessibility-label - {:accessibility-label accessibility-label})) - (cond - icon [icons/icon icon {:color (:icon-01 @colors/theme)}] - label [text/text {:color :link} label])]]) + [button/button (merge {:on-press on-press} + (cond + icon {:type :icon + :theme :icon} + label {:type :secondary}) + (when accessibility-label + {:accessibility-label accessibility-label})) + (cond + icon icon + label label)]) (defn header-actions [{:keys [accessories component]}] [rn/view {:style element} diff --git a/src/quo/components/list/item.cljs b/src/quo/components/list/item.cljs index b6e562bd20..5703e8aa1c 100644 --- a/src/quo/components/list/item.cljs +++ b/src/quo/components/list/item.cljs @@ -1,10 +1,12 @@ (ns quo.components.list.item (:require [quo.react-native :as rn] [quo.platform :as platform] + [quo.haptic :as haptic] [quo.design-system.spacing :as spacing] [quo.design-system.colors :as colors] [quo.components.text :as text] [quo.components.controls.view :as controls] + [quo.components.tooltip :as tooltip] ;; FIXME: [status-im.ui.components.icons.vector-icons :as icons] [quo.components.animated.pressable :as animated])) @@ -47,6 +49,11 @@ :small 52 64)) +(defn size->single-title-size [size] + (case size + :small :base + :large)) + (defn container [{:keys [size]} & children] (into [rn/view {:style (merge (:tiny spacing/padding-horizontal) {:min-height (size->container-size size) @@ -59,9 +66,7 @@ (defn- icon-column [{:keys [icon icon-bg-color icon-color size]}] (when icon - (let [icon-size (if (= size :default) - 40 - 36)] + (let [icon-size (size->icon-size size)] [rn/view {:style (:tiny spacing/padding-horizontal)} (cond (vector? icon) @@ -76,29 +81,42 @@ :background-color icon-bg-color}} [icons/icon icon {:color icon-color}]])]))) -(defn title-column [{:keys [title text-color subtitle subtitle-max-lines]}] +(defn title-column + [{:keys [title text-color subtitle subtitle-max-lines + title-accessibility-label size]}] [rn/view {:style (merge (:tiny spacing/padding-horizontal) - {:justify-content :center})} + {:justify-content :center + :flex 1})} (cond (and title subtitle) [:<> - [text/text {:weight :medium - :style {:color text-color} - :ellipsize-mode :tail - :number-of-lines 1} - title] - [text/text {:weight :regular - :color :secondary - :ellipsize-mode :tail - :number-of-lines subtitle-max-lines} - subtitle]] + ;; FIXME(Ferossgp): ReactNative 63 will support view inside text on andrid, remove thess if when migrating + (if (string? title) + [text/text {:weight :medium + :style {:color text-color} + :accessibility-label title-accessibility-label + :ellipsize-mode :tail + :number-of-lines 1} + title] + title) + (if (string? subtitle) + [text/text {:weight :regular + :color :secondary + :ellipsize-mode :tail + :number-of-lines subtitle-max-lines} + subtitle] + subtitle)] - title [text/text {:number-of-lines 1 - :style {:color text-color} - :ellipsize-mode :tail - :size :large} - title])]) + title + (if (string? title) + [text/text {:number-of-lines 1 + :style {:color text-color} + :title-accessibility-label title-accessibility-label + :ellipsize-mode :tail + :size (size->single-title-size size)} + title] + title))]) (defn left-side [props] [rn/view {:style {:flex-direction :row @@ -107,56 +125,85 @@ [icon-column props] [title-column props]]) -(defn right-side [{:keys [chevron on-press active accessory accessory-text]}] - [rn/view {:style {:align-items :center - :flex-direction :row}} - [rn/view {:style (:tiny spacing/padding-horizontal)} - (case accessory - :radio [controls/radio {:value active - :on-change on-press}] - :checkbox [controls/checkbox {:value active - :on-change on-press}] - :switch [controls/switch {:value active - :on-change on-press}] - :text [text/text {:color :secondary - :number-of-lines 1} - accessory-text] - nil)] - (when (and chevron platform/ios?) - [rn/view {:style {:padding-right (:tiny spacing/spacing)}} - [icons/icon :main-icons/next {:container-style {:opacity 0.4 - :align-items :center - :justify-content :center} - :resize-mode :center - :color (:icon-02 @colors/theme)}]])]) +(defn right-side [{:keys [chevron active accessory accessory-text]}] + (when (or chevron accessory) + [rn/view {:style {:align-items :center + :flex-direction :row}} + [rn/view {:style (:tiny spacing/padding-horizontal)} + (case accessory + :radio [controls/radio {:value active}] + :checkbox [controls/checkbox {:value active}] + :switch [controls/switch {:value active}] + :text [text/text {:color :secondary + :number-of-lines 1} + accessory-text] + accessory)] + (when (and chevron platform/ios?) + [rn/view {:style {:padding-right (:tiny spacing/spacing)}} + [icons/icon :main-icons/next {:container-style {:opacity 0.4 + :align-items :center + :justify-content :center} + :resize-mode :center + :color (:icon-02 @colors/theme)}]])])) (defn list-item [{:keys [theme accessory disabled subtitle-max-lines icon title subtitle active on-press on-long-press chevron size - accessory-text] + accessory-text accessibility-label title-accessibility-label + haptic-feedback haptic-type error animated] :or {subtitle-max-lines 1 - theme :main}}] - (let [theme (if disabled :disabled theme) + theme :main + haptic-feedback true + animated true + haptic-type :selection}}] + (let [theme (if disabled :disabled theme) {:keys [icon-color text-color icon-bg-color active-background passive-background]} - (themes theme)] - [rn/view {:background-color (if active active-background passive-background)} - [animated/pressable {:type :list-item - :disabled disabled - :background-color active-background - :on-press on-press - :on-long-press on-long-press} + (themes theme) + optional-haptic (fn [] + (when haptic-feedback + (haptic/trigger haptic-type))) + component (cond + (and (not on-press) + (not on-long-press)) + rn/view + animated animated/pressable + :else rn/touchable-opacity)] + [rn/view {:background-color (if (and (= accessory :radio) active) + active-background + passive-background)} + [component + (merge {:type :list-item + :disabled disabled + :bg-color active-background + :accessibility-label accessibility-label} + (when on-press + {:on-press (fn [] + (optional-haptic) + (on-press))}) + (when on-long-press + {:on-long-press (fn [] + (optional-haptic) + (on-long-press))})) [container {:size size} - [left-side {:icon-color icon-color - :text-color text-color - :icon-bg-color icon-bg-color - :icon icon - :title title - :size size - :subtitle subtitle - :subtitle-max-lines subtitle-max-lines}] + [left-side {:icon-color icon-color + :text-color text-color + :icon-bg-color icon-bg-color + :title-accessibility-label title-accessibility-label + :icon icon + :title title + :size size + :subtitle subtitle + :subtitle-max-lines subtitle-max-lines}] [right-side {:chevron chevron :active active :on-press on-press :accessory-text accessory-text - :accessory accessory}]]]])) + :accessory accessory}]]] + (when error + [tooltip/tooltip (merge {:bottom-value 0} + (when accessibility-label + {:accessibility-label (str (name accessibility-label) "-error")})) + [text/text {:color :negative + :size :small} + error]])])) diff --git a/src/quo/react_native.cljs b/src/quo/react_native.cljs index 3ec796860a..cbdbd09cf0 100644 --- a/src/quo/react_native.cljs +++ b/src/quo/react_native.cljs @@ -1,5 +1,6 @@ (ns quo.react-native (:require [reagent.core :as reagent] + [cljs-bean.core :as bean] ["react-native" :as rn] ["@react-native-community/hooks" :as hooks])) @@ -73,3 +74,16 @@ :width (.-window ^js window)})) (def use-back-handler (.-useBackHandler hooks)) + +(defn use-keyboard [] + (let [kb (.useKeyboard hooks)] + {:keyboard-shown (.-keyboardShown ^js kb) + :keyboard-height (.-keyboardHeight ^js kb)})) + +(defn use-layout [] + (let [{:keys [onLayout x y height width]} (bean/bean (.useLayout hooks))] + {:on-layout onLayout + :x x + :y y + :height height + :width width})) diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index a14ec8d981..d16158b134 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -32,7 +32,6 @@ [status-im.stickers.core :as stickers] [status-im.transport.core :as transport] [status-im.transport.message.core :as transport.message] - [status-im.ui.components.bottom-sheet.core :as bottom-sheet] [status-im.ui.components.react :as react] [status-im.ui.screens.currency-settings.models :as @@ -50,8 +49,6 @@ status-im.wallet.choose-recipient.core status-im.wallet.collectibles.core status-im.wallet.accounts.core - status-im.multiaccounts.biometric.core - status-im.hardwallet.core status-im.popover.core [status-im.hardwallet.core :as hardwallet] [status-im.utils.dimensions :as dimensions] @@ -61,6 +58,7 @@ [status-im.ui.components.permissions :as permissions] [status-im.utils.http :as http] [status-im.utils.utils :as utils] + status-im.ui.components.bottom-sheet.core status-im.ui.screens.add-new.new-chat.events status-im.ui.screens.group.chat-settings.events status-im.ui.screens.group.events @@ -402,7 +400,9 @@ {:ui/show-confirmation {:title (i18n/label :t/clear-history-title) :content (i18n/label :t/clear-history-confirmation-content) :confirm-button-text (i18n/label :t/clear-history-action) - :on-accept #(re-frame/dispatch [:chat.ui/clear-history chat-id])}})) + :on-accept #(do + (re-frame/dispatch [:bottom-sheet/hide]) + (re-frame/dispatch [:chat.ui/clear-history chat-id]))}})) (handlers/register-handler-fx :chat.ui/fetch-history-pressed @@ -465,7 +465,9 @@ {:ui/show-confirmation {:title (i18n/label :t/delete-confirmation) :content (i18n/label :t/delete-chat-confirmation) :confirm-button-text (i18n/label :t/delete) - :on-accept #(re-frame/dispatch [:chat.ui/remove-chat chat-id])}})) + :on-accept #(do + (re-frame/dispatch [:bottom-sheet/hide]) + (re-frame/dispatch [:chat.ui/remove-chat chat-id]))}})) (handlers/register-handler-fx :chat.ui/set-chat-ui-props @@ -789,7 +791,9 @@ {:ui/show-confirmation {:title (i18n/label :t/leave-confirmation) :content (i18n/label :t/leave-chat-confirmation) :confirm-button-text (i18n/label :t/leave) - :on-accept #(re-frame/dispatch [:group-chats.ui/leave-chat-confirmed chat-id])}})) + :on-accept #(do + (re-frame/dispatch [:bottom-sheet/hide]) + (re-frame/dispatch [:group-chats.ui/leave-chat-confirmed chat-id]))}})) (handlers/register-handler-fx :group-chats.ui/join-pressed (fn [cofx [_ chat-id]] @@ -980,23 +984,6 @@ (fn [cofx _] (stickers/pending-timeout cofx))) -;; Tribute to Talk - - -;; bottom-sheet events -(handlers/register-handler-fx - :bottom-sheet/show-sheet - (fn [cofx [_ view options]] - (bottom-sheet/show-bottom-sheet - cofx - {:view view - :options options}))) - -(handlers/register-handler-fx - :bottom-sheet/hide-sheet - (fn [cofx _] - (bottom-sheet/hide-bottom-sheet cofx))) - ;;custom tokens (handlers/register-handler-fx diff --git a/src/status_im/hardwallet/recovery.cljs b/src/status_im/hardwallet/recovery.cljs index 1050fdd1a0..5d30a69c3f 100644 --- a/src/status_im/hardwallet/recovery.cljs +++ b/src/status_im/hardwallet/recovery.cljs @@ -45,7 +45,7 @@ (fx/merge cofx {:db (-> db (assoc-in [:hardwallet :setup-step] :pair)) - :dispatch [:bottom-sheet/hide-sheet]} + :dispatch [:bottom-sheet/hide]} (common/listen-to-hardware-back-button) (navigation/navigate-to-cofx :keycard-recovery-pair nil))) diff --git a/src/status_im/network/ui/edit_network/styles.cljs b/src/status_im/network/ui/edit_network/styles.cljs index 70212ad98e..1d1994c6f3 100644 --- a/src/status_im/network/ui/edit_network/styles.cljs +++ b/src/status_im/network/ui/edit_network/styles.cljs @@ -7,9 +7,8 @@ :margin-vertical 15}) (def bottom-container - {:flex-direction :row - :margin-horizontal 12 - :margin-vertical 15}) + {:flex-direction :row + :padding-vertical 4}) (def container styles/flex) diff --git a/src/status_im/network/ui/edit_network/views.cljs b/src/status_im/network/ui/edit_network/views.cljs index d1c11c4947..6787793a79 100644 --- a/src/status_im/network/ui/edit_network/views.cljs +++ b/src/status_im/network/ui/edit_network/views.cljs @@ -4,7 +4,6 @@ [status-im.i18n :as i18n] [status-im.network.core :as network] [status-im.network.ui.edit-network.styles :as styles] - [status-im.ui.components.common.common :as components.common] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.styles :as components.styles] @@ -60,8 +59,9 @@ :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]] [react/view styles/bottom-container [react/view components.styles/flex] - [components.common/bottom-button - {:forward? true - :label (i18n/label :t/save) - :disabled? (not is-valid?) - :on-press #(re-frame/dispatch [::network/save-network-pressed])}]]]]))) + [quo/button + {:after :main-icons/next + :type :secondary + :disabled (not is-valid?) + :on-press #(re-frame/dispatch [::network/save-network-pressed])} + (i18n/label :t/save)]]]]))) diff --git a/src/status_im/network/ui/network_details/views.cljs b/src/status_im/network/ui/network_details/views.cljs index 44203eecb4..b4759835e1 100644 --- a/src/status_im/network/ui/network_details/views.cljs +++ b/src/status_im/network/ui/network_details/views.cljs @@ -1,10 +1,10 @@ (ns status-im.network.ui.network-details.views (:require [re-frame.core :as re-frame] [status-im.i18n :as i18n] + [quo.core :as quo] [status-im.network.core :as network] [status-im.network.ui.styles :as st] [status-im.network.ui.views :as network-settings] - [status-im.ui.components.common.common :as components.common] [status-im.ui.components.react :as react] [status-im.ui.components.styles :as components.styles] [status-im.ui.components.topbar :as topbar]) @@ -40,7 +40,5 @@ (when custom? [react/view st/bottom-container [react/view components.styles/flex - [components.common/button {:label (i18n/label :t/delete) - :button-style st/delete-button - :label-style st/delete-button-text - :on-press #(re-frame/dispatch [::network/delete-network-pressed id])}]]])]]))) + [quo/button {:on-press #(re-frame/dispatch [::network/delete-network-pressed id])} + (i18n/label :t/delete)]]])]]))) diff --git a/src/status_im/network/ui/styles.cljs b/src/status_im/network/ui/styles.cljs index bb1a899426..30811af699 100644 --- a/src/status_im/network/ui/styles.cljs +++ b/src/status_im/network/ui/styles.cljs @@ -85,11 +85,5 @@ :margin-horizontal 12 :margin-vertical 15}) -(def delete-button - {:background-color colors/white-persist}) - -(def delete-button-text - {:color colors/red}) - (def container components.styles/flex) diff --git a/src/status_im/ui/components/bottom_sheet/core.cljs b/src/status_im/ui/components/bottom_sheet/core.cljs index 1d6a8e722b..ca013a1ac7 100644 --- a/src/status_im/ui/components/bottom_sheet/core.cljs +++ b/src/status_im/ui/components/bottom_sheet/core.cljs @@ -1,8 +1,5 @@ (ns status-im.ui.components.bottom-sheet.core - (:require [status-im.ui.components.bottom-sheet.view :as view] - [status-im.ui.components.bottom-sheet.events :as events])) + (:require [status-im.ui.components.bottom-sheet.events :as events])) (def show-bottom-sheet events/show-bottom-sheet) (def hide-bottom-sheet events/hide-bottom-sheet) - -(def bottom-sheet view/bottom-sheet) diff --git a/src/status_im/ui/components/bottom_sheet/events.cljs b/src/status_im/ui/components/bottom_sheet/events.cljs index fd1fcbe4eb..f350de263a 100644 --- a/src/status_im/ui/components/bottom_sheet/events.cljs +++ b/src/status_im/ui/components/bottom_sheet/events.cljs @@ -17,3 +17,11 @@ :bottom-sheet/hide (fn [cofx] (hide-bottom-sheet cofx))) + +(handlers/register-handler-fx + :bottom-sheet/show-sheet + (fn [cofx [_ view options]] + (show-bottom-sheet + cofx + {:view view + :options options}))) diff --git a/src/status_im/ui/components/bottom_sheet/styles.cljs b/src/status_im/ui/components/bottom_sheet/styles.cljs deleted file mode 100644 index 7eb131dfa1..0000000000 --- a/src/status_im/ui/components/bottom_sheet/styles.cljs +++ /dev/null @@ -1,49 +0,0 @@ -(ns status-im.ui.components.bottom-sheet.styles - (:require [status-im.ui.components.colors :as colors])) - -(def border-radius 16) -(def vertical-padding 8) -(def margin-top 56) - -(def container - {:position :absolute - :left 0 - :top 0 - :right 0 - :bottom 0 - :flex 1 - :justify-content :flex-end}) - -(defn shadow [opacity-value] - {:flex 1 - :position :absolute - :left 0 - :top 0 - :right 0 - :bottom 0 - :opacity opacity-value - :background-color colors/black-transparent-40-persist}) - -(defn content-container - [window-height content-height bottom-value] - {:background-color colors/white - :border-top-left-radius border-radius - :border-top-right-radius border-radius - :height (+ content-height window-height) - :bottom (- window-height) - :transform [{:translateY bottom-value}]}) - -(def sheet-wrapper {:flex 1 - :justify-content :flex-end}) - -(def content-header - {:height border-radius - :align-self :stretch - :justify-content :center - :align-items :center}) - -(def handle - {:width 31 - :height 4 - :background-color colors/gray-transparent-40 - :border-radius 2}) diff --git a/src/status_im/ui/components/bottom_sheet/view.cljs b/src/status_im/ui/components/bottom_sheet/view.cljs deleted file mode 100644 index 57b66dd504..0000000000 --- a/src/status_im/ui/components/bottom_sheet/view.cljs +++ /dev/null @@ -1,199 +0,0 @@ -(ns status-im.ui.components.bottom-sheet.view - (:require [status-im.ui.components.react :as react] - [status-im.ui.components.animation :as animation] - [status-im.ui.components.bottom-sheet.styles :as styles] - [status-im.utils.platform :as platform] - ["react-native" :refer (BackHandler)] - [reagent.core :as reagent] - [re-frame.core :as re-frame])) - -(def initial-animation-duration 400) -(def release-animation-duration 150) -(def cancellation-animation-duration 100) -(def swipe-opacity-range 100) -(def cancellation-coefficient 0.3) -(def min-opacity 0.05) -(def min-velocity 0.4) - -(defn- animate - [{:keys [opacity new-opacity-value - bottom new-bottom-value - duration callback]}] - (when (fn? callback) - (js/setTimeout callback duration)) - (animation/start - (animation/parallel - [(animation/timing opacity - {:toValue new-opacity-value - :duration duration - :useNativeDriver true}) - (animation/spring bottom - {:toValue new-bottom-value - :duration duration - :tension 40 - :friction 6 - :useNativeDriver true})]))) - -(defn- on-move - [{:keys [height bottom-value opacity-value]}] - (fn [_ ^js state] - (let [dy (.-dy state)] - (cond (pos? dy) - (let [opacity (max min-opacity (- 1 (/ dy (- height swipe-opacity-range))))] - (animation/set-value bottom-value dy) - (animation/set-value opacity-value opacity)) - (neg? dy) - (animation/set-value bottom-value dy))))) - -(defn- cancelled? [height dy vy] - (or - (<= min-velocity vy) - (> (* cancellation-coefficient height) (- height dy)))) - -(defn- on-release - [{:keys [height bottom-value close-sheet opacity-value]}] - (fn [_ state] - (let [{:strs [dy vy]} (js->clj state)] - (if (cancelled? height dy vy) - (close-sheet) - (animate {:bottom bottom-value - :new-bottom-value 0 - :opacity opacity-value - :new-opacity-value 1 - :duration release-animation-duration}))))) - -(defn- swipe-pan-responder [opts] - (.create - ^js react/pan-responder - (clj->js - {:onMoveShouldSetPanResponder (fn [_ ^js state] - (or (< 10 (js/Math.abs (.-dx state))) - (< 5 (js/Math.abs (.-dy state))))) - :onPanResponderMove (on-move opts) - :onPanResponderRelease (on-release opts) - :onPanResponderTerminate (on-release opts)}))) - -(defn- pan-handlers [^js pan-responder] - (js->clj (.-panHandlers pan-responder))) - -(defn- on-open [{:keys [bottom-value internal-atom opacity-value]}] - (when-not @internal-atom - (react/dismiss-keyboard!) - (reset! internal-atom true) - (animate {:bottom bottom-value - :new-bottom-value 0 - :opacity opacity-value - :new-opacity-value 1 - :duration initial-animation-duration}))) - -(defn- on-close - [{:keys [bottom-value opacity-value on-cancel internal-atom height]}] - (when @internal-atom - (animate {:bottom bottom-value - :new-bottom-value height - :opacity opacity-value - :new-opacity-value 0 - :duration cancellation-animation-duration - :callback (fn [] - (when (fn? on-cancel) - (animation/set-value bottom-value height) - (animation/set-value opacity-value 0) - (reset! internal-atom false) - (on-cancel)))}))) - -(defn bottom-sheet-view [{:keys [window-height]}] - (let [opacity-value (animation/create-value 0) - bottom-value (animation/create-value window-height) - content-height (reagent/atom (* 0.4 window-height)) - internal-visible (reagent/atom false) - external-visible (reagent/atom false) - back-listener (reagent/atom nil)] - (fn [{:keys [content on-cancel disable-drag? show-handle? show? - backdrop-dismiss? safe-area window-height back-button-cancel] - :or {show-handle? true - backdrop-dismiss? true - back-button-cancel true - on-cancel #(re-frame/dispatch [:bottom-sheet/hide])}}] - (let [height (+ @content-height - styles/border-radius) - max-height (- window-height - (:top safe-area) - styles/margin-top) - sheet-height (min max-height height) - close-sheet (fn [] - (when (and platform/android? @back-listener) - (.remove ^js @back-listener) - (reset! back-listener nil)) - (on-close {:opacity-value opacity-value - :bottom-value bottom-value - :height height - :internal-atom internal-visible - :on-cancel on-cancel})) - handle-back (fn [] - (when back-button-cancel - (close-sheet)) - true)] - (when-not (= @external-visible show?) - (reset! external-visible show?) - (cond - (true? show?) - (do (on-open {:bottom-value bottom-value - :opacity-value opacity-value - :internal-atom internal-visible - :height height}) - (when platform/android? - (reset! back-listener (.addEventListener BackHandler - "hardwareBackPress" - handle-back)))) - - (false? show?) - (close-sheet))) - (when @internal-visible - [react/view {:style styles/container} - [react/touchable-highlight (merge {:style styles/container} - (when backdrop-dismiss? - {:on-press #(close-sheet)})) - [react/animated-view {:style (styles/shadow opacity-value)}]] - - [react/keyboard-avoiding-view {:pointer-events "box-none" - :behaviour "position" - :style styles/sheet-wrapper} - [react/animated-view (merge - {:style (styles/content-container window-height sheet-height bottom-value)} - (when-not (or disable-drag? (= max-height sheet-height)) - (pan-handlers - (swipe-pan-responder {:bottom-value bottom-value - :opacity-value opacity-value - :height height - :close-sheet #(close-sheet)})))) - [react/view (merge {:style styles/content-header} - (when (and (not disable-drag?) - (= max-height sheet-height)) - (pan-handlers - (swipe-pan-responder {:bottom-value bottom-value - :opacity-value opacity-value - :height height - :close-sheet #(close-sheet)})))) - (when show-handle? - [react/view styles/handle])] - [react/animated-view {:style {:height sheet-height}} - ;; NOTE(Ferossgp): For a better UX on onScrollBeginDrag we can start dragging the sheet. - [react/scroll-view {:bounces false - :scroll-enabled true - :style {:flex 1}} - [react/view {:style {:padding-top styles/vertical-padding - :padding-bottom (+ styles/vertical-padding - (:bottom safe-area))} - :on-layout #(->> ^js % - .-nativeEvent - .-layout - .-height - (reset! content-height))} - [content]]]]]]]))))) - -(defn bottom-sheet [props] - (let [props (assoc props :window-height @(re-frame/subscribe [:dimensions/window-height]))] - [react/safe-area-consumer - (fn [insets] - (reagent/as-element - [bottom-sheet-view (assoc props :safe-area (js->clj insets :keywordize-keys true))]))])) diff --git a/src/status_im/ui/components/button.cljs b/src/status_im/ui/components/button.cljs deleted file mode 100644 index d1f3425c78..0000000000 --- a/src/status_im/ui/components/button.cljs +++ /dev/null @@ -1,84 +0,0 @@ -(ns status-im.ui.components.button - (:require [status-im.ui.components.react :as react] - [status-im.ui.components.colors :as colors] - [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.utils.label :as utils.label])) - -(defn style-container [type disabled? theme] - (merge - (when (= type :main) - {:margin-vertical 8 :margin-horizontal 16}) - (cond - (#{:main :secondary} type) - {:padding-horizontal 32} - (= :next type) - {:padding-right 12 :padding-left 20} - (= :previous type) - {:padding-right 20 :padding-left 12} - :else nil) - {:height 44 :border-radius 8 - :align-items :center :justify-content :center - :background-color (cond - (#{:secondary :next :previous} type) - "" - disabled? - colors/gray-transparent-10 - (= type :main) - (case theme - :red colors/red-transparent-10 - :green colors/green-transparent-10 - colors/blue-transparent-10) - :else - "")})) - -(defn button - - "A general purpose status-react specfic button component - 'type' - :main (default), :secondary, :next, :previous - - `theme` - :blue (default), :green, :red - - `label` - Any one of string, keyword representing translated string in the form of :t/{translation-key-in-translation-files} - - `disabled?` - Bool - - `on-press` - Fn - - Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=858%3A0" - - [{:keys [label type theme disabled? on-press accessibility-label style container-style text-style] - :or {type :main theme :blue}}] - (let [label (utils.label/stringify label)] - [react/touchable-opacity (cond-> {:on-press on-press - :active-opacity 0.5 - :style style} - ;;NOTE `:disabled` must be of type boolean - disabled? - (assoc :disabled (boolean disabled?)) - accessibility-label - (assoc :accessibility-label accessibility-label)) - [react/view {:style (merge (style-container type disabled? theme) container-style)} - [react/view {:flex-direction :row :align-items :center} - (when (= type :previous) - [vector-icons/icon :main-icons/back {:container-style {:width 24 :height 24 :margin-right 4} - :color (if disabled? colors/gray colors/blue)}]) - [react/text {:style (merge {:color (cond - disabled? - colors/gray - (#{:main :secondary :next :previous} type) - (case theme - :green colors/green - :red colors/red - colors/blue) - :else - "")} - text-style)} - label] - (when (= type :next) - [vector-icons/icon :main-icons/next {:container-style {:width 24 :height 24 :margin-left 4} - :color (if disabled? colors/gray colors/blue)}])]]])) diff --git a/src/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index 60060201c8..9961d2fbf5 100644 --- a/src/status_im/ui/components/chat_icon/screen.cljs +++ b/src/status_im/ui/components/chat_icon/screen.cljs @@ -93,17 +93,9 @@ (when dapp? [dapp-badge styles])]) -(defn contact-icon-contacts-tab [contact] - [contact-icon-view contact - {:container styles/container-chat-list - :online-view-wrapper styles/online-view-wrapper - :online-view styles/online-view - :online-dot-left styles/online-dot-left - :online-dot-right styles/online-dot-right - :size 40 - :chat-icon styles/chat-icon-chat-list - :default-chat-icon (styles/default-chat-icon-chat-list colors/default-chat-color) - :default-chat-icon-text (styles/default-chat-icon-text 40)}]) +(defn contact-icon-contacts-tab [photo-path] + [react/view styles/container-chat-list + [photos/photo photo-path {:size 40}]]) (defn dapp-icon-permission [contact size] [contact-icon-view contact @@ -141,15 +133,4 @@ [react/i18n-text {:style styles/profile-icon-edit-text :key :edit}]]) (if (and photo-path (seq photo-path)) [photos/photo photo-path styles] - [default-chat-icon name styles])])) - -(defn my-profile-icon [{multiaccount :multiaccount - edit? :edit?}] - (let [color colors/default-chat-color - size 64] - [profile-icon-view - (multiaccounts/displayed-photo multiaccount) - (multiaccounts/displayed-name multiaccount) - color - edit? - size {}])) + [default-chat-icon name styles])])) \ No newline at end of file diff --git a/src/status_im/ui/components/common/common.cljs b/src/status_im/ui/components/common/common.cljs index bfb605af0d..aac7bfe1af 100644 --- a/src/status_im/ui/components/common/common.cljs +++ b/src/status_im/ui/components/common/common.cljs @@ -1,7 +1,6 @@ (ns status-im.ui.components.common.common (:require [reagent.core :as reagent] [status-im.i18n :as i18n] - [status-im.ui.components.colors :as colors] [status-im.ui.components.common.styles :as styles] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.react :as react]) @@ -16,42 +15,6 @@ [react/view (merge styles/separator-wrapper wrapper-style) [react/view (merge styles/separator style)]]) -;;TODO DEPRECATED, use status-im.ui.components.button -(defn bottom-button [{:keys [accessibility-label - label - disabled? - on-press - forward? - back?]}] - (let [color (if disabled? colors/gray colors/blue)] - [react/touchable-highlight {:on-press on-press :disabled disabled?} - [react/view styles/bottom-button - (when back? - [vector-icons/icon :main-icons/back {:color color - :container-style {:align-self :baseline}}]) - [react/text {:style {:color color} - :accessibility-label accessibility-label} - (or label (i18n/label :t/next))] - (when forward? - [vector-icons/icon :main-icons/next {:color color}])]])) - -;;TODO DEPRECATED, use status-im.ui.components.button -(defn button [{:keys [on-press label background? button-style label-style disabled? accessibility-label] :or {background? true disabled? false}}] - [react/touchable-highlight {:style (styles/button button-style background? disabled?) - :on-press on-press - :accessibility-label accessibility-label - :disabled disabled?} - [react/text {:style (merge styles/button-label label-style)} - label]]) - -;;TODO DEPRECATED, use status-im.ui.components.button -;;TODO implement :red type if needed -(defn red-button [props] - [react/view {:align-items :center} - [button (merge props - {:label-style {:color colors/red :font-size 15} - :button-style {:padding-horizontal 32 :background-color colors/red-light}})]]) - ;;TODO DEPRECATED, use status-im.ui.components.badge (defn counter ([value] (counter nil value)) diff --git a/src/status_im/ui/components/common/styles.cljs b/src/status_im/ui/components/common/styles.cljs index 1084efb86c..e7aaab5761 100644 --- a/src/status_im/ui/components/common/styles.cljs +++ b/src/status_im/ui/components/common/styles.cljs @@ -25,25 +25,6 @@ :color :none :container-style {}}) -(def bottom-button - {:flex-direction :row - :align-items :center}) - -(defn button [style background? disabled?] - (merge - {:padding-vertical 12 - :padding-horizontal 42 - :border-radius 8 - :background-color (cond disabled? - colors/gray-lighter - background? - colors/blue-transparent-10)} - style)) - -(def button-label - {:text-align :center - :color colors/blue}) - (defn counter-container [size] {:width size :height size diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index 212c3b92a8..ed9b22c513 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -21,32 +21,16 @@ (def primary-text-base {:font-size 16}) -(def primary-text - primary-text-base) - (def primary-text-only (merge primary-text-base {:padding-vertical 16})) -(def secondary-text - {:font-size 14 - :color colors/gray - :padding-top 4}) - (def image-size 40) (def item-image {:width image-size :height image-size}) -(def big-item-image - {:width image-size - :height image-size - :margin-right 16 - :border-radius (/ image-size 2) - :border-color colors/gray-transparent-10 - :border-width 1}) - (def icon-size 24) (def icon-wrapper-size (+ icon-size (* 2 8))) @@ -72,68 +56,6 @@ (def right-item-wrapper {:justify-content :center}) -(def settings-item - {:padding-left 16 - :padding-right 8 - :flex 1 - :flex-direction :row - :align-items :center - :height 64}) - -(defn settings-item-icon - [icon-color large?] - (cond-> {:background-color (colors/alpha icon-color 0.1) - :width 40 - :height 40 - :border-radius 40 - :margin-right 16 - :justify-content :center - :align-items :center} - large? - (merge {:align-self :flex-start - :margin-top 12}))) - -(defn settings-item-text - [color] - {:typography :title - :flex 1 - :flex-wrap :nowrap - :color color}) - -(def settings-item-text-container - {:flex 1 - :align-self :flex-start - :margin-top 12}) - -(def settings-item-main-text-container - {:flex-direction :row - :align-items :center}) - -(def settings-item-subtext - {:margin-top 2 - :color colors/gray}) - -(def settings-item-value - {:flex-wrap :nowrap - :text-align :right - :padding-right 10 - :color colors/gray}) - -(def new-label - {:background-color colors/blue - :border-radius 4 - :justify-content :center - :align-items :center - :height 16 - :margin-right 6}) - -(def new-label-text - {:color colors/white - :margin-left 6 - :margin-right 4 - :font-size 11 - :font-weight "700"}) - (def base-separator {:height 1 :background-color colors/black-transparent}) diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index bf0b24cd83..a5c825d394 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -18,13 +18,9 @@ [section-list {:sections [{:title \"\" :key :unik :render-fn render :data {:title \"\" :subtitle \"\"}}]}] " - (:require [clojure.string :as string] - [reagent.core :as reagent] - [status-im.i18n :as i18n] - [status-im.ui.components.checkbox.view :as checkbox] - [status-im.ui.components.colors :as colors] + (:require [reagent.core :as reagent] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.ui.components.list.styles :as styles] [status-im.ui.components.radio :as radio] [status-im.ui.components.react :as react] @@ -67,13 +63,6 @@ [react/image {:source (if (fn? source) (source) source) :style (merge styles/item-image image-style)}]]) ;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn item-primary - ([s] (item-primary nil s)) - ([{:keys [style] :as props} s] - [react/text (merge {:style (merge styles/primary-text style)} - (dissoc props :style)) - s])) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views (defn item-primary-only ([s] (item-primary-only nil s)) ([{:keys [style] :as props} s] @@ -81,29 +70,10 @@ (dissoc props :style)) s])) ;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn item-secondary - ([s] (item-secondary nil s)) - ([{:keys [style]} s] - [react/text - {:style (merge styles/secondary-text style) - :ellipsize-mode :middle - :number-of-lines 1} - s])) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views (defn item-content [& children] (into [react/view {:style styles/item-content-view}] (keep identity children))) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn list-item-with-checkbox - [{:keys [on-value-change style checked? on-long-press] :as props} item] - [react/touchable-highlight (merge {:on-press #(on-value-change (not checked?))} - (when on-long-press - {:on-long-press on-long-press})) - (conj item - [react/view {:style (merge style styles/item-checkbox)} - [checkbox/checkbox (dissoc props :on-value-change)]])]) - ;;TODO DEPRECATED, use status-im.ui.components.list-item.views (defn list-item-with-radio-button [{:keys [on-value-change style checked?] :as props} item] @@ -113,56 +83,6 @@ [radio/radio (:checked? props)]])]) ;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn big-list-item - [{:keys [style text text-style subtext action-fn active? hide-chevron? - accessory-value text-color new? activity-indicator - accessibility-label icon icon-color image-source] - :or {icon-color colors/blue - text-color colors/black - active? true - style {}}}] - {:pre [text - (or (nil? accessibility-label) (keyword? accessibility-label))]} - [react/touchable-highlight - {:on-press action-fn - :style style - :accessibility-label accessibility-label - :disabled (not active?)} - [react/view styles/settings-item - (cond - icon - [react/view (styles/settings-item-icon icon-color subtext) - [vector-icons/icon icon {:color icon-color}]] - image-source - [react/image {:source {:uri image-source} - :style styles/big-item-image}] - activity-indicator - [react/view (styles/settings-item-icon icon-color subtext) - [react/activity-indicator activity-indicator]]) - (if subtext - [react/view {:style styles/settings-item-text-container} - [react/view {:style styles/settings-item-main-text-container} - (when new? - [react/view {:style styles/new-label} - [react/text {:style styles/new-label-text} - (string/upper-case (i18n/label :t/new))]]) - [react/text {:style (merge (styles/settings-item-text text-color) text-style)} - text]] - [react/view {:style {:margin-top 2 - :justify-content :flex-start}} - [react/text {:style styles/settings-item-subtext - :number-of-lines 2} - subtext]]] - [react/text {:style (merge (styles/settings-item-text text-color) text-style) - :number-of-lines 1} - text]) - (when accessory-value - [react/text {:style styles/settings-item-value - :number-of-lines 1} - (str accessory-value)]) - (when-not hide-chevron? - [vector-icons/icon :main-icons/next {:color colors/gray-transparent-40}])]]) - (defn- wrap-render-fn [f] (fn [^js data] (reagent/as-element (f (.-item data) (.-index data) (.-separators data))))) @@ -207,7 +127,7 @@ `list-item/list-item` config map and `companent`." [item _] (cond - (map? item) [list-item/list-item item] + (map? item) [quo/list-item item] (vector? item) item (nil? item) nil :else [item])) diff --git a/src/status_im/ui/components/list_item/styles.cljs b/src/status_im/ui/components/list_item/styles.cljs deleted file mode 100644 index 512a368f88..0000000000 --- a/src/status_im/ui/components/list_item/styles.cljs +++ /dev/null @@ -1,199 +0,0 @@ -(ns status-im.ui.components.list-item.styles - (:require [status-im.ui.components.colors :as colors])) - -(defn container [type selected?] - (merge - {:flex-direction :row - :justify-content :flex-start - :padding-horizontal 16 - ;; We need `:min-height` to ensure design spec conformance - ;; and maintain `vertical-rythm` regardless of inner content height. - ;; Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=790%3A35 - - ;; Without it `:small` type will be height 42 in some cases - ;; 44 in others. Something similar can happen to `:default`. - ;; Not really needed for `:section-header` but good to have - ;; it, if not for anything, for reference. - - ;; - Why not have 15px or 14px top/bottom padding as spec indicates, - ;; as a strategy for list-item not collapsing to 42/44 height instead? - ;; - Why `:small` type has same 10px top/bottom padding like `:default` does - ;; instead of 14px? - - ;; Because native switch button height(at least in iOS) - ;; is > 22px(title line-height), and > 24px(accessory icon height in spec). - ;; Plus there might be a need for <= 32px accessory or something, in edge cases. - - ;; Think of it like an alternate design strategy for components with - ;; variable content whose height might vary. Like, instead of controlling - ;; the overall component's height using line-height, top/bottom padding, - ;; or explicit height. - - ;; And, better to have 32px content vertical space (for :small) - ;; to play with in this setup; So, we stretch vertically the inner - ;; containers; and vertically center content inside them. Allows for - ;; flexibility, with as little constraint and superfluous styling attributes - ;; as possible. - - ;; Note: this is `min-height` so if we have > 32px accessory or some other - ;; content inside it `vertical-rythm` can break. We leave it up to the - ;; list-item consuming implementation to be aware of it. - :min-height (case type - :default 64 - :small 52 - :section-header 40 - 0) - :padding-top (if (= type :section-header) 14 10) - :padding-bottom (if (= type :section-header) 4 10) - :align-items :center} - (when selected? - {:background-color colors/blue-light}))) - -(def icon-column-container - {:margin-right 14 - :padding-vertical 2 - :justify-content :flex-start - :max-width 40 - :align-items :center - :align-self :stretch}) - -(defn icon-container [color] - {:border-radius 20 - :width 40 - :height 40 - :align-items :center - :justify-content :center - :background-color (or color colors/blue-light)}) - -(defn icon [color] - {:color (or color colors/blue) - :font-size 16}) - -(defn title-column-container [accessories?] - {:margin-right (if accessories? 16 0) - :flex 1 - :justify-content :center - :align-items :flex-start - :align-self :stretch}) - -(def title-row-container - {:min-height 22 - :flex-direction :row - :justify-content :flex-start - :align-self :stretch}) - -(defn title-prefix-icon-container - [title-prefix-height title-prefix-width] - (merge - {:width 16 - :height 16 - :justify-content :center - :margin-top (if (not title-prefix-height) 4 0) - :align-items :center} - (when title-prefix-width - {:width title-prefix-width}) - (when title-prefix-height - {:height title-prefix-height}))) - -(defn title-prefix-text [type theme icon? subtitle - content title-prefix-width disabled?] - (merge {:margin-left (if icon? 2 0) - :align-self :stretch - ;; we are doing the following to achieve pixel perfection - ;; as reasonably possible as it can be, and achieve the - ;; intent of the design spec - :line-height 22} - (when (= type :default) - (if (or subtitle content) - {:typography :main-medium - :line-height 22} - {:typography :title - :line-height 20})) - - (when title-prefix-width - {:width title-prefix-width}) - - (if disabled? - {:color colors/gray} - (case theme - :action-destructive {:color colors/red} - :action {:color colors/blue} - {})))) - -(defn title [type theme icon? title-prefix subtitle - content title-row-accessory disabled? - title-color-override] - (merge {:margin-left (if icon? 2 0) - :flex 1 - :align-self :stretch - ;; we are doing the following to achieve pixel perfection - ;; as reasonably possible as it can be, and achieve the - ;; intent of the design spec - :line-height 22} - (when (= type :default) - (if (or subtitle content) - {:typography :main-medium - :line-height 22} - {:typography :title - :line-height 20})) - - (when title-prefix - {:margin-left (if (string? title-prefix) 0 2)}) - - (when title-row-accessory - {:margin-right 16}) - - (if (or disabled? (= :section-header type)) - {:color colors/gray} - ;; else - (if title-color-override - {:color title-color-override} - ;; else - (case theme - :action-destructive {:color colors/red} - :action {:color colors/blue} - {}))))) - -(def title-row-accessory-container - {:margin-top 2 - :align-self :stretch}) - -(def subtitle-row-container - {:min-height 22 - :flex-direction :row - :justify-content :flex-start - :align-self :stretch}) - -(defn subtitle [icon? subtitle-row-accessory] - (cond-> {:margin-left (if icon? 2 0) - :flex 1 - :align-self :stretch - :color colors/gray - ;; we are doing the following to achieve pixel perfection - ;; as reasonably possible as it can be, and achieve the - ;; intent of the design spec - :line-height 22} - subtitle-row-accessory - (assoc :margin-right 16))) - -(def subtitle-row-accessory-container - {:justify-content :flex-end - :align-self :stretch}) - -(def accessories-container - {:align-self :stretch - :flex-direction :row - :align-items :center - :justify-content :flex-start}) - -(defn accessory-text [width last] - {:color colors/gray - :max-width (if last (* @width 0.62) (* @width 0.55)) - ;; we are doing the following to achieve pixel perfection - ;; as reasonably possible as it can be, and achieve the - ;; intent of the design spec - :line-height 22}) - -(def error - {:bottom-value 0 - :font-size 12}) diff --git a/src/status_im/ui/components/list_item/views.cljs b/src/status_im/ui/components/list_item/views.cljs deleted file mode 100644 index fd2116ca95..0000000000 --- a/src/status_im/ui/components/list_item/views.cljs +++ /dev/null @@ -1,410 +0,0 @@ -(ns status-im.ui.components.list-item.views - (:require [reagent.core :as reagent] - [status-im.ui.components.colors :as colors] - [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.list-item.styles :as styles] - [status-im.ui.components.react :as react] - [status-im.ui.components.tooltip.views :as tooltip] - [status-im.ui.screens.chat.photos :as photos] - [status-im.ui.screens.profile.db :as profile.db] - [status-im.utils.label :as utils.label] - [status-im.ui.components.radio :as radio])) - -(defn divider [] - [react/view {:height 1 :background-color colors/gray-lighter}]) - -(defn- icon-column [icon theme disabled?] - [react/view styles/icon-column-container - (cond - (vector? icon) - icon - - (and (qualified-keyword? icon) - (= "main-icons" (namespace icon))) - (let [colors - (if disabled? - {:container colors/gray-lighter - :icon colors/gray-transparent-40} - (if (= theme :action-destructive) - {:container colors/red-transparent-10 - :icon colors/red} - {:container nil - :icon nil}))] - [react/view (styles/icon-container (:container colors)) - [icons/icon icon (styles/icon (:icon colors))]]) - - (and (string? icon) - (profile.db/base64-encoded-image-path? icon)) - [photos/photo icon {:size 40}] - - :else [icon])]) - -(defn- title-row - [{:keys [title title-color-override title-prefix - title-prefix-width title-prefix-height - title-accessibility-label title-row-accessory]} - type icon? disabled? theme subtitle content] - [react/view styles/title-row-container - (when title-prefix - (cond - (and (qualified-keyword? title-prefix) - (= "main-icons" (namespace title-prefix))) - [icons/icon title-prefix - (merge - {:color colors/black - :width 16 - :height 16 - :container-style - (styles/title-prefix-icon-container - title-prefix-height title-prefix-width)} - (when title-prefix-width - {:width title-prefix-width}) - (when title-prefix-height - {:height title-prefix-height}))] - - (or (string? title-prefix) - (number? title-prefix) - (keyword? title-prefix)) - [react/text {:number-of-lines 1 - :ellipsize-mode :tail - :style - (styles/title-prefix-text - type theme icon? subtitle content - title-prefix-width disabled?)} - (if title-prefix-width - (utils.label/stringify title-prefix) - (if (string? title) - (str (utils.label/stringify title-prefix) " ") - (utils.label/stringify title-prefix)))] - - (vector? title-prefix) - title-prefix - - :else - [title-prefix])) - - (cond - (or (string? title) (keyword? title) (number? title)) - [react/text - (merge - {:number-of-lines 1 - :ellipsize-mode :tail - :style - (styles/title - type theme icon? title-prefix subtitle - content title-row-accessory disabled? - title-color-override)} - (when title-accessibility-label - {:accessibility-label title-accessibility-label})) - (utils.label/stringify title)] - - (vector? title) - [react/view {:flex 1} - title] - - :else - [react/view {:flex 1} - [title]]) - - (when title-row-accessory - [react/view styles/title-row-accessory-container title-row-accessory])]) - -(defn subtitle-row - [_ _] - (let [subtitle-row-accessory-width (reagent/atom 0)] - (reagent/create-class - {:reagent-render - (fn [{:keys [subtitle subtitle-max-lines subtitle-row-accessory]} icon?] - [react/view styles/subtitle-row-container - (cond - (or (string? subtitle) (keyword? subtitle) (number? subtitle)) - [react/text {:style - (merge - (styles/subtitle - icon? (pos? @subtitle-row-accessory-width))) - :number-of-lines subtitle-max-lines - :ellipsize-mode :tail} - (utils.label/stringify subtitle)] - - (vector? subtitle) - [react/view - (styles/subtitle icon? (pos? @subtitle-row-accessory-width)) - subtitle] - - :else - [react/view - (styles/subtitle icon? (pos? @subtitle-row-accessory-width)) - [subtitle]]) - - (when subtitle-row-accessory - [react/view - {:style styles/subtitle-row-accessory-container - :on-layout #(reset! - subtitle-row-accessory-width - (-> ^js % .-nativeEvent .-layout .-width))} - ;; We do this so that the bottom of the component is 12 device px - ;; from bottom of the touchable container, instead of 10. - [react/view {:transform [{:translateY -2}]} - subtitle-row-accessory]])])}))) - -(defn- title-column [{:keys [title] :as title-row-elements} - {:keys [subtitle] :as subtitle-row-elements} - type icon? disabled? theme content accessories] - [react/view (styles/title-column-container accessories) - (when title - [title-row - title-row-elements type icon? disabled? - theme subtitle content]) - - (when (and subtitle (= :default type)) - [subtitle-row subtitle-row-elements icon?]) - - (when content - [react/view {:margin-left (if icon? 2 0)} - (if (vector? content) - content - [content])])]) - -(defn- accessories-column [accessories width] - (let [last-accessory (peek accessories)] - (into - [react/view styles/accessories-container] - (for [accessory accessories] - (when-not (nil? accessory) - (with-meta - (cond - (= :chevron accessory) - [icons/icon :main-icons/next - {:container-style {:width 10 - :height 16 - :align-items :center - :justify-content :center} - :resize-mode :center - :color colors/gray-transparent-40}] - - (and (qualified-keyword? accessory) - (= "main-icons" (namespace accessory))) - [icons/icon - accessory - {:color colors/gray-transparent-40 - :container-style - {:margin-right (if (= accessory last-accessory) 0 12)}}] - - :else - [react/view (cond-> {:margin-right (if (= accessory last-accessory) 0 16)} - ;; `:chevron` container is 10px wide (see up) - ;; but the chevron icon itself is 9px aligned in the - ;; container to the right - so 1px white-space on left - ;; thats 1px + 15px margin, which makes 16px - ;; as intended in design spec - (= last-accessory :chevron) - (assoc :margin-right 15)) - (cond - (or (string? accessory) (keyword? accessory) (number? accessory)) - [react/text {:style - (styles/accessory-text width (= accessory last-accessory)) - :ellipsize-mode :middle - :number-of-lines 1} - (utils.label/stringify accessory)] - - (vector? accessory) - accessory - - :else nil)]) - {:key (name (gensym "accessory"))})))))) - -(defn list-item - "A general purpose status-react specfic list item component. - Every key is optional. Use as needed. - Combination of around 4 related keys are enough for most cases. - Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=787%3A1108 - - `react-key` - String - (default generated automatically using `gensym`) - A react unique key meta data. Usually for homogeneous list-items. - Usually needed for list-items generated by looping over - some kind of collection. - More here https://reactjs.org/docs/lists-and-keys.html#keys - - `type` - `:default` (default), `:small`, `:section-header`, or `:divider` - `:section-header` - Specifying only these is sufficient. - {:title
:type :section-header} - Optionally set `container-margin-top/bottom` - `:divider` - A simple common gray divider seen in various screens. - Simply use: - {:type :divider} and specify nothing else. - White-space above and below it can be controlled by - `container-margin-top/bottom` specified for list-item above/below - - `theme` - `:default` (default), `:action`, `:action-destructive`, - or `:selectable` - `:selectable` - A theme for list-item groups having radio button accessory. - Use it together with `selected?` key. See below. - - `container-margin-top` - `container-margin-bottom` - Integer - 0 by default - Usually the first item has top margin, and the last item has bottom margin. - - `icon` - Any one of keyword representing `:main-icon/icon`, or - string representing `photo-path` base64 data, or `component`. - If component make sure to make it 40x40 size. - - `title-prefix` - Any one of keyword representing an `vector-icon/icon`, - `:main-icons/tiny-icons`(16x16) are preferred - In which case it will automatically have 4px `:margin-top`; - Any other `vector-icon/icon` is also acceptable. - In which case it is better to specify height. - Best to keep it <= 20. See related height/width below. - String, keyword (gets converted to string), - Number (gets converted to string), or component. - - `title-prefix-width` - `title-prefix-height` - Optional width/height for when title/prefix is not a tiny-icon - i.e. when icon height/height > 16, or when component. - Do not specify if title-prefix is tiny-icon - - `title` - Any one of string, keyword representing translated string in the form of - :t/{translation-key-in-translation-files}, - Keyword(gets converted to string), - Number(gets converted to string), or - Component - When component is used best to keep the style similar. - to `styles/title-row-container` and/or `styles/title`. - - `title-color-override` - colors/color - only occasionally needed, self-explanatory - - `title-accessibility-label` - `:accessibility-label` for title text component. - Sometimes needed for title - e.g. chat-list-item. - Makes sense since `title` is the key element of a list item. - - `title-row-accessory` - Component - Especially made for chat list item, but may serve other - purpose in the unlikely future. Wrapper already has 2px :margin-top. - Best to keep it <= 18px high. - - `subtitle` - Any one of string, keyword representing translated string in the form of - :t/{translation-key-in-translation-files}, - Keyword(gets converted to string), - Number(gets converted to string), or - Component - when component is used best to keep the style similar - to `styles/subtitle-title-row-container` and/or `styles/subtitle`. - - `subtitle-max-lines` - Integer - 1 by default - self-explanatory - - `subtitle-row-accessory` - Component - Made specially for chat-list to hold unread messages counter. - - Content - component - to replace entire title-column area - For visual consistancy with other list-items - Best to keep height <= 40 for `:default` `type`. - Best to keep height <= 30 for `:small` `type`. - Best to keep inner element styles similar to - `styles/subtitle-title-row-container` and/or `styles/subtitle`. - - `accessories` - Vector of `:chevron`, Any one of keyword representing `:main-icon/icon`, - `number`, `keyword` or `component` - Long stringified accessory has max-width of 62% of device width. - That means `title` is also constrained to not be longer than - 30ish%(considering hard right-margin in `title` of 16px) - In cases of edge cases where title/accessories are - butting against each other, use component for textual accessories - with `title` as component as well as necessary. - Use best judgement with respect to smaller width screens. - - `on-press/on-long-press` - Function - self explanatory - - `error` - String - error tooltip - - `accessibility-label` - :keyword - self explanatory - - `disabled?` - Boolean - false by default - self explanatory - - `selected?` - Boolean - When (= :theme :selectable) this switch controls whether the - list-item is in a visually selected state. Background-color - of list-item is colors/gray-selected. Useful for selectable - list-items like list with radio buttons." - - [_] - (let [width (reagent/atom 0) - r-key (name (gensym "list-item"))] - (reagent/create-class - {:reagent-render - (fn - [{:keys [react-key type theme container-margin-top container-margin-bottom - icon title-prefix title-prefix-width title-prefix-height - title title-color-override title-row-accessory - title-accessibility-label subtitle subtitle-max-lines - subtitle-row-accessory content accessories on-press - on-long-press error accessibility-label disabled? selected?] - :or {react-key r-key - type :default - theme :default - disabled? false - container-margin-top 0 - container-margin-bottom 0 - subtitle-max-lines 1}}] - (let [title-row-elements {:title title - :title-color-override title-color-override - :title-accessibility-label title-accessibility-label - :title-prefix title-prefix - :title-prefix-width title-prefix-width - :title-prefix-height title-prefix-height - :title-row-accessory title-row-accessory} - subtitle-row-elements {:subtitle subtitle - :subtitle-max-lines subtitle-max-lines - :subtitle-row-accessory subtitle-row-accessory} - theme-select? (= theme :selectable) - radio-selected? (and theme-select? selected?)] - ^{:key react-key} - (if (= type :divider) - divider - [react/view {:style {:margin-top container-margin-top - :margin-bottom container-margin-bottom} - :on-layout #(reset! width (-> ^js % .-nativeEvent .-layout .-width))} - [react/touchable-highlight - (cond-> {:on-press (when (not theme-select?) on-press) - :on-press-in (when theme-select? on-press) - :on-long-press on-long-press - :underlay-color colors/gray-transparent-40 - :active-opacity (if theme-select? 1 0.85) - :disabled (or (not on-press) selected? disabled?)} - accessibility-label - (assoc :accessibility-label accessibility-label)) - [react/view {:style (styles/container type radio-selected?)} - (when icon - [icon-column icon theme disabled?]) - - (when (or title subtitle content) - [title-column - title-row-elements subtitle-row-elements - type icon disabled? theme content accessories]) - - (if theme-select? - [react/view styles/accessories-container - [radio/radio radio-selected?]] - (when accessories - [accessories-column accessories width]))]] - (when error - [tooltip/tooltip error styles/error])])))}))) diff --git a/src/status_im/ui/components/toolbar.cljs b/src/status_im/ui/components/toolbar.cljs index 7127ef59da..86006c3f3f 100644 --- a/src/status_im/ui/components/toolbar.cljs +++ b/src/status_im/ui/components/toolbar.cljs @@ -1,17 +1,31 @@ (ns status-im.ui.components.toolbar (:require [status-im.ui.components.react :as react] - [status-im.ui.components.button :as button] [status-im.ui.components.colors :as colors])) -(defn toolbar [{:keys [center left right show-border?]}] +(defn toolbar-container [{:keys [show-border? size center?] + :or {size :default}}] + (merge {:align-items :center + :padding-horizontal 8 + :flex-direction :row} + (when center? + {:justify-content :center}) + (when show-border? + {:border-top-width 1 + :border-top-color colors/gray-lighter}) + (case size + :large {:height 60} + {:height 52}))) + +;; TODO(Ferossgp): Allow components when moving to Quo +(defn toolbar [{:keys [center left right show-border? size]}] (if center - [react/view (merge {:height 52 :align-items :center :justify-content :center} - (when show-border? {:border-top-width 1 :border-top-color colors/gray-lighter})) - [button/button center]] - [react/view (merge {:height 52 :align-items :center :flex-direction :row} - (when show-border? {:border-top-width 1 :border-top-color colors/gray-lighter})) - (when left - [button/button left]) + [react/view {:style (toolbar-container {:show-border? show-border? + :center? true + :size size})} + center] + [react/view {:style (toolbar-container {:show-border? show-border? + :center? false + :size size})} + (when left left) [react/view {:flex 1}] - (when right - [button/button right])])) \ No newline at end of file + (when right right)])) diff --git a/src/status_im/ui/components/topbar.cljs b/src/status_im/ui/components/topbar.cljs index 14db2d2bff..6b04a39ab8 100644 --- a/src/status_im/ui/components/topbar.cljs +++ b/src/status_im/ui/components/topbar.cljs @@ -1,9 +1,9 @@ (ns status-im.ui.components.topbar (:require [status-im.ui.components.react :as react] [re-frame.core :as re-frame] - [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.colors :as colors] [reagent.core :as reagent] + [quo.core :as quo] [status-im.utils.label :as utils.label])) (defn default-navigation [modal?] @@ -21,17 +21,17 @@ (defn button [value nav?] (let [{:keys [handler icon label accessibility-label]} value] - [react/touchable-highlight {:on-press #(when handler (handler))} - [react/view (cond-> {:padding-horizontal (if nav? 16 10) :height 56 - :align-items :center :justify-content :center} - accessibility-label - (assoc :accessibility-label accessibility-label)) + [react/view {:padding-horizontal (if nav? 8 0)} + [quo/button (merge {:on-press #(when handler (handler))} + (cond + icon {:type :icon + :theme :icon} + label {:type :secondary}) + (when accessibility-label + {:accessibility-label accessibility-label})) (cond - icon - [icons/icon icon] - label - [react/text {:style {:color colors/blue}} - (utils.label/stringify label)])]])) + icon icon + label (utils.label/stringify label))]])) (def default-title-padding 16) ;; TODO(Ferossgp): Tobbar should handle safe area diff --git a/src/status_im/ui/screens/about_app/views.cljs b/src/status_im/ui/screens/about_app/views.cljs index 2e5ad80fa0..2ffa995134 100644 --- a/src/status_im/ui/screens/about_app/views.cljs +++ b/src/status_im/ui/screens/about_app/views.cljs @@ -1,65 +1,45 @@ (ns status-im.ui.screens.about-app.views (:require [re-frame.core :as re-frame] + [status-im.i18n :as i18n] [status-im.ui.components.colors :as colors] [status-im.ui.components.copyable-text :as copyable-text] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.list-item.views :as list-item] - [status-im.ui.components.list.views :as list] + [quo.core :as quo] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.about-app.styles :as styles]) (:require-macros [status-im.utils.views :as views])) -(defn- data [app-version node-version] - [{:type :small - :title :t/privacy-policy - :accessibility-label :privacy-policy - :on-press - #(re-frame/dispatch - [:privacy-policy/privacy-policy-button-pressed]) - :accessories [:chevron]} - [copyable-text/copyable-text-view - {:copied-text app-version} - [list-item/list-item - {:type :small - :accessibility-label :app-version - :title-prefix :t/version - :title - [react/text - {:number-of-lines 1 - :ellipsize-mode :middle - :style - {:color colors/gray - :padding-left 16 - :text-align :right - :line-height 22}} - app-version]}]] - [copyable-text/copyable-text-view - {:copied-text node-version} - [list-item/list-item - {:type :small - :accessibility-label :node-version - :title-prefix :t/node-version - :title - [react/text - {:number-of-lines 1 - :ellipsize-mode :middle - :style - {:color colors/gray - :padding-left 16 - :text-align :right - :line-height 22}} - node-version]}]]]) - (views/defview about-app [] (views/letsubs [app-version [:get-app-short-version] node-version [:get-app-node-version]] [react/view {:flex 1 :background-color colors/white} [topbar/topbar {:title :t/about-app}] - [list/flat-list - {:data (data app-version node-version) - :key-fn (fn [_ i] (str i)) - :render-fn list/flat-list-generic-render-fn}]])) + [react/scroll-view + [quo/list-item + {:size :small + :title (i18n/label :t/privacy-policy) + :accessibility-label :privacy-policy + :on-press + #(re-frame/dispatch + [:privacy-policy/privacy-policy-button-pressed]) + :chevron true}] + [copyable-text/copyable-text-view + {:copied-text app-version} + [quo/list-item + {:size :small + :accessibility-label :app-version + :title (i18n/label :t/version) + :accessory :text + :accessory-text app-version}]] + [copyable-text/copyable-text-view + {:copied-text node-version} + [quo/list-item + {:size :small + :accessibility-label :node-version + :title (i18n/label :t/node-version) + :accessory :text + :accessory-text node-version}]]]])) (views/defview learn-more-sheet [] (views/letsubs [{:keys [title content]} [:bottom-sheet/options]] diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs index 1441a95266..7ac9c4e60b 100644 --- a/src/status_im/ui/screens/add_new/new_chat/views.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/views.cljs @@ -5,24 +5,24 @@ [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.add-new.new-chat.styles :as styles] [status-im.utils.debounce :as debounce] - [quo.core :as quo] [status-im.utils.utils :as utils]) (:require-macros [status-im.utils.views :as views])) (defn- render-row [row _ _] - [list-item/list-item - {:title (multiaccounts/displayed-name row) - :icon [chat-icon/contact-icon-contacts-tab row] - :accessories [:chevron] - :on-press #(re-frame/dispatch [:chat.ui/start-chat - (:public-key row) - {:navigation-reset? true}])}]) + [quo/list-item + {:title (multiaccounts/displayed-name row) + :icon [chat-icon/contact-icon-contacts-tab + (multiaccounts/displayed-photo row)] + :chevron true + :on-press #(re-frame/dispatch [:chat.ui/start-chat + (:public-key row) + {:navigation-reset? true}])}]) (defn- icon-wrapper [color icon] [react/view diff --git a/src/status_im/ui/screens/advanced_settings/views.cljs b/src/status_im/ui/screens/advanced_settings/views.cljs index 460c5966a1..0386dc7ae4 100644 --- a/src/status_im/ui/screens/advanced_settings/views.cljs +++ b/src/status_im/ui/screens/advanced_settings/views.cljs @@ -1,6 +1,7 @@ (ns status-im.ui.screens.advanced-settings.views (:require [re-frame.core :as re-frame] - [status-im.ui.components.colors :as colors] + [status-im.i18n :as i18n] + [quo.core :as quo] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar]) @@ -11,74 +12,68 @@ waku-enabled waku-bloom-filter-mode current-fleet]}] - [{:type :small - :title :t/network + [{:size :small + :title (i18n/label :t/network) :accessibility-label :network-button :container-margin-top 8 :on-press #(re-frame/dispatch [:navigate-to :network-settings]) - :accessories [network-name :chevron]} - {:type :small - :title :t/network-info + :accessory :text + :accessory-text network-name + :chevron true} + {:size :small + :title (i18n/label :t/network-info) :accessibility-label :network-button :container-margin-top 8 :on-press #(re-frame/dispatch [:navigate-to :network-info]) - :accessories [:chevron]} + :chevron true} ;; TODO - uncomment when implemented - ;; {:type :small + ;; {:size :small ;; :title :t/les-ulc ;; :accessibility-label :log-level-settings-button ;; :accessories [:t/ulc-enabled :chevron]} - {:type :small - :title :t/log-level + {:size :small + :title (i18n/label :t/log-level) :accessibility-label :log-level-settings-button :on-press #(re-frame/dispatch [:navigate-to :log-level-settings]) - :accessories [current-log-level :chevron]} - {:type :small - :title :t/fleet + :accessory :text + :accessory-text current-log-level + :chevron true} + {:size :small + :title (i18n/label :t/fleet) :accessibility-label :fleet-settings-button :on-press #(re-frame/dispatch [:navigate-to :fleet-settings]) - :accessories [current-fleet :chevron]} - {:type :small - :title :t/bootnodes + :accessory :text + :accessory-text current-fleet + :chevron true} + {:size :small + :title (i18n/label :t/bootnodes) :accessibility-label :bootnodes-settings-button :on-press #(re-frame/dispatch [:navigate-to :bootnodes-settings]) - :accessories [:chevron]} - {:type :small - :title :t/waku-enabled + :chevron true} + {:size :small + :title (i18n/label :t/waku-enabled) :accessibility-label :waku-enabled-settings-switch :container-margin-bottom 8 :on-press #(re-frame/dispatch [:multiaccounts.ui/waku-enabled-switched (not waku-enabled)]) - :accessories - [[react/switch - {:track-color #js {:true colors/blue :false nil} - :value waku-enabled - :on-value-change - #(re-frame/dispatch - [:multiaccounts.ui/waku-enabled-switched (not waku-enabled)]) - :disabled false}]]} - {:type :small - :title :t/waku-bloom-filter-mode + :accessory :switch + :active waku-enabled} + {:size :small + :title (i18n/label :t/waku-bloom-filter-mode) :accessibility-label :waku-bloom-filter-mode-settings-switch :container-margin-bottom 8 :on-press #(re-frame/dispatch [:multiaccounts.ui/waku-bloom-filter-mode-switched (not waku-bloom-filter-mode)]) - :accessories - [[react/switch - {:track-color #js {:true colors/blue :false nil} - :value waku-bloom-filter-mode - :on-value-change - #(re-frame/dispatch - [:multiaccounts.ui/waku-bloom-filter-mode-switched (not waku-bloom-filter-mode)]) - :disabled false}]]} - #_{:type :small + :accessory :switch + :active waku-bloom-filter-mode} + #_{:size :small :title :t/dev-mode :accessibility-label :dev-mode-settings-switch :container-margin-bottom 8 @@ -97,22 +92,17 @@ (defn- dev-mode-settings-data [chaos-mode?] [{:container-margin-top 8 + ;; FIXME :type :section-header - :title :t/dev-mode-settings} - {:type :small - :title :t/chaos-mode + :title (i18n/label :t/dev-mode-settings)} + {:size :small + :title (i18n/label :t/chaos-mode) :accessibility-label :chaos-mode-settings-switch :on-press #(re-frame/dispatch [:multiaccounts.ui/chaos-mode-switched (not chaos-mode?)]) - :accessories - [[react/switch - {:track-color #js {:true colors/blue :false nil} - :value chaos-mode? - :on-value-change - #(re-frame/dispatch - [:multiaccounts.ui/chaos-mode-switched (not chaos-mode?)]) - :disabled false}]]} + :accessory :switch + :active chaos-mode?} [react/view {:height 24}]]) (defn- flat-list-data [{:keys [dev-mode? @@ -125,6 +115,11 @@ ;; else (normal-mode-settings-data options))) +(defn- render-item [props] + (if (= (:type props) :section-header) + [quo/list-header (:title props)] + [quo/list-item props])) + (views/defview advanced-settings [] (views/letsubs [{:keys [chaos-mode?]} [:multiaccount] network-name [:network-name] @@ -136,13 +131,12 @@ [topbar/topbar {:title :t/advanced}] [list/flat-list {:data (flat-list-data - {:network-name network-name - :current-log-level current-log-level - :current-fleet current-fleet - :dev-mode? false - :waku-enabled waku-enabled + {:network-name network-name + :current-log-level current-log-level + :current-fleet current-fleet + :dev-mode? false + :waku-enabled waku-enabled :waku-bloom-filter-mode waku-bloom-filter-mode - :chaos-mode? chaos-mode?}) - + :chaos-mode? chaos-mode?}) :key-fn (fn [_ i] (str i)) - :render-fn list/flat-list-generic-render-fn}]])) + :render-fn render-item}]])) diff --git a/src/status_im/ui/screens/appearance/views.cljs b/src/status_im/ui/screens/appearance/views.cljs index 84da32628e..197dcec2a4 100644 --- a/src/status_im/ui/screens/appearance/views.cljs +++ b/src/status_im/ui/screens/appearance/views.cljs @@ -4,7 +4,7 @@ [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] [status-im.react-native.resources :as resources] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.ui.components.colors :as colors] [status-im.i18n :as i18n])) @@ -22,7 +22,7 @@ (views/letsubs [{:keys [appearance]} [:multiaccount]] [react/view {:flex 1} [topbar/topbar {:title :t/appearance :show-border? true}] - [list-item/list-item {:type :section-header :title :t/preference :container-margin-top 8}] + [quo/list-header (i18n/label :t/preference)] [react/view {:flex-direction :row :flex 1 :padding-horizontal 8 :justify-content :space-between :margin-top 16} [button :t/light :theme-light 1 (= 1 appearance)] diff --git a/src/status_im/ui/screens/biometric/views.cljs b/src/status_im/ui/screens/biometric/views.cljs index cf18833cca..c60a5888f8 100644 --- a/src/status_im/ui/screens/biometric/views.cljs +++ b/src/status_im/ui/screens/biometric/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.biometric.views (:require [status-im.ui.components.react :as react] - [status-im.ui.components.button :as button] + [quo.core :as quo] [re-frame.core :as re-frame] [status-im.multiaccounts.biometric.core :as biometric] [status-im.ui.components.colors :as colors] @@ -43,14 +43,15 @@ (if description-label [(i18n/label description-label {:bio-type-label bio-type-label})] description-text))) - [button/button {:label (i18n/label ok-button-label - {:bio-type-label bio-type-label}) - :style {:margin-top 24} - :on-press #(re-frame/dispatch [on-confirm])}] - [button/button {:label (or cancel-button-label :t/cancel) - :style {:margin-bottom 24} - :type :secondary - :on-press #(re-frame/dispatch [(or on-cancel :hide-popover)])}]])) + [react/view {:padding-vertical 16} + [react/view {:padding-vertical 8} + [quo/button {:on-press #(re-frame/dispatch [on-confirm])} + (i18n/label ok-button-label + {:bio-type-label bio-type-label})]] + [quo/button {:type :secondary + :on-press #(re-frame/dispatch [(or on-cancel :hide-popover)])} + (or cancel-button-label + (i18n/label :t/cancel))]]])) (defn disable-password-saving-popover [] (let [bio-label-type (get-bio-type-label)] diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs index fff6857c79..528b456bc5 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.screens.bootnodes-settings.edit-bootnode.styles (:require [status-im.ui.components.colors :as colors] - [status-im.ui.components.styles :as components.styles] [status-im.utils.styles :as styles])) (def edit-bootnode-view @@ -8,11 +7,6 @@ :margin-horizontal 16 :margin-vertical 15}) -(def bottom-container - {:flex-direction :row - :margin-horizontal 12 - :margin-vertical 15}) - (def button-container {:margin-top 8 :margin-bottom 16 @@ -32,6 +26,3 @@ (def delete-button (assoc button :background-color colors/red)) - -(def container - components.styles/flex) diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs index d0623b3030..3f7e2a6f8b 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs @@ -2,9 +2,8 @@ (:require [clojure.string :as string] [re-frame.core :as re-frame] [status-im.i18n :as i18n] - [status-im.ui.components.common.common :as components.common] [status-im.ui.components.react :as react] - [status-im.ui.components.styles :as components.styles] + [status-im.ui.components.toolbar :as toolbar] [quo.core :as quo] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.bootnodes-settings.edit-bootnode.styles @@ -28,44 +27,44 @@ name (get-in manage-bootnode [:name :value]) is-valid? (empty? validation-errors) invalid-url? (contains? validation-errors :url)] - [react/view styles/container - [react/keyboard-avoiding-view components.styles/flex - [topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}] - [react/scroll-view {:keyboard-should-persist-taps :handled} - [react/view styles/edit-bootnode-view - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/name) - :placeholder (i18n/label :t/specify-name) - :accessibility-label :bootnode-name - :default-value name - :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %]) - :auto-focus true}]] - [react/view - {:flex 1 - :padding-vertical 8} - [quo/text-input - (merge - {:label (i18n/label :t/bootnode-address) - :placeholder (i18n/label :t/bootnode-format) - :accessibility-label :bootnode-address - :default-value url - :show-cancel false - :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %]) - :error (when (and (not (string/blank? url)) invalid-url?) - (i18n/label :t/invalid-format - {:format (i18n/label :t/bootnode-format)})) - :bottom-value 0 - :after {:icon :main-icons/qr - :on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed - {:title (i18n/label :t/add-bootnode) - :handler :bootnodes.callback/qr-code-scanned}])}})]] - (when id - [delete-button id])]] - [react/view styles/bottom-container - [react/view components.styles/flex] - [components.common/bottom-button - {:forward? true - :label (i18n/label :t/save) - :disabled? (not is-valid?) - :on-press #(re-frame/dispatch [:bootnodes.ui/save-pressed])}]]]]))) + [react/keyboard-avoiding-view {:flex 1} + [topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}] + [react/scroll-view {:keyboard-should-persist-taps :handled} + [react/view styles/edit-bootnode-view + [react/view {:padding-vertical 8} + [quo/text-input + {:label (i18n/label :t/name) + :placeholder (i18n/label :t/specify-name) + :accessibility-label :bootnode-name + :default-value name + :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %]) + :auto-focus true}]] + [react/view + {:flex 1 + :padding-vertical 8} + [quo/text-input + (merge + {:label (i18n/label :t/bootnode-address) + :placeholder (i18n/label :t/bootnode-format) + :accessibility-label :bootnode-address + :default-value url + :show-cancel false + :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %]) + :error (when (and (not (string/blank? url)) invalid-url?) + (i18n/label :t/invalid-format + {:format (i18n/label :t/bootnode-format)})) + :bottom-value 0 + :after {:icon :main-icons/qr + :on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed + {:title (i18n/label :t/add-bootnode) + :handler :bootnodes.callback/qr-code-scanned}])}})]] + (when id + [delete-button id])]] + [toolbar/toolbar + {:right + [quo/button + {:type :secondary + :after :main-icon/next + :disabled (not is-valid?) + :on-press #(re-frame/dispatch [:bootnodes.ui/save-pressed])} + (i18n/label :t/save)]}]]))) diff --git a/src/status_im/ui/screens/browser/accounts.cljs b/src/status_im/ui/screens/browser/accounts.cljs index 0455c38e9c..eed45121f4 100644 --- a/src/status_im/ui/screens/browser/accounts.cljs +++ b/src/status_im/ui/screens/browser/accounts.cljs @@ -2,20 +2,21 @@ (:require [status-im.ui.components.list.views :as list] [status-im.i18n :as i18n] [status-im.ui.components.react :as react] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.utils.utils :as utils] [re-frame.core :as re-frame])) (defn render-account [dapps-account] (fn [account] - [list-item/list-item - {:theme :selectable - :selected? (= (:address dapps-account) (:address account)) - :icon [chat-icon/custom-icon-view-list (:name account) (:color account)] - :title (:name account) - :subtitle (utils/get-shortened-checksum-address (:address account)) - :on-press #(re-frame/dispatch [:dapps-account-selected (:address account)])}])) + [quo/list-item + (merge {:accessory :radio + :active (= (:address dapps-account) (:address account)) + :icon [chat-icon/custom-icon-view-list (:name account) (:color account)] + :title (:name account) + :subtitle (utils/get-shortened-checksum-address (:address account))} + (when (not= (:address dapps-account) (:address account)) + {:on-press #(re-frame/dispatch [:dapps-account-selected (:address account)])}))])) (defn accounts-list [accounts dapps-account] (fn [] @@ -24,4 +25,4 @@ (i18n/label :t/select-account-dapp)] [list/flat-list {:data accounts :key-fn :address - :render-fn (render-account dapps-account)}]])) \ No newline at end of file + :render-fn (render-account dapps-account)}]])) diff --git a/src/status_im/ui/screens/browser/open_dapp/styles.cljs b/src/status_im/ui/screens/browser/open_dapp/styles.cljs index 3b843b4bd5..8014b06e7c 100644 --- a/src/status_im/ui/screens/browser/open_dapp/styles.cljs +++ b/src/status_im/ui/screens/browser/open_dapp/styles.cljs @@ -45,7 +45,6 @@ :border-radius 36 :padding-horizontal 8 :padding-vertical 6 - :flex 1 :align-items :center :justify-content :center :shadow-offset {:width 0 :height 1} diff --git a/src/status_im/ui/screens/browser/open_dapp/views.cljs b/src/status_im/ui/screens/browser/open_dapp/views.cljs index 4bb28aff4b..0479778473 100644 --- a/src/status_im/ui/screens/browser/open_dapp/views.cljs +++ b/src/status_im/ui/screens/browser/open_dapp/views.cljs @@ -5,7 +5,7 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.common.common :as components.common] [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.screens.browser.accounts :as accounts] @@ -14,32 +14,32 @@ (:require-macros [status-im.utils.views :as views])) (defn hide-sheet-and-dispatch [event] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch [:bottom-sheet/hide]) (re-frame/dispatch event)) (defn list-item [{:keys [browser-id name url]}] - [list-item/list-item + [quo/list-item {:on-press #(re-frame/dispatch [:browser.ui/browser-item-selected browser-id]) :on-long-press (fn [] (re-frame/dispatch [:bottom-sheet/show-sheet {:content (fn [] [react/view {:flex 1} - [list-item/list-item - {:theme :action - :title :t/remove + [quo/list-item + {:theme :accent + :title (i18n/label :t/remove) :accessibility-label :remove-dapp-from-list :icon :main-icons/delete :on-press #(hide-sheet-and-dispatch [:browser.ui/remove-browser-pressed browser-id])}] - [list-item/list-item - {:theme :action-destructive - :title :t/clear-all + [quo/list-item + {:theme :negative + :title (i18n/label :t/clear-all) :accessibility-label :clear-all-dapps :icon :main-icons/delete :on-press #(hide-sheet-and-dispatch [:browser.ui/clear-all-browsers-pressed])}]]) :content-height 128}])) :title name - :subtitle (or url :t/dapp) + :subtitle (or url (i18n/label :t/dapp)) :icon [react/view (styles/browser-icon-container) [icons/icon :main-icons/browser {:color colors/gray}]]}]) @@ -61,8 +61,7 @@ (i18n/label :t/recent)]])]) (views/defview select-account [] - (views/letsubs [height [:dimensions/window-height] - accounts [:accounts-without-watch-only] + (views/letsubs [accounts [:accounts-without-watch-only] {:keys [name color] :as dapps-account} [:dapps-account]] [react/view {:position :absolute :z-index 2 @@ -71,17 +70,17 @@ :left 0 :right 0 :padding-horizontal 32} - [react/touchable-highlight + [quo/button {:accessibility-label :select-account + :type :scale :on-press #(re-frame/dispatch [:bottom-sheet/show-sheet - {:content (accounts/accounts-list accounts dapps-account) - :content-height (/ height 2)}])} + {:content (accounts/accounts-list accounts dapps-account)}])} [react/view (styles/dapps-account color) [icons/icon :main-icons/account {:color colors/white-persist}] [react/view {:flex-shrink 1} [react/text {:numberOfLines 1 :style {:margin-horizontal 6 :color colors/white-persist - :typography :main-medium}} + :typography :main-medium}} name]] [icons/icon :main-icons/dropdown {:color colors/white-transparent-persist}]]]])) diff --git a/src/status_im/ui/screens/browser/permissions/views.cljs b/src/status_im/ui/screens/browser/permissions/views.cljs index 48b7b1bada..3b0d151515 100644 --- a/src/status_im/ui/screens/browser/permissions/views.cljs +++ b/src/status_im/ui/screens/browser/permissions/views.cljs @@ -9,7 +9,7 @@ [status-im.ui.components.react :as react] [status-im.ui.screens.browser.styles :as styles] [status-im.ui.components.colors :as colors] - [status-im.ui.components.button :as button]) + [quo.core :as quo]) (:require-macros [status-im.utils.views :as views])) (defn hide-panel-anim @@ -116,14 +116,20 @@ (:name dapps-account)]]]) [react/text {:style styles/permissions-panel-description-label :number-of-lines 2} description] - [react/view {:flex-direction :row :margin-top 24} - [button/button - {:theme :red - :style {:flex 1} - :on-press #(re-frame/dispatch [:browser.permissions.ui/dapp-permission-denied]) - :label (i18n/label :t/deny)}] - [button/button - {:theme :green - :style {:flex 1} - :on-press #(re-frame/dispatch [:browser.permissions.ui/dapp-permission-allowed]) - :label (i18n/label :t/allow)}]]]])))) + [react/view {:style {:flex-direction :row + :justify-content :center + :margin-horizontal 8 + :margin-top 24}} + [react/view {:flex 1 + :margin-horizontal 8} + [quo/button + {:theme :negative + :on-press #(re-frame/dispatch [:browser.permissions.ui/dapp-permission-denied])} + (i18n/label :t/deny)]] + [react/view {:flex 1 + :margin-horizontal 8} + [quo/button + {:theme :positive + :style {:margin-horizontal 8} + :on-press #(re-frame/dispatch [:browser.permissions.ui/dapp-permission-allowed])} + (i18n/label :t/allow)]]]]])))) diff --git a/src/status_im/ui/screens/chat/extensions/views.cljs b/src/status_im/ui/screens/chat/extensions/views.cljs index 913039a179..3c76d123e4 100644 --- a/src/status_im/ui/screens/chat/extensions/views.cljs +++ b/src/status_im/ui/screens/chat/extensions/views.cljs @@ -6,16 +6,18 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.animation :as anim] + [quo.core :as quo] [status-im.i18n :as i18n])) (defn button [showing?] - [react/touchable-highlight + [quo/button {:on-press (fn [_] (re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-bottom-sheet (when-not showing? :extensions)}]) (when-not platform/desktop? (js/setTimeout #(react/dismiss-keyboard!) 100))) - :accessibility-label :show-extensions-icon} - [icons/icon :main-icons/commands {:container-style {:margin 14 :margin-right 10} - :color (if showing? colors/blue colors/gray)}]]) + :accessibility-label :show-extensions-icon + :type :icon + :theme (if showing? :main :disabled)} + :main-icons/commands]) (defn show-panel-anim [bottom-anim-value alpha-value] diff --git a/src/status_im/ui/screens/chat/group.cljs b/src/status_im/ui/screens/chat/group.cljs index 5814fc49c9..2220a26b93 100644 --- a/src/status_im/ui/screens/chat/group.cljs +++ b/src/status_im/ui/screens/chat/group.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.chat.group (:require [re-frame.core :as re-frame] - [status-im.ui.components.button :as button] + [quo.core :as quo] [status-im.ui.components.react :as react] [status-im.utils.universal-links.core :as links] [status-im.ui.screens.chat.styles.main :as style] @@ -10,10 +10,10 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn join-chat-button [chat-id] - [button/button + [quo/button {:type :secondary - :on-press #(re-frame/dispatch [:group-chats.ui/join-pressed chat-id]) - :label :t/join-group-chat}]) + :on-press #(re-frame/dispatch [:group-chats.ui/join-pressed chat-id])} + (i18n/label :t/join-group-chat)]) (defn decline-chat [chat-id] [react/touchable-highlight diff --git a/src/status_im/ui/screens/chat/image/preview/views.cljs b/src/status_im/ui/screens/chat/image/preview/views.cljs index 363ff4c71f..44c2feb98f 100644 --- a/src/status_im/ui/screens/chat/image/preview/views.cljs +++ b/src/status_im/ui/screens/chat/image/preview/views.cljs @@ -3,7 +3,8 @@ (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react] [re-frame.core :as re-frame] - [status-im.ui.components.button :as button] + [quo.core :as quo] + [status-im.i18n :as i18n] [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.screens.chat.sheets :as sheets])) @@ -18,17 +19,17 @@ :background-color :black}) :resize-mode :contain :source {:uri (:image content)}}]] - [react/view {:flex-direction :row :padding-horizontal 8 - :justify-content :space-between :align-items :center} + [react/view {:flex-direction :row :padding-horizontal 8 + :justify-content :space-between :align-items :center} [react/view {:width 64}] - [button/button {:on-press #(re-frame/dispatch [:navigate-back]) - :type :secondary - :label :t/close - :text-style {:color colors/white-persist}}] + [quo/button {:on-press #(re-frame/dispatch [:navigate-back]) + :type :secondary + :text-style {:color colors/white-persist}} + (i18n/label :t/close)] [react/touchable-highlight {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet {:content (sheets/image-long-press message true) :height 64}])} - [icons/icon :main-icons/more {:container-style {:width 24 :height 24 + [icons/icon :main-icons/more {:container-style {:width 24 :height 24 :margin 20} :color colors/white-persist}]]]]])) diff --git a/src/status_im/ui/screens/chat/image/views.cljs b/src/status_im/ui/screens/chat/image/views.cljs index add53d5078..4fbf587f4a 100644 --- a/src/status_im/ui/screens/chat/image/views.cljs +++ b/src/status_im/ui/screens/chat/image/views.cljs @@ -3,9 +3,9 @@ (:require [status-im.ui.components.react :as react] [status-im.utils.platform :as platform] [re-frame.core :as re-frame] + [quo.core :as quo] [status-im.ui.components.colors :as colors] - [status-im.ui.components.animation :as anim] - [status-im.ui.components.icons.vector-icons :as icons])) + [status-im.ui.components.animation :as anim])) (defn show-panel-anim [bottom-anim-value alpha-value] @@ -18,34 +18,32 @@ :useNativeDriver true})]))) (defn input-button [images-showing?] - [react/touchable-highlight - {:on-press - (fn [_] - (re-frame/dispatch [:chat.ui/set-chat-ui-props - {:input-bottom-sheet (when-not images-showing? :images)}]) - (when-not platform/desktop? (js/setTimeout #(react/dismiss-keyboard!) 100))) - :accessibility-label :show-photo-icon} - [icons/icon - :main-icons/photo - {:container-style {:margin 14 :margin-right 6} - :color (if images-showing? colors/blue colors/gray)}]]) + [quo/button + {:on-press (fn [_] + (re-frame/dispatch [:chat.ui/set-chat-ui-props + {:input-bottom-sheet (when-not images-showing? :images)}]) + (when-not platform/desktop? (js/setTimeout #(react/dismiss-keyboard!) 100))) + :accessibility-label :show-photo-icon + :type :icon + :theme (if images-showing? :main :disabled)} + :main-icons/photo]) (defn take-picture [] (react/show-image-picker-camera #(re-frame/dispatch [:chat.ui/image-captured (.-path %)]) {})) (defn buttons [] [react/view - [react/touchable-highlight {:on-press take-picture} - [react/view {:style {:width 44 :height 44 - :align-items :center :justify-content :center} - :accessibility-label :take-picture} - [icons/icon :main-icons/camera {:color colors/black}]]] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:chat.ui/open-image-picker]) - :style {:margin-top 8}} - [react/view {:style {:width 44 :height 44 - :align-items :center :justify-content :center} - :accessibility-label :open-gallery} - [icons/icon :main-icons/gallery {:color colors/black}]]]]) + [quo/button {:type :icon + :theme :icon + :accessibility-label :take-picture + :on-press take-picture} + :main-icons/camera] + [react/view {:style {:padding-top 8}} + [quo/button {:on-press #(re-frame/dispatch [:chat.ui/open-image-picker]) + :accessibility-label :open-gallery + :type :icon + :theme :icon} + :main-icons/gallery]]]) (defn image-preview [uri first? panel-height] (let [wh (/ (- panel-height 8) 2)] diff --git a/src/status_im/ui/screens/chat/input/send_button.cljs b/src/status_im/ui/screens/chat/input/send_button.cljs index 5439c20b8f..b172ce3df2 100644 --- a/src/status_im/ui/screens/chat/input/send_button.cljs +++ b/src/status_im/ui/screens/chat/input/send_button.cljs @@ -1,8 +1,8 @@ (ns status-im.ui.screens.chat.input.send-button (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [status-im.ui.screens.chat.styles.input.send-button :as style] - [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vector-icons] + [quo.core :as quo] [status-im.ui.components.colors :as colors])) (defn sendable? [input-text-empty? disconnected? login-processing?] @@ -14,9 +14,9 @@ (letsubs [disconnected? [:disconnected?] {:keys [processing]} [:multiaccounts/login]] (when (sendable? input-text-empty? disconnected? processing) - [react/touchable-highlight - {:on-press on-send-press} + [quo/button {:type :scale + :on-press on-send-press} [vector-icons/icon :main-icons/arrow-up {:container-style style/send-message-container :accessibility-label :send-message-button - :color colors/white-persist}]]))) \ No newline at end of file + :color colors/white-persist}]]))) diff --git a/src/status_im/ui/screens/chat/sheets.cljs b/src/status_im/ui/screens/chat/sheets.cljs index 89318f96cf..43702a7cc7 100644 --- a/src/status_im/ui/screens/chat/sheets.cljs +++ b/src/status_im/ui/screens/chat/sheets.cljs @@ -5,258 +5,252 @@ [status-im.ui.components.list-selection :as list-selection] [status-im.utils.universal-links.core :as universal-links] [status-im.ui.components.chat-icon.screen :as chat-icon] - [status-im.ui.components.colors :as colors] [status-im.multiaccounts.core :as multiaccounts] [status-im.utils.platform :as platform] [status-im.ui.screens.chat.styles.message.sheets :as sheets.styles] - [status-im.ui.components.list-item.views :as list-item])) + [quo.core :as quo])) (defn hide-sheet-and-dispatch [event] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch [:bottom-sheet/hide]) (re-frame/dispatch event)) -(defn view-profile [{:keys [name helper]}] - [react/view - [react/text {:style {:font-weight "500" - :line-height 22 - :font-size 15 - :color colors/black}} - name] - [react/text {:style {:line-height 22 - :font-size 15 - :color colors/gray}} - (i18n/label helper)]]) - -(defn one-to-one-chat-actions [{:keys [chat-id]}] - (let [photo @(re-frame/subscribe [:chats/photo-path chat-id]) +(defn one-to-one-chat-accents [{:keys [chat-id]}] + (let [photo @(re-frame/subscribe [:chats/photo-path chat-id]) contact-name @(re-frame/subscribe [:contacts/contact-name-by-identity chat-id])] [react/view - [list-item/list-item - {:theme :action - :icon photo - :title [view-profile {:name contact-name - :helper :t/view-profile}] + [quo/list-item + {:theme :accent + :icon [chat-icon/contact-icon-contacts-tab photo] + :title contact-name + :subtitle (i18n/label :t/view-profile) :accessibility-label :view-chat-details-button - :accessories [:chevron] - :on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile chat-id])}] - [list-item/list-item - {:theme :action - :title :t/mark-all-read + :chevron true + :on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile chat-id])}] + [quo/list-item + {:theme :accent + :title (i18n/label :t/mark-all-read) :accessibility-label :mark-all-read-button - :icon :main-icons/check - :on-press #(hide-sheet-and-dispatch [:chat.ui/mark-all-read-pressed chat-id])}] - [list-item/list-item - {:theme :action - :title :t/clear-history + :icon :main-icons/check + :on-press #(hide-sheet-and-dispatch [:chat.ui/mark-all-read-pressed chat-id])}] + [quo/list-item + {:theme :accent + :title (i18n/label :t/clear-history) :accessibility-label :clear-history-button - :icon :main-icons/close - :on-press #(hide-sheet-and-dispatch [:chat.ui/clear-history-pressed chat-id])}] - [list-item/list-item - {:theme :action - :title :t/fetch-history + :icon :main-icons/close + :on-press #(re-frame/dispatch [:chat.ui/clear-history-pressed chat-id])}] + [quo/list-item + {:theme :accent + :title (i18n/label :t/fetch-history) :accessibility-label :fetch-history-button - :icon :main-icons/arrow-down - :on-press #(hide-sheet-and-dispatch [:chat.ui/fetch-history-pressed chat-id])}] - [list-item/list-item - {:theme :action-destructive - :title :t/delete-chat + :icon :main-icons/arrow-down + :on-press #(hide-sheet-and-dispatch [:chat.ui/fetch-history-pressed chat-id])}] + [quo/list-item + {:theme :negative + :title (i18n/label :t/delete-chat) :accessibility-label :delete-chat-button - :icon :main-icons/delete - :on-press #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]])) + :icon :main-icons/delete + :on-press #(re-frame/dispatch [:chat.ui/remove-chat-pressed chat-id])}]])) -(defn public-chat-actions [{:keys [chat-id]}] +(defn public-chat-accents [{:keys [chat-id]}] (let [link (universal-links/generate-link :public-chat :external chat-id) message (i18n/label :t/share-public-chat-text {:link link})] [react/view (when-not platform/desktop? - [list-item/list-item - {:theme :action - :title :t/share-chat + [quo/list-item + {:theme :accent + :title (i18n/label :t/share-chat) :accessibility-label :share-chat-button - :icon :main-icons/share - :on-press (fn [] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) - (list-selection/open-share {:message message}))}]) - [list-item/list-item - {:theme :action - :title :t/mark-all-read + :icon :main-icons/share + :on-press (fn [] + (re-frame/dispatch [:bottom-sheet/hide]) + ;; https://github.com/facebook/react-native/pull/26839 + (js/setTimeout + #(list-selection/open-share {:message message}) + 250))}]) + [quo/list-item + {:theme :accent + :title (i18n/label :t/mark-all-read) :accessibility-label :mark-all-read-button - :icon :main-icons/check - :on-press #(hide-sheet-and-dispatch [:chat.ui/mark-all-read-pressed chat-id])}] - [list-item/list-item - {:theme :action - :title :t/clear-history + :icon :main-icons/check + :on-press #(hide-sheet-and-dispatch [:chat.ui/mark-all-read-pressed chat-id])}] + [quo/list-item + {:theme :accent + :title (i18n/label :t/clear-history) :accessibility-label :clear-history-button - :icon :main-icons/close - :on-press #(hide-sheet-and-dispatch [:chat.ui/clear-history-pressed chat-id])}] - [list-item/list-item - {:theme :action - :title :t/fetch-history + :icon :main-icons/close + :on-press #(re-frame/dispatch [:chat.ui/clear-history-pressed chat-id])}] + [quo/list-item + {:theme :accent + :title (i18n/label :t/fetch-history) :accessibility-label :fetch-history-button - :icon :main-icons/arrow-down - :on-press #(hide-sheet-and-dispatch [:chat.ui/fetch-history-pressed chat-id])}] - [list-item/list-item - {:theme :action-destructive - :title :t/delete-chat + :icon :main-icons/arrow-down + :on-press #(hide-sheet-and-dispatch [:chat.ui/fetch-history-pressed chat-id])}] + [quo/list-item + {:theme :negative + :title (i18n/label :t/delete-chat) :accessibility-label :delete-chat-button - :icon :main-icons/delete - :on-press #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]])) + :icon :main-icons/delete + :on-press #(re-frame/dispatch [:chat.ui/remove-chat-pressed chat-id])}]])) -(defn group-chat-actions [] +(defn group-chat-accents [] (fn [{:keys [chat-id group-chat chat-name color]}] (let [{:keys [joined?]} @(re-frame/subscribe [:group-chat/inviter-info chat-id])] [react/view - [list-item/list-item - {:theme :action - :title [view-profile {:name chat-name - :helper :t/group-info}] - :icon [chat-icon/chat-icon-view-chat-sheet - chat-id group-chat chat-name color] - :accessories [:chevron] - :on-press #(hide-sheet-and-dispatch [:show-group-chat-profile chat-id])}] - [list-item/list-item - {:theme :action - :title :t/mark-all-read + [quo/list-item + {:theme :accent + :title chat-name + :subtitle (i18n/label :t/group-info) + :icon [chat-icon/chat-icon-view-chat-sheet + chat-id group-chat chat-name color] + :chevron true + :on-press #(hide-sheet-and-dispatch [:show-group-chat-profile chat-id])}] + [quo/list-item + {:theme :accent + :title (i18n/label :t/mark-all-read) :accessibility-label :mark-all-read-button :icon :main-icons/check :on-press #(hide-sheet-and-dispatch [:chat.ui/mark-all-read-pressed chat-id])}] - [list-item/list-item - {:theme :action - :title :t/clear-history + [quo/list-item + {:theme :accent + :title (i18n/label :t/clear-history) :accessibility-label :clear-history-button :icon :main-icons/close - :on-press #(hide-sheet-and-dispatch [:chat.ui/clear-history-pressed chat-id])}] - [list-item/list-item - {:theme :action - :title :t/fetch-history + :on-press #(re-frame/dispatch [:chat.ui/clear-history-pressed chat-id])}] + [quo/list-item + {:theme :accent + :title (i18n/label :t/fetch-history) :accessibility-label :fetch-history-button :icon :main-icons/arrow-down :on-press #(hide-sheet-and-dispatch [:chat.ui/fetch-history-pressed chat-id])}] (when joined? - [list-item/list-item - {:theme :action - :title :t/leave-chat + [quo/list-item + {:theme :negative + :title (i18n/label :t/leave-chat) :accessibility-label :leave-chat-button :icon :main-icons/arrow-left - :on-press #(hide-sheet-and-dispatch [:group-chats.ui/leave-chat-pressed chat-id])}])]))) + :on-press #(re-frame/dispatch [:group-chats.ui/leave-chat-pressed chat-id])}])]))) (defn actions [{:keys [public? group-chat] :as current-chat}] (cond - public? [public-chat-actions current-chat] - group-chat [group-chat-actions current-chat] - :else [one-to-one-chat-actions current-chat])) + public? [public-chat-accents current-chat] + group-chat [group-chat-accents current-chat] + :else [one-to-one-chat-accents current-chat])) (defn options [chat-id message-id] (fn [] [react/view [react/i18n-text {:style sheets.styles/sheet-text :key :message-not-sent}] - [list-item/list-item - {:theme :action - :title :t/resend-message + [quo/list-item + {:theme :accent + :title (i18n/label :t/resend-message) :icon :main-icons/refresh :accessibility-label :resend-message-button :on-press #(hide-sheet-and-dispatch [:chat.ui/resend-message chat-id message-id])}] - [list-item/list-item - {:theme :action-destructive - :title :t/delete-message + [quo/list-item + {:theme :negative + :title (i18n/label :t/delete-message) :icon :main-icons/delete - :accessibility-label :delete-transaction-button + :accessibility-label :delete-transaccent-button :on-press #(hide-sheet-and-dispatch [:chat.ui/delete-message chat-id message-id])}]])) (defn message-long-press [{:keys [content from outgoing] :as message}] (fn [] - (let [photo @(re-frame/subscribe [:chats/photo-path from]) + (let [photo @(re-frame/subscribe [:chats/photo-path from]) contact-name @(re-frame/subscribe [:contacts/contact-name-by-identity from])] [react/view (when-not outgoing - [list-item/list-item - {:theme :action - :icon photo - :title [view-profile {:name contact-name - :helper :t/view-profile}] + [quo/list-item + {:theme :accent + :icon [chat-icon/contact-icon-contacts-tab photo] + :title contact-name + :subtitle (i18n/label :t/view-profile) :accessibility-label :view-chat-details-button - :accessories [:chevron] - :on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile from])}]) - [list-item/list-item - {:theme :action - :title :t/message-reply + :chevron true + :on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile from])}]) + [quo/list-item + {:theme :accent + :title (i18n/label :t/message-reply) :icon :main-icons/reply :on-press #(hide-sheet-and-dispatch [:chat.ui/reply-to-message message])}] - [list-item/list-item - {:theme :action - :title :t/sharing-copy-to-clipboard + [quo/list-item + {:theme :accent + :title (i18n/label :t/sharing-copy-to-clipboard) :icon :main-icons/copy :on-press (fn [] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch [:bottom-sheet/hide]) (react/copy-to-clipboard (:text content)))}] (when-not platform/desktop? - [list-item/list-item - {:theme :action - :title :t/sharing-share + [quo/list-item + {:theme :accent + :title (i18n/label :t/sharing-share) :icon :main-icons/share :on-press (fn [] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) - (list-selection/open-share {:message (:text content)}))}])]))) + (re-frame/dispatch [:bottom-sheet/hide]) + ;; https://github.com/facebook/react-native/pull/26839 + (js/setTimeout + #(list-selection/open-share {:message (:text content)}) + 250))}])]))) (defn sticker-long-press [{:keys [from]}] (fn [] - (let [photo @(re-frame/subscribe [:chats/photo-path from]) + (let [photo @(re-frame/subscribe [:chats/photo-path from]) contact-name @(re-frame/subscribe [:contacts/contact-name-by-identity from])] [react/view - [list-item/list-item - {:theme :action - :icon photo - :title [view-profile {:name contact-name - :helper :t/view-profile}] + [quo/list-item + {:theme :accent + :icon [chat-icon/contact-icon-contacts-tab photo] + :title contact-name + :subtitle (i18n/label :t/view-profile) :accessibility-label :view-chat-details-button - :accessories [:chevron] + :chevron true :on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile from])}]]))) (defn image-long-press [{:keys [content identicon from outgoing] :as message} from-preview?] (fn [] - (let [{:keys [ens-name alias]} @(re-frame/subscribe [:contacts/contact-name-by-identity from])] + (let [contact-name @(re-frame/subscribe [:contacts/contact-name-by-identity from])] [react/view (when-not outgoing - [list-item/list-item - {:theme :action - :icon (multiaccounts/displayed-photo {:identicon identicon - :public-key from}) - :title [view-profile {:name (or ens-name alias) - :helper :t/view-profile}] + [quo/list-item + {:theme :accent + :icon [chat-icon/contact-icon-contacts-tab + (multiaccounts/displayed-photo {:identicon identicon + :public-key from})] + :title contact-name + :subtitle (i18n/label :t/view-profile) :accessibility-label :view-chat-details-button - :accessories [:chevron] + :chevron true :on-press #(do (when from-preview? (re-frame/dispatch [:navigate-back])) - (hide-sheet-and-dispatch [:chat.ui/show-profile from]))}]) - [list-item/list-item - {:theme :action - :title :t/message-reply + (hide-sheet-and-dispatch [:chat.ui/show-profile from]))}]) + [quo/list-item + {:theme :accent + :title (i18n/label :t/message-reply) :icon :main-icons/reply :on-press #(do (when from-preview? (re-frame/dispatch [:navigate-back])) (hide-sheet-and-dispatch [:chat.ui/reply-to-message message]))}] ;; we have only base64 string for image, so we need to find a way how to copy it - #_[list-item/list-item - {:theme :action + #_[quo/list-item + {:theme :accent :title :t/sharing-copy-to-clipboard :icon :main-icons/copy :on-press (fn [] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch [:bottom-sheet/hide]) (react/copy-to-clipboard (:image content)))}] - [list-item/list-item - {:theme :action - :title :t/save + [quo/list-item + {:theme :accent + :title (i18n/label :t/save) :icon :main-icons/download :on-press (fn [] (hide-sheet-and-dispatch [:chat.ui/save-image-to-gallery (:image content)]))}] ;; we have only base64 string for image, so we need to find a way how to share it - #_[list-item/list-item - {:theme :action + #_[quo/list-item + {:theme :accent :title :t/sharing-share :icon :main-icons/share :on-press (fn [] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch [:bottom-sheet/hide]) (list-selection/open-share {:message (:image content)}))}]]))) diff --git a/src/status_im/ui/screens/chat/stickers/views.cljs b/src/status_im/ui/screens/chat/stickers/views.cljs index ce92b9b0d7..963cad18f5 100644 --- a/src/status_im/ui/screens/chat/stickers/views.cljs +++ b/src/status_im/ui/screens/chat/stickers/views.cljs @@ -7,6 +7,7 @@ [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.colors :as colors] [status-im.i18n :as i18n] + [quo.core :as quo] [status-im.ui.screens.chat.stickers.styles :as styles] [status-im.ui.components.animation :as anim] [status-im.utils.contenthash :as contenthash] @@ -21,26 +22,26 @@ (def scroll-x (reagent/atom 0)) (defn button [stickers-showing?] - [react/touchable-highlight - {:on-press (fn [_] - (re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-bottom-sheet (when-not stickers-showing? :stickers)}]) - (when-not platform/desktop? (js/setTimeout #(react/dismiss-keyboard!) 100))) - :accessibility-label :show-stickers-icon} - [vector-icons/icon :main-icons/stickers {:container-style {:margin 14 :margin-right 6} - :color (if stickers-showing? colors/blue colors/gray)}]]) + [quo/button + {:on-press (fn [_] + (re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-bottom-sheet (when-not stickers-showing? :stickers)}]) + (when-not platform/desktop? (js/setTimeout #(react/dismiss-keyboard!) 100))) + :accessibility-label :show-stickers-icon + :type :icon + :theme (if stickers-showing? :main :disabled)} + :main-icons/stickers]) (defn- no-stickers-yet-panel [] [react/view {:style {:flex 1 :align-items :center :justify-content :center}} [vector-icons/icon :stickers-icons/stickers-big {:color colors/gray :width 64 :height 64}] - [react/text {:style {:margin-top 8 :font-size 17}} (i18n/label :t/you-dont-have-stickers)] - [react/touchable-opacity {:on-press #(do - (re-frame/dispatch [:stickers/load-packs]) - (re-frame/dispatch [:navigate-to :stickers]))} - [react/view {:margin-top 6 :height 44 :justify-content :center} - [react/text {:style {:color colors/blue}} - (i18n/label :t/get-stickers)]]]]) + [react/text {:style {:margin-vertical 8 :font-size 17}} (i18n/label :t/you-dont-have-stickers)] + [quo/button {:type :secondary + :on-press #(do + (re-frame/dispatch [:stickers/load-packs]) + (re-frame/dispatch [:navigate-to :stickers]))} + (i18n/label :t/get-stickers)]]) (defn- stickers-panel [stickers window-width] [react/view {:width window-width :flex 1} diff --git a/src/status_im/ui/screens/chat/styles/input/input.cljs b/src/status_im/ui/screens/chat/styles/input/input.cljs index 5ead2d8b48..8427ae4993 100644 --- a/src/status_im/ui/screens/chat/styles/input/input.cljs +++ b/src/status_im/ui/screens/chat/styles/input/input.cljs @@ -61,7 +61,7 @@ (def input-container {:flex-direction :row - :align-items :flex-end}) + :align-items :center}) (def input-view {:flex 1 diff --git a/src/status_im/ui/screens/chat/styles/main.cljs b/src/status_im/ui/screens/chat/styles/main.cljs index cc663b546a..6a51452a91 100644 --- a/src/status_im/ui/screens/chat/styles/main.cljs +++ b/src/status_im/ui/screens/chat/styles/main.cljs @@ -20,11 +20,6 @@ :line-height 16 :color colors/text-gray}) -(def last-activity-text - {:font-size 14 - :margin-top 4 - :color colors/text-gray}) - ;; this map looks a bit strange ;; but this way of setting elevation seems to be the only way to set z-index (in RN 0.30) (defn add-contact [] diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index cf01c2abc4..a60d018dba 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -52,13 +52,6 @@ {:color colors/blue}] [react/i18n-text {:style style/add-contact-text :key :add-to-contacts}]]]))) -(defn intro-header [name] - [react/text {:style (assoc style/intro-header-description - :margin-bottom 32)} - (str - (i18n/label :t/empty-chat-description-one-to-one) - name)]) - (defn chat-intro [{:keys [chat-id chat-name group-chat diff --git a/src/status_im/ui/screens/contacts_list/views.cljs b/src/status_im/ui/screens/contacts_list/views.cljs index bf4f5151eb..d955bfad55 100644 --- a/src/status_im/ui/screens/contacts_list/views.cljs +++ b/src/status_im/ui/screens/contacts_list/views.cljs @@ -4,16 +4,19 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.list.views :as list.views] [status-im.ui.components.react :as react] + [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.i18n :as i18n] + [quo.core :as quo] [status-im.ui.components.topbar :as topbar]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn contacts-list-item [{:keys [public-key] :as contact}] - [list.views/big-list-item - ;;TODO this should be done in a subscription - {:text (multiaccounts/displayed-name contact) - :image-source (multiaccounts/displayed-photo contact) - :action-fn #(re-frame/dispatch [:chat.ui/show-profile public-key])}]) + [quo/list-item + {:title (multiaccounts/displayed-name contact) + :icon [chat-icon.screen/contact-icon-contacts-tab + (multiaccounts/displayed-photo contact)] + :chevron true + :on-press #(re-frame/dispatch [:chat.ui/show-profile public-key])}]) (defview contacts-list [] (letsubs [blocked-contacts-count [:contacts/blocked-count] @@ -22,18 +25,20 @@ [topbar/topbar {:title :t/contacts}] [react/scroll-view {:flex 1} (when (pos? blocked-contacts-count) - [list.views/big-list-item - {:style {:margin-vertical 16} - :text (i18n/label :t/blocked-users) - :icon :main-icons/cancel - :icon-color colors/red - :accessibility-label :blocked-users-list-button - :accessory-value blocked-contacts-count - :action-fn #(re-frame/dispatch [:navigate-to :blocked-users-list])}]) + [react/view {:margin-vertical 16} + [quo/list-item + {:title (i18n/label :t/blocked-users) + :icon :main-icons/cancel + :theme :negative + :accessibility-label :blocked-users-list-button + :chevron true + :accessory :text + :accessory-text blocked-contacts-count + :on-press #(re-frame/dispatch [:navigate-to :blocked-users-list])}]]) [list.views/flat-list - {:data contacts - :key-fn :address - :render-fn contacts-list-item}]]])) + {:data contacts + :key-fn :address + :render-fn contacts-list-item}]]])) (defview blocked-users-list [] (letsubs [blocked-contacts [:contacts/blocked]] diff --git a/src/status_im/ui/screens/dapps_permissions/views.cljs b/src/status_im/ui/screens/dapps_permissions/views.cljs index 2ca6dffe6d..35f556b24f 100644 --- a/src/status_im/ui/screens/dapps_permissions/views.cljs +++ b/src/status_im/ui/screens/dapps_permissions/views.cljs @@ -7,7 +7,7 @@ [status-im.ui.components.list.views :as list] [status-im.ui.components.colors :as colors] [status-im.ui.screens.dapps-permissions.styles :as styles] - [status-im.ui.components.common.common :as components.common] + [quo.core :as quo] [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.topbar :as topbar])) @@ -16,20 +16,20 @@ [icons/icon :main-icons/dapp {:color colors/gray}]]) (defn prepare-items [{:keys [dapp permissions]}] - {:title dapp - :accessories [:chevron] - :on-press #(re-frame/dispatch [:navigate-to :manage-dapps-permissions {:dapp dapp :permissions permissions}]) - :icon d-icon}) + {:title dapp + :chevron true + :on-press #(re-frame/dispatch [:navigate-to :manage-dapps-permissions {:dapp dapp :permissions permissions}]) + :icon [d-icon]}) (defn prepare-items-manage [name] (fn [permission] - {:title (cond - (= permission constants/dapp-permission-web3) - name - (= permission constants/dapp-permission-contact-code) - :t/contact-code) - :type :small - :accessories [:main-icons/check]})) + {:title (cond + (= permission constants/dapp-permission-web3) + name + (= permission constants/dapp-permission-contact-code) + (i18n/label :t/contact-code)) + :size :small + :accessory [icons/icon :main-icons/check {}]})) (views/defview dapps-permissions [] (views/letsubs [permissions [:dapps/permissions]] @@ -38,7 +38,7 @@ [list/flat-list {:data (vec (map prepare-items (vals permissions))) :key-fn (fn [_ i] (str i)) - :render-fn list/flat-list-generic-render-fn}]])) + :render-fn quo/list-item}]])) (views/defview manage [] (views/letsubs [{:keys [dapp permissions]} [:get-screen-params] @@ -48,7 +48,9 @@ [list/flat-list {:data (vec (map (prepare-items-manage name) permissions)) :key-fn (fn [_ i] (str i)) - :render-fn list/flat-list-generic-render-fn}] - [react/view {:padding-vertical 16} - [components.common/red-button {:label (i18n/label :t/revoke-access) - :on-press #(re-frame/dispatch [:dapps/revoke-access dapp])}]]])) + :render-fn quo/list-item}] + [react/view {:padding-vertical 16 + :padding-horizontal 16} + [quo/button {:theme :negative + :on-press #(re-frame/dispatch [:dapps/revoke-access dapp])} + (i18n/label :t/revoke-access)]]])) diff --git a/src/status_im/ui/screens/ens/views.cljs b/src/status_im/ui/screens/ens/views.cljs index 9a6d522205..fbf13263bf 100644 --- a/src/status_im/ui/screens/ens/views.cljs +++ b/src/status_im/ui/screens/ens/views.cljs @@ -13,12 +13,11 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.common.common :as components.common] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.list-item.views :as list-item] - [status-im.ui.components.list.views :as list] [status-im.ui.components.radio :as radio] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.chat.utils :as chat.utils] + [status-im.ui.components.toolbar :as toolbar] [status-im.ui.screens.chat.message.message :as message] [status-im.ui.screens.chat.styles.message.message :as message.style] [status-im.ui.screens.chat.photos :as photos] @@ -29,16 +28,6 @@ [quo.core :as quo]) (:require-macros [status-im.utils.views :as views])) -(defn- button - [{:keys [on-press] :as m} label] - [components.common/button (merge {:button-style {:margin-vertical 8 - :padding-horizontal 32 - :justify-content :center - :align-items :center} - :on-press on-press - :label label} - m)]) - (defn- link [{:keys [on-press]} label] [react/touchable-opacity {:on-press on-press @@ -278,27 +267,6 @@ "\n" (i18n/label :t/ens-understand)]]) -(defn- registration-bottom-bar [checked? amount-label sufficient-funds?] - [react/view {:style {:border-top-width 1 - :border-top-color colors/gray-lighter - :padding-horizontal 16 - :padding-vertical 8 - :flex-direction :row - :justify-content :space-between}} - [react/view {:flex-direction :row :align-items :center} - [react/image {:source tokens/snt-icon-source - :style {:width 36 :height 36}}] - [react/view {:flex-direction :column :margin 8} - [react/text {:style {:font-size 15}} - amount-label] - [react/text {:style {:color colors/gray :font-size 15}} - (i18n/label :t/ens-deposit)]]] - [quo/button {:disabled (or (not @checked?) (not sufficient-funds?)) - :on-press #(debounce/dispatch-and-chill [::ens/register-name-pressed] 2000)} - (if sufficient-funds? - (i18n/label :t/ens-register) - (i18n/label :t/not-enough-snt))]]) - (defn- registration [checked contract address public-key] [react/view {:style {:flex 1 :margin-top 24}} @@ -309,38 +277,56 @@ :content public-key}]] [agreement checked contract]]) -(views/defview checkout [] - (views/letsubs [{:keys [username address custom-domain? public-key - contract amount-label sufficient-funds?]} - [:ens/checkout-screen]] - (let [checked? (reagent/atom false)] - [react/keyboard-avoiding-view {:flex 1} - [toolbar] - [react/scroll-view {:style {:flex 1}} - [react/view {:style {:flex 1 - :align-items :center - :justify-content :center}} - [big-blue-icon nil] - [react/text {:text-align :center - :style {:flex 1 - :font-size 22 - :padding-horizontal 48}} - username] - [react/view {:style {:height 36 - :align-items :center - :justify-content :space-between - :padding-horizontal 12 - :margin-top 24 - :margin-horizontal 16 - :border-color colors/gray-lighter :border-radius 20 - :border-width 1 - :flex-direction :row}} - [react/text {:style {:font-size 13 - :typography :main-medium}} - (domain-label custom-domain?)] - [react/view {:flex 1 :min-width 24}]]] - [registration checked? contract address public-key]] - [registration-bottom-bar checked? amount-label sufficient-funds?]]))) +(defn checkout [] + (let [checked? (reagent/atom false)] + (fn [] + (let [{:keys [username address custom-domain? public-key + contract amount-label sufficient-funds?]} + @(re-frame/subscribe [:ens/checkout-screen])] + [react/keyboard-avoiding-view {:flex 1} + [toolbar] + [react/scroll-view {:style {:flex 1}} + [react/view {:style {:flex 1 + :align-items :center + :justify-content :center}} + [big-blue-icon nil] + [react/text {:text-align :center + :style {:flex 1 + :font-size 22 + :padding-horizontal 48}} + username] + [react/view {:style {:height 36 + :align-items :center + :justify-content :space-between + :padding-horizontal 12 + :margin-top 24 + :margin-horizontal 16 + :border-color colors/gray-lighter :border-radius 20 + :border-width 1 + :flex-direction :row}} + [react/text {:style {:font-size 13 + :typography :main-medium}} + (domain-label custom-domain?)] + [react/view {:flex 1 :min-width 24}]]] + [registration checked? contract address public-key]] + [toolbar/toolbar + {:show-border? true + :size :large + :left [react/view {:flex-direction :row :align-items :center} + [react/image {:source tokens/snt-icon-source + :style {:width 36 :height 36}}] + [react/view {:flex-direction :column :margin 8} + [react/text {:style {:font-size 15}} + amount-label] + [react/text {:style {:color colors/gray :font-size 15}} + (i18n/label :t/ens-deposit)]]] + :right [react/view {:padding-horizontal 8} + [quo/button + {:disabled? (or (not @checked?) (not sufficient-funds?)) + :on-press #(debounce/dispatch-and-chill [::ens/register-name-pressed] 2000)} + (if sufficient-funds? + (i18n/label :t/ens-register) + (i18n/label :t/not-enough-snt))]]}]])))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;; CONFIRMATION SCREEN @@ -350,10 +336,10 @@ [state] (case state :registration-failed - [react/view {:style {:width 40 :height 40 :border-radius 30 :background-color colors/red-light + [react/view {:style {:width 40 :height 40 :border-radius 30 :background-color colors/red-light :align-items :center :justify-content :center}} [vector-icons/icon :main-icons/warning {:color colors/red}]] - [react/view {:style {:width 40 :height 40 :border-radius 30 :background-color colors/gray-lighter + [react/view {:style {:width 40 :height 40 :border-radius 30 :background-color colors/gray-lighter :align-items :center :justify-content :center}} [vector-icons/icon :main-icons/check {:color colors/blue}]])) @@ -415,12 +401,11 @@ [final-state-details state username]] (if (= state :registration-failed) [react/view - [button {:on-press #(re-frame/dispatch [::ens/retry-pressed])} + [quo/button {:on-press #(re-frame/dispatch [::ens/retry-pressed])} (i18n/label :t/retry)] - [button {:background? false - :on-press #(re-frame/dispatch [::ens/cancel-pressed])} + [quo/button {:on-press #(re-frame/dispatch [::ens/cancel-pressed])} (i18n/label :t/cancel)]] - [button {:on-press #(re-frame/dispatch [::ens/got-it-pressed])} + [quo/button {:on-press #(re-frame/dispatch [::ens/got-it-pressed])} (i18n/label :t/ens-got-it)])]])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -512,32 +497,22 @@ ;;TODO this is temporary fix for accounts with failed txs ;;we still need this for regular ens names (not pending) but we need to detach public key in the contract (when pending? - [list/big-list-item {:text (i18n/label :t/ens-remove-username) - ;:subtext (i18n/label :t/ens-remove-hints) - :text-color colors/red - :text-style {:font-weight "500"} - :icon :main-icons/close - :icon-color colors/red - :hide-chevron? true - :action-fn #(re-frame/dispatch [::ens/remove-username name])}]) + [quo/list-item {:title (i18n/label :t/ens-remove-username) + ;:subtext (i18n/label :t/ens-remove-hints) + :icon :main-icons/close + :theme :negative + :on-press #(re-frame/dispatch [::ens/remove-username name])}]) (when (and (not custom-domain?) (not pending?)) [react/view {:style {:margin-top 18}} - [list/big-list-item {:text (i18n/label :t/ens-release-username) - :text-color (if releasable? - colors/blue - colors/gray) - :text-style {:font-weight "500"} - :subtext (when (and expiration-date - (not releasable?)) - (i18n/label :t/ens-locked - {:date expiration-date})) - :icon :main-icons/delete - :icon-color (if releasable? - colors/blue - colors/gray) - :active? releasable? - :hide-chevron? true - :action-fn #(open-release-instructions-link!)}]])]]]])) + [quo/list-item {:title (i18n/label :t/ens-release-username) + :theme :accent + :disabled (not releasable?) + :subtitle (when (and expiration-date + (not releasable?)) + (i18n/label :t/ens-locked + {:date expiration-date})) + :icon :main-icons/delete + :on-press #(open-release-instructions-link!)}]])]]]])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;; WELCOME SCREEN @@ -594,16 +569,17 @@ (i18n/label :t/ens-welcome-point-verify)]] [react/text {:style {:margin-top 16 :text-align :center :color colors/gray :typography :caption :padding-bottom 96}} (i18n/label :t/ens-powered-by)]] - [react/view {:align-items :center :background-color colors/white - :position :absolute :left 0 :right 0 :bottom 0 - :border-top-width 1 :border-top-color colors/gray-lighter} - [button {:on-press #(re-frame/dispatch [::ens/get-started-pressed]) - :label (i18n/label :t/get-started)}]]])) + [toolbar/toolbar + {:show-border? true + :right [quo/button {:on-press #(re-frame/dispatch [::ens/get-started-pressed]) + :type :secondary + :after :main-icons/next} + (i18n/label :t/get-started)]}]])) (defn- name-item [{:keys [name action subtitle]}] (let [stateofus-username (stateofus/username name) s (or stateofus-username name)] - [list-item/list-item + [quo/list-item {:title s :subtitle (if subtitle subtitle @@ -624,7 +600,7 @@ [react/view {:style {:flex 1}} (for [name names] (let [action #(do (re-frame/dispatch [::ens/save-preferred-name name]) - (re-frame/dispatch [:bottom-sheet/hide-sheet]))] + (re-frame/dispatch [:bottom-sheet/hide]))] ^{:key name} [react/touchable-highlight {:on-press action} [react/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :center :margin-right 16}} @@ -654,9 +630,9 @@ [react/view {:style {:flex 1}} [react/scroll-view [react/view {:style {:margin-top 8}} - [list-item/list-item + [quo/list-item {:title (i18n/label :t/ens-add-username) - :theme :action + :theme :accent :on-press #(re-frame/dispatch [::ens/add-username-pressed]) :icon :main-icons/add}]] [react/view {:style {:margin-top 22 :margin-bottom 8}} diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index e62f3577e7..6c80ed6ba8 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -5,15 +5,13 @@ [reagent.core :as reagent] [status-im.constants :as constants] [status-im.i18n :as i18n] - [status-im.ui.components.button :as button] [status-im.ui.components.chat-icon.screen :as chat-icon] - [status-im.ui.components.checkbox.view :as checkbox] [status-im.ui.components.colors :as colors] [status-im.ui.components.contact.contact :as contact] + [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.keyboard-avoid-presentation :as kb-presentation] - [status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list-selection :as list-selection] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] @@ -28,9 +26,10 @@ (:require-macros [status-im.utils.views :as views])) (defn- render-contact [row] - [list-item/list-item + [quo/list-item {:title (contact/format-name row) - :icon [chat-icon/contact-icon-contacts-tab row]}]) + :icon [chat-icon/contact-icon-contacts-tab + (multiaccounts/displayed-photo row)]}]) (defn- on-toggle [allow-new-users? checked? public-key] (cond @@ -57,11 +56,13 @@ (defn- toggle-item [] (fn [allow-new-users? subs-name {:keys [public-key] :as contact} on-toggle] (let [contact-selected? @(re-frame/subscribe [subs-name public-key])] - [list-item/list-item - {:title (contact/format-name contact) - :icon [chat-icon/contact-icon-contacts-tab contact] - :on-press #(on-toggle allow-new-users? contact-selected? public-key) - :accessories [[checkbox/checkbox {:checked? contact-selected?}]]}]))) + [quo/list-item + {:title (contact/format-name contact) + :icon [chat-icon/contact-icon-contacts-tab + (multiaccounts/displayed-photo contact)] + :on-press #(on-toggle allow-new-users? contact-selected? public-key) + :active contact-selected? + :accessory :checkbox}]))) (defn- group-toggle-contact [allow-new-users? contact] [toggle-item allow-new-users? :is-contact-selected? contact on-toggle]) @@ -91,10 +92,10 @@ {:style (styles/no-contact-text)} no-contacts] (when-not platform/desktop? - [button/button + [quo/button {:type :secondary - :on-press handle-invite-friends-pressed - :label :t/invite-friends}])]) + :on-press handle-invite-friends-pressed} + (i18n/label :t/invite-friends)])]) (defn filter-contacts [filter-text contacts] (let [lower-filter-text (string/lower-case (str filter-text)) @@ -145,18 +146,19 @@ :enable-empty-sections true}]]] [bottom-toolbar/toolbar {:show-border? true - :left {:type :previous - :accessibility-label :previous-button - :label (i18n/label :t/back) - :on-press #(re-frame/dispatch [:navigate-back])} - :right {:type :secondary - :container-style {:padding-horizontal 16} - :text-style {:font-weight "500"} - :accessibility-label :create-group-chat-button - :label (i18n/label :t/create-group-chat) - :disabled? (not save-btn-enabled?) - :on-press #(debounce/dispatch-and-chill [:group-chats.ui/create-pressed group-name] - 300)}}]]]))) + :left + [quo/button {:type :secondary + :before :main-icon/back + :accessibility-label :previous-button + :on-press #(re-frame/dispatch [:navigate-back])} + (i18n/label :t/back)] + :right + [quo/button {:type :secondary + :accessibility-label :create-group-chat-button + :disabled (not save-btn-enabled?) + :on-press #(debounce/dispatch-and-chill [:group-chats.ui/create-pressed group-name] + 300)} + (i18n/label :t/create-group-chat)]}]]]))) (defn searchable-contact-list [] (let [search-value (reagent/atom nil)] @@ -195,11 +197,13 @@ (dec constants/max-group-chat-participants))}] [bottom-toolbar/toolbar {:show-border? true - :right {:type :next - :accessibility-label :next-button - :label (i18n/label :t/next) - :disabled? (zero? selected-contacts-count) - :on-press #(re-frame/dispatch [:navigate-to :new-group])}}]])) + :right + [quo/button {:type :secondary + :after :main-icon/next + :accessibility-label :next-button + :disabled (zero? selected-contacts-count) + :on-press #(re-frame/dispatch [:navigate-to :new-group])} + (i18n/label :t/next)]}]])) ;; Add participants to existing group chat (views/defview add-participants-toggle-list [] @@ -227,11 +231,12 @@ constants/max-group-chat-participants)}] [bottom-toolbar/toolbar {:show-border? true - :center {:type :secondary - :accessibility-label :next-button - :label (i18n/label :t/add) - :disabled? (zero? selected-contacts-count) - :on-press #(re-frame/dispatch [:group-chats.ui/add-members-pressed])}}]]))) + :center + [quo/button {:type :secondary + :accessibility-label :next-button + :disabled (zero? selected-contacts-count) + :on-press #(re-frame/dispatch [:group-chats.ui/add-members-pressed])} + (i18n/label :t/add)]}]]))) (views/defview edit-group-chat-name [] (views/letsubs [{:keys [name chat-id]} [:chats/current-chat] @@ -253,14 +258,15 @@ [react/view {:style {:flex 1}}] [bottom-toolbar/toolbar {:show-border? true - :center {:type :secondary - :accessibility-label :done - :label (i18n/label :t/done) - :disabled? (and (<= (count @new-group-chat-name) 1) - (not (nil? @new-group-chat-name))) - :on-press #(cond - (< 1 (count @new-group-chat-name)) - (re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name]) + :center + [quo/button {:type :secondary + :accessibility-label :done + :disabled (and (<= (count @new-group-chat-name) 1) + (not (nil? @new-group-chat-name))) + :on-press #(cond + (< 1 (count @new-group-chat-name)) + (re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name]) - (nil? @new-group-chat-name) - (re-frame/dispatch [:navigate-back]))}}]])) + (nil? @new-group-chat-name) + (re-frame/dispatch [:navigate-back]))} + (i18n/label :t/done)]}]])) diff --git a/src/status_im/ui/screens/hardwallet/frozen_card/view.cljs b/src/status_im/ui/screens/hardwallet/frozen_card/view.cljs index a670426c0c..a591b2c59b 100644 --- a/src/status_im/ui/screens/hardwallet/frozen_card/view.cljs +++ b/src/status_im/ui/screens/hardwallet/frozen_card/view.cljs @@ -3,7 +3,7 @@ (:require [status-im.ui.components.react :as react] [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.common.common :as components.common] + [quo.core :as quo] [status-im.hardwallet.login :as login] [status-im.i18n :as i18n] [re-frame.core :as re-frame])) @@ -32,13 +32,13 @@ [react/view {:margin-bottom 24 :margin-horizontal 24 :align-items :center} - [components.common/button - {:on-press #(re-frame/dispatch [::login/reset-pin]) - :button-style {:margin-top 24} - :label (i18n/label :t/keycard-is-frozen-reset)}] + [react/view {:style {:margin-top 24}} + [quo/button + {:on-press #(re-frame/dispatch [::login/reset-pin])} + (i18n/label :t/keycard-is-frozen-reset)]] (when show-dismiss-button? - [components.common/button - {:on-press #(re-frame/dispatch [::login/frozen-keycard-popover-dismissed]) - :button-style {:margin-top 24} - :background? false - :label (i18n/label :t/dismiss)}])]]) + [react/view {:margin-top 24} + [quo/button + {:on-press #(re-frame/dispatch [::login/frozen-keycard-popover-dismissed]) + :background? false} + (i18n/label :t/dismiss)]])]]) diff --git a/src/status_im/ui/screens/hardwallet/pin/styles.cljs b/src/status_im/ui/screens/hardwallet/pin/styles.cljs index 82bbbc051e..1f397eaad3 100644 --- a/src/status_im/ui/screens/hardwallet/pin/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/styles.cljs @@ -93,7 +93,7 @@ :align-items :center :justify-content :center :flex-direction :row - :border-radius 50 + :border-radius (/ (if small-screen? 50 64) 2) :background-color colors/blue-light}) (defn numpad-delete-button [small-screen?] diff --git a/src/status_im/ui/screens/hardwallet/settings/views.cljs b/src/status_im/ui/screens/hardwallet/settings/views.cljs index 1f9da30353..11f381cddc 100644 --- a/src/status_im/ui/screens/hardwallet/settings/views.cljs +++ b/src/status_im/ui/screens/hardwallet/settings/views.cljs @@ -4,39 +4,13 @@ [status-im.i18n :as i18n] [status-im.ui.components.react :as react] [status-im.react-native.resources :as resources] - [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.colors :as colors] - [status-im.ui.components.common.common :as components.common] + [quo.core :as quo] [status-im.ui.components.topbar :as topbar] [status-im.constants :as constants] [status-im.ui.screens.keycard.views :as keycard.views] [status-im.hardwallet.common :as hardwallet.common])) -(defn- action-row [{:keys [icon label on-press color-theme]}] - [react/touchable-highlight - {:on-press on-press} - [react/view {:flex-direction :row - :margin-top 15} - [react/view {:background-color (case color-theme - :red colors/red-transparent-10 - colors/blue-light) - :width 40 - :height 40 - :border-radius 50 - :align-items :center - :justify-content :center} - [vector-icons/icon icon {:color (case color-theme - :red colors/red - colors/blue)}]] - [react/view {:align-items :center - :justify-content :center - :margin-left 16} - [react/text {:style {:font-size 17 - :color (case color-theme - :red colors/red - colors/blue)}} - (i18n/label label)]]]]) - (defn- activity-indicator [loading?] (when loading? [react/view {:margin-top 35} @@ -44,12 +18,14 @@ :size :large}]])) (defn- reset-card-next-button [disabled?] - [react/view {:margin-right 18 - :margin-bottom 15} - [components.common/bottom-button - {:on-press #(re-frame/dispatch [:keycard-settings.ui/reset-card-next-button-pressed]) - :disabled? disabled? - :forward? true}]]) + [react/view {:margin-right 6 + :margin-bottom 8} + [quo/button + ;; TODO: Should have label?: + {:on-press #(re-frame/dispatch [:keycard-settings.ui/reset-card-next-button-pressed]) + :disabled disabled? + :type :secondary + :after :main-icon/next}]]) (defview reset-card [] (letsubs [disabled? [:keycard-reset-card-disabled?]] @@ -92,10 +68,8 @@ pairing [:keycard-multiaccount-pairing]] [react/view {:flex 1} [topbar/topbar {:title :t/status-keycard}] - [react/view {:flex 1 - :background-color colors/white} + [react/scroll-view {:flex 1} [react/view {:margin-top 47 - :flex 1 :align-items :center} [react/image {:source (resources/get-image :hardwallet-card) :style {:width 255 @@ -104,35 +78,36 @@ [react/view {:margin-top 27} [react/text (i18n/label :t/linked-on {:date paired-on})]])] - [react/view {:margin-left 16 - :flex 1 - :width "90%" - :flex-direction :column} + [react/view {:padding-vertical 16} (if (zero? puk-retry-counter) [card-blocked] - [react/view - [action-row {:icon :main-icons/help - :label :t/help-capitalized - :on-press #(.openURL ^js react/linking - constants/faq-keycard)}] + [:<> + [quo/list-item {:icon :main-icons/help + :size :small + :title (i18n/label :t/help-capitalized) + :on-press #(.openURL ^js react/linking + constants/faq-keycard)}] (when pairing - [react/view - [action-row {:icon :main-icons/add - :label :t/change-pin - :on-press #(re-frame/dispatch [:keycard-settings.ui/change-pin-pressed])}] + [:<> + [quo/list-item {:icon :main-icons/add + :size :small + :title (i18n/label :t/change-pin) + :on-press #(re-frame/dispatch [:keycard-settings.ui/change-pin-pressed])}] ;; TODO(rasom): uncomment this when unpairing will be enabled ;; https://github.com/status-im/status-react/issues/9227 - #_[action-row {:icon :main-icons/close - :label :t/unpair-card - :on-press #(re-frame/dispatch [:keycard-settings.ui/unpair-card-pressed])}]])])] + #_[quo/list-item {:icon :main-icons/close + :size :small + :title (i18n/label :t/unpair-card) + :on-press #(re-frame/dispatch [:keycard-settings.ui/unpair-card-pressed])}]])])] ; NOTE: Reset card is hidden until multiaccount removal will be implemented #_(when pairing [react/view {:margin-bottom 35 :margin-left 16} - [action-row {:icon :main-icons/warning - :color-theme :red - :label :t/reset-card - :on-press #(re-frame/dispatch [:keycard-settings.ui/reset-card-pressed])}]])]])) + [quo/list-item {:icon :main-icons/warning + :theme :negative + :size :small + :title (i18n/label :t/reset-card) + :on-press #(re-frame/dispatch [:keycard-settings.ui/reset-card-pressed])}]])]])) (defn reset-pin [] [keycard.views/login-pin diff --git a/src/status_im/ui/screens/help_center/views.cljs b/src/status_im/ui/screens/help_center/views.cljs index 46f388905c..689cba0249 100644 --- a/src/status_im/ui/screens/help_center/views.cljs +++ b/src/status_im/ui/screens/help_center/views.cljs @@ -1,5 +1,7 @@ (ns status-im.ui.screens.help-center.views (:require [re-frame.core :as re-frame] + [status-im.i18n :as i18n] + [quo.core :as quo] [status-im.ui.components.react :as react] [status-im.ui.components.list.views :as list] [status-im.ui.components.colors :as colors] @@ -8,27 +10,27 @@ [status-im.constants :as constants])) (def data - [{:type :small - :title :t/faq + [{:size :small + :title (i18n/label :t/faq) :accessibility-label :faq-button :on-press #(.openURL ^js react/linking constants/faq) - :accessories [:chevron]} - {:type :small - :title :t/glossary + :chevron true} + {:size :small + :title (i18n/label :t/glossary) :accessibility-label :glossary-button :on-press #(re-frame/dispatch [:navigate-to :glossary]) - :accessories [:chevron]} - {:type :small - :title :t/submit-bug + :chevron true} + {:size :small + :title (i18n/label :t/submit-bug) :accessibility-label :submit-bug-button :on-press #(re-frame/dispatch [:logging.ui/send-logs-pressed]) - :accessories [:chevron]} - {:type :small - :title :t/request-feature + :chevron true} + {:size :small + :title (i18n/label :t/request-feature) :accessibility-label :request-a-feature-button :on-press #(re-frame/dispatch [:chat.ui/start-public-chat @@ -36,7 +38,7 @@ "status-desktop" "status") {:navigation-reset? false}]) - :accessories [:chevron]}]) + :chevron true}]) (defn help-center [] [react/view {:flex 1 :background-color colors/white} @@ -44,4 +46,4 @@ [list/flat-list {:data data :key-fn (fn [_ i] (str i)) - :render-fn list/flat-list-generic-render-fn}]]) + :render-fn quo/list-item}]]) diff --git a/src/status_im/ui/screens/home/sheet/views.cljs b/src/status_im/ui/screens/home/sheet/views.cljs index 01134c6ef4..ecb089adea 100644 --- a/src/status_im/ui/screens/home/sheet/views.cljs +++ b/src/status_im/ui/screens/home/sheet/views.cljs @@ -3,42 +3,45 @@ [status-im.i18n :as i18n] [status-im.ui.components.list-selection :as list-selection] [status-im.ui.components.react :as react] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.utils.config :as config])) (defn hide-sheet-and-dispatch [event] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch [:bottom-sheet/hide]) (re-frame/dispatch event)) (defn add-new-view [] [react/view - [list-item/list-item - {:theme :action - :title :t/start-new-chat + [quo/list-item + {:theme :accent + :title (i18n/label :t/start-new-chat) :accessibility-label :start-1-1-chat-button :icon :main-icons/one-on-one-chat :on-press #(hide-sheet-and-dispatch [:navigate-to :new-chat])}] (when config/group-chat-enabled? - [list-item/list-item - {:theme :action - :title :t/start-group-chat + [quo/list-item + {:theme :accent + :title (i18n/label :t/start-group-chat) :accessibility-label :start-group-chat-button :icon :main-icons/group-chat :on-press #(hide-sheet-and-dispatch [:contact.ui/start-group-chat-pressed])}]) - [list-item/list-item - {:theme :action - :title :t/new-public-group-chat + [quo/list-item + {:theme :accent + :title (i18n/label :t/new-public-group-chat) :accessibility-label :join-public-chat-button :icon :main-icons/public-chat :on-press #(hide-sheet-and-dispatch [:navigate-to :new-public-chat])}] - [list-item/list-item - {:theme :action - :title :t/invite-friends + [quo/list-item + {:theme :accent + :title (i18n/label :t/invite-friends) :accessibility-label :chats-menu-invite-friends-button :icon :main-icons/share - :on-press #(do - (re-frame/dispatch [:bottom-sheet/hide-sheet]) - (list-selection/open-share {:message (i18n/label :t/get-status-at)}))}]]) + :on-press (fn [] + (re-frame/dispatch [:bottom-sheet/hide]) + ;; https://github.com/facebook/react-native/pull/26839 + (js/setTimeout + #(list-selection/open-share {:message (i18n/label :t/get-status-at)}) + 250))}]]) (def add-new - {:content add-new-view}) \ No newline at end of file + {:content add-new-view}) diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index f99f837d02..08e4ec899a 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -1,9 +1,6 @@ (ns status-im.ui.screens.home.styles (:require [status-im.ui.components.colors :as colors])) -(def last-message-container - {:flex-shrink 1}) - (def last-message-text {:flex 1 :align-self :stretch diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index 639e24a328..38d3c58b11 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -9,11 +9,10 @@ [status-im.ui.components.react :as react] [status-im.ui.screens.home.styles :as styles] [status-im.ui.screens.home.views.inner-item :as inner-item] - [status-im.ui.components.common.common :as components.common] [status-im.ui.components.list-selection :as list-selection] [status-im.ui.components.colors :as colors] [status-im.ui.screens.add-new.new-public-chat.view :as new-public-chat] - [status-im.ui.components.button :as button] + [quo.core :as quo] [status-im.ui.components.search-input.view :as search-input] [cljs-bean.core :as bean] [status-im.ui.components.topbar :as topbar]) @@ -41,32 +40,31 @@ [react/i18n-text {:style styles/welcome-text-description :key :welcome-to-status-description}]] [react/view {:align-items :center :margin-bottom 50} - [components.common/button {:on-press - #(re-frame/dispatch [:navigate-reset {:index 0 - :routes [{:name :tabs}]}]) - :accessibility-label :lets-go-button - :label (i18n/label :t/lets-go)}]]]) + [quo/button {:on-press #(re-frame/dispatch [:navigate-reset {:index 0 + :routes [{:name :tabs}]}]) + :accessibility-label :lets-go-button} + (i18n/label :t/lets-go)]]]) (defn home-tooltip-view [] [react/view (styles/chat-tooltip) [react/view {:style {:flex-direction :row}} [react/view {:flex 1} [react/view {:style styles/empty-chats-header-container} - [react/view {:style {:width 66 :position :absolute :top -6 :background-color colors/white + [react/view {:style {:width 66 :position :absolute :top -6 :background-color colors/white :align-items :center}} [react/image {:source (resources/get-image :empty-chats-header) :style {:width 50 :height 50}}]]] [react/touchable-highlight - {:style {:position :absolute :right 0 :top 0 - :width 44 :height 44 :align-items :center :justify-content :center} + {:style {:position :absolute :right 0 :top 0 + :width 44 :height 44 :align-items :center :justify-content :center} :on-press #(re-frame/dispatch [:multiaccounts.ui/hide-home-tooltip]) :accessibility-label :hide-home-button} [icons/icon :main-icons/close-circle {:color colors/gray}]]]] [react/i18n-text {:style styles/no-chats-text :key :chat-and-transact}] [react/view {:align-items :center :margin-top 16} - [button/button {:label :t/invite-friends - :on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)}) - :accessibility-label :invite-friends-button}]] + [quo/button {:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)}) + :accessibility-label :invite-friends-button} + (i18n/label :t/invite-friends)]] [react/view {:align-items :center :margin-top 16} [react/view {:style (styles/hr-wrapper)}] [react/i18n-text {:style (styles/or-text) :key :or}]] @@ -126,10 +124,10 @@ (views/defview plus-button [] (views/letsubs [logging-in? [:multiaccounts/login]] [react/view styles/action-button-container - [react/touchable-highlight - {:accessibility-label :new-chat-button - :on-press (when-not logging-in? - #(re-frame/dispatch [:bottom-sheet/show-sheet :add-new {}]))} + [quo/button {:type :scale + :accessibility-label :new-chat-button + :on-press (when-not logging-in? + #(re-frame/dispatch [:bottom-sheet/show-sheet :add-new {}]))} [react/view (styles/action-button) (if logging-in? [react/activity-indicator {:color colors/white-persist diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index 71674dd762..211053580d 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -4,11 +4,13 @@ [status-im.constants :as constants] [status-im.i18n :as i18n] [status-im.ui.components.badge :as badge] + [status-im.ui.components.colors :as colors] [status-im.ui.components.chat-icon.screen :as chat-icon.screen] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.ui.components.react :as react] [status-im.ui.screens.chat.sheets :as sheets] [status-im.ui.screens.home.styles :as styles] + [status-im.ui.components.icons.vector-icons :as icons] [status-im.utils.contenthash :as contenthash] [status-im.utils.core :as utils] [status-im.utils.datetime :as time]) @@ -67,7 +69,7 @@ parsed-text))) (defn message-content-text [{:keys [content content-type]}] - [react/view styles/last-message-container + [:<> (cond (not (and content content-type)) @@ -93,18 +95,31 @@ (render-subheader (:parsed-text content)))]) (defn message-timestamp [timestamp] - (when timestamp - [react/text {:style styles/datetime-text - :accessibility-label :last-message-time-text} - ;;TODO (perf) move to event - (string/upper-case (time/to-short-str timestamp))])) + [react/view + (when timestamp + [react/text {:style styles/datetime-text + :number-of-lines 1 + :accessibility-label :last-message-time-text} + ;;TODO (perf) move to event + (string/upper-case (time/to-short-str timestamp))])]) (defn unviewed-indicator [{:keys [unviewed-messages-count public?]}] (when (pos? unviewed-messages-count) - (if public? - [react/view {:style styles/public-unread - :accessibility-label :unviewed-messages-public}] - [badge/message-counter unviewed-messages-count]))) + [react/view {:padding-left 16 + :justify-content :flex-end + :align-items :flex-end} + (if public? + [react/view {:style styles/public-unread + :accessibility-label :unviewed-messages-public}] + [badge/message-counter unviewed-messages-count])])) + +(defn icon-style [] + {:color colors/black + :width 15 + :height 15 + :container-style {:width 15 + :height 15 + :margin-right 2}}) (defn home-list-item [home-item] (let [{:keys [chat-id chat-name color online group-chat @@ -112,27 +127,41 @@ home-item private-group? (and group-chat (not public?)) public-group? (and group-chat public?)] - ;; NOTE(Ferossgp): Change icon color to black in refactor PR - [list-item/list-item + [quo/list-item {:icon [chat-icon.screen/chat-icon-view-chat-list chat-id group-chat chat-name color online false] - :title-prefix (cond - private-group? :main-icons/tiny-group - public-group? :main-icons/tiny-public - :else :main-icons/tiny-new-contact) - :title (if group-chat - (utils/truncate-str chat-name 30) - ;; This looks a bit odd, but I would like only to subscribe - ;; if it's a one-to-one. If wrapped in a component styling - ;; won't be applied correctly. - @(re-frame/subscribe [:contacts/contact-name-by-identity chat-id])) + :title [react/view {:flex-direction :row + :flex 1} + [react/view {:flex-direction :row + :flex 1 + :padding-right 16 + :align-items :center} + (cond + private-group? + [icons/icon :main-icons/tiny-group (icon-style)] + public-group? + [icons/icon :main-icons/tiny-public (icon-style)] + :else + [icons/icon :main-icons/tiny-new-contact (icon-style)]) + [quo/text {:weight :medium + :accessibility-label :chat-name-text + :ellipsize-mode :tail + :number-of-lines 1} + (if group-chat + (utils/truncate-str chat-name 30) + ;; This looks a bit odd, but I would like only to subscribe + ;; if it's a one-to-one. If wrapped in a component styling + ;; won't be applied correctly. + @(re-frame/subscribe [:contacts/contact-name-by-identity chat-id]))]] + [message-timestamp (if (pos? (:whisper-timestamp last-message)) + (:whisper-timestamp last-message) + timestamp)]] :title-accessibility-label :chat-name-text - :title-row-accessory [message-timestamp (if (pos? (:whisper-timestamp last-message)) - (:whisper-timestamp last-message) - timestamp)] - :subtitle [message-content-text {:content (:content last-message) - :content-type (:content-type last-message)}] - :subtitle-row-accessory [unviewed-indicator home-item] + :subtitle [react/view {:flex-direction :row} + [react/view {:flex 1} + [message-content-text {:content (:content last-message) + :content-type (:content-type last-message)}]] + [unviewed-indicator home-item]] :on-press #(do (re-frame/dispatch [:dismiss-keyboard]) (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id]) @@ -141,5 +170,4 @@ (re-frame/dispatch [:chat.ui/mark-messages-seen :chat]))) :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet {:content (fn [] - [sheets/actions home-item]) - :height 256}])}])) + [sheets/actions home-item])}])}])) diff --git a/src/status_im/ui/screens/intro/styles.cljs b/src/status_im/ui/screens/intro/styles.cljs index a82e48c534..615f722232 100644 --- a/src/status_im/ui/screens/intro/styles.cljs +++ b/src/status_im/ui/screens/intro/styles.cljs @@ -59,17 +59,12 @@ :background-color (if selected? colors/blue-light colors/white) :padding-vertical 12}) -(def list-item-body - {:flex-direction :row - :flex 1 - :align-items :flex-start}) - (def multiaccount-image - {:width 40 - :height 40 - :border-radius 20 - :border-width 1 - :border-color colors/black-transparent}) + {:width 40 + :height 40 + :border-radius 20 + :border-width 1 + :border-color colors/black-transparent}) (defn password-text-input [width] {:typography :header @@ -83,18 +78,4 @@ {:padding-horizontal 24 :justify-content :center :align-items :center - :flex-direction :row}) - -(def disabled-bottom-button - (assoc bottom-button :background-color colors/gray-transparent-10)) - -(def disabled-bottom-button-text - {:color colors/gray-transparent-40}) - -(defn bottom-arrow [] - {:flex-direction :row - :justify-content :flex-end - :align-self :stretch - :padding-top 16 - :border-top-width 1 - :border-top-color colors/gray-lighter}) + :flex-direction :row}) \ No newline at end of file diff --git a/src/status_im/ui/screens/intro/views.cljs b/src/status_im/ui/screens/intro/views.cljs index 8b5ed1babf..95bedd2dba 100644 --- a/src/status_im/ui/screens/intro/views.cljs +++ b/src/status_im/ui/screens/intro/views.cljs @@ -7,19 +7,19 @@ [status-im.privacy-policy.core :as privacy-policy] [status-im.react-native.resources :as resources] [status-im.ui.components.colors :as colors] - [status-im.ui.components.common.common :as components.common] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.radio :as radio] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.intro.styles :as styles] [status-im.utils.config :as config] + [status-im.ui.components.toolbar :as toolbar] [status-im.utils.gfycat.core :as gfy] [status-im.utils.identicon :as identicon] [status-im.utils.platform :as platform] [status-im.utils.security :as security] - [status-im.ui.screens.intro.carousel :as carousel] [quo.core :as quo] + [status-im.ui.screens.intro.carousel :as carousel] [status-im.utils.utils :as utils]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) @@ -37,13 +37,13 @@ :title :intro-title3 :text :intro-text3}] window-height view-id] [react/view styles/buttons-container - [components.common/button {:button-style (assoc styles/bottom-button :margin-bottom 24) - :on-press #(re-frame/dispatch [:multiaccounts.create.ui/intro-wizard]) - :label (i18n/label :t/get-started)}] + [react/view {:style (assoc styles/bottom-button :margin-bottom 16)} + [quo/button {:on-press #(re-frame/dispatch [:multiaccounts.create.ui/intro-wizard])} + (i18n/label :t/get-started)]] [react/nested-text {:style styles/welcome-text-bottom-note} (i18n/label :t/intro-privacy-policy-note1) - [{:style (assoc styles/welcome-text-bottom-note :color colors/blue) + [{:style (assoc styles/welcome-text-bottom-note :color colors/blue) :on-press privacy-policy/open-privacy-policy-link!} (i18n/label :t/intro-privacy-policy-note2)]]]])) @@ -72,29 +72,21 @@ (let [selected? (= (:id acc) selected-id) public-key (get-in acc [:derived constants/path-whisper-keyword :public-key])] ^{:key public-key} - [react/touchable-highlight - {:accessibility-label (keyword (str "select-account-button-" accessibility-n)) - :on-press #(re-frame/dispatch [:intro-wizard/on-key-selected (:id acc)])} - [react/view {:style (styles/list-item selected?)} - [react/view {:style styles/list-item-body} - [react/image {:source {:uri (identicon/identicon public-key)} - :resize-mode :cover - :style styles/multiaccount-image}] - [react/view {:style {:padding-horizontal 16 - :flex 1}} - [react/text {:style (assoc styles/wizard-text :text-align :left - :color colors/black - :line-height 22 - :font-weight "500") - :number-of-lines 2 - :ellipsize-mode :middle} - (gfy/generate-gfy public-key)] - [react/text {:style (assoc styles/wizard-text - :text-align :left - :line-height 22 - :font-family "monospace")} - (utils/get-shortened-address public-key)]]] - [radio/radio selected?]]]))]]) + [quo/list-item {:accessibility-label (keyword (str "select-account-button-" accessibility-n)) + :active selected? + :title [quo/text {:number-of-lines 2 + :weight :medium + :ellipsize-mode :middle + :accessibility-label :username} + (gfy/generate-gfy public-key)] + :subtitle [quo/text {:weight :monospace + :color :secondary} + (utils/get-shortened-address public-key)] + :accessory :radio + :on-press #(re-frame/dispatch [:intro-wizard/on-key-selected (:id acc)]) + :icon [react/image {:source {:uri (identicon/identicon public-key)} + :resize-mode :cover + :style styles/multiaccount-image}]}]))]]) (defn storage-entry [{:keys [type icon icon-width icon-height image image-selected image-width image-height @@ -199,63 +191,56 @@ forward-action next-button-disabled? processing? existing-account?]}] - [react/view {:style {:margin-bottom (if (or (#{:choose-key :select-key-storage - :enter-phrase :recovery-success} step) - (and (#{:create-code :confirm-code} step) - encrypt-with-password?)) - 20 - 32) - :align-items :center}} + [react/view {:style {:align-items :center}} (cond (and (#{:generate-key :recovery-success} step) processing?) - [react/view {:min-height 46 :max-height 46 :align-self :stretch} + [react/view {:min-height 46 :max-height 46 :align-self :stretch :margin-bottom 16} [react/activity-indicator {:animating true :size :large}]] (#{:generate-key :recovery-success} step) (let [label-kw (case step - :generate-key :generate-a-key - :recovery-success :re-encrypt-key + :generate-key :t/generate-a-key + :recovery-success :t/re-encrypt-key :intro-wizard-title6)] - [react/view {:min-height 46 :max-height 46} - [components.common/button - {:button-style (if existing-account? - styles/disabled-bottom-button - styles/bottom-button) - :on-press (when-not existing-account? - #(re-frame/dispatch [forward-action])) - :accessibility-label :onboarding-next-button - :label (i18n/label label-kw) - :label-style (when existing-account? - styles/disabled-bottom-button-text)}]]) + [react/view (:style (assoc styles/bottom-button :margin-bottom 16)) + [quo/button + {:disabled existing-account? + :on-press #(re-frame/dispatch [forward-action]) + :accessibility-label :onboarding-next-button} + (i18n/label label-kw)]]) (and (#{:create-code :confirm-code} step) (not encrypt-with-password?)) - [components.common/button {:button-style styles/bottom-button - :label (i18n/label :t/encrypt-with-password) - :accessibility-label :encrypt-with-password-button - :on-press #(re-frame/dispatch [:intro-wizard/on-encrypt-with-password-pressed]) - :background? false}] + [react/view {:margin-bottom 16} + [quo/button {:style styles/bottom-button + :accessibility-label :encrypt-with-password-button + :on-press #(re-frame/dispatch [:intro-wizard/on-encrypt-with-password-pressed]) + :type :secondary} + (i18n/label :t/encrypt-with-password)]] :else - [react/view {:style (styles/bottom-arrow)} - [react/view {:style {:margin-right 10}} - [components.common/bottom-button {:on-press #(re-frame/dispatch [forward-action]) - :accessibility-label :onboarding-next-button - :disabled? (or processing? - (and (= step :create-code) weak-password?) - (and (= step :enter-phrase) next-button-disabled?)) - :forward? true}]]]) + [toolbar/toolbar + {:show-border? true + :right [quo/button + {:on-press #(re-frame/dispatch [forward-action]) + :accessibility-label :onboarding-next-button + :disabled (or processing? + (and (= step :create-code) weak-password?) + (and (= step :enter-phrase) next-button-disabled?)) + :type :secondary + :after :main-icons/next} + (i18n/label :t/next)]}]) (when (and (= :generate-key step) (not processing?)) - [components.common/button - {:button-style (assoc styles/bottom-button :margin-top 8) - :on-press #(re-frame/dispatch - [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]) - :label (i18n/label :t/access-existing-keys) - :background? false}]) + [react/view {:padding-vertical 8} + [quo/button + {:on-press #(re-frame/dispatch + [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]) + :type :secondary} + (i18n/label :t/access-existing-keys)]]) (when (or (= :generate-key step) (and processing? (= :recovery-success step))) - [react/text {:style (assoc styles/wizard-text :margin-top 20)} + [react/text {:style (assoc styles/wizard-text :margin-top 20 :margin-bottom 16)} (i18n/label (cond (= :recovery-success step) :t/processing processing? :t/generating-keys - :else :t/this-will-take-few-seconds))])]) + :else :t/this-will-take-few-seconds))])]) (defn top-bar [{:keys [step encrypt-with-password?]}] (let [hide-subtitle? (or (= step :confirm-code) diff --git a/src/status_im/ui/screens/keycard/components/turn_nfc.cljs b/src/status_im/ui/screens/keycard/components/turn_nfc.cljs index 8bb9388d9d..43c3d94a92 100644 --- a/src/status_im/ui/screens/keycard/components/turn_nfc.cljs +++ b/src/status_im/ui/screens/keycard/components/turn_nfc.cljs @@ -4,7 +4,7 @@ [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.react :as react] [status-im.ui.components.colors :as colors] - [status-im.ui.components.button :as button] + [quo.core :as quo] [status-im.ui.screens.keycard.components.style :as styles])) (defn turn-nfc-on [] @@ -16,11 +16,10 @@ [react/view {:margin-top 16} [react/text {:style {:typography :title-bold}} (i18n/label :t/turn-nfc-on)]] - [react/view {:margin-top 8} + [react/view {:margin-top 8 + :margin-bottom 16} [react/text {:number-of-lines 2 :style styles/helper-text-style} (i18n/label :t/turn-nfc-description)]] - - [button/button {:label :t/open-nfc-settings - :style {:margin-top 16} - :on-press #(re-frame/dispatch [:keycard.onboarding.nfc-on/open-nfc-settings-pressed])}]]]) + [quo/button {:on-press #(re-frame/dispatch [:keycard.onboarding.nfc-on/open-nfc-settings-pressed])} + (i18n/label :t/open-nfc-settings)]]]) diff --git a/src/status_im/ui/screens/keycard/keycard_interaction.cljs b/src/status_im/ui/screens/keycard/keycard_interaction.cljs index 9be11ad9ac..416c1b8440 100644 --- a/src/status_im/ui/screens/keycard/keycard_interaction.cljs +++ b/src/status_im/ui/screens/keycard/keycard_interaction.cljs @@ -29,7 +29,8 @@ (fn [{:keys [on-card-connected connected? on-card-disconnected params]}] (let [translation (or (get-in params [:state-translations @state]) (get state->translations @state))] - [react/view {:style styles/container-style} + [react/view {:style styles/container-style + :height 286} [react/view {:height 200 :margin-bottom 20} [animated-circles {:state state diff --git a/src/status_im/ui/screens/keycard/onboarding/views.cljs b/src/status_im/ui/screens/keycard/onboarding/views.cljs index 2833b75adb..c36cc38098 100644 --- a/src/status_im/ui/screens/keycard/onboarding/views.cljs +++ b/src/status_im/ui/screens/keycard/onboarding/views.cljs @@ -1,14 +1,13 @@ (ns status-im.ui.screens.keycard.onboarding.views (:require [re-frame.core :as re-frame] [status-im.hardwallet.onboarding :as hardwallet.onboarding] + [status-im.ui.components.toolbar.view :as toolbar] + [status-im.ui.components.toolbar :as bottom-toolbar] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.react :as react] + [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.i18n :as i18n] [status-im.react-native.resources :as resources] - [status-im.ui.components.colors :as colors] - [status-im.ui.components.common.common :as components.common] - [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.react :as react] - [status-im.ui.components.styles :as components.styles] - [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.hardwallet.pin.views :as pin.views] @@ -22,11 +21,9 @@ [react/view styles/container [topbar/topbar] [react/view {:flex 1 - :flex-direction :column :justify-content :space-between :align-items :center} - [react/view {:flex-direction :column - :align-items :center} + [react/view {:align-items :center} [react/view [react/view {:align-items :center :justify-content :center} @@ -88,18 +85,8 @@ :padding-right 35}} text]]]]))] [react/view {:margin-bottom 40} - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:keycard.onboarding.intro.ui/begin-setup-pressed])} - [react/view {:background-color colors/blue-light - :align-items :center - :justify-content :center - :flex-direction :row - :width 133 - :height 44 - :border-radius 10} - [react/text {:style {:color colors/blue} - :accessibility-label :begin-set-up} - (i18n/label :t/begin-set-up)]]]]]])) + [quo/button {:on-press #(re-frame/dispatch [:keycard.onboarding.intro.ui/begin-setup-pressed])} + (i18n/label :t/begin-set-up)]]]])) (defview puk-code [] (letsubs [secrets [:hardwallet-secrets] @@ -148,10 +135,10 @@ (i18n/label :t/puk-code)]] [react/view {:justify-content :flex-start :flex 1} - [react/text {:style {:typography :header - :font-family "monospace" - :text-align :center - :color colors/blue} + [react/text {:style {:typography :header + :font-family "monospace" + :text-align :center + :color colors/blue} :accessibility-label :puk-code} puk-code]]]] [react/view {:margin-top 16} @@ -185,16 +172,12 @@ [react/view {:margin-top 16} [react/text {:style {:color colors/gray}} (i18n/label :t/pair-code-explanation)]]]] - [react/view {:flex-direction :row - :justify-content :space-between - :align-items :center - :width "100%" - :height 86} - [react/view components.styles/flex] - [react/view {:margin-right 20} - [components.common/bottom-button - {:on-press #(re-frame/dispatch [:keycard.onboarding.puk-code.ui/next-pressed]) - :forward? true}]]]]]])) + [bottom-toolbar/toolbar + {:right + [quo/button {:type :secondary + :after :main-icon/next + :on-press #(re-frame/dispatch [:keycard.onboarding.puk-code.ui/next-pressed])} + (i18n/label :t/next)]}]]]])) (defview pin [] (letsubs [pin [:hardwallet/pin] @@ -298,22 +281,17 @@ :margin-left 12} [react/text {:style {:color colors/gray}} (str (inc i) ". ")] - [react/text {:accessibility-label (str "word" i)} + [react/text {:accessibility-label (str "word" i)} word]])])] [react/view {:margin-top 24} [react/text {:style {:text-align :center}} (i18n/label :t/keycard-onboarding-recovery-phrase-description)]]] - [react/view {:flex-direction :row - :justify-content :space-between - :align-items :center - :width "100%" - :height 86} - [react/view components.styles/flex] - [react/view {:margin-right 20} - [components.common/bottom-button - {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase.ui/next-pressed]) - :label (i18n/label :t/confirm) - :forward? true}]]]]])) + [bottom-toolbar/toolbar + {:right + [quo/button {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase.ui/next-pressed]) + :type :secondary + :after :main-icon/next} + (i18n/label :t/confirm)]}]]])) (defview recovery-phrase-confirm-word [] (letsubs [word [:hardwallet-recovery-phrase-word] @@ -362,20 +340,16 @@ [react/view {:margin-top 5 :width 250} [tooltip/tooltip error]]] - [react/view {:flex-direction :row - :justify-content :space-between - :align-items :center - :width "100%" - :height 86} - [react/view {:margin-left 20} - [components.common/bottom-button - {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/back-pressed]) - :back? true - :label (i18n/label :t/back)}]] - [react/view {:margin-right 20} - [components.common/bottom-button - {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/next-pressed]) - :label (i18n/label :t/next) - :accessibility-label :next - :disabled? (empty? input-word) - :forward? true}]]]]]))) + [bottom-toolbar/toolbar + {:left + [quo/button {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/back-pressed]) + :type :secondary + :before :main-icon/back} + (i18n/label :t/back)] + :right + [quo/button {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/next-pressed]) + :accessibility-label :next + :disabled (empty? input-word) + :type :secondary + :after :main-icon/next} + (i18n/label :t/next)]}]]]))) diff --git a/src/status_im/ui/screens/keycard/recovery/views.cljs b/src/status_im/ui/screens/keycard/recovery/views.cljs index 088385bf2e..4212c7d1c1 100644 --- a/src/status_im/ui/screens/keycard/recovery/views.cljs +++ b/src/status_im/ui/screens/keycard/recovery/views.cljs @@ -3,10 +3,10 @@ [status-im.hardwallet.recovery :as hardwallet.recovery] [status-im.i18n :as i18n] [status-im.react-native.resources :as resources] - [status-im.ui.components.colors :as colors] - [status-im.ui.components.common.common :as components.common] - [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.react :as react] + [status-im.ui.components.icons.vector-icons :as vector-icons] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.toolbar :as bottom-toolbar] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.topbar :as topbar] @@ -29,11 +29,13 @@ :align-items :center} [react/view {:flex-direction :column :align-items :center} + [react/view {:margin-top 16 :width 311} [react/text {:style {:typography :header :text-align :center}} (i18n/label :t/keycard-recovery-intro-header)]] + [react/view {:margin-top 16 :width 311} [react/text {:style {:font-size 15 @@ -41,6 +43,7 @@ :color colors/gray :text-align :center}} (i18n/label :t/keycard-recovery-intro-text)]] + [react/view {:margin-top 33} [react/touchable-highlight {:on-press #(.openURL ^js react/linking constants/keycard-integration-link)} @@ -52,24 +55,17 @@ (i18n/label :t/learn-more-about-keycard)] [vector-icons/tiny-icon :tiny-icons/tiny-external {:color colors/blue :container-style {:margin-left 5}}]]]]] - [react/view - [react/view {:align-items :center - :justify-content :center} - [react/image {:source (resources/get-image :keycard) - :style {:width 144 - :height 114}}]]] + + [react/view {:align-items :center + :justify-content :center} + [react/image {:source (resources/get-image :keycard) + :style {:width 144 + :height 114}}]] + [react/view {:margin-bottom 50} - [react/touchable-highlight + [quo/button {:on-press #(re-frame/dispatch [:keycard.recovery.intro.ui/begin-recovery-pressed])} - [react/view {:background-color colors/blue-light - :align-items :center - :justify-content :center - :flex-direction :row - :width 133 - :height 44 - :border-radius 10} - [react/text {:style {:color colors/blue}} - (i18n/label :t/keycard-recovery-intro-button-text)]]]]]]) + (i18n/label :t/keycard-recovery-intro-button-text)]]]]) (defview pin [] (letsubs [pin [:hardwallet/pin] @@ -158,18 +154,13 @@ [react/view {:margin-top 5 :width 250} [tooltip/tooltip error]]] - [react/view {:flex-direction :row - :justify-content :space-between - :align-items :center - :width "100%" - :height 86} - [react/view] - [react/view {:margin-right 20} - [components.common/bottom-button - {:on-press #(re-frame/dispatch [:keycard.onboarding.pair.ui/next-pressed]) - :label (i18n/label :t/pair-card) - :disabled? (empty? pair-code) - :forward? true}]]]]])) + [bottom-toolbar/toolbar + {:right + [quo/button {:on-press #(re-frame/dispatch [:keycard.onboarding.pair.ui/next-pressed]) + :disabled (empty? pair-code) + :type :secondary + :after :main-icon/next} + (i18n/label :t/pair-card)]}]]])) (defview success [] (letsubs [address [:hardwallet-multiaccount-wallet-address] @@ -215,17 +206,8 @@ :ellipsize-mode :middle} (utils.core/truncate-str address 14 true)]]] [react/view {:margin-bottom 50} - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:keycard.recovery.success/finish-pressed])} - [react/view {:background-color colors/blue-light - :align-items :center - :justify-content :center - :flex-direction :row - :width 133 - :height 44 - :border-radius 10} - [react/text {:style {:color colors/blue}} - (i18n/label :t/finish)]]]]]])) + [quo/button {:on-press #(re-frame/dispatch [:keycard.recovery.success/finish-pressed])} + (i18n/label :t/finish)]]]])) (defview no-key [] (letsubs [card-state [:hardwallet-card-state]] @@ -263,20 +245,10 @@ :style {:width 165 :height 110}}])]]] [react/view {:margin-bottom 50} - [react/touchable-highlight + [quo/button {:on-press #(re-frame/dispatch [:keycard.recovery.no-key.ui/generate-key-pressed])} - [react/view {:background-color colors/blue-light - :align-items :center - :justify-content :center - :flex-direction :row - :width 190 - :height 44 - :border-radius 10} - [react/text {:style {:color colors/blue}} - (i18n/label :t/generate-new-key)]]] - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:navigate-back])} - [react/text {:style {:text-align :center - :padding-top 27 - :color colors/blue}} - (i18n/label :t/cancel)]]]]])) + (i18n/label :t/generate-new-key)] + [quo/button + {:type :secondary + :on-press #(re-frame/dispatch [:navigate-back])} + (i18n/label :t/cancel)]]]])) diff --git a/src/status_im/ui/screens/keycard/views.cljs b/src/status_im/ui/screens/keycard/views.cljs index fb352bc1e1..adf0a69ab3 100644 --- a/src/status_im/ui/screens/keycard/views.cljs +++ b/src/status_im/ui/screens/keycard/views.cljs @@ -6,14 +6,14 @@ [status-im.react-native.resources :as resources] [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] + [status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.hardwallet.pin.views :as pin.views] [status-im.ui.screens.keycard.styles :as styles] [status-im.constants :as constants] - [status-im.ui.components.button :as button] [status-im.hardwallet.login :as hardwallet.login] [status-im.ui.screens.hardwallet.frozen-card.view :as frozen-card.view]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) @@ -47,17 +47,8 @@ :style {:width 144 :height 114}}]] [react/view {:margin-bottom 32} - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:navigate-back])} - [react/view {:background-color colors/blue-light - :align-items :center - :justify-content :center - :flex-direction :row - :width 133 - :height 44 - :border-radius 10} - [react/text {:style {:color colors/blue}} - (i18n/label :t/ok-got-it)]]]]]]) + [quo/button {:on-press #(re-frame/dispatch [:navigate-back])} + (i18n/label :t/ok-got-it)]]]]) ;; NOTE(Ferossgp): Seems like it should be in popover (defn wrong [] @@ -87,17 +78,8 @@ :style {:width 255 :height 124}}]] [react/view {:margin-bottom 32} - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:navigate-back])} - [react/view {:background-color colors/blue-light - :align-items :center - :justify-content :center - :flex-direction :row - :width 133 - :height 44 - :border-radius 10} - [react/text {:style {:color colors/blue}} - (i18n/label :t/ok-got-it)]]]]]]) + [quo/button {:on-press #(re-frame/dispatch [:navigate-back])} + (i18n/label :t/ok-got-it)]]]]) (defn unpaired [] [react/view {:flex 1 @@ -128,22 +110,13 @@ [react/view {:margin-bottom 32 :flex-direction :column :align-items :center} - [react/touchable-highlight + [quo/button {:on-press #(re-frame/dispatch [:keycard.login.ui/pair-card-pressed])} - [react/view {:background-color colors/blue-light - :align-items :center - :justify-content :center - :flex-direction :row - :width 133 - :height 44 - :border-radius 10} - [react/text {:style {:color colors/blue}} - (i18n/label :t/pair-this-card)]]] + (i18n/label :t/pair-this-card)] [react/view {:margin-top 27} - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:keycard.login.ui/dismiss-pressed])} - [react/text {:style {:color colors/blue}} - (i18n/label :t/dismiss)]]]]]]) + [quo/button {:type :secondary + :on-press #(re-frame/dispatch [:keycard.login.ui/dismiss-pressed])} + (i18n/label :t/dismiss)]]]]]) ;; NOTE(Ferossgp): Seems like it should be in popover (defn not-keycard [] @@ -185,17 +158,8 @@ [vector-icons/tiny-icon :tiny-icons/tiny-external {:color colors/blue :container-style {:margin-left 5}}]]]]] [react/view {:margin-bottom 32} - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:navigate-back])} - [react/view {:background-color colors/blue-light - :align-items :center - :justify-content :center - :flex-direction :row - :width 133 - :height 44 - :border-radius 10} - [react/text {:style {:color colors/blue}} - (i18n/label :t/ok-got-it)]]]]]]) + [quo/button {:on-press #(re-frame/dispatch [:navigate-back])} + (i18n/label :t/ok-got-it)]]]]) (defn photo [_ _] (reagent/create-class @@ -213,16 +177,16 @@ (defn access-is-reset [{:keys [hide-login-actions?]}] [react/view - {:style {:flex 1 + {:style {:flex 1 :align-items :center}} [react/view - {:style {:flex 1 + {:style {:flex 1 :align-items :center :justify-content :center}} [react/view {:style {:background-color colors/green-transparent-10 - :margin-bottom 32 + :margin-bottom 32 :width 40 :height 40 :align-items :center @@ -236,15 +200,13 @@ [react/text (i18n/label :t/keycard-can-use-with-new-passcode)]] (when-not hide-login-actions? [react/view - {:style {:width 160 + {:style {:width 160 :margin-bottom 15}} - [button/button - {:type :main - :style {:align-self :stretch} - :container-style {:height 52} - :label (i18n/label :t/open) - :on-press #(re-frame/dispatch - [::hardwallet.login/login-after-reset])}]])]) + [react/view {:flex-direction :row + :height 52} + [quo/button {:on-press #(re-frame/dispatch + [::hardwallet.login/login-after-reset])} + (i18n/label :t/open)]]])]) (defn frozen-card [] [frozen-card.view/frozen-card @@ -297,7 +259,7 @@ (defview login-pin [{:keys [back-button-handler hide-login-actions? default-enter-step] - :or {default-enter-step :login}}] + :or {default-enter-step :login}}] (letsubs [pin [:hardwallet/pin] enter-step [:hardwallet/pin-enter-step] status [:hardwallet/pin-status] @@ -310,27 +272,27 @@ ;; TODO(rasom): this hack fixes state mess when more then two ;; pin-view instances are used at the same time. Should be properly ;; refactored instead - enter-step (or enter-step default-enter-step)] + enter-step (or enter-step default-enter-step)] [react/view styles/container [topbar/topbar {:accessories [(when-not hide-login-actions? {:icon :main-icons/more :handler #(re-frame/dispatch [:keycard.login.pin.ui/more-icon-pressed])})] - :content (cond - (= :reset enter-step) - [step-view 1] + :content (cond + (= :reset enter-step) + [step-view 1] - (= :reset-confirmation enter-step) - [step-view 2] + (= :reset-confirmation enter-step) + [step-view 2] - (and (= :puk enter-step) - (not= :blocked-card status)) - [react/view - {:style {:flex 1 - :justify-content :center - :align-items :center}} - [react/text {:style {:color colors/gray}} - (i18n/label :t/enter-puk-code)]]) + (and (= :puk enter-step) + (not= :blocked-card status)) + [react/view + {:style {:flex 1 + :justify-content :center + :align-items :center}} + [react/text {:style {:color colors/gray}} + (i18n/label :t/enter-puk-code)]]) :navigation {:icon :main-icons/arrow-left :accessibility-label :back-button @@ -399,20 +361,21 @@ #{:reset :reset-confirmation :puk} enter-step))}]) (when-not hide-login-actions? - [react/view {:margin-bottom (if small-screen? 25 32)} - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed])} - [react/text {:style {:color colors/blue}} - (i18n/label :t/recover-key)]]])]]))) + [toolbar/toolbar + {:center [quo/button + {:on-press #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]) + :type :secondary} + (i18n/label :t/recover-key)]}])]]))) (defn- more-sheet-content [] [react/view {:flex 1} - [list-item/list-item - {:theme :action - :title :t/create-new-key - :icon :main-icons/profile - :on-press #(re-frame/dispatch [:multiaccounts.create.ui/get-new-key])}]]) + [quo/list-item + {:theme :accent + :title (i18n/label :t/create-new-key) + :icon :main-icons/profile + :on-press #(do + (re-frame/dispatch [:bottom-sheet/hide]) + (re-frame/dispatch [:multiaccounts.create.ui/get-new-key]))}]]) (def more-sheet - {:content more-sheet-content - :content-height 65}) + {:content more-sheet-content}) diff --git a/src/status_im/ui/screens/mobile_network_settings/sheets.cljs b/src/status_im/ui/screens/mobile_network_settings/sheets.cljs index 7b983cc2a0..bb80514ec1 100644 --- a/src/status_im/ui/screens/mobile_network_settings/sheets.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/sheets.cljs @@ -5,7 +5,7 @@ [status-im.ui.components.checkbox.view :as checkbox] [status-im.i18n :as i18n] [re-frame.core :as re-frame] - [status-im.ui.components.list-item.views :as list-item])) + [quo.core :as quo])) (defn title [label] [react/view {:style styles/title} @@ -59,16 +59,16 @@ [react/view {:align-items :center} [title :mobile-syncing-sheet-title] [details :mobile-syncing-sheet-details]] - [list-item/list-item - {:theme :action - :title :t/mobile-network-continue-syncing - :subtitle :t/mobile-network-continue-syncing-details + [quo/list-item + {:theme :accent + :title (i18n/label :t/mobile-network-continue-syncing) + :subtitle (i18n/label :t/mobile-network-continue-syncing-details) :icon :main-icons/network :on-press #(re-frame/dispatch [:mobile-network/continue-syncing])}] - [list-item/list-item - {:theme :action-destructive - :title :t/mobile-network-stop-syncing - :subtitle :t/mobile-network-stop-syncing-details + [quo/list-item + {:theme :negative + :title (i18n/label :t/mobile-network-stop-syncing) + :subtitle (i18n/label :t/mobile-network-stop-syncing-details) :icon :main-icons/cancel :on-press #(re-frame/dispatch [:mobile-network/stop-syncing])}] [separator] @@ -82,10 +82,10 @@ [react/view {:align-items :center} [title :t/mobile-network-sheet-offline] [details :t/mobile-network-sheet-offline-details]] - [list-item/list-item - {:theme :action - :title :t/mobile-network-start-syncing - :subtitle :t/mobile-network-continue-syncing-details + [quo/list-item + {:theme :accent + :title (i18n/label :t/mobile-network-start-syncing) + :subtitle (i18n/label :t/mobile-network-continue-syncing-details) :icon :main-icons/network :on-press #(re-frame/dispatch [:mobile-network/continue-syncing])}] [separator] diff --git a/src/status_im/ui/screens/mobile_network_settings/view.cljs b/src/status_im/ui/screens/mobile_network_settings/view.cljs index 9b7c787588..33100303e2 100644 --- a/src/status_im/ui/screens/mobile_network_settings/view.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/view.cljs @@ -9,10 +9,15 @@ [status-im.ui.screens.mobile-network-settings.sheets :as sheets] [status-im.ui.components.topbar :as topbar])) +(defn hide-sheet-and-dispatch [event] + (re-frame/dispatch [:bottom-sheet/hide]) + (re-frame/dispatch event)) + (defn settings-separator [] [react/view {:style (styles/settings-separator)}]) +;; TODO(Ferossgp): To refactor, uses outdated components (views/defview mobile-network-settings [] (views/letsubs [{:keys [syncing-on-mobile-network? @@ -24,7 +29,7 @@ [profile.components/settings-switch-item {:label-kw :t/mobile-network-use-mobile :value syncing-on-mobile-network? - :action-fn #(re-frame/dispatch [:mobile-network/set-syncing %])}]] + :action-fn #(hide-sheet-and-dispatch [:mobile-network/set-syncing %])}]] [react/view {:style styles/details} [react/text {:style styles/use-mobile-data-text} (i18n/label :t/mobile-network-use-mobile-data)]] @@ -32,19 +37,17 @@ [profile.components/settings-switch-item {:label-kw :t/mobile-network-ask-me :value (not remember-syncing-choice?) - :action-fn #(re-frame/dispatch [:mobile-network/ask-on-mobile-network? %])}]] + :action-fn #(hide-sheet-and-dispatch [:mobile-network/ask-on-mobile-network? %])}]] [settings-separator] [react/view {:style styles/defaults-container} [react/text {:style styles/defaults - :on-press #(re-frame/dispatch [:mobile-network/restore-defaults])} + :on-press #(hide-sheet-and-dispatch [:mobile-network/restore-defaults])} "Restore Defaults"]]])) (def settings-sheet - {:content-height 340 - :content sheets/settings-sheet}) + {:content sheets/settings-sheet}) (def offline-sheet - {:content sheets/offline-sheet - :content-height 180}) + {:content sheets/offline-sheet}) diff --git a/src/status_im/ui/screens/multiaccounts/login/styles.cljs b/src/status_im/ui/screens/multiaccounts/login/styles.cljs index f10e2c6a7a..a696fa7b2f 100644 --- a/src/status_im/ui/screens/multiaccounts/login/styles.cljs +++ b/src/status_im/ui/screens/multiaccounts/login/styles.cljs @@ -17,22 +17,6 @@ {:margin-top 16 :color colors/gray}) -(def bottom-button - {:padding-horizontal 24 - :justify-content :center - :align-items :center - :align-self :center - :flex-direction :row}) - -(defn bottom-button-container [] - {:flex-direction :row - :padding-horizontal 12 - :padding-vertical 8 - :border-top-width 1 - :border-top-color colors/gray-lighter - :justify-content :space-between - :align-items :center}) - (def login-badge {:align-items :center}) diff --git a/src/status_im/ui/screens/multiaccounts/login/views.cljs b/src/status_im/ui/screens/multiaccounts/login/views.cljs index 366684346b..4873e36a66 100644 --- a/src/status_im/ui/screens/multiaccounts/login/views.cljs +++ b/src/status_im/ui/screens/multiaccounts/login/views.cljs @@ -3,8 +3,6 @@ [status-im.i18n :as i18n] [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.checkbox.view :as checkbox] - [status-im.ui.components.colors :as colors] - [status-im.ui.components.common.common :as components.common] [status-im.ui.components.react :as react] [status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.multiaccounts.login.styles :as styles] @@ -14,7 +12,9 @@ [status-im.utils.utils :as utils] [quo.core :as quo] [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.topbar :as topbar]) + [status-im.ui.components.toolbar :as toolbar] + [status-im.ui.components.topbar :as topbar] + [status-im.ui.components.colors :as colors]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn login-multiaccount [^js password-text-input] @@ -92,18 +92,20 @@ [react/view styles/processing-view [react/activity-indicator {:animating true}] [react/i18n-text {:style styles/processing :key :processing}]]) - [react/view {:style (styles/bottom-button-container)} - [components.common/button - {:label (i18n/label :t/access-existing-keys) - :button-style styles/bottom-button - :background? false - :on-press #(do - (react/dismiss-keyboard!) - (re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]))}] - [components.common/button - {:label (i18n/label :t/submit) - :button-style styles/bottom-button - :label-style {:color (if (or (not sign-in-enabled?) processing) colors/gray colors/blue)} - :background? true - :disabled? (or (not sign-in-enabled?) processing) - :on-press #(login-multiaccount @password-text-input)}]]])) + + [toolbar/toolbar + {:show-border? true + :size :large + :left + [quo/button + {:type :secondary + :on-press #(do + (react/dismiss-keyboard!) + (re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]))} + (i18n/label :t/access-existing-keys)] + :right + [react/view {:padding-horizontal 8} + [quo/button + {:disabled (or (not sign-in-enabled?) processing) + :on-press #(login-multiaccount @password-text-input)} + (i18n/label :t/submit)]]}]])) diff --git a/src/status_im/ui/screens/multiaccounts/recover/views.cljs b/src/status_im/ui/screens/multiaccounts/recover/views.cljs index 71cb5bc628..5083ab2647 100644 --- a/src/status_im/ui/screens/multiaccounts/recover/views.cljs +++ b/src/status_im/ui/screens/multiaccounts/recover/views.cljs @@ -8,16 +8,19 @@ [status-im.i18n :as i18n] [status-im.utils.config :as config] [status-im.ui.components.colors :as colors] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.utils.platform :as platform] [status-im.react-native.resources :as resources] - [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.button :as button])) + [status-im.ui.components.icons.vector-icons :as icons])) + +(defn hide-sheet-and-dispatch [event] + (re-frame/dispatch [:bottom-sheet/hide]) + (re-frame/dispatch event)) (defview custom-seed-phrase [] [react/view [react/view {:margin-top 24 :margin-horizontal 24 :align-items :center} - [react/view {:width 32 :height 32 :border-radius 16 + [react/view {:width 32 :height 32 :border-radius 16 :align-items :center :justify-content :center} [icons/icon :main-icons/help {:color colors/blue}]] [react/text {:style {:typography :title-bold @@ -35,44 +38,40 @@ (i18n/label :t/custom-seed-phrase-text-1)]] [react/view {:margin-vertical 24 :align-items :center} - [button/button {:on-press #(re-frame/dispatch [:hide-popover]) - :accessibility-label :cancel-custom-seed-phrase - :type :secondary - :label (i18n/label :t/cancel)}]]]]) + [quo/button {:on-press #(re-frame/dispatch [:hide-popover]) + :accessibility-label :cancel-custom-seed-phrase + :type :secondary} + (i18n/label :t/cancel)]]]]) (defn bottom-sheet-view [] [react/view {:flex 1 :flex-direction :row} [react/view {:flex 1} - [list-item/list-item - {:theme :action - :title :t/enter-seed-phrase + [quo/list-item + {:theme :accent + :title (i18n/label :t/enter-seed-phrase) :accessibility-label :enter-seed-phrase-button :icon :main-icons/text - :on-press #(re-frame/dispatch [::multiaccounts.recover/enter-phrase-pressed])}] + :on-press #(hide-sheet-and-dispatch [::multiaccounts.recover/enter-phrase-pressed])}] (when (and config/hardwallet-enabled? (or platform/android? config/keycard-test-menu-enabled?) (nfc/nfc-supported?)) - [list-item/list-item - {:theme :action - :title :t/recover-with-keycard - :disabled? (not config/hardwallet-enabled?) + [quo/list-item + {:theme :accent + :title (i18n/label :t/recover-with-keycard) + :disabled (not config/hardwallet-enabled?) :accessibility-label :recover-with-keycard-button - :icon [react/view {:border-width 1 - :border-radius 20 - :border-color colors/blue-light - :background-color colors/blue-light - :justify-content :center - :align-items :center - :width 40 - :height 40} - [react/image {:source (resources/get-image :keycard-logo-blue) - :style {:width 24 :height 24}}]] - :on-press #(re-frame/dispatch [::hardwallet/recover-with-keycard-pressed])}])]]) + :icon [react/view {:border-width 1 + :border-radius 20 + :border-color colors/blue-light + :background-color colors/blue-light + :justify-content :center + :align-items :center + :width 40 + :height 40} + [react/image {:source (resources/get-image :keycard-logo-blue) + :style {:width 24 :height 24}}]] + :on-press #(hide-sheet-and-dispatch [::hardwallet/recover-with-keycard-pressed])}])]]) -(defn bottom-sheet [] - {:content bottom-sheet-view - :content-height (if (and platform/android? - (nfc/nfc-supported?)) - 130 - 65)}) +(def bottom-sheet + {:content bottom-sheet-view}) diff --git a/src/status_im/ui/screens/multiaccounts/sheets.cljs b/src/status_im/ui/screens/multiaccounts/sheets.cljs index edb508ceb3..309e06b933 100644 --- a/src/status_im/ui/screens/multiaccounts/sheets.cljs +++ b/src/status_im/ui/screens/multiaccounts/sheets.cljs @@ -1,13 +1,14 @@ (ns status-im.ui.screens.multiaccounts.sheets - (:require [status-im.ui.components.list-item.views :as list-item] + (:require [quo.core :as quo] + [status-im.i18n :as i18n] [status-im.ui.components.react :as react] [re-frame.core :as re-frame])) (defn actions-sheet [] [react/view - [list-item/list-item {:theme :action - :on-press #(do (re-frame/dispatch [:bottom-sheet/hide]) - (re-frame/dispatch [:multiaccounts.create.ui/intro-wizard])) - :icon :main-icons/add - :accessibility-label :generate-a-new-key - :title :t/generate-a-new-key}]]) + [quo/list-item {:theme :accent + :on-press #(do (re-frame/dispatch [:bottom-sheet/hide]) + (re-frame/dispatch [:multiaccounts.create.ui/intro-wizard])) + :icon :main-icons/add + :accessibility-label :generate-a-new-key + :title (i18n/label :t/generate-a-new-key)}]]) diff --git a/src/status_im/ui/screens/multiaccounts/styles.cljs b/src/status_im/ui/screens/multiaccounts/styles.cljs index 1bc33f01b0..0c8df2410f 100644 --- a/src/status_im/ui/screens/multiaccounts/styles.cljs +++ b/src/status_im/ui/screens/multiaccounts/styles.cljs @@ -1,39 +1,14 @@ -(ns status-im.ui.screens.multiaccounts.styles - (:require [status-im.ui.components.colors :as colors])) +(ns status-im.ui.screens.multiaccounts.styles) (def multiaccounts-view {:flex 1}) (def multiaccounts-container {:flex 1 - :margin-top 24 :justify-content :space-between}) (def multiaccount-image-size 40) (def multiaccounts-list-container - {:flex 1 + {:padding-top 24 :padding-bottom 8}) - -(def multiaccount-view - {:flex-direction :row - :align-items :center - :padding-horizontal 16 - :height 64}) - -(def multiaccount-badge-text-view - {:margin-left 16 - :margin-right 31 - :flex-shrink 1}) - -(def multiaccount-badge-text - {:font-weight "500"}) - -(defn bottom-button-container [] - {:flex-direction :row - :padding-horizontal 12 - :padding-vertical 8 - :border-top-width 1 - :border-top-color colors/gray-lighter - :justify-content :center - :align-items :center}) diff --git a/src/status_im/ui/screens/multiaccounts/views.cljs b/src/status_im/ui/screens/multiaccounts/views.cljs index 6aa058194b..363ba82586 100644 --- a/src/status_im/ui/screens/multiaccounts/views.cljs +++ b/src/status_im/ui/screens/multiaccounts/views.cljs @@ -6,44 +6,33 @@ [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.i18n :as i18n] - [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.colors :as colors] [status-im.ui.components.topbar :as topbar] - [status-im.ui.components.button :as button] + [status-im.ui.components.toolbar :as toolbar] + [quo.core :as quo] [status-im.ui.screens.multiaccounts.sheets :as sheets] [status-im.react-native.resources :as resources])) (defn multiaccount-view [{:keys [key-uid photo-path name keycard-pairing]}] - [react/touchable-highlight - {:on-press #(re-frame/dispatch - [:multiaccounts.login.ui/multiaccount-selected key-uid])} - [react/view styles/multiaccount-view - [photos/photo photo-path {:size styles/multiaccount-image-size}] - [react/view styles/multiaccount-badge-text-view - [react/view {:flex-direction :row} - [react/text {:style styles/multiaccount-badge-text - :ellipsize-mode :middle - :numberOfLines 1} - name]] - ;;TODO we don't have public key in multiaccounts - #_[react/text {:style styles/multiaccount-badge-pub-key-text} - (utils/get-shortened-address public-key)]] - [react/view {:flex 1}] - (when keycard-pairing - [react/view {:justify-content :center - :align-items :center - :margin-right 7 - :width 32 - :height 32 - :border-radius 24 - :background-color colors/white - :border-width 1 - :border-color colors/black-transparent} - [react/image {:source (resources/get-image :keycard-key) - :style {:width 11 - :height 19}}]]) - [icons/icon :main-icons/next {:color colors/gray-transparent-40}]]]) + [quo/list-item {:on-press #(re-frame/dispatch + [:multiaccounts.login.ui/multiaccount-selected key-uid]) + :icon [photos/photo photo-path {:size styles/multiaccount-image-size}] + :title name + :accessory (when keycard-pairing + [react/view {:justify-content :center + :align-items :center + :margin-right 7 + :width 32 + :height 32 + :border-radius 24 + :background-color colors/white + :border-width 1 + :border-color colors/black-transparent} + [react/image {:source (resources/get-image :keycard-key) + :style {:width 11 + :height 19}}]]) + :chevron true}]) (defview multiaccounts [] (letsubs [multiaccounts [:multiaccounts/multiaccounts]] @@ -51,15 +40,18 @@ [topbar/topbar {:show-border? true :navigation :none :title (i18n/label :t/your-keys) - :accessories [{:icon :more + :accessories [{:icon :more :accessibility-label :your-keys-more-icon - :handler #(re-frame/dispatch [:bottom-sheet/show-sheet {:content sheets/actions-sheet}])}]}] + :handler #(re-frame/dispatch [:bottom-sheet/show-sheet {:content sheets/actions-sheet}])}]}] [react/view styles/multiaccounts-container - [react/view styles/multiaccounts-list-container - [list/flat-list {:data (vals multiaccounts) - :key-fn :address - :render-fn (fn [multiaccount] [multiaccount-view multiaccount])}]] - [react/view {:style (styles/bottom-button-container)} - [button/button {:on-press #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]) - :type :secondary - :label (i18n/label :t/access-existing-keys)}]]]])) + [list/flat-list {:data (vals multiaccounts) + :contentContainerStyle styles/multiaccounts-list-container + :key-fn :address + :render-fn multiaccount-view}]] + [toolbar/toolbar + {:show-border? true + :size :large + :center [quo/button + {:on-press #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]) + :type :secondary} + (i18n/label :t/access-existing-keys)]}]])) diff --git a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs index 68793d4655..534d2252c9 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs @@ -10,11 +10,6 @@ (def qr-code {:padding 16}) -(def bottom-container - {:flex-direction :row - :margin-horizontal 12 - :margin-vertical 15}) - (def button-container {:margin-top 8 :margin-bottom 16 diff --git a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs index 81a3a267ca..d5c1821746 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs @@ -1,17 +1,13 @@ (ns status-im.ui.screens.offline-messaging-settings.edit-mailserver.views (:require-macros [status-im.utils.views :as views]) - (:require - [re-frame.core :as re-frame] - [status-im.ui.components.react :as react] - [status-im.i18n :as i18n] - [status-im.ui.components.colors :as colors] - [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.styles :as components.styles] - [status-im.ui.components.common.common :as components.common] - [status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles] - [clojure.string :as string] - [quo.core :as quo] - [status-im.ui.components.topbar :as topbar])) + (:require [re-frame.core :as re-frame] + [status-im.ui.components.react :as react] + [status-im.i18n :as i18n] + [status-im.ui.components.toolbar :as toolbar] + [status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles] + [clojure.string :as string] + [quo.core :as quo] + [status-im.ui.components.topbar :as topbar])) (defn connect-button [id] [react/touchable-highlight {:on-press #(re-frame/dispatch [:mailserver.ui/connect-pressed id])} @@ -29,14 +25,6 @@ [react/text {:style styles/button-label} (i18n/label :t/delete)]]]]) -(def qr-code - [react/touchable-highlight {:on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed - {:title (i18n/label :t/add-mailserver) - :handler :mailserver.callback/qr-code-scanned}]) - :style styles/qr-code} - [react/view - [vector-icons/icon :main-icons/qr {:color colors/blue}]]]) - (views/defview edit-mailserver [] (views/letsubs [mailserver [:mailserver.edit/mailserver] connected? [:mailserver.edit/connected?] @@ -48,40 +36,43 @@ (not (string/blank? name)) (empty? validation-errors)) invalid-url? (contains? validation-errors :url)] - [react/view components.styles/flex - [react/keyboard-avoiding-view components.styles/flex - [topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}] - [react/scroll-view {:keyboard-should-persist-taps :handled} - [react/view styles/edit-mailserver-view - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/name) - :placeholder (i18n/label :t/specify-name) - :default-value name - :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %]) - :auto-focus true}]] - [react/view {:flex 1 - :padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/mailserver-address) - :placeholder (i18n/label :t/mailserver-format) - :content qr-code - :default-value url - :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %]) - :bottom-value 0 - :error (when (and (not (string/blank? url)) - invalid-url?) - (i18n/label :t/invalid-format - {:format (i18n/label :t/mailserver-format)}))}]] - (when (and id - (not connected?)) - [react/view - [connect-button id] - [delete-button id]])]] - [react/view styles/bottom-container - [react/view components.styles/flex] - [components.common/bottom-button - {:forward? true - :label (i18n/label :t/save) - :disabled? (not is-valid?) - :on-press #(re-frame/dispatch [:mailserver.ui/save-pressed])}]]]]))) + [react/keyboard-avoiding-view {:style {:flex 1}} + [topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}] + [react/scroll-view {:keyboard-should-persist-taps :handled} + [react/view styles/edit-mailserver-view + [react/view {:padding-vertical 8} + [quo/text-input + {:label (i18n/label :t/name) + :placeholder (i18n/label :t/specify-name) + :default-value name + :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %]) + :auto-focus true}]] + [react/view {:flex 1 + :padding-vertical 8} + [quo/text-input + {:label (i18n/label :t/mailserver-address) + :placeholder (i18n/label :t/mailserver-format) + :default-value url + :show-cancel false + :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %]) + :bottom-value 0 + :error (when (and (not (string/blank? url)) + invalid-url?) + (i18n/label :t/invalid-format + {:format (i18n/label :t/mailserver-format)})) + :after {:icon :main-icons/qr + :on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed + {:title (i18n/label :t/add-mailserver) + :handler :mailserver.callback/qr-code-scanned}])}}]] + (when (and id + (not connected?)) + [react/view + [connect-button id] + [delete-button id]])]] + [toolbar/toolbar + {:right + [quo/button {:type :secondary + :after :main-icon/next + :disabled (not is-valid?) + :on-press #(re-frame/dispatch [:mailserver.ui/save-pressed])} + (i18n/label :t/save)]}]]))) diff --git a/src/status_im/ui/screens/pairing/views.cljs b/src/status_im/ui/screens/pairing/views.cljs index 53789ace0d..4ff6bb7988 100644 --- a/src/status_im/ui/screens/pairing/views.cljs +++ b/src/status_im/ui/screens/pairing/views.cljs @@ -8,7 +8,6 @@ [status-im.ui.components.icons.vector-icons :as icons] [status-im.utils.platform :as utils.platform] [status-im.ui.components.styles :as components.styles] - [status-im.ui.components.common.common :as components.common] [status-im.ui.components.checkbox.view :as checkbox.views] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] @@ -147,13 +146,14 @@ :auto-focus true}]]] [react/view styles/bottom-container [react/view components.styles/flex] - [components.common/bottom-button - {:forward? true - :label (i18n/label :t/continue) - :disabled? (string/blank? @installation-name) + [quo/button + {:type :secondary + :after :main-icon/next + :disabled (string/blank? @installation-name) :on-press #(do (re-frame/dispatch [:pairing.ui/set-name-pressed @installation-name]) - (reset! installation-name ""))}]]]) + (reset! installation-name ""))} + (i18n/label :t/continue)]]]) (defn info-section [] [react/view {:style styles/info-section} diff --git a/src/status_im/ui/screens/privacy_and_security_settings/views.cljs b/src/status_im/ui/screens/privacy_and_security_settings/views.cljs index dc048ee65e..1cecb7c4b6 100644 --- a/src/status_im/ui/screens/privacy_and_security_settings/views.cljs +++ b/src/status_im/ui/screens/privacy_and_security_settings/views.cljs @@ -1,96 +1,69 @@ (ns status-im.ui.screens.privacy-and-security-settings.views (:require [re-frame.core :as re-frame] [status-im.i18n :as i18n] + [quo.core :as quo] [status-im.ui.components.colors :as colors] [status-im.ui.components.common.common :as components.common] - [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.multiaccounts.biometric.core :as biometric] [status-im.ui.components.topbar :as topbar] [status-im.utils.platform :as platform]) (:require-macros [status-im.utils.views :as views])) -(defn- list-data [mnemonic preview-privacy? supported-biometric-auth biometric-auth? _] - [{:type :section-header - :title :t/security - :container-margin-top 6} - {:type :small - :title :t/back-up-seed-phrase - :accessibility-label :back-up-recovery-phrase-button - :disabled? (not mnemonic) - ;; TODO - remove container bottom margin - ;; when items below are implemented - :container-margin-bottom 8 - :on-press - #(re-frame/dispatch [:navigate-to :backup-seed]) - :accessories - (when mnemonic - [[components.common/counter {:size 22} 1] - :chevron])} - (when supported-biometric-auth - {:type :small - :title (str (i18n/label :t/lock-app-with) " " (biometric/get-label supported-biometric-auth)) - :container-margin-bottom 8 - :accessibility-label :biometric-auth-settings-switch - :accessories [[react/switch - {:track-color #js {:true colors/blue :false nil} - :value (boolean biometric-auth?) - :on-value-change #(re-frame/dispatch [:multiaccounts.ui/biometric-auth-switched %]) - :disabled (not supported-biometric-auth)}]] - :on-press #(re-frame/dispatch [:multiaccounts.ui/biometric-auth-switched - ((complement boolean) biometric-auth?)])}) - ;; TODO - uncomment when implemented - ;; {:type :small - ;; :title :t/change-password - ;; :accessories [:chevron]} - ;; {:type :small - ;; :title :t/change-passcode - ;; :accessories [:chevron] - ;; :container-margin-bottom 8} - {:type :divider} - {:container-margin-top 8 - :type :section-header - :title :t/privacy} - {:type :small - :title :t/set-dapp-access-permissions - :on-press #(re-frame/dispatch [:navigate-to :dapps-permissions]) - :accessibility-label :dapps-permissions-button - :accessories [:chevron]} - {:type :small - :title (if platform/android? - :t/hide-content-when-switching-apps - :t/hide-content-when-switching-apps-ios) - :container-margin-bottom 8 - :accessories - [[react/switch - {:track-color #js {:true colors/blue :false nil} - :value (boolean preview-privacy?) - :on-value-change - #(re-frame/dispatch - [:multiaccounts.ui/preview-privacy-mode-switched %]) - :disabled false}]] - :on-press - #(re-frame/dispatch - [:multiaccounts.ui/preview-privacy-mode-switched - ((complement boolean) preview-privacy?)])} - {:type :divider} - ;; TODO - uncomment when implemented - (comment - {:container-margin-top 8 - :type :small - :title :t/delete-my-account - :container-margin-bottom 24 - :theme :action-destructive})]) - (views/defview privacy-and-security [] (views/letsubs [{:keys [mnemonic preview-privacy?]} [:multiaccount] supported-biometric-auth [:supported-biometric-auth] - auth-method [:auth-method] - keycard-multiaccount? [:keycard-multiaccount?]] + auth-method [:auth-method]] [react/view {:flex 1 :background-color colors/white} [topbar/topbar {:title :t/privacy-and-security}] - [list/flat-list - {:data (list-data mnemonic preview-privacy? supported-biometric-auth - (= auth-method "biometric") keycard-multiaccount?) - :key-fn (fn [_ i] (str i)) - :render-fn list/flat-list-generic-render-fn}]])) + [react/scroll-view {:padding-vertical 8} + [quo/list-header (i18n/label :t/security)] + [quo/list-item {:size :small + :title (i18n/label :t/back-up-seed-phrase) + :accessibility-label :back-up-recovery-phrase-button + :disabled (not mnemonic) + :chevron (boolean mnemonic) + :accessory (when mnemonic [components.common/counter {:size 22} 1]) + :on-press #(re-frame/dispatch [:navigate-to :backup-seed])}] + (when supported-biometric-auth + [quo/list-item + {:size :small + :title (str (i18n/label :t/lock-app-with) " " (biometric/get-label supported-biometric-auth)) + :active (= auth-method "biometric") + :accessibility-label :biometric-auth-settings-switch + :accessory :switch + :on-press #(re-frame/dispatch [:multiaccounts.ui/biometric-auth-switched + ((complement boolean) (= auth-method "biometric"))])}]) + [react/view {:margin-vertical 8 + :background-color colors/gray-lighter + :height 1}] + ;; TODO - uncomment when implemented + ;; {:size :small + ;; :title (i18n/label :t/change-password) + ;; :chevron true} + ;; {:size :small + ;; :title (i18n/label :t/change-passcode) + ;; :chevron true} + + [quo/list-header (i18n/label :t/privacy)] + [quo/list-item {:size :small + :title (i18n/label :t/set-dapp-access-permissions) + :on-press #(re-frame/dispatch [:navigate-to :dapps-permissions]) + :accessibility-label :dapps-permissions-button + :chevron true}] + [quo/list-item {:size :small + :title (if platform/android? + (i18n/label :t/hide-content-when-switching-apps) + (i18n/label :t/hide-content-when-switching-apps-ios)) + :container-margin-bottom 8 + :active preview-privacy? + :accessory :switch + :on-press #(re-frame/dispatch + [:multiaccounts.ui/preview-privacy-mode-switched + ((complement boolean) preview-privacy?)])}] + + (comment + {:container-margin-top 8 + :size :small + :title :t/delete-my-account + :theme :negative})]])) diff --git a/src/status_im/ui/screens/profile/components/sheets.cljs b/src/status_im/ui/screens/profile/components/sheets.cljs index fd54a5318c..84135329e8 100644 --- a/src/status_im/ui/screens/profile/components/sheets.cljs +++ b/src/status_im/ui/screens/profile/components/sheets.cljs @@ -14,12 +14,15 @@ [react/text {:style styles/sheet-text} (i18n/label :t/block-contact-details)] [react/view {:align-items :center :margin-top 16} - [quo/button {:theme :negative :disabled @in-progress? :loading @in-progress? + [quo/button {:theme :negative + :disabled @in-progress? + :loading @in-progress? :accessibility-label :block-contact-confirm - :on-press #(do (reset! in-progress? true) - (re-frame/dispatch [:contact.ui/block-contact-confirmed public-key]))} - :t/block] + :on-press #(do (reset! in-progress? true) + (re-frame/dispatch [:contact.ui/block-contact-confirmed public-key]))} + (i18n/label :t/block)] [react/view {:height 8}] - [quo/button {:type :secondary :disabled @in-progress? + [quo/button {:type :secondary + :disabled @in-progress? :on-press #(re-frame/dispatch [:hide-popover])} - :t/close]]])) + (i18n/label :t/close)]]])) diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index a6b6eca62c..a0fe9e0ebd 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -5,8 +5,6 @@ [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.list-item.views :as list-item] - [status-im.ui.components.list.views :as list] [status-im.ui.components.profile-header.view :as profile-header] [status-im.ui.components.react :as react] [status-im.ui.screens.profile.components.sheets :as sheets] @@ -50,28 +48,27 @@ ; contact]) (defn render-detail [{:keys [alias public-key ens-name] :as detail}] - [list-item/list-item - {:title alias - :subtitle (utils/get-shortened-address public-key) - :icon [chat-icon/contact-icon-contacts-tab detail] + [quo/list-item + {:title (or alias ens-name) + :subtitle (utils/get-shortened-address public-key) + :icon [chat-icon/contact-icon-contacts-tab + (multiaccounts/displayed-photo detail)] :accessibility-label :profile-public-key - :on-press #(re-frame/dispatch [:show-popover {:view :share-chat-key :address public-key :ens-name ens-name}]) - :accessories [[icons/icon :main-icons/share styles/contact-profile-detail-share-icon]]}]) - -(defn profile-details-list-view [contact] - [list/flat-list {:data [contact] - :default-separator? true - :key-fn :public-key - :render-fn render-detail}]) + :on-press #(re-frame/dispatch [:show-popover {:view :share-chat-key + :address public-key + :ens-name ens-name}]) + :accessory [icons/icon :main-icons/share styles/contact-profile-detail-share-icon]}]) (defn profile-details [contact] (when contact [react/view - [list-item/list-item {:type :section-header - :title :t/profile-details - :title-accessibility-label :profile-details}] - [profile-details-list-view contact]])) + [quo/list-header + [quo/text {:accessibility-label :profile-details + :color :inherit} + (i18n/label :t/profile-details)]] + [render-detail contact]])) +;; TODO: List item (defn block-contact-action [{:keys [blocked? public-key]}] [react/touchable-highlight {:on-press (if blocked? #(re-frame/dispatch [:contact.ui/unblock-contact-pressed public-key]) @@ -116,13 +113,14 @@ [react/view {:padding-top 12} (for [{:keys [label subtext accessibility-label icon action disabled?]} (actions contact)] - [list-item/list-item {:theme :action - :title label - :subtitle subtext - :icon icon - :accessibility-label accessibility-label - :disabled? disabled? - :on-press action}])] + (when label + [quo/list-item {:theme :accent + :title label + :subtitle subtext + :icon icon + :accessibility-label accessibility-label + :disabled disabled? + :on-press action}]))] [react/view styles/contact-profile-details-container [profile-details (cond-> contact (and ens-verified name) diff --git a/src/status_im/ui/screens/profile/db.cljs b/src/status_im/ui/screens/profile/db.cljs index c0bac8e78b..ba528c7a0c 100644 --- a/src/status_im/ui/screens/profile/db.cljs +++ b/src/status_im/ui/screens/profile/db.cljs @@ -15,8 +15,4 @@ (defn base64-jpeg? [photo-path] (string/starts-with? photo-path "data:image/jpeg;base64,")) -(defn base64-encoded-image-path? [photo-path] - (or (base64-png? photo-path) - (base64-jpeg? photo-path))) - (spec/def :profile/name correct-name?) \ No newline at end of file diff --git a/src/status_im/ui/screens/profile/group_chat/views.cljs b/src/status_im/ui/screens/profile/group_chat/views.cljs index 116724f9fc..9731a8f6d8 100644 --- a/src/status_im/ui/screens/profile/group_chat/views.cljs +++ b/src/status_im/ui/screens/profile/group_chat/views.cljs @@ -6,8 +6,6 @@ [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.contact.contact :as contact] - [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list.views :as list] [status-im.ui.components.profile-header.view :as profile-header] [status-im.ui.components.react :as react] @@ -20,51 +18,55 @@ (defn member-sheet [chat-id member us-admin?] [react/view - [list-item/list-item - {:theme :action - :icon (multiaccounts/displayed-photo member) - :title [chat.sheets/view-profile {:name (contact/format-name member) - :helper :t/view-profile}] + [quo/list-item + {:theme :accent + :icon [chat-icon/contact-icon-contacts-tab + (multiaccounts/displayed-photo member)] + :title (contact/format-name member) + :subtitle (i18n/label :t/view-profile) :accessibility-label :view-chat-details-button - :accessories [:chevron] + :chevron true :on-press #(chat.sheets/hide-sheet-and-dispatch [(if platform/desktop? :show-profile-desktop :chat.ui/show-profile) (:public-key member)])}] (when (and us-admin? (not (:admin? member))) - [list-item/list-item - {:theme :action - :title :t/make-admin + [quo/list-item + {:theme :accent + :title (i18n/label :t/make-admin) :accessibility-label :make-admin - ;; TODO(Ferossgp): Fix case for make admin icon :icon :main-icons/make-admin :on-press #(chat.sheets/hide-sheet-and-dispatch [:group-chats.ui/make-admin-pressed chat-id (:public-key member)])}]) (when-not (:admin? member) - [list-item/list-item - {:theme :action - :title :t/remove-from-chat + [quo/list-item + {:theme :accent + :title (i18n/label :t/remove-from-chat) :accessibility-label :remove-from-chat :icon :main-icons/remove-contact :on-press #(chat.sheets/hide-sheet-and-dispatch [:group-chats.ui/remove-member-pressed chat-id (:public-key member)])}])]) (defn render-member [chat-id {:keys [public-key] :as member} admin? current-user-identity] - [list-item/list-item + [quo/list-item (merge - {:title (contact/format-name member) + {:title (contact/format-name member) :accessibility-label :member-item - :icon [chat-icon/contact-icon-contacts-tab member] + :icon [chat-icon/contact-icon-contacts-tab + (multiaccounts/displayed-photo member)] :on-press (when (not= public-key current-user-identity) #(re-frame/dispatch [(if platform/desktop? :show-profile-desktop :chat.ui/show-profile) public-key]))} (when (:admin? member) - {:accessories [(i18n/label :t/group-chat-admin)]}) + {:accessory :text + :accessory-text (i18n/label :t/group-chat-admin)}) (when (and admin? (not (:admin? member)) (not= public-key current-user-identity)) - {:accessories [[react/touchable-highlight {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet - {:content (fn [] - [member-sheet chat-id member admin?])}]) - :accessibility-label :menu-option} - [vector-icons/icon :main-icons/more {:accessibility-label :options}]]]}))]) + {:accessory [quo/button {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet + {:content (fn [] + [member-sheet chat-id member admin?])}]) + :type :icon + :theme :icon + :accessibility-label :menu-option} + :main-icons/more]}))]) (defview chat-group-members-view [chat-id admin? current-user-identity] (letsubs [members [:contacts/current-chat-contacts]] @@ -75,12 +77,12 @@ (defn members-list [{:keys [chat-id admin? current-pk allow-adding-members?]}] [react/view - [list-item/list-item {:title :t/members-title :type :section-header}] + [quo/list-header (i18n/label :t/members-title)] (when allow-adding-members? - [list-item/list-item - {:title :t/add-members + [quo/list-item + {:title (i18n/label :t/add-members) :icon :main-icons/add-contact - :theme :action + :theme :accent :on-press #(re-frame/dispatch [:navigate-to :add-participants-toggle-list])}]) [chat-group-members-view chat-id admin? current-pk]]) @@ -109,9 +111,9 @@ :subtitle-icon :icons/tiny-group})} [react/view profile.components.styles/profile-form (when joined? - [list-item/list-item - {:theme :action - :title :t/leave-chat + [quo/list-item + {:theme :negative + :title (i18n/label :t/leave-chat) :accessibility-label :leave-chat-button :icon :main-icons/arrow-left :on-press #(re-frame/dispatch [:group-chats.ui/leave-chat-pressed chat-id])}]) diff --git a/src/status_im/ui/screens/profile/seed/styles.cljs b/src/status_im/ui/screens/profile/seed/styles.cljs index 132ea2297a..2d06ce3d57 100644 --- a/src/status_im/ui/screens/profile/seed/styles.cljs +++ b/src/status_im/ui/screens/profile/seed/styles.cljs @@ -52,9 +52,6 @@ (def twelve-words-spacer {:flex 1}) -(def twelve-words-button-container - {:align-items :flex-end}) - (def twelve-words-columns {:margin-top 8 :margin-bottom 16 diff --git a/src/status_im/ui/screens/profile/seed/views.cljs b/src/status_im/ui/screens/profile/seed/views.cljs index 8ba7e457e3..36cd6d50d8 100644 --- a/src/status_im/ui/screens/profile/seed/views.cljs +++ b/src/status_im/ui/screens/profile/seed/views.cljs @@ -1,14 +1,14 @@ (ns status-im.ui.screens.profile.seed.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [status-im.ui.components.react :as react] - [status-im.ui.components.toolbar.view :as toolbar] + [status-im.ui.components.toolbar.view :as not.toolbar] [status-im.ui.components.toolbar.actions :as actions] [status-im.react-native.resources :as resources] - [status-im.ui.components.common.common :as components.common] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.common.styles :as components.common.styles] + [status-im.ui.components.toolbar :as toolbar] [clojure.string :as string] [status-im.utils.utils :as utils] [status-im.ui.screens.profile.seed.styles :as styles] @@ -35,15 +35,15 @@ :justify-content :center}} (when-not platform/desktop? [react/image {:source (resources/get-image :lock) - :style styles/intro-image}]) + :style styles/intro-image}]) [react/i18n-text {:style styles/intro-text :key :your-data-belongs-to-you}] [react/i18n-text {:style styles/intro-description :key :your-data-belongs-to-you-description}] - [components.common/button - {:button-style styles/intro-button - :on-press #(re-frame/dispatch [:set-in [:my-profile/seed :step] :12-words]) - :label (i18n/label :t/ok-continue)}]]) + [quo/button + {:style styles/intro-button + :on-press #(re-frame/dispatch [:set-in [:my-profile/seed :step] :12-words])} + (i18n/label :t/ok-continue)]]) (defn six-words [words] [react/view {:style styles/six-words-container} @@ -61,38 +61,24 @@ (defview twelve-words [{:keys [mnemonic]}] (letsubs [mnemonic-vec (vec (map-indexed vector (clojure.string/split mnemonic #" "))) ref (reagent/atom nil)] - [react/view {:style styles/twelve-words-container} - [react/text {:style styles/twelve-words-label} - (i18n/label :t/your-recovery-phrase)] - [react/view {:style styles/twelve-words-columns - :ref (partial reset! ref)} - [six-words (subvec mnemonic-vec 0 6)] - [react/view {:style styles/twelve-words-columns-separator}] - [six-words (subvec mnemonic-vec 6 12)]] - [react/text {:style styles/twelve-words-description} - (i18n/label :t/your-recovery-phrase-description)] - [react/view styles/twelve-words-spacer] - [react/view styles/twelve-words-button-container - [components.common/bottom-button - {:forward? true - :on-press #(re-frame/dispatch [:my-profile/enter-two-random-words])}]]])) - -(defview input [error next-handler idx] - (letsubs [ref (reagent/atom nil)] - [quo/text-input - {:placeholder (i18n/label :t/enter-word) - :label [:<> - (i18n/label :t/check-your-recovery-phrase) - " " - [quo/text {:color :secondary} - (i18n/label :t/word-n {:number (inc idx)})]] - :ref (partial reset! ref) - :auto-focus true - :auto-correct false - :keyboard-type "visible-password" - :on-change-text #(re-frame/dispatch [:set-in [:my-profile/seed :word] %]) - :on-submit-editing next-handler - :error error}])) + [react/view {:flex 1} + [react/view {:style styles/twelve-words-container} + [react/text {:style styles/twelve-words-label} + (i18n/label :t/your-recovery-phrase)] + [react/view {:style styles/twelve-words-columns + :ref (partial reset! ref)} + [six-words (subvec mnemonic-vec 0 6)] + [react/view {:style styles/twelve-words-columns-separator}] + [six-words (subvec mnemonic-vec 6 12)]] + [react/text {:style styles/twelve-words-description} + (i18n/label :t/your-recovery-phrase-description)] + [react/view styles/twelve-words-spacer]] + [toolbar/toolbar + {:right + [quo/button {:type :secondary + :after :main-icon/next + :on-press #(re-frame/dispatch [:my-profile/enter-two-random-words])} + (i18n/label :t/next)]}]])) (defn next-handler [word entered-word step] (fn [_] @@ -110,18 +96,34 @@ (defn enter-word [step [idx word] error entered-word] ^{:key word} - [react/view {:style styles/enter-word-container} - [react/view {:padding-bottom 8} - [input error (next-handler word entered-word step) idx]] - [react/text {:style styles/enter-word-n-description} - (i18n/label :t/word-n-description {:number (inc idx)})] - [react/view styles/twelve-words-spacer] - [react/view styles/twelve-words-button-container - [components.common/bottom-button - {:forward? (not= :second-word step) - :label (when (= :second-word step) (i18n/label :t/done)) - :disabled? (string/blank? entered-word) - :on-press (next-handler word entered-word step)}]]]) + [react/view {:flex 1} + [react/view {:style styles/enter-word-container} + [quo/text-input + {:placeholder (i18n/label :t/enter-word) + :label [:<> + (i18n/label :t/check-your-recovery-phrase) + " " + [quo/text {:color :secondary} + (i18n/label :t/word-n {:number (inc idx)})]] + :auto-focus true + :auto-correct false + :keyboard-type "visible-password" + :on-change-text #(re-frame/dispatch [:set-in [:my-profile/seed :word] %]) + :on-submit-editing next-handler + :error error}] + [react/text {:style styles/enter-word-n-description} + (i18n/label :t/word-n-description {:number (inc idx)})] + [react/view styles/twelve-words-spacer]] + [toolbar/toolbar + {:right + [quo/button (merge {:type :secondary + :disabled (string/blank? entered-word) + :on-press (next-handler word entered-word step)} + (when-not (= :second-word step) + {:after :main-icon/next})) + (if (= :second-word step) + (i18n/label :t/done) + (i18n/label :t/next))]}]]) (defn finish [] [react/view {:style styles/finish-container} @@ -132,18 +134,18 @@ (i18n/label :t/you-are-all-set)] [react/text {:style styles/finish-description} (i18n/label :t/you-are-all-set-description)] - [components.common/button {:button-style styles/finish-button - :on-press #(re-frame/dispatch [:navigate-back]) - :label (i18n/label :t/ok-got-it)}]]) + [quo/button {:style styles/finish-button + :on-press #(re-frame/dispatch [:navigate-back])} + (i18n/label :t/ok-got-it)]]) (defview backup-seed [] (letsubs [current-multiaccount [:multiaccount] {:keys [step first-word second-word error word]} [:my-profile/recovery]] [react/keyboard-avoiding-view {:style {:flex 1}} - [toolbar/toolbar + [not.toolbar/toolbar nil (when-not (= :finish step) - (toolbar/nav-button (actions/back #(step-back step)))) + (not.toolbar/nav-button (actions/back #(step-back step)))) [react/view [react/text {:style styles/backup-seed} (i18n/label :t/backup-recovery-phrase)] diff --git a/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs b/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs index 5a468414bd..f811efea1f 100644 --- a/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs +++ b/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs @@ -19,18 +19,6 @@ {:text-align :center :color colors/gray}) -(def intro-button - {:margin-vertical 8 - :padding-horizontal 32 - :align-self :center - :justify-content :center - :align-items :center}) - -(def bottom-toolbar - {:height 60 - :border-top-width 1 - :border-top-color colors/gray-lighter}) - (def step-n {:margin-top 5 :font-size 14 diff --git a/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs b/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs index dd954d93c3..1e684ea7ee 100644 --- a/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs +++ b/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs @@ -3,11 +3,12 @@ [status-im.i18n :as i18n] [status-im.react-native.resources :as resources] [status-im.ui.components.colors :as colors] - [status-im.ui.components.common.common :as components.common] + [quo.core :as quo] [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.react :as react] [status-im.ui.components.toolbar.actions :as actions] - [status-im.ui.components.toolbar.view :as toolbar] + [status-im.ui.components.toolbar.view :as not.toolbar] + [status-im.ui.components.toolbar :as toolbar] [status-im.ui.screens.profile.tribute-to-talk.styles :as styles]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) @@ -277,7 +278,7 @@ (defn learn-more [owner?] [react/view {:flex 1} (when-not owner? - [toolbar/toolbar nil toolbar/default-nav-close + [not.toolbar/toolbar nil not.toolbar/default-nav-close [react/view [react/text {:style styles/tribute-to-talk} (i18n/label :t/tribute-to-talk)] @@ -325,10 +326,10 @@ [:tribute-to-talk/settings-ui]] [react/keyboard-avoiding-view {:style styles/container} [react/view {:style {:flex 1}} - [toolbar/toolbar + [not.toolbar/toolbar nil (when-not (= :finish step) - (toolbar/nav-button + (not.toolbar/nav-button (actions/back #(re-frame/dispatch [:tribute-to-talk.ui/step-back-pressed])))) [react/view @@ -338,29 +339,31 @@ [react/text {:style styles/step-n} (if (= step :finish) (i18n/label (case state - :completed :t/completed - :pending :t/pending - :signing :t/signing + :completed :t/completed + :pending :t/pending + :signing :t/signing :transaction-failed :t/transaction-failed - :disabled :t/disabled)) - (i18n/label :t/step-i-of-n {:step ((steps-numbers editing?) step) + :disabled :t/disabled)) + (i18n/label :t/step-i-of-n {:step ((steps-numbers editing?) step) :number (if editing? 2 3)}))]) (when (= step :learn-more) [react/text {:style styles/step-n} (i18n/label :t/learn-more)])]] (case step - :intro [intro] - :set-snt-amount [set-snt-amount snt-amount] - :edit [edit snt-amount fiat-value] - :learn-more [learn-more step] - :finish [finish snt-amount state]) + :intro [intro] + :set-snt-amount [set-snt-amount snt-amount] + :edit [edit snt-amount fiat-value] + :learn-more [learn-more step] + :finish [finish snt-amount state]) (when-not (#{:learn-more :edit} step) - [react/view {:style styles/bottom-toolbar} - [components.common/button {:button-style styles/intro-button - :disabled? disable-button? - :label-style (when disable-button? {:color colors/gray}) - :on-press #(re-frame/dispatch - [:tribute-to-talk.ui/step-forward-pressed]) - :label (i18n/label (step-forward-label step))}]])]])) + [toolbar/toolbar + {:show-border? true + :size :large + :center + [quo/button {:disabled disable-button? + :type :secondary + :on-press #(re-frame/dispatch + [:tribute-to-talk.ui/step-forward-pressed])} + (i18n/label (step-forward-label step))]}])]])) diff --git a/src/status_im/ui/screens/profile/user/styles.cljs b/src/status_im/ui/screens/profile/user/styles.cljs index 4f4b5aed60..90955456e7 100644 --- a/src/status_im/ui/screens/profile/user/styles.cljs +++ b/src/status_im/ui/screens/profile/user/styles.cljs @@ -2,4 +2,5 @@ (def share-link-button {:margin-top 12 - :margin-bottom 8}) + :margin-horizontal 16 + :margin-bottom 16}) diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 960c8a6dbc..4ee172d49e 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -2,19 +2,17 @@ (:require [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.i18n :as i18n] - [status-im.ui.components.button :as button] + [quo.core :as quo] [status-im.ui.components.colors :as colors] [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.common.common :as components.common] [status-im.ui.components.copyable-text :as copyable-text] [status-im.ui.components.list-selection :as list-selection] - [status-im.ui.components.list.views :as list.views] [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer] [status-im.ui.components.react :as react] [status-im.ui.screens.profile.user.styles :as styles] [status-im.utils.platform :as platform] [status-im.utils.config :as config] - [quo.core :as quo] [status-im.utils.gfycat.core :as gfy] [status-im.utils.universal-links.core :as universal-links] [status-im.ui.components.profile-header.view :as profile-header]) @@ -52,160 +50,148 @@ :font-family "monospace"}} address]]] [react/view styles/share-link-button - ;;TODO implement icon support - [button/button + [quo/button {:on-press #(list-selection/open-share {:message link}) - :label :t/share-link - ;:icon :main-icons/link - :accessibility-label :share-my-contact-code-button}]]]))) + :accessibility-label :share-my-contact-code-button} + (i18n/label :t/share-link)]]]))) (defn tribute-to-talk-item [opts] - [list.views/big-list-item - (merge {:text (i18n/label :t/tribute-to-talk) + [quo/list-item + (merge {:title (i18n/label :t/tribute-to-talk) :accessibility-label :notifications-button - :action-fn #(re-frame/dispatch + :on-press #(re-frame/dispatch [:tribute-to-talk.ui/menu-item-pressed])} opts)]) -(defn- flat-list-content - [preferred-name registrar tribute-to-talk - active-contacts-count mnemonic - keycard-account? notifications-enabled?] - [(cond-> {:title (or (when registrar preferred-name) - :t/ens-usernames) - :subtitle (if registrar - (if preferred-name - :t/ens-your-your-name - :t/ens-usernames-details) - :t/ens-network-restriction) - :subtitle-max-lines (if registrar - (if preferred-name 1 2) - 1) - :accessibility-label :ens-button - :container-margin-top 8 - :disabled? (not registrar) - :accessories [:chevron] - :icon :main-icons/username} - registrar - (assoc :on-press #(re-frame/dispatch [:navigate-to :ens-main registrar]))) - ;; TODO replace this with list-item config map - ;; left it as it is because not sure how to enable it for testing - (when tribute-to-talk [tribute-to-talk-item tribute-to-talk]) - {:title :t/contacts - :icon :main-icons/in-contacts - :accessibility-label :contacts-button - :accessories [(if (pos? active-contacts-count) - (str active-contacts-count) - :t/none) - :chevron] - :on-press #(re-frame/dispatch [:navigate-to :contacts-list])} - {:type :section-header - :accessibility-label :settings-section - :container-margin-top 16 - :title :t/settings} - {:icon :main-icons/security - :title :t/privacy-and-security - :accessibility-label :privacy-and-security-settings-button - :accessories - [(when mnemonic - [components.common/counter {:size 22} 1]) :chevron] - :on-press #(re-frame/dispatch [:navigate-to :privacy-and-security])} - {:icon :main-icons/appearance - :title :t/appearance - :accessibility-label :appearance-settings-button - :accessories [:chevron] - :on-press #(re-frame/dispatch [:navigate-to :appearance])} - (when (and platform/android? - config/local-notifications?) - {:icon :main-icons/notification - :title :t/notifications - :accessibility-label :notifications-button - :on-press - #(re-frame/dispatch - [:multiaccounts.ui/notifications-switched (not notifications-enabled?)]) - :accessories - [[react/switch - {:track-color #js {:true colors/blue :false nil} - :value notifications-enabled? - :on-value-change - #(re-frame/dispatch - [:multiaccounts.ui/notifications-switched - (not notifications-enabled?)]) - :disabled false}]]}) - {:icon :main-icons/mobile - :title :t/sync-settings - :accessibility-label :sync-settings-button - :accessories [:chevron] - :on-press #(re-frame/dispatch [:navigate-to :sync-settings])} - (when (and (or platform/android? - config/keycard-test-menu-enabled?) - config/hardwallet-enabled? - keycard-account?) - {:icon :main-icons/keycard - :title :t/keycard - :accessibility-label :keycard-button - :accessories [:chevron] - :on-press #(re-frame/dispatch [:navigate-to :keycard-settings])}) - {:icon :main-icons/settings-advanced - :title :t/advanced - :accessibility-label :advanced-button - :accessories [:chevron] - :on-press #(re-frame/dispatch [:navigate-to :advanced-settings])} - {:icon :main-icons/help - :title :t/need-help - :accessibility-label :help-button - :accessories [:chevron] - :on-press #(re-frame/dispatch [:navigate-to :help-center])} - {:icon :main-icons/info - :title :t/about-app - :accessibility-label :about-button - :accessories [:chevron] - :on-press #(re-frame/dispatch [:navigate-to :about-app])} - {:icon :main-icons/log-out - :title :t/sign-out - :accessibility-label :log-out-button - :container-margin-top 24 - :container-margin-bottom 24 - :theme :action-destructive - :on-press - #(re-frame/dispatch [:multiaccounts.logout.ui/logout-pressed])}]) - (defn content [] (let [{:keys [preferred-name mnemonic keycard-pairing notifications-enabled?]} @(re-frame/subscribe [:multiaccount]) - active-contacts-count @(re-frame/subscribe [:contacts/active-count]) tribute-to-talk @(re-frame/subscribe [:tribute-to-talk/profile]) registrar @(re-frame/subscribe [:ens.stateofus/registrar])] - [react/view - (for [item (flat-list-content - preferred-name registrar tribute-to-talk - active-contacts-count mnemonic - keycard-pairing notifications-enabled?)] - ^{:key (str "item" (:title item))} - [list.views/flat-list-generic-render-fn item])])) + [:<> + [quo/list-item + (cond-> {:title (or (when registrar preferred-name) + (i18n/label :t/ens-usernames)) + :subtitle (if registrar + (if preferred-name + (i18n/label :t/ens-your-your-name) + (i18n/label :t/ens-usernames-details)) + (i18n/label :t/ens-network-restriction)) + :subtitle-max-lines (if registrar + (if preferred-name 1 2) + 1) + :accessibility-label :ens-button + :container-margin-top 8 + :disabled (not registrar) + :chevron true + :icon :main-icons/username} + registrar + (assoc :on-press #(re-frame/dispatch [:navigate-to :ens-main registrar])))] + ;; TODO replace this with list-item config map + ;; left it as it is because not sure how to enable it for testing + (when tribute-to-talk [tribute-to-talk-item tribute-to-talk]) + [quo/list-item + {:title (i18n/label :t/contacts) + :icon :main-icons/in-contacts + :accessibility-label :contacts-button + :accessory :text + :accessory-text (if (pos? active-contacts-count) + (str active-contacts-count) + (i18n/label :t/none)) + :chevron true + :on-press #(re-frame/dispatch [:navigate-to :contacts-list])}] + [react/view {:padding-top 16} + [quo/list-header (i18n/label :t/settings)]] + [quo/list-item + {:icon :main-icons/security + :title (i18n/label :t/privacy-and-security) + :accessibility-label :privacy-and-security-settings-button + :chevron true + :accessory (when mnemonic + [components.common/counter {:size 22} 1]) + :on-press #(re-frame/dispatch [:navigate-to :privacy-and-security])}] + [quo/list-item + {:icon :main-icons/appearance + :title (i18n/label :t/appearance) + :accessibility-label :appearance-settings-button + :chevron true + :on-press #(re-frame/dispatch [:navigate-to :appearance])}] + (when (and platform/android? + config/local-notifications?) + [quo/list-item + {:icon :main-icons/notification + :title (i18n/label :t/notifications) + :accessibility-label :notifications-button + :active notifications-enabled? + :on-press #(re-frame/dispatch + [:multiaccounts.ui/notifications-switched (not notifications-enabled?)]) + :accessory :switch}]) + [quo/list-item + {:icon :main-icons/mobile + :title (i18n/label :t/sync-settings) + :accessibility-label :sync-settings-button + :chevron true + :on-press #(re-frame/dispatch [:navigate-to :sync-settings])}] + (when (and (or platform/android? + config/keycard-test-menu-enabled?) + config/hardwallet-enabled? + keycard-pairing) + [quo/list-item + {:icon :main-icons/keycard + :title (i18n/label :t/keycard) + :accessibility-label :keycard-button + :chevron true + :on-press #(re-frame/dispatch [:navigate-to :keycard-settings])}]) + [quo/list-item + {:icon :main-icons/settings-advanced + :title (i18n/label :t/advanced) + :accessibility-label :advanced-button + :chevron true + :on-press #(re-frame/dispatch [:navigate-to :advanced-settings])}] + [quo/list-item + {:icon :main-icons/help + :title (i18n/label :t/need-help) + :accessibility-label :help-button + :chevron true + :on-press #(re-frame/dispatch [:navigate-to :help-center])}] + [quo/list-item + {:icon :main-icons/info + :title (i18n/label :t/about-app) + :accessibility-label :about-button + :chevron true + :on-press #(re-frame/dispatch [:navigate-to :about-app])}] + [react/view {:padding-vertical 24} + [quo/list-item + {:icon :main-icons/log-out + :title (i18n/label :t/sign-out) + :accessibility-label :log-out-button + :theme :negative + :on-press + #(re-frame/dispatch [:multiaccounts.logout.ui/logout-pressed])}]]])) (defn my-profile [] - (let [{:keys [public-key ens-verified preferred-name] - :as account} @(re-frame/subscribe [:multiaccount]) - on-share #(re-frame/dispatch [:show-popover - {:view :share-chat-key - :address public-key - :ens-name preferred-name}])] - [react/view {:style {:flex 1}} - [quo/animated-header - {:right-accessories [{:icon :main-icons/share - :on-press on-share}] - :use-insets true - :extended-header (profile-header/extended-header - {:on-press on-share - :title (multiaccounts/displayed-name account) - :photo (multiaccounts/displayed-photo account) - :subtitle (if (and ens-verified public-key) - (gfy/generate-gfy public-key) - public-key)})} - [content]]])) + (fn [] + (let [{:keys [public-key ens-verified preferred-name] + :as account} @(re-frame/subscribe [:multiaccount]) + on-share #(re-frame/dispatch [:show-popover + {:view :share-chat-key + :address public-key + :ens-name preferred-name}])] + [react/view {:style {:flex 1}} + [quo/animated-header + {:right-accessories [{:icon :main-icons/share + :on-press on-share}] + :use-insets true + :extended-header (profile-header/extended-header + {:on-press on-share + :title (multiaccounts/displayed-name account) + :photo (multiaccounts/displayed-photo account) + :subtitle (if (and ens-verified public-key) + (gfy/generate-gfy public-key) + public-key)})} + [content]]]))) diff --git a/src/status_im/ui/screens/qr_scanner/views.cljs b/src/status_im/ui/screens/qr_scanner/views.cljs index 3876679dbe..2de48aa034 100644 --- a/src/status_im/ui/screens/qr_scanner/views.cljs +++ b/src/status_im/ui/screens/qr_scanner/views.cljs @@ -9,7 +9,7 @@ [status-im.ui.screens.qr-scanner.styles :as styles] [status-im.ui.components.colors :as colors] [status-im.utils.config :as config] - [status-im.ui.components.button :as button] + [quo.core :as quo] [reagent.core :as reagent])) (defn- topbar [_ {:keys [title] :as opts}] @@ -36,15 +36,15 @@ :align-items :center :justify-content :center} [react/text-input {:multiline true - :style {:color colors/white-persist} + :style {:color colors/white-persist} :on-change-text #(reset! text-value %)}] [react/view {:flex-direction :row} - [button/button - {:label "Cancel" - :on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])}] - [button/button - {:label "OK" - :on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-success opts (when-let [text @text-value] (string/trim text))])}]]]])) + [quo/button + {:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])} + "Cancel"] + [quo/button + {:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-success opts (when-let [text @text-value] (string/trim text))])} + "Ok"]]]])) (defn corner [border1 border2 corner] [react/view (assoc {:border-color colors/white-persist :width 60 :height 60} border1 5 border2 5 corner 32)]) diff --git a/src/status_im/ui/screens/routing/core.cljs b/src/status_im/ui/screens/routing/core.cljs index 5ed6d0839c..5d5a713d2b 100644 --- a/src/status_im/ui/screens/routing/core.cljs +++ b/src/status_im/ui/screens/routing/core.cljs @@ -59,7 +59,6 @@ (fn [] ;; Reset currently mounted text inputs to their default values ;; on navigating away; this is a privacy measure - (println @quo/text-input-refs) (doseq [[_ {:keys [ref value]}] @quo/text-input-refs] (.setNativeProps ^js ref (clj->js {:text value}))) (doseq [[^js text-input default-value] @react/text-input-refs] diff --git a/src/status_im/ui/screens/routing/intro_login_stack.cljs b/src/status_im/ui/screens/routing/intro_login_stack.cljs index 98fefa7676..0ec60b1579 100644 --- a/src/status_im/ui/screens/routing/intro_login_stack.cljs +++ b/src/status_im/ui/screens/routing/intro_login_stack.cljs @@ -91,9 +91,10 @@ :component keycard.recovery/pair} {:name :keycard-recovery-success :back-handler :noop + :insets {:bottom true} :component keycard.recovery/success} - {:name :keycard-recovery-no-key - :component keycard.recovery/no-key} + {:name :keycard-recovery-no-key + :component keycard.recovery/no-key} {:name :keycard-recovery-pin :component keycard.recovery/pin} {:name :hardwallet-authentication-method diff --git a/src/status_im/ui/screens/signing/sheets.cljs b/src/status_im/ui/screens/signing/sheets.cljs index d3f4a12e60..f81246209f 100644 --- a/src/status_im/ui/screens/signing/sheets.cljs +++ b/src/status_im/ui/screens/signing/sheets.cljs @@ -2,9 +2,8 @@ (:require-macros [status-im.utils.views :as views]) (:require [status-im.ui.components.react :as react] [re-frame.core :as re-frame] - [quo.core :as quo] [status-im.i18n :as i18n] - [status-im.ui.components.button :as button] + [quo.core :as quo] [status-im.ui.components.colors :as colors])) (views/defview fee-bottom-sheet [fee-display-symbol] @@ -52,12 +51,12 @@ [{:style {:color colors/gray}} fee-display-symbol]]]] [react/view {:height 1 :background-color colors/gray-lighter}] [react/view {:margin-horizontal 16 :align-items :center :justify-content :space-between :flex-direction :row :margin-top 6} - [button/button + [quo/button {:type :secondary - :on-press #(re-frame/dispatch [:bottom-sheet/hide-sheet]) - :label :t/cancel}] - [button/button + :on-press #(re-frame/dispatch [:bottom-sheet/hide])} + (i18n/label :t/cancel)] + [quo/button {:type :secondary :on-press #(re-frame/dispatch [:signing.edit-fee.ui/submit]) - :disabled? (or (:error gas-edit) (:error gas-price-edit)) - :label :t/update}]]])) + :disabled (or (:error gas-edit) (:error gas-price-edit))} + (i18n/label :t/update)]]])) diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index 8388190d63..aabee964dd 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -4,8 +4,6 @@ [re-frame.core :as re-frame] [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.colors :as colors] - [status-im.ui.components.list-item.views :as list-item] - [status-im.ui.components.button :as button] [status-im.ui.components.copyable-text :as copyable-text] [status-im.wallet.utils :as wallet.utils] [status-im.ui.components.list.views :as list] @@ -13,12 +11,12 @@ [status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.icons.vector-icons :as icons] - [quo.core :as quo] [status-im.i18n :as i18n] [status-im.utils.security :as security] [status-im.ui.screens.signing.sheets :as sheets] [status-im.ethereum.tokens :as tokens] [clojure.string :as string] + [quo.core :as quo] [status-im.ui.screens.signing.styles :as styles] [status-im.react-native.resources :as resources] [status-im.ui.screens.hardwallet.pin.views :as pin.views] @@ -36,35 +34,38 @@ (utils/get-shortened-checksum-address (:address contact)))) (defn contact-item [title contact] - [list-item/list-item - {:title title - :title-prefix-width 45 - :type :small - :accessories - [[copyable-text/copyable-text-view - {:copied-text (displayed-name contact)} - [react/text - {:ellipsize-mode :middle - :number-of-lines 1 - :style {:font-family "monospace" - :line-height 22}} - (displayed-name contact)]]]}]) + [copyable-text/copyable-text-view + {:copied-text (displayed-name contact)} + [quo/list-item + {:title title + :title-prefix-width 45 + :size :small + ;; FIXME + :accessory :text + :accessory-text [react/text + {:ellipsize-mode :middle + :number-of-lines 1 + :style {:font-family "monospace" + :line-height 22}} + (displayed-name contact)]}]]) (defn token-item [{:keys [icon color] :as token} display-symbol] (when token [react/view - [list-item/list-item - {:type :small - :title :t/wallet-asset - :accessories - [display-symbol - (if icon - [list/item-image - (assoc icon - :style {:background-color colors/gray-lighter - :border-radius 16} - :image-style {:width 24 :height 24})] - [chat-icon/custom-icon-view-list (:name token) color 32])]}] + [quo/list-item + {:size :small + :title (i18n/label :t/wallet-asset) + :accessory [react/view {:flex-direction :row} + [quo/text {:color :secondary + :style {:margin-right 8}} + display-symbol] + (if icon + [list/item-image + (assoc icon + :style {:background-color colors/gray-lighter + :border-radius 16} + :image-style {:width 24 :height 24})] + [chat-icon/custom-icon-view-list (:name token) color 32])]}] [separator]])) (defn header @@ -88,10 +89,10 @@ [{:style {:color colors/black}} (displayed-name contact)]] [react/text {:style {:margin-top 6 :color colors/gray}} (str fee " " fee-display-symbol " " (string/lower-case (i18n/label :t/network-fee)))])] - [button/button (merge {:type :secondary - :container-style {:padding-horizontal 24} - :label (i18n/label :t/cancel)} - (when-not in-progress? {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])}))]]) + [react/view {:padding-horizontal 24} + [quo/button (merge {:type :secondary} + (when-not in-progress? {:on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])})) + (i18n/label :t/cancel)]]]) (views/defview keycard-pin-view [] (views/letsubs [pin [:hardwallet/pin] @@ -172,25 +173,41 @@ (str fiat-amount " " fiat-currency)] [separator]])) +(defn terminal-button [{:keys [on-press theme disabled? height]} label] + [react/touchable-opacity {:disabled disabled? + :on-press on-press + :style {:height height + :border-radius 16 + :flex 1 + :justify-content :center + :align-items :center + :background-color (if (= theme :negative) + colors/red-transparent-10 + colors/blue-light)}} + [quo/text {:size :large + :number-of-lines 1 + :color (if (= theme :negative) + :negative + :link) + :weight :medium} + label]]) + (defn signature-request-footer [keycard-step small-screen?] (fn [] - [react/view {:style {:align-self :stretch}} - [button/button {:type :main - :disabled? (= keycard-step :success) - :text-style {:font-size (if small-screen? 18 20)} - :style {:align-self :stretch} - :container-style {:height (if small-screen? 52 64)} - :label (i18n/label :t/show-transaction-data) - :on-press #(re-frame/dispatch [:show-popover {:view :transaction-data}])}] - [button/button {:type :main - :theme :red - :disabled? (= keycard-step :success) - :container-style {:margin-top 8 - :height 64 :margin-bottom 16} - :style {:align-self :stretch} - :text-style {:font-size 20} - :label (i18n/label :t/decline) - :on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])}]])) + [react/view {:style {:padding-horizontal 16}} + [react/view {:style {:flex-direction :row}} + [terminal-button {:disabled? (= keycard-step :success) + :height (if small-screen? 52 64) + :on-press #(re-frame/dispatch [:show-popover {:view :transaction-data}])} + (i18n/label :t/show-transaction-data)]] + [react/view {:margin-top 8 + :flex-direction :row + :margin-bottom 16} + [terminal-button {:theme :negative + :disabled? (= keycard-step :success) + :height 64 + :on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])} + (i18n/label :t/decline)]]])) (defn signature-request [{:keys [formatted-data account fiat-amount fiat-currency keycard-step]} connected? @@ -247,12 +264,8 @@ [separator] [react/view {:style {:margin-horizontal 8 :margin-vertical 16}} - [button/button {:type :main - :text-style {:font-size 20} - :style {:margin-horizontal 0} - :container-style {:height 64} - :label (i18n/label :t/close) - :on-press #(re-frame/dispatch [:hide-popover])}]]])) + [quo/button {:on-press #(re-frame/dispatch [:hide-popover])} + (i18n/label :t/close)]]])) (views/defview password-view [{:keys [type error in-progress? enabled?] :as sign}] (views/letsubs [phrase [:signing/phrase]] @@ -275,9 +288,9 @@ (if in-progress? [react/activity-indicator {:animating true :size :large}] - [button/button {:on-press #(re-frame/dispatch [:signing.ui/sign-is-pressed]) - :disabled? (not enabled?) - :label :t/transactions-sign}])]] + [quo/button {:on-press #(re-frame/dispatch [:signing.ui/sign-is-pressed]) + :disabled (not enabled?)} + (i18n/label :t/transactions-sign)])]] :keycard [keycard-view sign phrase] [react/view]))) @@ -315,60 +328,67 @@ (defn amount-item [prices wallet-currency amount amount-error display-symbol fee-display-symbol prices-loading?] (let [converted-value (* amount (get-in prices [(keyword display-symbol) (keyword (:code wallet-currency)) :price]))] - [list-item/list-item - {:type :small - :title (if amount-error [error-item :t/send-request-amount amount-error] :t/send-request-amount) - :accessories [[react/view {:style {:flex-direction :row}} - [react/nested-text {:style {:color colors/gray}} - [{:style {:color colors/black}} (utils/format-decimals amount 6)] - " " - (or display-symbol fee-display-symbol) - " • "] - (if prices-loading? - [react/small-loading-indicator] - [react/text {:style {:color colors/black}} - (i18n/format-currency converted-value (:code wallet-currency))]) - [react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]]]}])) + [quo/list-item + {:size :small + :title (if amount-error + [error-item :t/send-request-amount amount-error] + (i18n/label :t/send-request-amount)) + ;; FIXME??? + ;; :error amount-error + :accessory [react/view {:style {:flex-direction :row}} + [react/nested-text {:style {:color colors/gray}} + [{:style {:color colors/black}} (utils/format-decimals amount 6)] + " " + (or display-symbol fee-display-symbol) + " • "] + (if prices-loading? + [react/small-loading-indicator] + [react/text {:style {:color colors/black}} + (i18n/format-currency converted-value (:code wallet-currency))]) + [react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]]}])) (views/defview fee-item [prices wallet-currency fee-display-symbol fee gas-error gas-error-state prices-loading?] (views/letsubs [{:keys [gas-price-loading? gas-loading?]} [:signing/edit-fee]] (let [converted-fee-value (* fee (get-in prices [(keyword fee-display-symbol) (keyword (:code wallet-currency)) :price]))] - [list-item/list-item - {:type :small - :title (if (and (not (or gas-price-loading? gas-loading?)) gas-error) - [error-item :t/network-fee gas-error] - :t/network-fee) - :disabled? (or gas-price-loading? gas-loading?) - :accessories (if (or gas-price-loading? gas-loading?) - [[react/small-loading-indicator]] - (if (= :gas-isnt-set gas-error-state) - [[react/text {:style {:color colors/blue} - :accessibility-label :custom-gas-fee} - (i18n/label :t/set-custom-fee)]] - [[react/view {:style {:flex-direction :row} - :accessibility-label :custom-gas-fee} - [react/nested-text {:style {:color colors/gray}} - [{:style {:color colors/black}} (utils/format-decimals fee 6)] - " " - fee-display-symbol - " • "] - (if prices-loading? - [react/small-loading-indicator] - [react/text {:style {:color colors/black}} - (i18n/format-currency converted-fee-value (:code wallet-currency))]) - [react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]] - :chevron])) - :on-press #(re-frame/dispatch - [:signing.ui/open-fee-sheet - {:content (fn [] [sheets/fee-bottom-sheet fee-display-symbol]) - :content-height 270}])}]))) + [quo/list-item + {:size :small + :title (if (and (not (or gas-price-loading? gas-loading?)) gas-error) + [error-item :t/network-fee gas-error] + (i18n/label :t/network-fee)) + ;; FIXME + ;; :error (when-not (or gas-price-loading? gas-loading?) gas-error) + :disabled (or gas-price-loading? gas-loading?) + :chevron true + :accessory (if (or gas-price-loading? gas-loading?) + [react/small-loading-indicator] + (if (= :gas-isnt-set gas-error-state) + [react/text {:style {:color colors/blue} + :accessibility-label :custom-gas-fee} + (i18n/label :t/set-custom-fee)] + [react/view {:style {:flex-direction :row} + :accessibility-label :custom-gas-fee} + [react/nested-text {:style {:color colors/gray}} + [{:style {:color colors/black}} (utils/format-decimals fee 6)] + " " + fee-display-symbol + " • "] + (if prices-loading? + [react/small-loading-indicator] + [react/text {:style {:color colors/black}} + (i18n/format-currency converted-fee-value (:code wallet-currency))]) + [react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]])) + :on-press #(re-frame/dispatch + [:signing.ui/open-fee-sheet + {:content (fn [] [sheets/fee-bottom-sheet fee-display-symbol]) + :content-height 270}])}]))) (views/defview network-item [] (views/letsubs [network-name [:network-name]] - [list-item/list-item - {:title :t/network - :type :small - :accessories [[react/text network-name]]}])) + [quo/list-item + {:title (i18n/label :t/network) + :size :small + :accessory :text + :accessory-text network-name}])) (views/defview sheet [{:keys [from contact amount token] :as tx}] @@ -412,12 +432,12 @@ (if (= :gas-isnt-set gas-error-state) [react/text {:style {:color colors/gray :margin-horizontal 32 :text-align :center}} (i18n/label :t/tx-fail-description2)] - [button/button {:on-press #(re-frame/dispatch [:set :signing/sign {:type :password}]) - :disabled? (or amount-error gas-error) - :theme (when gas-error-state :red) - :label (if gas-error-state - :t/sign-anyway - :t/sign-with-password)}]))]])]))) + [quo/button {:on-press #(re-frame/dispatch [:set :signing/sign {:type :password}]) + :disabled (or amount-error gas-error) + :theme (if gas-error-state :negative :main)} + (i18n/label (if gas-error-state + :t/sign-anyway + :t/sign-with-password))]))]])]))) (views/defview signing [] (views/letsubs [tx [:signing/tx]] diff --git a/src/status_im/ui/screens/sync_settings/views.cljs b/src/status_im/ui/screens/sync_settings/views.cljs index 046888d249..b776b5b70d 100644 --- a/src/status_im/ui/screens/sync_settings/views.cljs +++ b/src/status_im/ui/screens/sync_settings/views.cljs @@ -1,57 +1,42 @@ (ns status-im.ui.screens.sync-settings.views (:require-macros [status-im.utils.views :as views]) (:require [re-frame.core :as re-frame] + [quo.core :as quo] + [status-im.i18n :as i18n] [status-im.ui.components.colors :as colors] - [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar])) -(defn- list-data [mailserver-id use-mobile-data?] - (let [mobile-data-usage-state (if use-mobile-data? - :t/mobile-network-use-mobile - :t/mobile-network-use-wifi)] - [{:container-margin-top 8 - :type :section-header - :title :t/message-syncing} - {:type :small - :title :t/mobile-network-settings - :accessibility-label :notifications-button - :on-press - #(re-frame/dispatch [:navigate-to :mobile-network-settings]) - :accessories [mobile-data-usage-state :chevron]} - {:type :small - :accessibility-label :offline-messages-settings-button - :title-prefix :t/offline-messaging - :title - [react/text - {:number-of-lines 1 - :ellipsize-mode :middle - :style - {:color colors/gray - :padding-left 16 - :text-align :right - :line-height 22}} - mailserver-id] - :on-press - #(re-frame/dispatch [:navigate-to :offline-messaging-settings]) - :accessories [:chevron] - :container-margin-bottom 8} - {:type :divider} - {:container-margin-top 8 - :type :section-header - :title :t/device-syncing} - {:type :small - :title :t/devices - :accessibility-label :pairing-settings-button - :on-press #(re-frame/dispatch [:navigate-to :installations]) - :accessories [:chevron]}])) - (views/defview sync-settings [] (views/letsubs [{:keys [syncing-on-mobile-network?]} [:multiaccount] mailserver-id [:mailserver/current-id]] - [react/view {:flex 1 :background-color colors/white} + [react/view {:style {:flex 1 :background-color colors/white}} [topbar/topbar {:title :t/sync-settings}] - [list/flat-list - {:data (list-data mailserver-id syncing-on-mobile-network?) - :key-fn (fn [_ i] (str i)) - :render-fn list/flat-list-generic-render-fn}]])) + [react/scroll-view + [quo/list-header (i18n/label :t/message-syncing)] + [quo/list-item {:size :small + :title (i18n/label :t/mobile-network-settings) + :accessibility-label :notifications-button + :on-press #(re-frame/dispatch [:navigate-to :mobile-network-settings]) + :chevron true + :accessory :text + :accessory-text (if syncing-on-mobile-network? + (i18n/label :t/mobile-network-use-mobile) + (i18n/label :t/mobile-network-use-wifi))}] + [quo/list-item {:size :small + :accessibility-label :offline-messages-settings-button + :title (i18n/label :t/offline-messaging) + :on-press #(re-frame/dispatch [:navigate-to :offline-messaging-settings]) + :accessory :text + :accessory-text mailserver-id + :chevron true}] + ;; TODO(Ferossgp): Devider componemt + [react/view {:height 1 + :background-color colors/gray-lighter + :margin-top 8}] + [quo/list-header (i18n/label :t/device-syncing)] + [quo/list-item {:size :small + :title (i18n/label :t/devices) + :accessibility-label :pairing-settings-button + :on-press #(re-frame/dispatch [:navigate-to :installations]) + :chevron true}]]])) diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index a8cbd5daab..d1e711f581 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -4,7 +4,6 @@ [re-frame.core :as re-frame] [status-im.ui.screens.about-app.views :as about-app] [status-im.ui.components.react :as react] - [status-im.ui.components.bottom-sheet.core :as bottom-sheet] [status-im.ui.screens.routing.core :as navigation] [reagent.core :as reagent] [status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings] @@ -24,38 +23,40 @@ status-im.ui.screens.wallet.collectibles.kudos.views [status-im.ui.components.colors :as colors] [status-im.hardwallet.test-menu :as hardwallet.test-menu] + [quo.core :as quo] [status-im.utils.config :as config] [status-im.reloader :as reloader])) (defview bottom-sheet [] (letsubs [{:keys [show? view]} [:bottom-sheet]] - (let [opts (cond-> {:show? show? - :on-cancel #(re-frame/dispatch [:bottom-sheet/hide])} + (let [{:keys [content] + :as opts} + (cond-> {:visible? show? + :on-cancel #(re-frame/dispatch [:bottom-sheet/hide])} - (map? view) - (merge view) + (map? view) + (merge view) - (= view :mobile-network) - (merge mobile-network-settings/settings-sheet) + (= view :mobile-network) + (merge mobile-network-settings/settings-sheet) - (= view :mobile-network-offline) - (merge mobile-network-settings/offline-sheet) + (= view :mobile-network-offline) + (merge mobile-network-settings/offline-sheet) - (= view :add-new) - (merge home.sheet/add-new) + (= view :add-new) + (merge home.sheet/add-new) - (= view :edit-group-chat-name) - (merge home.sheet/add-new) + (= view :keycard.login/more) + (merge keycard/more-sheet) - (= view :keycard.login/more) - (merge keycard/more-sheet) + (= view :learn-more) + (merge about-app/learn-more) - (= view :learn-more) - (merge about-app/learn-more) - - (= view :recover-sheet) - (merge (recover.views/bottom-sheet)))] - [bottom-sheet/bottom-sheet opts]))) + (= view :recover-sheet) + (merge recover.views/bottom-sheet))] + [quo/bottom-sheet opts + (when content + [content])]))) (def debug? ^boolean js/goog.DEBUG) diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs index 02645c2f9a..667c2f2c8f 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/src/status_im/ui/screens/wallet/account/views.cljs @@ -6,7 +6,7 @@ [status-im.ui.components.animation :as animation] [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] @@ -82,14 +82,16 @@ (fn [{:keys [name icon amount] :as collectible}] (let [items-number (money/to-fixed amount) details? (pos? items-number)] - [list-item/list-item - {:title (wallet.utils/display-symbol collectible) - :subtitle name - :icon [list/item-image icon] - :on-press (when details? - #(re-frame/dispatch - [:show-collectibles-list collectible address])) - :accessories [items-number :chevron]}]))) + [quo/list-item + {:title (wallet.utils/display-symbol collectible) + :subtitle name + :icon [list/item-image icon] + :on-press (when details? + #(re-frame/dispatch + [:show-collectibles-list collectible address])) + :chevron :true + :accessory :text + :accessory-text items-number}]))) (views/defview transactions [address] (views/letsubs [{:keys [transaction-history-sections]} @@ -98,8 +100,7 @@ (views/defview assets-and-collections [address] (views/letsubs [{:keys [tokens nfts]} [:wallet/visible-assets-with-values address] - currency [:wallet/currency] - prices-loading? [:prices-loading?]] + currency [:wallet/currency]] (let [{:keys [tab]} @state] [react/view {:flex 1} [react/view {:flex-direction :row :margin-bottom 8 :padding-horizontal 4} @@ -111,7 +112,7 @@ [list/flat-list {:data tokens :default-separator? false :key-fn :name - :render-fn (accounts/render-asset (:code currency) prices-loading?)}] + :render-fn (accounts/render-asset (:code currency))}] (= tab :nft) (if (seq nfts) [list/flat-list {:data nfts diff --git a/src/status_im/ui/screens/wallet/account_settings/views.cljs b/src/status_im/ui/screens/wallet/account_settings/views.cljs index c4a26b6196..574bab66da 100644 --- a/src/status_im/ui/screens/wallet/account_settings/views.cljs +++ b/src/status_im/ui/screens/wallet/account_settings/views.cljs @@ -9,7 +9,6 @@ [status-im.ui.components.copyable-text :as copyable-text] [reagent.core :as reagent] [quo.core :as quo] - [status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.topbar :as topbar])) (defview colors-popover [selected-color on-press] @@ -20,16 +19,17 @@ (for [color colors/account-colors] ^{:key color} [react/touchable-highlight {:on-press #(on-press color)} - [react/view {:height 52 :background-color color :border-radius 8 :width (* 0.7 width) - :justify-content :center :padding-left 12 :margin-bottom 16} + [react/view {:height 52 :background-color color :border-radius 8 :width (* 0.7 width) + :justify-content :center :padding-left 12 :margin-bottom 16} [react/view {:height 32 :width 32 :border-radius 20 :align-items :center :justify-content :center :background-color colors/black-transparent} (when (= selected-color color) [icons/icon :main-icons/check {:color colors/white}])]]]))] [toolbar/toolbar - {:center {:on-press #(re-frame/dispatch [:hide-popover]) - :label (i18n/label :t/cancel) - :type :secondary}}]])) + {:center + [quo/button {:on-press #(re-frame/dispatch [:hide-popover]) + :type :secondary} + (i18n/label :t/cancel)]}]])) (defn property [label value] [react/view {:margin-top 28} @@ -71,14 +71,14 @@ (swap! new-account assoc :color new-color) (re-frame/dispatch [:hide-popover]))] :style {:max-height "60%"}}])} - [react/view {:height 52 :margin-top 12 :background-color (or (:color @new-account) color) + [react/view {:height 52 :margin-top 12 :background-color (or (:color @new-account) color) :border-radius 8 - :align-items :flex-end :justify-content :center :padding-right 12} + :align-items :flex-end :justify-content :center :padding-right 12} [icons/icon :main-icons/dropdown {:color colors/white}]]] [property (i18n/label :t/type) (case type - :watch (i18n/label :t/watch-only) - (:key :seed) (i18n/label :t/off-status-tree) + :watch (i18n/label :t/watch-only) + (:key :seed) (i18n/label :t/off-status-tree) (i18n/label :t/on-status-tree))] [property (i18n/label :t/wallet-address) [copyable-text/copyable-text-view @@ -97,6 +97,7 @@ (when (= type :watch) [react/view [react/view {:margin-bottom 8 :margin-top 28 :height 1 :background-color colors/gray-lighter}] - [list-item/list-item - {:theme :action-destructive :title :t/delete-account + [quo/list-item + {:theme :negative + :title (i18n/label :t/delete-account) :on-press #(re-frame/dispatch [:wallet.settings/show-delete-account-confirmation account])}]])]]])) diff --git a/src/status_im/ui/screens/wallet/accounts/sheets.cljs b/src/status_im/ui/screens/wallet/accounts/sheets.cljs index ae81faf3aa..0684098ddb 100644 --- a/src/status_im/ui/screens/wallet/accounts/sheets.cljs +++ b/src/status_im/ui/screens/wallet/accounts/sheets.cljs @@ -1,58 +1,59 @@ (ns status-im.ui.screens.wallet.accounts.sheets (:require [re-frame.core :as re-frame] + [status-im.i18n :as i18n] [status-im.ui.components.react :as react] - [status-im.ui.components.list-item.views :as list-item])) + [quo.core :as quo])) (defn hide-sheet-and-dispatch [event] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch [:bottom-sheet/hide]) (re-frame/dispatch event)) (defn accounts-options [mnemonic] (fn [] [react/view - [list-item/list-item - {:theme :action - :title :t/wallet-manage-assets + [quo/list-item + {:theme :accent + :title (i18n/label :t/wallet-manage-assets) :icon :main-icons/token :accessibility-label :wallet-manage-assets :on-press #(hide-sheet-and-dispatch [:navigate-to :wallet-settings-assets])}] - [list-item/list-item - {:theme :action - :title :t/set-currency + [quo/list-item + {:theme :accent + :title (i18n/label :t/set-currency) :icon :main-icons/language :accessibility-label :wallet-set-currency :on-press #(hide-sheet-and-dispatch [:navigate-to :currency-settings])}] - [list-item/list-item - {:theme :action - :title :t/view-signing + [quo/list-item + {:theme :accent + :title (i18n/label :t/view-signing) :icon :main-icons/info :on-press #(hide-sheet-and-dispatch [:show-popover {:view :signing-phrase}])}] (when mnemonic - [list-item/list-item - {:theme :action-destructive - :title :t/wallet-backup-recovery-title + [quo/list-item + {:theme :negative + :title (i18n/label :t/wallet-backup-recovery-title) :icon :main-icons/security :accessibility-label :wallet-backup-recovery-title :on-press #(hide-sheet-and-dispatch - [:navigate-to :profile-stack {:screen :backup-seed + [:navigate-to :profile-stack {:screen :backup-seed :initial false}])}])])) (defn send-receive [account type] [react/view (when-not (= type :watch) - [list-item/list-item - {:theme :action - :title :t/wallet-send + [quo/list-item + {:theme :accent + :title (i18n/label :t/wallet-send) :icon :main-icons/send :accessibility-label :send-transaction-button :on-press #(hide-sheet-and-dispatch [:wallet/prepare-transaction-from-wallet account])}]) - [list-item/list-item - {:theme :action - :title :t/receive + [quo/list-item + {:theme :accent + :title (i18n/label :t/receive) :icon :main-icons/receive :accessibility-label :receive-transaction-button :on-press #(hide-sheet-and-dispatch @@ -62,35 +63,35 @@ (defn add-account [] (let [keycard? @(re-frame/subscribe [:keycard-multiaccount?])] [react/view - [list-item/list-item - {:title :t/generate-a-new-account - :theme :action + [quo/list-item + {:title (i18n/label :t/generate-a-new-account) + :theme :accent :icon :main-icons/add :accessibility-label :add-account-sheet-generate :on-press #(hide-sheet-and-dispatch [:wallet.accounts/start-adding-new-account {:type :generate}])}] - [list-item/list-item - {:theme :action - :title :t/add-a-watch-account + [quo/list-item + {:theme :accent + :title (i18n/label :t/add-a-watch-account) :icon :main-icons/show :accessibility-label :add-account-sheet-watch :on-press #(hide-sheet-and-dispatch [:wallet.accounts/start-adding-new-account {:type :watch}])}] (when-not keycard? - [list-item/list-item - {:title :t/enter-a-seed-phrase - :theme :action + [quo/list-item + {:title (i18n/label :t/enter-a-seed-phrase) + :theme :accent :icon :main-icons/text :accessibility-label :add-account-sheet-seed :on-press #(hide-sheet-and-dispatch [:wallet.accounts/start-adding-new-account {:type :seed}])}]) (when-not keycard? - [list-item/list-item - {:title :t/enter-a-private-key - :theme :action + [quo/list-item + {:title (i18n/label :t/enter-a-private-key) + :theme :accent :icon :main-icons/address :accessibility-label :add-account-sheet-private-key :on-press #(hide-sheet-and-dispatch @@ -99,9 +100,9 @@ (defn account-settings [] [react/view - [list-item/list-item - {:theme :action - :title :t/account-settings + [quo/list-item + {:theme :accent + :title (i18n/label :t/account-settings) :accessibility-label :account-settings-bottom-sheet :icon :main-icons/info :on-press #(hide-sheet-and-dispatch diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index 33d7f095ee..2cae1000bc 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/src/status_im/ui/screens/wallet/accounts/views.cljs @@ -6,7 +6,6 @@ [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.screens.wallet.accounts.sheets :as sheets] @@ -66,32 +65,31 @@ (when active? [react/view {:width 24 :height 3 :border-radius 4 :background-color colors/blue}])]) -(defn render-asset [currency prices-loading? & [on-press]] +(defn render-asset [currency & [on-press]] (fn [{:keys [icon decimals amount color value] :as token}] - [list-item/list-item - (cond-> {:title-prefix (wallet.utils/format-amount amount decimals) - :title (wallet.utils/display-symbol token) - :title-color-override colors/gray - :accessibility-label (str (:symbol token) "-asset-value") - :subtitle [react/view {:style {:flex-direction :row :line-height 22}} - (if prices-loading? - [react/small-loading-indicator] - [react/text {:style {:color colors/gray}} (if value value 0)]) - [react/text {:style {:color colors/gray}} (str " " currency)]] - :icon (if icon - [list/item-image icon] - [chat-icon/custom-icon-view-list (:name token) color])} - on-press - (assoc :on-press #(on-press token)))])) + [quo/list-item + (merge {:title [quo/text {:weight :medium} + [quo/text {:weight :inherit} + (str (wallet.utils/format-amount amount decimals) + " ")] + [quo/text {:color :secondary + :weight :inherit} + (wallet.utils/display-symbol token)]] + :subtitle (str (if value value "0.00") " " currency) + :accessibility-label (str (:symbol token) "-asset-value") + :icon (if icon + [list/item-image icon] + [chat-icon/custom-icon-view-list (:name token) color])} + (when on-press + {:on-press #(on-press token)}))])) (views/defview assets [] (views/letsubs [{:keys [tokens]} [:wallet/all-visible-assets-with-values] - currency [:wallet/currency] - prices-loading? [:prices-loading?]] + currency [:wallet/currency]] [list/flat-list {:data tokens :default-separator? false :key-fn :name - :render-fn (render-asset (:code currency) prices-loading?)}])) + :render-fn (render-asset (:code currency))}])) (defn- request-camera-permissions [] (let [options {:handler :wallet.send/qr-scanner-result}] @@ -110,8 +108,9 @@ (views/defview send-button [] (views/letsubs [account [:multiaccount/default-account]] [react/view styles/send-button-container - [react/touchable-highlight + [quo/button {:accessibility-label :send-transaction-button + :type :scale :on-press #(re-frame/dispatch [:wallet/prepare-transaction-from-wallet account])} [react/view (styles/send-button) [icons/icon :main-icons/send {:color colors/white-persist}]]]])) diff --git a/src/status_im/ui/screens/wallet/add_new/views.cljs b/src/status_im/ui/screens/wallet/add_new/views.cljs index 8ccfa80bd4..3dddfe987d 100644 --- a/src/status_im/ui/screens/wallet/add_new/views.cljs +++ b/src/status_im/ui/screens/wallet/add_new/views.cljs @@ -176,24 +176,25 @@ [toolbar/toolbar {:show-border? true :right - {:type :next - :label :t/add-account - :accessibility-label :add-account-add-account-button - :on-press - (if (and keycard? - (not= type :watch)) - #(re-frame/dispatch [:hardwallet/new-account-pin-sheet - {:view {:content pin - :height 256}}]) - #(re-frame/dispatch [:wallet.accounts/add-new-account - (ethereum/sha3 @entered-password)])) - :disabled? - (or add-account-disabled? - (and - (not (= type :watch)) + [quo/button + {:type :secondary + :after :main-icon/next + :accessibility-label :add-account-add-account-button + :on-press + (if (and keycard? + (not= type :watch)) + #(re-frame/dispatch [:hardwallet/new-account-pin-sheet + {:view {:content pin + :height 256}}]) + #(re-frame/dispatch [:wallet.accounts/add-new-account + (ethereum/sha3 @entered-password)])) + :disabled + (or add-account-disabled? (and - (not keycard?) - (not (spec/valid? ::multiaccounts.db/password - @entered-password)))))}}] + (not (= type :watch)) + (and + (not keycard?) + (not (spec/valid? ::multiaccounts.db/password + @entered-password)))))} + (i18n/label :t/add-account)]}] [pin-sheet]])) - diff --git a/src/status_im/ui/screens/wallet/collectibles/cryptokitties/views.cljs b/src/status_im/ui/screens/wallet/collectibles/cryptokitties/views.cljs index e69865f186..153c8b0c68 100644 --- a/src/status_im/ui/screens/wallet/collectibles/cryptokitties/views.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/cryptokitties/views.cljs @@ -5,22 +5,22 @@ [status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.screens.wallet.collectibles.views :as collectibles] [status-im.ui.components.svgimage :as svgimage] - [status-im.ui.components.list-item.views :as list-item])) + [quo.core :as quo])) (defmethod collectibles/render-collectible :CK [_ {:keys [id name bio image_url]}] [react/view {:style styles/details} [react/view {:style styles/details-text} - [svgimage/svgimage {:style styles/details-image + [svgimage/svgimage {:style styles/details-image :source {:uri image_url}}] [react/view {:flex 1} [react/text {:style styles/details-name} (or name (i18n/label :t/cryptokitty-name {:id id}))] [react/text {:number-of-lines 3 - :ellipsize-mode :tail} + :ellipsize-mode :tail} bio]]] - [list-item/list-item - {:theme :action - :title :t/view-cryptokitties + [quo/list-item + {:theme :accent + :title (i18n/label :t/view-cryptokitties) :icon :main-icons/address :accessibility-label :open-collectible-button :on-press #(re-frame/dispatch [:open-collectible-in-browser diff --git a/src/status_im/ui/screens/wallet/collectibles/cryptostrikers/views.cljs b/src/status_im/ui/screens/wallet/collectibles/cryptostrikers/views.cljs index cf9cf83ef5..b0a838c05c 100644 --- a/src/status_im/ui/screens/wallet/collectibles/cryptostrikers/views.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/cryptostrikers/views.cljs @@ -4,7 +4,7 @@ [status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.components.svgimage :as svgimage] [status-im.ui.screens.wallet.collectibles.views :as collectibles] - [status-im.ui.components.list-item.views :as list-item])) + [quo.core :as quo])) (defmethod collectibles/render-collectible :STRK [_ {:keys [external_url description name image]}] [react/view {:style styles/details} @@ -17,8 +17,8 @@ name] [react/text description]]] - [list-item/list-item - {:theme :action + [quo/list-item + {:theme :accent :title :t/view-cryptostrikers :icon :main-icons/address :accessibility-label :open-collectible-button diff --git a/src/status_im/ui/screens/wallet/collectibles/etheremon/views.cljs b/src/status_im/ui/screens/wallet/collectibles/etheremon/views.cljs index c20cebff84..493dca0f1b 100644 --- a/src/status_im/ui/screens/wallet/collectibles/etheremon/views.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/etheremon/views.cljs @@ -4,7 +4,7 @@ [status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.components.svgimage :as svgimage] [status-im.ui.screens.wallet.collectibles.views :as collectibles] - [status-im.ui.components.list-item.views :as list-item])) + [quo.core :as quo])) (defmethod collectibles/render-collectible :EMONA [_ {:keys [user_defined_name image class_id]}] [react/view {:style styles/details} @@ -16,8 +16,8 @@ [react/view {:flex 1 :justify-content :center} [react/text {:style styles/details-name} user_defined_name]]] - [list-item/list-item - {:theme :action + [quo/list-item + {:theme :accent :title :t/view-etheremon :icon :main-icons/address :accessibility-label :open-collectible-button diff --git a/src/status_im/ui/screens/wallet/collectibles/kudos/views.cljs b/src/status_im/ui/screens/wallet/collectibles/kudos/views.cljs index b633cd0421..aff6811764 100644 --- a/src/status_im/ui/screens/wallet/collectibles/kudos/views.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/kudos/views.cljs @@ -4,7 +4,7 @@ [status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.components.svgimage :as svgimage] [re-frame.core :as re-frame] - [status-im.ui.components.list-item.views :as list-item])) + [quo.core :as quo])) (defmethod collectibles/render-collectible :KDO [_ {:keys [external_url description name image]}] [react/view {:style styles/details} @@ -17,8 +17,8 @@ name] [react/text description]]] - [list-item/list-item - {:theme :action + [quo/list-item + {:theme :accent :title :t/view-gitcoin :icon :main-icons/address :accessibility-label :open-collectible-button diff --git a/src/status_im/ui/screens/wallet/collectibles/superrare/views.cljs b/src/status_im/ui/screens/wallet/collectibles/superrare/views.cljs index 71c8a2d2be..8505a0230c 100644 --- a/src/status_im/ui/screens/wallet/collectibles/superrare/views.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/superrare/views.cljs @@ -1,9 +1,10 @@ (ns status-im.ui.screens.wallet.collectibles.superrare.views (:require [re-frame.core :as re-frame] + [status-im.i18n :as i18n] [status-im.ui.components.react :as react] [status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.screens.wallet.collectibles.views :as collectibles] - [status-im.ui.components.list-item.views :as list-item])) + [quo.core :as quo])) (defmethod collectibles/render-collectible :SUPR [_ {tokenId :tokenId {:keys [description name imageUri]} :metadata}] [react/view {:style styles/details} @@ -16,9 +17,9 @@ name] [react/text description]]] - [list-item/list-item - {:theme :action - :title :t/view-superrare + [quo/list-item + {:theme :accent + :title (i18n/label :t/view-superrare) :icon :main-icons/address :accessibility-label :open-collectible-button :on-press #(re-frame/dispatch [:open-collectible-in-browser diff --git a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs index e335247033..71b3f7b5dc 100644 --- a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs +++ b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs @@ -3,11 +3,10 @@ (:require [re-frame.core :as re-frame] [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react] - [status-im.ui.components.common.common :as components.common] + [status-im.ui.components.toolbar :as toolbar] [clojure.string :as string] [status-im.i18n :as i18n] [quo.core :as quo] - [status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.topbar :as topbar])) (def debounce-timers (atom {})) @@ -90,22 +89,20 @@ (wallet.utils/format-amount balance decimals)) :editable false :placeholder (i18n/label :t/no-tokens-found)}]] - [react/view {:style {:height 1 :background-color colors/gray-lighter}}] - [react/view {:flex-direction :row - :margin-horizontal 12 - :margin-vertical 15 - :align-items :center} - [react/view {:style {:flex 1}}] - [components.common/bottom-button - {:forward? true - :label (i18n/label :t/add) - :disabled? (boolean + [toolbar/toolbar + {:show-border? true + :right + [quo/button + {:type :secondary + :after :main-icon/next + :disabled (boolean (or in-progress? error error-name error-symbol (string/blank? contract) (string/blank? name) (string/blank? symbol) (string/blank? decimals))) - :on-press #(re-frame/dispatch [:wallet.custom-token.ui/add-pressed])}]]])) + :on-press #(re-frame/dispatch [:wallet.custom-token.ui/add-pressed])} + (i18n/label :t/add)]}]])) (defview custom-token-details [] (letsubs [{:keys [address name symbol decimals custom?] :as token} @@ -144,8 +141,8 @@ :editable false}]]]]] [react/view {:height 24}] (when custom? - [list-item/list-item - {:theme :action-destructive - :title :t/remove-token + [quo/list-item + {:theme :negative + :title (i18n/label :t/remove-token) :icon :main-icons/delete :on-press #(re-frame/dispatch [:wallet.custom-token.ui/remove-pressed token true])}])]])) diff --git a/src/status_im/ui/screens/wallet/request/views.cljs b/src/status_im/ui/screens/wallet/request/views.cljs index 486c748497..f2fbe6bafb 100644 --- a/src/status_im/ui/screens/wallet/request/views.cljs +++ b/src/status_im/ui/screens/wallet/request/views.cljs @@ -3,7 +3,8 @@ [reagent.core :as reagent] [status-im.ethereum.eip55 :as eip55] [status-im.ethereum.eip681 :as eip681] - [status-im.ui.components.button :as button] + [quo.core :as quo] + [status-im.i18n :as i18n] [status-im.ui.components.copyable-text :as copyable-text] [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer] [status-im.ui.components.react :as react]) @@ -29,8 +30,10 @@ :style {:line-height 22 :font-size 15 :font-family "monospace"}} (eip55/address->checksum address)]]] - [react/view {:margin-top 12 :margin-bottom 8} - [button/button + [react/view {:padding-top 12 + :padding-horizontal 16 + :padding-bottom 16} + [quo/button {:on-press #(re-frame/dispatch [:wallet.accounts/share address]) - :label :t/share-address - :accessibility-label :share-address-button}]]])) + :accessibility-label :share-address-button} + (i18n/label :t/share-address)]]])) diff --git a/src/status_im/ui/screens/wallet/send/sheets.cljs b/src/status_im/ui/screens/wallet/send/sheets.cljs index 11e7eff4de..b284b5e487 100644 --- a/src/status_im/ui/screens/wallet/send/sheets.cljs +++ b/src/status_im/ui/screens/wallet/send/sheets.cljs @@ -3,7 +3,7 @@ (:require [re-frame.core :as re-frame] [status-im.i18n :as i18n] [status-im.ui.components.react :as react] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.list.views :as list] [status-im.ui.screens.wallet.accounts.views :as wallet.accounts] @@ -11,19 +11,18 @@ (views/defview assets [address] (views/letsubs [{:keys [tokens]} [:wallet/visible-assets-with-values address] - currency [:wallet/currency] - prices-loading? [:prices-loading?]] - [list/flat-list - {:data tokens - :key-fn (comp str :symbol) - :render-fn (wallet.accounts/render-asset + currency [:wallet/currency]] + (let [render (wallet.accounts/render-asset (:code currency) - prices-loading? - #(re-frame/dispatch [:wallet.send/set-symbol (:symbol %)]))}])) + #(re-frame/dispatch [:wallet.send/set-symbol (:symbol %)]))] + [:<> + (for [token tokens] + ^{:key (str (:symbol token))} + [render token])]))) (defn render-account [field event] (fn [account] - [list-item/list-item + [quo/list-item {:icon [chat-icon/custom-icon-view-list (:name account) (:color account)] :title (:name account) :on-press #(re-frame/dispatch [event field account])}])) @@ -51,27 +50,27 @@ 50)}]))) (defn show-accounts-list [] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch [:bottom-sheet/hide]) (js/setTimeout #(re-frame/dispatch [:bottom-sheet/show-sheet {:content (fn [] [accounts-list :to :wallet.send/set-field]) :content-height 300}]) 400)) (defn choose-recipient [] [react/view - (for [item [{:title (i18n/label :t/accounts) - :icon :main-icons/profile - :theme :action + (for [item [{:title (i18n/label :t/accounts) + :icon :main-icons/profile + :theme :accent :accessibility-label :chose-recipient-accounts-button - :on-press show-accounts-list} - {:title (i18n/label :t/scan-qr) - :icon :main-icons/qr - :theme :action + :on-press show-accounts-list} + {:title (i18n/label :t/scan-qr) + :icon :main-icons/qr + :theme :accent :accessibility-label :chose-recipient-scan-qr - :on-press request-camera-permissions} - {:title (i18n/label :t/recipient-code) - :icon :main-icons/address - :theme :action + :on-press request-camera-permissions} + {:title (i18n/label :t/recipient-code) + :icon :main-icons/address + :theme :accent :accessibility-label :choose-recipient-recipient-code - :on-press #(re-frame/dispatch [:wallet.send/navigate-to-recipient-code])}]] + :on-press #(re-frame/dispatch [:wallet.send/navigate-to-recipient-code])}]] ^{:key item} - [list-item/list-item item])]) + [quo/list-item item])]) diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index 646f464ea1..f539081ec5 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -8,7 +8,6 @@ [status-im.ui.screens.wallet.send.styles :as styles] [status-im.ui.components.bottom-panel.views :as bottom-panel] [status-im.ui.components.colors :as colors] - [status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.list.views :as list] @@ -18,8 +17,9 @@ [status-im.ui.screens.wallet.send.sheets :as sheets] [status-im.ui.screens.wallet.components.views :as components] [status-im.utils.utils :as utils] - [status-im.ethereum.core :as ethereum] - [status-im.utils.money :as money])) + [status-im.utils.money :as money] + [quo.core :as quo] + [status-im.ethereum.core :as ethereum])) (defn header [{:keys [label small-screen?]}] [react/view (styles/header small-screen?) @@ -52,36 +52,40 @@ [icons/icon :main-icons/dropdown {:color colors/gray}])]])) (defn render-account [account {:keys [amount decimals] :as token} event] - [list-item/list-item - {:icon [chat-icon/custom-icon-view-list (:name account) (:color account)] - :title (:name account) - :subtitle (when token - (str (wallet.utils/format-amount amount decimals) - " " - (wallet.utils/display-symbol token))) - :accessories [:chevron] - :on-press #(do - (re-frame/dispatch [:dismiss-keyboard]) - (re-frame/dispatch [:bottom-sheet/show-sheet - {:content (fn [] [sheets/accounts-list :from event]) - :content-height 300}]))}]) + [quo/list-item + {:icon [chat-icon/custom-icon-view-list (:name account) (:color account)] + :title (:name account) + :subtitle (when token + (str (wallet.utils/format-amount amount decimals) + " " + (wallet.utils/display-symbol token))) + :chevron true + :on-press #(do + (re-frame/dispatch [:dismiss-keyboard]) + (re-frame/dispatch [:bottom-sheet/show-sheet + {:content (fn [] [sheets/accounts-list :from event]) + :content-height 300}]))}]) (defn render-contact [contact from-chat?] (if from-chat? - [list-item/list-item {:title (multiaccounts/displayed-name contact) - :subtitle (:address contact) - :icon (multiaccounts/displayed-photo contact)}] - [list-item/list-item - {:title (utils/get-shortened-checksum-address - (if (string? contact) contact (:address contact))) - :subtitle (when-not contact (i18n/label :t/wallet-choose-recipient)) + [quo/list-item {:title (multiaccounts/displayed-name contact) + :subtitle (:address contact) + :icon [chat-icon/contact-icon-contacts-tab + (multiaccounts/displayed-photo contact)]}] + [quo/list-item + {:title (if-not contact + (i18n/label :t/wallet-choose-recipient) + [quo/text {:size :large + :monospace true} + (utils/get-shortened-checksum-address + (if (string? contact) contact (:address contact)))]) :accessibility-label :choose-recipient-button :on-press #(do (re-frame/dispatch [:dismiss-keyboard]) (re-frame/dispatch [:bottom-sheet/show-sheet {:content sheets/choose-recipient :content-height 200}])) - :accessories [:chevron]}])) + :chevron true}])) (defn set-max [token] [react/touchable-highlight @@ -98,11 +102,11 @@ [react/text {:style {:color colors/gray :margin-left 16 :margin-bottom 8 :font-size 15 :line-height 22}} (str (i18n/format-currency (* amount price) (:code wallet-currency)) " " (:code wallet-currency))]))) - (views/defview sheet [_] (views/letsubs [{:keys [amount-error amount-text request? - from token to sign-enabled? from-chat?] :as tx} + from token to sign-enabled? from-chat?] + :as tx} [:wallet.send/prepare-transaction-with-balance] prices [:prices] wallet-currency [:wallet/currency] @@ -110,10 +114,10 @@ window-width [:dimensions/window-width] keyboard-height [:keyboard-height]] (let [small-screen? (< (- window-height keyboard-height) 450) - to-norm (ethereum/normalized-hex (if (string? to) to (:address to)))] + to-norm (ethereum/normalized-hex (if (string? to) to (:address to)))] [react/view {:style (styles/sheet small-screen?)} [react/view {:flex-direction :row :padding-horizontal 16 :align-items :center - :margin-top 12 :margin-bottom 4} + :margin-top 12 :margin-bottom 4} [react/text-input {:style {:font-size (if small-screen? 24 38) :max-width (- (* (/ window-width 4) 3) 106) @@ -138,14 +142,15 @@ [set-max token]) [components/separator] (when-not small-screen? - [list-item/list-item {:type :section-header :title :t/from}]) + [quo/list-header (i18n/label :t/from)]) [react/view {:flex-direction :row :flex 1 :align-items :center} (when small-screen? [react/i18n-text {:style {:width 50 :text-align :right :color colors/gray} :key :t/from}]) [react/view {:flex 1} [render-account from token :wallet.send/set-field]]] (when-not small-screen? - [list-item/list-item {:type :section-header :title :t/to}]) + [quo/list-header + (i18n/label :t/to)]) [react/view {:flex-direction :row :flex 1 :align-items :center} (when small-screen? [react/i18n-text {:style {:width 50 :text-align :right :color colors/gray} :key :t/to}]) @@ -153,22 +158,25 @@ [render-contact to from-chat?]]] [toolbar/toolbar {:left - {:label :t/cancel - :type :secondary - :on-press #(re-frame/dispatch [:wallet/cancel-transaction-command])} + [quo/button + {:type :secondary + :on-press #(re-frame/dispatch [:wallet/cancel-transaction-command])} + (i18n/label :t/cancel)] :right - {:label (if (and (not request?) from-chat? (not to-norm)) :t/wallet-send :t/next) - :accessibility-label :send-transaction-bottom-sheet - :disabled? (not sign-enabled?) - :on-press #(re-frame/dispatch - [(cond - request? - :wallet.ui/sign-transaction-button-clicked-from-request - from-chat? - :wallet.ui/sign-transaction-button-clicked-from-chat - :else - :wallet.ui/sign-transaction-button-clicked) tx])}}]]))) - + [quo/button + {:accessibility-label :send-transaction-bottom-sheet + :disabled (not sign-enabled?) + :on-press #(re-frame/dispatch + [(cond + request? + :wallet.ui/sign-transaction-button-clicked-from-request + from-chat? + :wallet.ui/sign-transaction-button-clicked-from-chat + :else + :wallet.ui/sign-transaction-button-clicked) tx])} + (if (and (not request?) from-chat? (not to-norm)) + (i18n/label :t/wallet-send) + (i18n/label :t/next))]}]]))) (views/defview request-sheet [_] (views/letsubs [{:keys [amount-error amount-text from token sign-enabled?] :as tx} [:wallet.request/prepare-transaction-with-balance] @@ -201,7 +209,8 @@ [fiat-value amount-text token prices wallet-currency] [components/separator] (when-not small-screen? - [list-item/list-item {:type :section-header :title :t/to}]) + [quo/list-header + (i18n/label :t/to)]) [react/view {:flex-direction :row :flex 1 :align-items :center} (when small-screen? [react/i18n-text {:style {:width 50 :text-align :right :color colors/gray} :key :t/to}]) @@ -209,15 +218,18 @@ [render-account from token :wallet.request/set-field]]] [toolbar/toolbar {:left - {:label :t/cancel - :type :secondary - :on-press #(re-frame/dispatch [:wallet/cancel-transaction-command])} + [react/view {:padding-horizontal 8} + [quo/button + {:type :secondary + :on-press #(re-frame/dispatch [:wallet/cancel-transaction-command])} + (i18n/label :t/cancel)]] :right - {:label :t/wallet-request - :accessibility-label :request-transaction-bottom-sheet - :disabled? (not sign-enabled?) - :on-press #(re-frame/dispatch - [:wallet.ui/request-transaction-button-clicked tx])}}]]))) + [quo/button + {:accessibility-label :request-transaction-bottom-sheet + :disabled (not sign-enabled?) + :on-press #(re-frame/dispatch + [:wallet.ui/request-transaction-button-clicked tx])} + (i18n/label :t/wallet-request)]}]]))) (views/defview select-account-sheet [{:keys [from message]}] (views/letsubs [window-height [:dimensions/window-height] @@ -229,7 +241,8 @@ [react/view {:flex-direction :row :padding-horizontal 24 :align-items :center :margin-vertical (if small-screen? 8 16)}] (when-not small-screen? - [list-item/list-item {:type :section-header :title :t/from}]) + [quo/list-header + (i18n/label :t/from)]) [react/view {:flex-direction :row :flex 1 :align-items :center} (when small-screen? [react/i18n-text {:style {:width 50 :text-align :right :color colors/gray} :key :t/from}]) @@ -237,17 +250,20 @@ [render-account from nil ::commands/set-selected-account]]] [toolbar/toolbar {:left - {:label :t/cancel - :type :secondary - :on-press #(re-frame/dispatch [:set :commands/select-account nil])} + [react/view {:padding-horizontal 8} + [quo/button + {:type :secondary + :on-press #(re-frame/dispatch [:set :commands/select-account nil])} + (i18n/label :t/cancel)]] :right - {:label :t/share - :accessibility-label :select-account-bottom-sheet - :disabled? (nil? from) - :on-press #(re-frame/dispatch - [::commands/accept-request-address-for-transaction - (:message-id message) - (:address from)])}}]]))) + [quo/button + {:accessibility-label :select-account-bottom-sheet + :disabled (nil? from) + :on-press #(re-frame/dispatch + [::commands/accept-request-address-for-transaction + (:message-id message) + (:address from)])} + (i18n/label :t/share)]}]]))) (defview prepare-transaction [] (letsubs [tx [:wallet/prepare-transaction]] diff --git a/src/status_im/ui/screens/wallet/settings/views.cljs b/src/status_im/ui/screens/wallet/settings/views.cljs index 32dc85141d..fa1367eb8d 100644 --- a/src/status_im/ui/screens/wallet/settings/views.cljs +++ b/src/status_im/ui/screens/wallet/settings/views.cljs @@ -5,7 +5,7 @@ [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.styles :as components.styles] - [status-im.ui.components.list-item.views :as list-item] + [quo.core :as quo] [reagent.core :as reagent] [status-im.ui.components.topbar :as topbar] [status-im.ui.components.search-input.view :as search-input] @@ -23,22 +23,22 @@ :handler #(re-frame/dispatch [:wallet.settings.ui/navigate-back-pressed])}}]) (defn hide-sheet-and-dispatch [event] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) + (re-frame/dispatch [:bottom-sheet/hide]) (re-frame/dispatch event)) (defn custom-token-actions-view [{:keys [custom?] :as token}] (fn [] [react/view - [list-item/list-item - {:theme :action - :title :t/token-details + [quo/list-item + {:theme :accent + :title (i18n/label :t/token-details) :icon :main-icons/warning :on-press #(hide-sheet-and-dispatch [:navigate-to :wallet-custom-token-details token])}] (when custom? - [list-item/list-item - {:theme :action-destructive - :title :t/remove-token + [quo/list-item + {:theme :negative + :title (i18n/label :t/remove-token) :icon :main-icons/delete :on-press #(hide-sheet-and-dispatch [:wallet.custom-token.ui/remove-pressed token])}])])) @@ -50,24 +50,20 @@ (fn [_ [_ old-token] [_ new-token]] (not= (:checked? old-token) (:checked? new-token))) :reagent-render - (fn [{:keys [symbol name icon color custom? checked?] :as token}] - [list/list-item-with-checkbox - {:checked? checked? - :on-long-press - #(re-frame/dispatch - [:bottom-sheet/show-sheet - {:content (custom-token-actions-view token) - :content-height (if custom? 128 68)}]) - :on-value-change - #(re-frame/dispatch - [:wallet.settings/toggle-visible-token (keyword symbol) %])} - [list/item - (if icon - [list/item-image icon] - [chat-icon/custom-icon-view-list name color]) - [list/item-content - [list/item-primary name] - [list/item-secondary symbol]]]])})) + (fn [{:keys [symbol name icon color checked?] :as token}] + [quo/list-item {:active checked? + :accessory :checkbox + :animated false + :icon (if icon + [list/item-image icon] + [chat-icon/custom-icon-view-list name color]) + :title name + :subtitle (clojure.core/name symbol) + :on-press #(re-frame/dispatch + [:wallet.settings/toggle-visible-token (keyword symbol) (not checked?)]) + :on-long-press #(re-frame/dispatch + [:bottom-sheet/show-sheet + {:content (custom-token-actions-view token)}])}])})) (defn- render-token-wrapper [token] @@ -96,9 +92,9 @@ [list/section-list {:header [react/view {:margin-top 16} - [list-item/list-item - {:theme :action - :title :t/add-custom-token + [quo/list-item + {:theme :accent + :title (i18n/label :t/add-custom-token) :icon :main-icons/add :on-press #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]] @@ -112,5 +108,5 @@ :stickySectionHeadersEnabled false :render-section-header-fn (fn [{:keys [title]}] - [list-item/list-item {:type :section-header :title title}]) + [quo/list-header title]) :render-fn render-token-wrapper}]]])) diff --git a/src/status_im/ui/screens/wallet/signing_phrase/views.cljs b/src/status_im/ui/screens/wallet/signing_phrase/views.cljs index 9f38054f6a..bd80e7876f 100644 --- a/src/status_im/ui/screens/wallet/signing_phrase/views.cljs +++ b/src/status_im/ui/screens/wallet/signing_phrase/views.cljs @@ -3,7 +3,7 @@ (:require [status-im.ui.components.react :as react] [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.common.common :as components.common] + [quo.core :as quo] [status-im.i18n :as i18n] [re-frame.core :as re-frame])) @@ -12,24 +12,26 @@ {:keys [wallet-set-up-passed?]} [:multiaccount]] [react/view [react/view {:margin-top 24 :margin-horizontal 24 :align-items :center} - [react/view {:background-color colors/blue-light :width 32 :height 32 :border-radius 16 - :align-items :center :justify-content :center} + [react/view {:background-color colors/blue-light :width 32 :height 32 :border-radius 16 + :align-items :center :justify-content :center} [icons/icon :main-icons/security {:color colors/blue}]] [react/text {:style {:typography :title-bold :margin-top 16 :margin-bottom 8}} (i18n/label :t/this-is-you-signing)] [react/text {:style {:color colors/gray :text-align :center}} (i18n/label :t/three-words-description)]] [react/view {:margin-vertical 16 :height 52 :background-color colors/gray-lighter :align-items :center :justify-content :center} [react/text phrase]] - [react/view {:margin-bottom 24 :margin-horizontal 24 :align-items :center} + [react/view {:padding-bottom 8 + :padding-horizontal 24 + :align-items :center} [react/text {:style {:color colors/gray :text-align :center}} (i18n/label :t/three-words-description-2)] (when-not wallet-set-up-passed? - [components.common/button {:on-press #(re-frame/dispatch [:hide-popover]) - :button-style {:margin-top 24} - :label (i18n/label :t/remind-me-later)}]) - [components.common/button {:on-press #(do - (when-not wallet-set-up-passed? - (re-frame/dispatch [:multiaccounts.ui/wallet-set-up-confirmed])) - (re-frame/dispatch [:hide-popover])) - :button-style {:margin-top 24} - :background? false - :label (i18n/label :t/ok-got-it)}]]])) + [react/view {:style {:margin-top 16}} + [quo/button {:on-press #(re-frame/dispatch [:hide-popover])} + (i18n/label :t/remind-me-later)]]) + [react/view {:style {:padding-vertical 8}} + [quo/button {:on-press #(do + (when-not wallet-set-up-passed? + (re-frame/dispatch [:multiaccounts.ui/wallet-set-up-confirmed])) + (re-frame/dispatch [:hide-popover])) + :type :secondary} + (i18n/label :t/ok-got-it)]]]])) diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index 65b6db6479..108fb21ed1 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -9,6 +9,7 @@ [status-im.ui.components.toolbar.actions :as actions] [status-im.ui.components.toolbar.view :as toolbar-old] [status-im.ui.screens.wallet.transactions.styles :as styles] + [quo.core :as quo] [status-im.ui.components.toolbar :as toolbar]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) @@ -95,8 +96,8 @@ (defn history-list [transactions-history-sections address] (let [fetching-recent-history? @(re-frame/subscribe [:wallet/fetching-recent-tx-history? address]) - fetching-more-history? @(re-frame/subscribe [:wallet/fetching-tx-history? address]) - all-fetched? @(re-frame/subscribe [:wallet/tx-history-fetched? address])] + fetching-more-history? @(re-frame/subscribe [:wallet/fetching-tx-history? address]) + all-fetched? @(re-frame/subscribe [:wallet/tx-history-fetched? address])] [react/view components.styles/flex [etherscan-link address] (when fetching-recent-history? @@ -104,18 +105,18 @@ {:style {:flex 1 :height 40 :margin-vertical 16}} - [react/activity-indicator {:size :large + [react/activity-indicator {:size :large :animating true}]]) [list/section-list - {:sections transactions-history-sections - :key-fn :hash - :render-fn #(render-transaction %) + {:sections transactions-history-sections + :key-fn :hash + :render-fn #(render-transaction %) :empty-component [react/i18n-text {:style styles/empty-text :key (if (or fetching-recent-history? fetching-more-history?) :transactions-history-loading :transactions-history-empty)}] - :refreshing false}] + :refreshing false}] (when (and (not fetching-recent-history?) (not all-fetched?)) (if fetching-more-history? @@ -123,14 +124,15 @@ {:style {:flex 1 :height 40 :margin-vertical 8}} - [react/activity-indicator {:size :large + [react/activity-indicator {:size :large :animating true}]] [toolbar/toolbar - {:center {:label (i18n/label :t/transactions-load-more) - :type :secondary - :on-press (when-not fetching-more-history? - #(re-frame/dispatch - [:transactions/fetch-more address]))}}]))])) + {:center + [quo/button {:type :secondary + :on-press (when-not fetching-more-history? + #(re-frame/dispatch + [:transactions/fetch-more address]))} + (i18n/label :t/transactions-load-more)]}]))])) ;; NOTE: Is this needed? (defn details-header diff --git a/test/appium/tests/atomic/account_management/test_keycard.py b/test/appium/tests/atomic/account_management/test_keycard.py index d3c3bbdf2b..3c9bfddd47 100644 --- a/test/appium/tests/atomic/account_management/test_keycard.py +++ b/test/appium/tests/atomic/account_management/test_keycard.py @@ -46,7 +46,7 @@ class TestCreateAccount(SingleDeviceTestCase): sign_in.just_fyi('Check that after restring account with assets is restored') wallet_view = sign_in.wallet_button.click() wallet_view.set_up_wallet() - for asset in ['ETHro', 'ADI', 'STT']: + for asset in ['ETH', 'ADI', 'STT']: if wallet_view.get_asset_amount_by_name(asset) == 0: self.errors.append('Asset %s was not restored') diff --git a/test/appium/tests/atomic/account_management/test_recover.py b/test/appium/tests/atomic/account_management/test_recover.py index 99c72d2c2c..b6f1552c7c 100644 --- a/test/appium/tests/atomic/account_management/test_recover.py +++ b/test/appium/tests/atomic/account_management/test_recover.py @@ -80,6 +80,7 @@ class TestRecoverAccessFromSignInScreen(SingleDeviceTestCase): if recover_access_view.reencrypt_your_key_button.is_element_displayed(): self.errors.append("Possible to create account with empty seed phrase") + signin_view = SignInView(self.driver, skip_popups=False) # we're performing the same steps changing only phrase per attempt for validation in validations: phrase, elm, msg, words_count, popup = validation.get('phrase'), \ diff --git a/test/appium/tests/atomic/account_management/test_wallet_management.py b/test/appium/tests/atomic/account_management/test_wallet_management.py index 1320e91a63..32c11b2e03 100644 --- a/test/appium/tests/atomic/account_management/test_wallet_management.py +++ b/test/appium/tests/atomic/account_management/test_wallet_management.py @@ -280,6 +280,7 @@ class TestWalletManagement(SingleDeviceTestCase): account_button = wallet_view.get_account_by_name(account_name) if not account_button.is_element_displayed(): self.driver.fail('Account was not added') + if not account_button.color_matches('multi_account_color.png'): self.driver.fail('Account color does not match expected') @@ -303,7 +304,7 @@ class TestWalletManagement(SingleDeviceTestCase): self.driver.fail('Account was not added') wallet_view.just_fyi('Check that overall balance is changed after adding watch-only account') - for asset in ('ETHro', 'ADI', 'STT'): + for asset in ('ETH', 'ADI', 'STT'): wallet_view.wait_balance_is_changed(asset) wallet_view.just_fyi('Check individual watch-only account view, settings and receive option') @@ -326,7 +327,7 @@ class TestWalletManagement(SingleDeviceTestCase): wallet_view.yes_button.click() if account_button.is_element_displayed(): self.driver.fail('Account was not deleted') - for asset in ('ETHro', 'ADI', 'STT'): + for asset in ('ETH', 'ADI', 'STT'): balance = wallet_view.get_asset_amount_by_name(asset) if balance != 0: self.errors.append("Balance for %s is not updated after deleting watch-only account" % asset) @@ -360,7 +361,7 @@ class TestWalletManagement(SingleDeviceTestCase): self.driver.fail('Account was not added') wallet_view.just_fyi('Check that overall balance is changed after adding account') - for asset in ('ETHro', 'ADI'): + for asset in ('ETH', 'ADI'): wallet_view.wait_balance_is_changed(asset) wallet_view.just_fyi('Check account view and send option') @@ -400,7 +401,7 @@ class TestWalletManagement(SingleDeviceTestCase): self.driver.fail('Account was not added') wallet_view.just_fyi('Check that overall balance is changed after adding account') - for asset in ('ETHro', 'ADI'): + for asset in ('ETH', 'ADI'): wallet_view.wait_balance_is_changed(asset) wallet_view.just_fyi('Check individual account view, receive option') diff --git a/test/appium/tests/atomic/transactions/test_dapps_transactions.py b/test/appium/tests/atomic/transactions/test_dapps_transactions.py index 2531a6cdb8..869180bae1 100644 --- a/test/appium/tests/atomic/transactions/test_dapps_transactions.py +++ b/test/appium/tests/atomic/transactions/test_dapps_transactions.py @@ -78,7 +78,7 @@ class TestTransactionDApp(SingleDeviceTestCase): self.driver.fail('Contract was not created') @marks.testrail_id(5784) - @marks.critical + @marks.medium def test_sign_typed_message(self): sender = transaction_senders['W'] sign_in_view = SignInView(self.driver) diff --git a/test/appium/tests/atomic/transactions/test_keycard_wallet.py b/test/appium/tests/atomic/transactions/test_keycard_wallet.py index 87e34e56f8..dcd09d7677 100644 --- a/test/appium/tests/atomic/transactions/test_keycard_wallet.py +++ b/test/appium/tests/atomic/transactions/test_keycard_wallet.py @@ -58,7 +58,7 @@ class TestTransactionWalletSingleDevice(SingleDeviceTestCase): sign_in_view.just_fyi('Go back to online and check that balance is updated') sign_in_view.toggle_airplane_mode() - wallet_view.wait_balance_is_changed('ETHro') + wallet_view.wait_balance_is_changed('ETH') wallet_view.wait_balance_is_changed('STT') sign_in_view.just_fyi('Send some tokens to other account') diff --git a/test/appium/tests/atomic/transactions/test_wallet.py b/test/appium/tests/atomic/transactions/test_wallet.py index 8be44d01f4..5de1b651c4 100644 --- a/test/appium/tests/atomic/transactions/test_wallet.py +++ b/test/appium/tests/atomic/transactions/test_wallet.py @@ -90,7 +90,7 @@ class TestTransactionWalletSingleDevice(SingleDeviceTestCase): sign_in_view.just_fyi('Go back to online and check that balance is updated') sign_in_view.toggle_airplane_mode() - wallet_view.wait_balance_is_changed('ETHro') + wallet_view.wait_balance_is_changed('ETH') wallet_view.wait_balance_is_changed('STT') sign_in_view.just_fyi('Send some tokens to other account') @@ -179,7 +179,7 @@ class TestTransactionWalletSingleDevice(SingleDeviceTestCase): sign_in_view.recover_access(sender['passphrase']) wallet_view = sign_in_view.wallet_button.click() wallet_view.set_up_wallet() - eth_value = wallet_view.get_asset_amount_by_name('ETHro') + eth_value = wallet_view.get_asset_amount_by_name('ETH') stt_value = wallet_view.get_asset_amount_by_name('STT') if eth_value == 0 or stt_value == 0: self.driver.fail('No funds!') diff --git a/test/appium/views/base_element.py b/test/appium/views/base_element.py index 0ef2dc2d09..3966cc9839 100644 --- a/test/appium/views/base_element.py +++ b/test/appium/views/base_element.py @@ -168,7 +168,7 @@ class BaseElement(object): return attribute_state # Method-helper for renew screenshots in case if changed - def save_new_screenshot_of_element(self, full_path_to_file): + def save_new_screenshot_of_element(self, full_path_to_file: str): screen = Image.open(BytesIO(base64.b64decode(self.find_element().screenshot_as_base64))) screen.save(full_path_to_file) diff --git a/test/appium/views/base_view.py b/test/appium/views/base_view.py index 0df4212458..71d2658da8 100644 --- a/test/appium/views/base_view.py +++ b/test/appium/views/base_view.py @@ -297,7 +297,7 @@ class AssetButton(BaseButton): def __init__(self, driver, asset_name): super(AssetButton, self).__init__(driver) self.asset_name = asset_name - self.locator = self.Locator.xpath_selector('(//*[@content-desc=":' + self.asset_name + '-asset-value"])[last()]') + self.locator = self.Locator.xpath_selector('(//*[@content-desc=":' + self.asset_name + '-asset-value"])[1]') @property def name(self): diff --git a/test/appium/views/chat_view.py b/test/appium/views/chat_view.py index b8345c0c1c..47c34e7c9a 100644 --- a/test/appium/views/chat_view.py +++ b/test/appium/views/chat_view.py @@ -258,7 +258,7 @@ class ImageFromGalleryButton(BaseButton): class FirstElementFromGalleryButton(BaseButton): def __init__(self, driver): super(FirstElementFromGalleryButton, self).__init__(driver) - self.locator = self.Locator.xpath_selector('//*[@content-desc="open-gallery"]/../following-sibling::android.view.ViewGroup[1]') + self.locator = self.Locator.xpath_selector('//*[@content-desc="open-gallery"]/following-sibling::android.view.ViewGroup[1]') class ViewProfileButton(BaseButton): def __init__(self, driver): diff --git a/test/appium/views/elements_templates/multi_account_color.png b/test/appium/views/elements_templates/multi_account_color.png index b88423ded720dee1c1cfa4dc2d607b4e92d858c6..e83c2ba4e8f6d36c88877325f4bcfb291d4283e1 100644 GIT binary patch delta 1267 zcmVOMm}$KHqacX#6erTsDNu zSJ}+(sz3;y2wqoEfgl>NU~|Yvmh{pRpBk*WTgPdz#>q0VB^_AeQ;UgbPfv4`^M50J zrU>^GYKlgpLHUCBNCjq%-I0Dm3A`uCc_n|gvw#x1W9Ehx{C4NhjbBeXi2!CyHhsmfS7IsT>)?iIvj zL(AxcsTeLA!d*w8Xm{P&*IZo84$*uxJ@iF^x2XvCgw~o1!Pc6v_EOXTGlvqNOHauD zj)HNT$Rp^#zU>hY#MPLmi9}SnUa)08p;yqqhXg{sev2=2DSQwaI z%ucod$!C{HO#&uydFUY+zRgMd1wp~CnuIT`Kv+r1KGAm@J8zYo7o+zE?$+Rg&_nLI+g}^QDJX zbYf_AWq;DViFV~R+|lHbQ#|ckl1~OZyEr`vuH?J-E3de}baDU&hdJ#Rif~6wdJu3G zNr!^}Sm^94vVkS;8IsRm_BR1rN@FXPkgqX%XNY^2U{~-q6uNyQSu5~11h1<}K3j%w z^NLXq!i)%B8FIiS=g~XM2;;_uO*dz?x>Af4;(rpi=yB8b1yJ_Zax1Y? zJ?Az4V@3E(p#%4SZ$k*4DB`o4#%NBcpl}_NmhR6jp%mt_NR6ww?EP|uH4vW}`hR4V z`Nyl7z!yQQQ^?7qLdUs1rySqPn_sDN7kjhX=ulAM_`*PXSx=rx-MS>$zOF0}C&%jw zx_@0?hxZhtZQU`WoZNzvOB+RrtuPH`_jHI;Y<$oiIS zU?&O&dkXP{xMwP!dcCp;c8fm98i;#~Cu7mzZ#h|I{nATI^lw$(Le(ldG3ZbTcAPOf zfc2LOv#%zJQhD6+sN}+Obu`_Ot0Tkuf%8HU2(|_PvBsuuVI|thtAvwv1LIAy%YV>q zVdIx_oXU8kc)Osaeaqm@?Y3ayQa=1ACyx~E=fx?i7E{-o)a;cRFb9OiDG z8lR*Hi0=%!36sL;gPBauv*2{9&x{ZQB(4hbT002ovPDHLkV1f-Xf#(1K delta 1526 zcmV~>P8nanip zw4KRJU#*YP=jdfRbvtdRowU=&jT2k4&enkhPa+7CIQ9Y(1XdDE*-E4fd{>KGi+e5n z*b94MQ^N0l`_q7wD-rKHf%{AW?#hZ)xop6e~*rjIAC!-+g(luaYUC&##g%)=@GABuOC%0({SA zGCpN^dP3LOBJjPp=6Dr>@8fwk&SZ#X8uZ&c*c0ochvJstb=V z1_JQB39d6n5G7mMOX3Zf)aU;YI1#r5LY z_BNhfS`nUS zV;p_U(e77pcEFNRixex%H;(7~9;cl>c3%F0etRbx&uMehtCxEqPF5{O_VD!h%Gy6? z&^yF34SyVagkz6Tl>B?eKHB{!mT5$vE46imv+{*|P*w;R_eYeJ1jmrQjc2zSzIFHw zAAIx$2p}t2%GDKm#&(#`twwqWT-%E5qTV1^nEOHFk4%H{s2_dK7weII=i&@{Zz5Zi z6dtbsn#GmReo&Dnqh4fZvlnH4=VjGtZjje%Xn%Uxyor*GKEH-OzlJ?A84tTyroo_h zfaluZOAgLt7}=7dM)sYH18}hQS89!)P^mqNdJqVEnoL%sRDH<8@+Vkko1XESLGSQZ z<9nVH+2Xx=AfM4X{4YIY3%<t++roR{}wZ{w|0Tg;JeDvCg3PhNHc&@ICidVhgc2 zaewZOH~@}q(R%Zo7SB;Kd9?Ba@>-32v4$jPLMH)=l_f+;VSn?_w-PtLTH~$6y%Hym zV_S4vuj#g4BZv~^>I!oUPf)T201Bl#`rI15_V#7&F-sbxXw5lKYxh7FMrvb9@+MI5ZN=YocK;5XL2(Kj(4%1JDE;O zEk!FK@O_4Zlf=1PXM{CqQK~)+^H65b<2v%idiZ=h!x}UrduDOQRu@=3OG>4vH{QBy z*KV$KYz7) zYD-TO@0=*fEG&N-?F51E)9>s~`HW)kHG(KIxA-J62Q^=z5bI#$C2&&&L8P(zIk`eL z8tXPUrw-C)UOB$!&^~@iefcR6KEytF`~|I}7o2wXrhK*X18R+r$>z!zfsL(87h{>txS_|KJdp6vgdhwHyWlCvN{ zsk%a`vV!Z5@tg^wBqJ;8R5=lZFN{e?oEf#m>XYAG3(#=}m(0*njtM`yZF) zxbaqgy!S8ciOKxpkE6RN$qJHOzT_MDKAq+U#?gyw=NnsH_Ba2+;>u^JdHw7{LXqWI zD}RpbOlTi}OSknpG0!lkN}`YNxpa*!jKgoH4!O>Gr#`21@`^$CfKqh@t+a@o$s@}d zK)~~CTzkZD(4^nlo$0wSwr{%ZeD@{g>I#~^L^fAKmQ_Si!uLIV&%vIU;hgQAsqK7b z0tf;R*R^pbCf1-uuf22WXf%$H{`1oH-1(8keI^wrfmECXQgISU#YrF)CxKL)1X6Jl cNX1Fuf5G!5sJo#%DF6Tf07*qoM6N<$f`@7MkN^Mx diff --git a/test/appium/views/profile_view.py b/test/appium/views/profile_view.py index 7da33107ad..9f8b254f28 100644 --- a/test/appium/views/profile_view.py +++ b/test/appium/views/profile_view.py @@ -173,7 +173,7 @@ class AdvancedButton(BaseButton): def __init__(self, driver): super(AdvancedButton, self).__init__(driver) - self.locator = self.Locator.text_selector('Advanced') + self.locator = self.Locator.accessibility_id('advanced-button') def click(self): self.scroll_to_element().click() diff --git a/test/appium/views/recover_access_view.py b/test/appium/views/recover_access_view.py index b03d51e6bf..f0824f2105 100644 --- a/test/appium/views/recover_access_view.py +++ b/test/appium/views/recover_access_view.py @@ -94,7 +94,7 @@ class CancelPhraseButton(BaseButton): class RecoverAccessView(SignInView): def __init__(self, driver): - super(RecoverAccessView, self).__init__(driver) + super(RecoverAccessView, self).__init__(driver, skip_popups=False) self.driver = driver self.seedphrase_input = SeedphraseInput(self.driver) diff --git a/test/appium/views/send_transaction_view.py b/test/appium/views/send_transaction_view.py index 2a5deaba12..1631818d0f 100644 --- a/test/appium/views/send_transaction_view.py +++ b/test/appium/views/send_transaction_view.py @@ -87,7 +87,7 @@ class EnterRecipientAddressInput(BaseEditBox): class EnterRecipientAddressInputText(BaseText): def __init__(self, driver): super(EnterRecipientAddressInputText, self).__init__(driver) - self.locator = self.Locator.xpath_selector("//*[@content-desc='choose-recipient-button']/android.widget.TextView") + self.locator = self.Locator.xpath_selector("//*[@content-desc='choose-recipient-button']//android.widget.TextView") class RecentRecipientsButton(BaseButton): diff --git a/test/appium/views/sign_in_view.py b/test/appium/views/sign_in_view.py index d6ce58ed57..192deadecf 100644 --- a/test/appium/views/sign_in_view.py +++ b/test/appium/views/sign_in_view.py @@ -9,7 +9,7 @@ class MultiAccountButton(BaseButton): class Username(BaseText): def __init__(self, driver, locator_value): super(MultiAccountButton.Username, self).__init__(driver) - self.locator = self.Locator.xpath_selector(locator_value + '/android.view.ViewGroup/android.widget.TextView[1]') + self.locator = self.Locator.xpath_selector(locator_value + "//android.widget.TextView[@content-desc='username']") def __init__(self, driver, position=1): super(MultiAccountButton, self).__init__(driver) diff --git a/test/appium/views/wallet_view.py b/test/appium/views/wallet_view.py index a418c4ac9c..d310c3b186 100644 --- a/test/appium/views/wallet_view.py +++ b/test/appium/views/wallet_view.py @@ -43,7 +43,8 @@ class ScanQRButton(BaseButton): class AssetText(BaseText): def __init__(self, driver, asset): super(AssetText, self).__init__(driver) - self.locator = self.Locator.xpath_selector("//*[@text='%s']/preceding-sibling::*[1]" % asset) + self.locator = self.Locator.xpath_selector("//android.view.ViewGroup[@content-desc=':%s-asset-value']" + "//android.widget.TextView[1]" % asset) class AssetFullNameInAssets(BaseText): @@ -151,7 +152,7 @@ class RemindMeLaterButton(BaseButton): class AssetTextElement(BaseText): def __init__(self, driver, asset_name): super(AssetTextElement, self).__init__(driver) - self.locator = self.Locator.xpath_selector("//*[@text='%s']" % asset_name) + self.locator = self.Locator.text_part_selector(asset_name) class CollectibleTextElement(BaseText): @@ -359,7 +360,7 @@ class AccountColorButton(BaseButton): def select_color_by_position(self, position: int): self.click() self.driver.find_element_by_xpath( - "//*[@text='Cancel']/../preceding-sibling::android.widget.ScrollView/*/*[%s]" % position).click() + "((//android.widget.ScrollView)[last()]/*/*)[%s]" % str(position+1)).click() # Add account on Generate An Account screen class AddAccountGenerateAnAccountButton(BaseButton): @@ -450,7 +451,7 @@ class WalletView(BaseView): def get_asset_amount_by_name(self, asset: str): asset_value = AssetText(self.driver, asset) asset_value.scroll_to_element() - return float(asset_value.text) + return float(asset_value.text.split()[0]) def verify_currency_balance(self, expected_rate: int, errors: list): usd = self.get_usd_total_value()