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 b88423ded7..e83c2ba4e8 100644 Binary files a/test/appium/views/elements_templates/multi_account_color.png and b/test/appium/views/elements_templates/multi_account_color.png differ 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()