diff --git a/.carve_ignore b/.carve_ignore index 09be820f77..697d7c3630 100644 --- a/.carve_ignore +++ b/.carve_ignore @@ -50,13 +50,6 @@ status-im2.config/rpc-networks-only? status-im2.config/waku-enabled? status-im.utils.pairing/has-paired-installations? status-im.tribute-to-talk.core-test/user-cofx -quo.gesture-handler/tap-gesture-handler -quo.gesture-handler/pan-gesture-handler -quo.gesture-handler/long-press-gesture-handler -quo.gesture-handler/pure-native-button -quo.gesture-handler/createNativeWrapper -quo.gesture-handler/animated-raw-button -quo.gesture-handler/states mocks.js-dependencies/action-button mocks.js-dependencies/camera mocks.js-dependencies/dismiss-keyboard @@ -100,46 +93,13 @@ react-native.fs/read-dir react-native.fs/mkdir react-native.fs/unlink react-native.fs/file-exists? -quo.animated/code -quo.animated/eq -quo.animated/neq -quo.animated/greater-or-eq -quo.animated/not* -quo.animated/or* -quo.animated/and* -quo.animated/add -quo.animated/sub -quo.animated/multiply -quo.animated/abs -quo.animated/min* -quo.animated/max* -quo.animated/set -quo.animated/start-clock -quo.animated/stop-clock -quo.animated/bezier -quo.animated/linear -quo.animated/set-value -quo.animated/clock -quo.animated/debug -quo.animated/log -quo.animated/event -quo.animated/on-change -quo.animated/cond* -quo.animated/block -quo.animated/call* -quo.animated/timing -quo.animated/spring -quo.animated/clamp -quo.animated/with-spring -quo.animated/with-timing -quo.animated/re-timing -quo.design-system.colors/white -quo.design-system.colors/black +status-im.ui.components.colors/white +status-im.ui.components.colors/black status-im.transport.core-test/messages -quo.core/animated-header -quo.core/safe-area-provider -quo.core/safe-area-consumer -quo.core/safe-area-view +status-im.ui.components.core/animated-header +status-im.ui.components.core/safe-area-provider +status-im.ui.components.core/safe-area-consumer +status-im.ui.components.core/safe-area-view status-im.utils.universal-links.core/open! status-im.transport.filters.core-test/member-2 status-im.ui.screens.chat.ttt/one-to-one-chat-description-container @@ -189,7 +149,7 @@ status-im.utils.async/async-periodic-run! status-im.desktop.core/app-root status-im.desktop.core/init status-im.chat.models-test/test-db -quo.design-system.spacing/padding-vertical +status-im.ui.components.spacing/padding-vertical status-im.utils.money/percent-change utils.debounce/clear-all status-im.transport.db/create-chat @@ -206,7 +166,6 @@ status-im.ui.components.animation/add status-im.ui.components.animation/subtract status-im.ui.components.animation/get-layout status-im.wallet.transactions-test/uri-query-data -quo.react-native/touchable-highlight status-im.utils.name/shortened-name status-im.ui.components.button.haptic/trigger status-im.contact.db/filter-dapps diff --git a/ios/Podfile.lock b/ios/Podfile.lock index aebc628701..0926dc0a5b 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -700,7 +700,7 @@ SPEC CHECKSUMS: FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991 FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 - glog: 166d178815c300e8126de9a7900101814eb16253 + glog: d93527a855523adb8c113837db4be68fb00e230d HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352 Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8 libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef diff --git a/src/quo/README.md b/src/quo/README.md deleted file mode 100644 index 13d4c8cb53..0000000000 --- a/src/quo/README.md +++ /dev/null @@ -1,49 +0,0 @@ -# Status Quo Components -All components in **Quo** should be independent of the app state. They should be _pure_ -and _easy to reason about_. Avoiding the app state is also required to make the library -independent and easy to be pulled off as a separate repository when needed. -To avoid high coupling and direct use of internal styling, the components should be -exported via namespace `quo.core` and used by the Status app only from there. This will -allow a more flexible way to update components without possible breakages into the -app style. - -**Quo** components should not have any dependency on the Status app, this -will avoid circular dependency and also benefit the independence of the components. - -All components are stored inside `components` namespaces. They are stateless and do -not dispatch and subscribe to re-frame database. All state should be passed by props -and all events can be passed as functions. Avoiding direct connection with re-frame -will allow components to grow and be reused in different places without the -conditionals hell. - -All style system constants are stored inside `design-system` namespaces. They are used -to build components and can be directly required by the status app. Avoid -duplication of these vars and do not use them in code directly as a value. - -For each component introduced, add previews of all possible states. - -Do not introduce components for slightly modified existing components, if they are -not a part of the design system. In case they are required in one place in the app, -use style override. - -# Code style -Ensure that your changes match the style of the rest of the code. -This library uses Clojure Community code style [The Clojure Style Guide](https://github.com/bbatsov/clojure-style-guide). -To ensure consistency, run `make lint`, which uses the [clj-kondo linter](https://github.com/borkdude/clj-kondo). - -# Best practices - -- Design components atomically and compose them into bigger components. -- Do not export individual atoms, only components. This way we can limit design -system to be used in too many way which can creating disjointed experiences. -- Avoid external margins for atom components, it can be added on the wrapper -where they are used but can't be removed without overriding. -[Max Stoiber article on margins](https://mxstbr.com/thoughts/margin) -- Design reusable components into [Layout Isolated Components](https://visly.app/blogposts/layout-isolated-components) -(Article more relates to web, but ideas fits also to mobile development) -- Explicit is better than implicit, do not rely on platform default, if you expect -a specific value, then override it - -**TBD:** -- Components documentation -- Check props using spec in pre conditions. diff --git a/src/quo/animated.cljs b/src/quo/animated.cljs deleted file mode 100644 index e812b39c06..0000000000 --- a/src/quo/animated.cljs +++ /dev/null @@ -1,272 +0,0 @@ -(ns quo.animated - (:refer-clojure :exclude [abs set delay divide]) - (:require ["react-native-reanimated" :default animated :refer (clockRunning EasingNode)] - ["react-native-redash/lib/module/v1" :as redash] - [oops.core :refer [ocall oget]] - [quo.gesture-handler :as gh] - quo.react - [quo.react-native :as rn] - [reagent.core :as reagent]) - (:require-macros [quo.react :refer [maybe-js-deps]])) - -(def create-animated-component (comp reagent/adapt-react-class (.-createAnimatedComponent animated))) - -(def view (reagent/adapt-react-class (.-View animated))) -(def text (reagent/adapt-react-class (.-Text animated))) -(def scroll-view (reagent/adapt-react-class (.-ScrollView animated))) -(def code (reagent/adapt-react-class (.-Code animated))) -(def animated-flat-list (create-animated-component gh/flat-list-raw)) - -(defn flat-list - [props] - [animated-flat-list (rn/base-list-props props)]) - -(def useCode (.-useCode animated)) - -(defn code! - ([setup-fn] - (useCode - (fn [] (setup-fn)))) - ([setup-fn deps] - (useCode - (fn [] (setup-fn)) - (maybe-js-deps deps)))) - -(def eq (oget animated "eq")) -(def neq (oget animated "neq")) -(def greater (oget animated "greaterThan")) -(def greater-or-eq (oget animated "greaterOrEq")) -(def less (oget animated "lessThan")) -(def less-or-eq (oget animated "lessOrEq")) -(def not* (oget animated "not")) -(def or* (oget animated "or")) -(def and* (oget animated "and")) - -(def diff (oget animated "diff")) -(def add (oget animated "add")) -(def sub (oget animated "sub")) -(def multiply (oget animated "multiply")) -(def divide (oget animated "divide")) -(def abs (oget animated "abs")) - -(def min* (oget animated "min")) -(def max* (oget animated "max")) - -(def set (oget animated "set")) -(def start-clock (oget animated "startClock")) -(def stop-clock (oget animated "stopClock")) -(def clock-running clockRunning) -(def bezier (.-bezier ^js EasingNode)) -(def linear (.-linear ^js EasingNode)) - -(def easings - {:linear linear - :ease-in (bezier 0.42 0 1 1) - :ease-out (bezier 0 0 0.58 1) - :ease-in-out (bezier 0.42 0 0.58 1) - :cubic (bezier 0.55 0.055 0.675 0.19) - :keyboard (bezier 0.17 0.59 0.4 0.77)}) - -(def springs - {:lazy {:damping 50 - :mass 0.3 - :stiffness 120 - :overshootClamping true - :bouncyFactor 1} - :jump {:damping 13 - :mass 0.5 - :stiffness 170 - :overshootClamping false - :bouncyFactor 1 - :restSpeedThreshold 0.001 - :restDisplacementThreshold 0.001}}) - -(defn set-value - [anim v] - (ocall anim "setValue" v)) - -(def Value (oget animated "Value")) - -(defn value - [x] - (new Value x)) - -(def Clock (oget animated "Clock")) - -(defn clock - [] - (new Clock)) - -(def debug (oget animated "debug")) -(def log (oget animated "log")) - -(defn event - ([config] - (event config {})) - ([config options] - (ocall animated "event" (clj->js config) (clj->js options)))) - -(defn on-change - [state node] - (ocall animated - "onChange" - state - (if (vector? node) - (clj->js node) - node))) - -(defn cond* - ([condition node] - (.cond ^js animated - condition - (if (vector? node) - (clj->js node) - node))) - ([condition if-node else-node] - (.cond ^js animated - condition - (if (vector? if-node) - (clj->js if-node) - if-node) - (if (vector? else-node) - (clj->js else-node) - else-node)))) - -(defn block - [opts] - (.block ^js animated (to-array opts))) - -(defn interpolate - [anim-value config] - (.interpolateNode ^js animated anim-value (clj->js config))) - -(defn call* - [args callback] - (.call ^js animated (to-array args) callback)) - -(defn timing - [clock-value opts config] - (.timing ^js animated - clock-value - (clj->js opts) - (clj->js config))) - -(defn spring - [clock-value opts config] - (.spring ^js animated - clock-value - (clj->js opts) - (clj->js config))) - -(def extrapolate {:clamp (oget animated "Extrapolate" "CLAMP")}) - -;; utilities - -(def clamp (oget redash "clamp")) -(def diff-clamp (.-diffClamp ^js redash)) - -(defn with-spring - [config] - (ocall redash "withSpring" (clj->js config))) - -(defn with-decay - [config] - (.withDecay ^js redash (clj->js config))) - -(defn with-offset - [config] - (.withOffset ^js redash (clj->js config))) - -(defn with-spring-transition - [v config] - (.withSpringTransition ^js redash v (clj->js config))) - -(defn with-timing-transition - [v config] - (.withTimingTransition ^js redash v (clj->js config))) - -(defn use-spring-transition - [v config] - (.useSpringTransition ^js redash v (clj->js config))) - -(defn use-timing-transition - [v config] - (.useTimingTransition ^js redash v (clj->js config))) - -(defn re-timing - [config] - (.timing ^js redash (clj->js config))) - -(defn re-spring - [config] - (.spring ^js redash (clj->js config))) - -(defn on-scroll - [opts] - (ocall redash "onScrollEvent" (clj->js opts))) - -(defn on-gesture - [opts] - (let [gesture-event (event #js [#js {:nativeEvent (clj->js opts)}])] - {:onHandlerStateChange gesture-event - :onGestureEvent gesture-event})) - -(def mix (.-mix ^js redash)) - -(def mix-color (.-mixColor ^js redash)) - -(def delay (.-delay ^js redash)) - -(defn loop* - [opts] - (ocall redash "loop" (clj->js opts))) - -(def use-value (.-useValue ^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 - [v velocity snap-points] - (.snapPoint ^js redash v velocity (to-array snap-points))) - -(defn with-easing - [{v :value - :keys [snap-points velocity offset state easing duration - animation-over] - :or {duration 250 - animation-over (value 1) - easing (:ease-out easings)}}] - (let [position (value 0) - c (clock) - interrupted (and* (eq state (:began gh/states)) - (clock-running c)) - vel (multiply velocity 1.5) - to (snap-point position vel snap-points) - finish-animation [(set offset position) - (stop-clock c) - (set animation-over 1)]] - (block - [(cond* interrupted finish-animation) - (cond* animation-over - (set position offset)) - (cond* (neq state (:end gh/states)) - [(set animation-over 0) - (set position (add offset v))]) - (cond* (and* (eq state (:end gh/states)) - (not* animation-over)) - [(set position - (re-timing - {:clock c - :easing easing - :duration duration - :from position - :to to})) - (cond* (not* (clock-running c)) - finish-animation)]) - position]))) diff --git a/src/quo/components/animated/pressable.cljs b/src/quo/components/animated/pressable.cljs deleted file mode 100644 index 5ea788a208..0000000000 --- a/src/quo/components/animated/pressable.cljs +++ /dev/null @@ -1,136 +0,0 @@ -(ns quo.components.animated.pressable - (:require [cljs-bean.core :as bean] - [quo.animated :as animated] - [quo.gesture-handler :as gesture-handler] - [quo.react :as react] - [reagent.core :as reagent])) - -(def long-press-duration 500) -(def scale-down-small 0.95) -(def scale-down-large 0.9) -(def opactiy 0.75) -(def time-in 100) -(def time-out 200) - -(defmulti type->animation :type) - -(defmethod type->animation :primary - [{:keys [animation]}] - {:background {:transform [{:scale (animated/mix animation 1 scale-down-small)}] - :opacity (animated/mix animation 1 opactiy)} - :foreground {:transform [{:scale (animated/mix animation 1 scale-down-small)}] - :opacity (animated/mix animation 1 opactiy)}}) - -(defmethod type->animation :secondary - [{:keys [animation]}] - {:background {:transform [{:scale (animated/mix animation scale-down-small 1)}] - :opacity (animated/mix animation 0 opactiy)} - :foreground {:transform [{:scale (animated/mix animation 1 scale-down-small)}] - :opacity (animated/mix animation 1 opactiy)}}) - -(defmethod type->animation :icon - [{:keys [animation]}] - {:background {:transform [{:scale (animated/mix animation scale-down-large 1)}] - :opacity (animated/mix animation 0 opactiy)} - :foreground {:transform [{:scale (animated/mix animation 1 scale-down-large)}] - :opacity (animated/mix animation 1 opactiy)}}) - -(defmethod type->animation :list-item - [{:keys [animation]}] - {:background {:opacity (animated/mix animation 0 opactiy)} - :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 - :left 0 - :right 0 - :position :absolute}) - -(defn pressable-hooks - [props] - (let [{background-color :bgColor - border-radius :borderRadius - border-color :borderColor - border-width :borderWidth - 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))) - long-gesture-handler (react/callback - (fn [^js evt] - (let [gesture-state (-> evt .-nativeEvent .-state)] - (when (and on-press-start - (= gesture-state (:began gesture-handler/states))) - (on-press-start)) - (when (and on-long-press - (= gesture-state (:active gesture-handler/states))) - (on-long-press) - (animated/set-value state (:undetermined gesture-handler/states))))) - [on-long-press 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 - :max-dist 22 - :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 - :border-color border-color - :border-width border-width})}] - (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 deleted file mode 100644 index ac1a7886c1..0000000000 --- a/src/quo/components/animated_header.cljs +++ /dev/null @@ -1,103 +0,0 @@ -(ns quo.components.animated-header - (:require [oops.core :refer [oget]] - [quo.animated :as animated] - [quo.components.header :as header] - [quo.design-system.colors :as colors] - [quo.platform :as platform] - [reagent.core :as reagent] - [react-native.safe-area :as safe-area])) - -(defn header-wrapper-style - [{:keys [value offset]}] - (merge - {:background-color (:ui-background @colors/theme)} - (when (and offset platform/android?) - {:elevation (animated/interpolate - value - {:inputRange [0 offset] - :outputRange [0 4] - :extrapolate (:clamp animated/extrapolate)})}) - (when (and offset platform/ios?) - {:z-index 2 - :shadow-opacity (animated/interpolate - value - {:inputRange [0 offset] - :outputRange [0 1] - :extrapolate (:clamp animated/extrapolate)}) - :shadow-radius 16 - :shadow-color (:shadow-01 @colors/theme) - :shadow-offset {:width 0 :height 4}}))) - -(defn title-style - [layout] - {:flex 1 - :justify-content :center - :padding-right (get-in layout [:right :width])}) - -(defn header-container - [] - (let [y (animated/value 0) - animation-value (animated/value 0) - animation (animated/with-timing-transition - animation-value - {:duration 250 - :easing (:ease-in animated/easings)}) - on-scroll (animated/on-scroll {:y y}) - layout (reagent/atom {}) - offset (reagent/atom 0) - on-layout (fn [evt] - (reset! offset (oget evt "nativeEvent" "layout" "height")))] - (fn [{:keys [extended-header refresh-control refreshing-sub refreshing-counter] :as props} children] - [animated/view - {:flex 1 - :pointer-events :box-none} - [animated/code - {:key (str @offset) - :exec (animated/cond* - (animated/and* (animated/greater-or-eq y @offset) - (animated/greater-or-eq y 1)) - (animated/set animation-value 1) - (animated/set animation-value 0))}] - [animated/view - {:pointer-events :box-none - :style (header-wrapper-style {:value y - :offset @offset})} - [header/header - (merge - {:get-layout (fn [el l] (swap! layout assoc el l)) - :border-bottom false - :title-component [animated/view {:style (title-style @layout)} - [extended-header - {:value y - :animation animation - :minimized true - :offset @offset}]] - :title-align :left} - (dissoc props :extended-header))]] - (into [animated/scroll-view - {:on-scroll on-scroll - :refreshControl (when refresh-control - (refresh-control - (and @refreshing-sub - @refreshing-counter))) - :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 - :animation animation - :offset @offset}]]]] - children)]))) - -(defn header - [{:keys [use-insets] :as props} & children] - (if use-insets - [header-container - (-> props - (dissoc :use-insets) - (assoc :insets (safe-area/get-insets))) - children] - [header-container props children])) diff --git a/src/quo/components/bottom_sheet/style.cljs b/src/quo/components/bottom_sheet/style.cljs deleted file mode 100644 index c1980cad0e..0000000000 --- a/src/quo/components/bottom_sheet/style.cljs +++ /dev/null @@ -1,45 +0,0 @@ -(ns quo.components.bottom-sheet.style - (:require [quo.design-system.colors :as colors] - [quo.design-system.spacing :as spacing])) - -(def border-radius 16) -(def vertical-padding (:tiny spacing/spacing)) -(def margin-top 56) - -(def container - {:position :absolute - :left 0 - :top 0 - :right 0 - :bottom 0 - :flex 1 - :justify-content :flex-end}) - -(defn backdrop - [] - {:flex 1 - :position :absolute - :left 0 - :top 0 - :right 0 - :bottom 0}) - -(defn content-container - [window-height] - {:background-color (:ui-background @colors/theme) - :border-top-left-radius border-radius - :border-top-right-radius border-radius - :height (* window-height 2)}) - -(def content-header - {:height border-radius - :align-self :stretch - :justify-content :center - :align-items :center}) - -(def handle - {:width 31 - :height 4 - :background-color (:icon-02 @colors/theme) - :opacity 0.4 - :border-radius 2}) diff --git a/src/quo/components/bottom_sheet/view.cljs b/src/quo/components/bottom_sheet/view.cljs deleted file mode 100644 index ae6fe501f8..0000000000 --- a/src/quo/components/bottom_sheet/view.cljs +++ /dev/null @@ -1,233 +0,0 @@ -(ns quo.components.bottom-sheet.view - (:require [cljs-bean.core :as bean] - [quo.animated :as animated] - [quo.components.bottom-sheet.style :as styles] - [quo.design-system.colors :as colors] - [quo.gesture-handler :as gesture-handler] - [quo.platform :as platform] - [quo.react :as react] - [quo.react-native :as rn] - [reagent.core :as reagent] - [react-native.safe-area :as safe-area])) - -(def opacity-coeff 0.8) -(def close-duration 150) -(def spring-config - {:damping 15 - :mass 0.7 - :stiffness 150 - :overshootClamping false - :restSpeedThreshold 0.1 - :restDisplacementThreshold 0.1}) - -(defn bottom-sheet-hooks - [props] - (let [{on-cancel :onCancel - disable-drag? :disableDrag? - show-handle? :showHandle? - visible? :visible? - backdrop-dismiss? :backdropDismiss? - back-button-cancel :backButtonCancel - children :children - :or {show-handle? true - backdrop-dismiss? true - back-button-cancel true}} - (bean/bean props) - body-ref (react/create-ref) - master-ref (react/create-ref) - - height (react/state 0) - {window-height :height} (rn/use-window-dimensions) - {:keys [keyboard-shown - keyboard-height]} - (rn/use-keyboard) - keyboard-height-android-delta - (if (and platform/android? keyboard-shown) (+ keyboard-height 20) 0) - safe-area (safe-area/get-insets) - window-height (- window-height - (if platform/android? - (+ 50 keyboard-height-android-delta) ;; TODO : remove 50 when - ;; react-native-navigation v8 will be - ;; implemented - ;; https://github.com/wix/react-native-navigation/issues/7225 - 0)) - min-height (+ (* styles/vertical-padding 2) (:bottom safe-area)) - max-height (- window-height (:top safe-area)) - visible (react/state false) - - 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/use-value 0) - offset (animated/use-value 0) - drag-over (animated/use-value 1) - clock (animated/use-clock) - 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 - (+ styles/border-radius @height)) - - open-snap-point (animated/use-value 0) - close-snap-point 0 - on-close (fn [] - (when @visible - (reset! visible false) - (reset! height 0) - (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 - :animation-over drag-over - :snap-points [open-snap-point close-snap-point]})) - []) - 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/cond* (animated/and* (animated/eq master-state (:end gesture-handler/states)) - (animated/not* drag-over)) - (animated/call* [translate-y] on-snap))) - [on-snap]) - (animated/code! - (fn [] - (animated/block - [(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/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 - :clock clock - :easing (:ease-out animated/easings) - :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)])])])) - [on-cancel]) - (animated/code! - (fn [] - (animated/cond* (animated/and* (animated/not* manual-close) - (if @visible 1 0) - (if (> @height min-height) 1 0)) - [(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)) - @visible)) - (react/effect! - (fn [] - (cond - visible? - (do - (rn/dismiss-keyboard!) - (reset! visible visible?)) - - @visible - (close-sheet))) - [visible?]) - (reagent/as-element - [rn/view - {:style styles/container - :pointer-events :box-none} - [gesture-handler/tap-gesture-handler - (merge {:enabled backdrop-dismiss?} - tap-gesture-handler) - [animated/view - {:style (merge (styles/backdrop) - (when platform/ios? - {:opacity opacity - :background-color (:backdrop @colors/theme)}))}]] - [animated/view - {:style (merge (styles/content-container window-height) - {:transform [{:translateY (if (= sheet-height max-height) - (animated/add translate-y - keyboard-height-android-delta) - translate-y)} - {:translateY (* window-height 2)}]})} - [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 - (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 - :flex 1} - [animated/view - {:style {:padding-top styles/vertical-padding - :padding-bottom (+ styles/vertical-padding - (if (and platform/ios? keyboard-shown) - keyboard-height - (:bottom safe-area)))} - :on-layout #(reset! height (.-nativeEvent.layout.height ^js %))} - (into [:<>] - (react/get-children children))]]]]]))) - -(def bottom-sheet (reagent/adapt-react-class (react/memo bottom-sheet-hooks))) diff --git a/src/quo/components/controls/styles.cljs b/src/quo/components/controls/styles.cljs deleted file mode 100644 index 4116ef4eeb..0000000000 --- a/src/quo/components/controls/styles.cljs +++ /dev/null @@ -1,90 +0,0 @@ -(ns quo.components.controls.styles - (:require [quo.animated :as animated] - [quo.design-system.colors :as colors])) - -(defn switch-style - [state disabled] - {:width 52 - :height 28 - :border-radius 14 - :padding 4 - :background-color (animated/mix-color state - (:ui-01 @colors/theme) - (if disabled - (:interactive-04 @colors/theme) - (:interactive-01 @colors/theme)))}) - -(defn switch-bullet-style - [state hold] - {:width 20 - :height 20 - :border-radius 10 - :opacity (animated/mix hold 1 0.6) - :transform [{:translateX (animated/mix state 0 24)}] - :background-color colors/white-persist - :elevation 4 - :shadow-opacity 1 - :shadow-radius 16 - :shadow-color (:shadow-01 @colors/theme) - :shadow-offset {:width 0 :height 4}}) - -(defn radio-style - [state disabled] - {:width 20 - :height 20 - :border-radius 10 - :padding 4 - :background-color (animated/mix-color state - (:ui-01 @colors/theme) - (if disabled - (:interactive-04 @colors/theme) - (:interactive-01 @colors/theme)))}) - -(defn radio-bullet-style - [state hold] - {:width 12 - :height 12 - :border-radius 6 - :opacity (animated/mix hold 1 0.6) - :transform [{:scale (animated/mix state 0.0001 1)}] - :background-color colors/white-persist - :elevation 4 - :shadow-opacity 1 - :shadow-radius 16 - :shadow-color (:shadow-01 @colors/theme) - :shadow-offset {:width 0 :height 4}}) - -(defn animated-checkbox-style - [state disabled] - {:width 18 - :height 18 - :border-radius 4 - :justify-content :center - :align-items :center - :background-color (animated/mix-color state - (:ui-01 @colors/theme) - (if disabled - (:interactive-04 @colors/theme) - (:interactive-01 @colors/theme)))}) - -(defn checkbox-style - [value disabled] - {:width 18 - :height 18 - :border-radius 4 - :justify-content :center - :align-items :center - :background-color (if value - (if disabled - (:interactive-04 @colors/theme) - (:interactive-01 @colors/theme)) - (:ui-01 @colors/theme))}) - -(defn animated-check-icon-style - [state hold] - {:opacity (animated/mix hold 1 0.6) - :transform [{:scale (animated/mix state 0.0001 1)}]}) - -(defn check-icon-style - [value] - {:opacity (if value 1 0)}) diff --git a/src/quo/components/controls/view.cljs b/src/quo/components/controls/view.cljs deleted file mode 100644 index 75cff937b3..0000000000 --- a/src/quo/components/controls/view.cljs +++ /dev/null @@ -1,99 +0,0 @@ -(ns quo.components.controls.view - (:require [cljs-bean.core :as bean] - [quo.animated :as animated] - [quo.components.controls.styles :as styles] - [quo.design-system.colors :as colors] - [quo.gesture-handler :as gh] - [quo.react :as react] - [quo.react-native :as rn] - [reagent.core :as reagent] - [status-im.ui.components.icons.icons :as icons])) - -(defn control-builder - [component] - (fn [props] - (let [{:keys [value onChange disabled]} - (bean/bean props) - state (animated/use-value 0) - tap-state (animated/use-value (:undetermined gh/states)) - tap-handler (animated/on-gesture {:state tap-state}) - hold (react/use-memo - (fn [] - (animated/with-timing-transition - (animated/eq tap-state (:began gh/states)) - {})) - []) - transition (react/use-memo - (fn [] - (animated/with-spring-transition state - (:lazy - animated/springs))) - []) - press-end (fn [] - (when (and (not disabled) onChange) - (onChange (not value))))] - (animated/code! - (fn [] - (animated/cond* (animated/eq tap-state (:end gh/states)) - [(animated/set state (animated/not* state)) - (animated/set tap-state (:undetermined gh/states)) - (animated/call* [] press-end)])) - [press-end]) - (animated/code! - (fn [] - (animated/set state (if (true? value) 1 0))) - [value]) - (reagent/as-element - [gh/tap-gesture-handler - (merge tap-handler - {:shouldCancelWhenOutside true - :enabled (boolean (and onChange (not disabled)))}) - [animated/view - [component - {:transition transition - :hold hold - :disabled disabled}]]])))) - -(defn switch-view - [{:keys [transition hold disabled value]}] - [animated/view - {:style (styles/switch-style transition disabled) - :accessibility-label (str "switch-" (if value "on" "off")) - :accessibility-role :switch} - [animated/view {:style (styles/switch-bullet-style transition hold)}]]) - -(defn radio-view - [{:keys [transition hold disabled value]}] - [animated/view - {:style (styles/radio-style transition disabled) - :accessibility-label (str "radio-" (if value "on" "off")) - :accessibility-role :radio} - [animated/view {:style (styles/radio-bullet-style transition hold)}]]) - -(defn checkbox-view - [props] - (let [{:keys [value onChange disabled]} (bean/bean props)] - (reagent/as-element - [rn/touchable-without-feedback - {:on-press (when (and onChange (not disabled)) onChange)} - [rn/view - {:style (styles/checkbox-style value disabled) - :accessibility-label (str "checkbox-" (if value "on" "off")) - :accessibility-role :checkbox} - [rn/view {:style (styles/check-icon-style value)} - [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]]]))) - -(defn animated-checkbox-view - [{:keys [transition hold disabled value]}] - [animated/view - {:style (styles/animated-checkbox-style transition disabled) - :accessibility-label (str "checkbox-" (if value "on" "off")) - :accessibility-role :checkbox} - [animated/view {:style (styles/animated-check-icon-style transition hold)} - [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]]) - -(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 animated-checkbox - (reagent/adapt-react-class (react/memo (control-builder animated-checkbox-view)))) -(def checkbox (reagent/adapt-react-class (react/memo checkbox-view))) diff --git a/src/quo/components/list/index.cljs b/src/quo/components/list/index.cljs deleted file mode 100644 index d45fdcfcdd..0000000000 --- a/src/quo/components/list/index.cljs +++ /dev/null @@ -1,18 +0,0 @@ -(ns quo.components.list.index - (:require [quo.components.text :as text] - [quo.design-system.colors :as colors] - [quo.react-native :as rn])) - -(defn index - [{:keys [title]}] - [rn/view {:style {:padding-right 16}} - [rn/view - {:style {:border-top-width 1 - :border-bottom-width 1 - :border-right-width 1 - :border-color (colors/get-color :border-01) - :padding-vertical 3 - :padding-horizontal 16 - :border-top-right-radius 16 - :border-bottom-right-radius 16}} - [text/text title]]]) diff --git a/src/quo/core.cljs b/src/quo/core.cljs deleted file mode 100644 index 0b3eb3d4b7..0000000000 --- a/src/quo/core.cljs +++ /dev/null @@ -1,32 +0,0 @@ -(ns quo.core - (:require [quo.components.animated-header :as animated-header] - [quo.components.bottom-sheet.view :as bottom-sheet] - [quo.components.button.view :as button] - [quo.components.controls.view :as controls] - [quo.components.header :as header] - [quo.components.list.footer :as list-footer] - [quo.components.list.header :as list-header] - [quo.components.list.index :as list-index] - [quo.components.list.item :as list-item] - [quo.components.separator :as separator] - [quo.components.text :as text] - [quo.components.text-input :as text-input] - [quo.components.tooltip :as tooltip] - [quo.design-system.colors :as colors])) - -(def text text/text) -(def header header/header) -(def animated-header animated-header/header) -(def text-input text-input/text-input) -(def tooltip tooltip/tooltip) -(def button button/button) -(def list-header list-header/header) -(def list-footer list-footer/footer) -(def list-item list-item/list-item) -(def list-index list-index/index) -(def bottom-sheet bottom-sheet/bottom-sheet) -(def switch controls/switch) -(def radio controls/radio) -(def checkbox controls/checkbox) -(def separator separator/separator) -(def get-color colors/get-color) diff --git a/src/quo/design_system/typography.cljs b/src/quo/design_system/typography.cljs deleted file mode 100644 index 5863bf1e25..0000000000 --- a/src/quo/design_system/typography.cljs +++ /dev/null @@ -1,39 +0,0 @@ -(ns quo.design-system.typography) - -(def tiny - {:font-size 10 - :line-height 14}) - -(def x-small - {:font-size 12 - :line-height 16}) - -(def small - {:font-size 13 - :line-height 18}) - -(def base - {:font-size 15 - :line-height 22}) - -(def large - {:font-size 17 - :line-height 24}) - -(def x-large - {:font-size 22 - :line-height 30}) - -(def xx-large - {:font-size 28 - :line-height 38}) - -(def font-regular {:font-family "Inter-Regular"}) ; 400 - -(def font-medium {:font-family "Inter-Medium"}) ; 500 ff - -(def font-semi-bold {:font-family "Inter-SemiBold"}) ; 600 - -(def font-bold {:font-family "Inter-Bold"}) ; 700 - -(def monospace {:font-family "InterStatus-Regular"}) diff --git a/src/quo/gesture_handler.cljs b/src/quo/gesture_handler.cljs deleted file mode 100644 index bd71200fe0..0000000000 --- a/src/quo/gesture_handler.cljs +++ /dev/null @@ -1,60 +0,0 @@ -(ns quo.gesture-handler - (:require ["react-native-gesture-handler" :refer - (TapGestureHandler PanGestureHandler - LongPressGestureHandler - TouchableWithoutFeedback - TouchableOpacity - TouchableHighlight - State - NativeViewGestureHandler - FlatList - ScrollView)] - [oops.core :refer [oget]] - [quo.design-system.colors :as colors] - [reagent.core :as reagent])) - -(def flat-list-raw FlatList) - -(def flat-list (reagent/adapt-react-class FlatList)) - -(def scroll-view (reagent/adapt-react-class ScrollView)) - -(def tap-gesture-handler - (reagent/adapt-react-class TapGestureHandler)) - -(def pan-gesture-handler - (reagent/adapt-react-class PanGestureHandler)) - -(def long-press-gesture-handler - (reagent/adapt-react-class LongPressGestureHandler)) - -;; NOTE - Touchables provided by react-native-gesture-handler has an issue, -;; if it is pressed rapidly it becomes unresponsive and ignores further on-press calls. -;; Issue: https://github.com/status-im/status-mobile/issues/14020 - -(def touchable-without-feedback-class TouchableWithoutFeedback) - -(def touchable-without-feedback - (reagent/adapt-react-class touchable-without-feedback-class)) - -(def touchable-highlight-class (reagent/adapt-react-class TouchableHighlight)) - -(defn touchable-highlight - [props & children] - (into [touchable-highlight-class - (merge {:underlay-color (:interactive-02 @colors/theme)} - props)] - children)) - -(def touchable-opacity - (reagent/adapt-react-class TouchableOpacity)) - -(def native-view-gesture-handler (reagent/adapt-react-class NativeViewGestureHandler)) - -(def states - {:began (oget State "BEGAN") - :active (oget State "ACTIVE") - :cancelled (oget State "CANCELLED") - :end (oget State "END") - :failed (oget State "FAILED") - :undetermined (oget State "UNDETERMINED")}) diff --git a/src/quo/haptic.cljs b/src/quo/haptic.cljs deleted file mode 100644 index deabdb5817..0000000000 --- a/src/quo/haptic.cljs +++ /dev/null @@ -1,25 +0,0 @@ -(ns quo.haptic - (:require [react-native-haptic-feedback :default react-native-haptic-feedback])) - -(def haptic-methods - {:selection "selection" - :impact-light "impactLight" - :impact-medium "impactMedium" - :impact-heavy "impactHeavy" - :notification-success "notificationSuccess" - :notification-warning "notificationWarning" - :notification-error "notificationError" - :clock-tick "clockTick" ; (Android only) - :context-click "contextClick" ; (Android only) - :keyboard-press "keyboardPress" ; (Android only) - :keyboard-release "keyboardRelease" ; (Android only) - :keyboard-tap "keyboardTap" ; (Android only) - :long-press "longPress" ; (Android only) - :text-handle-move "textHandleMove" ; (Android only) - :virtual-key "virtualKey" ; (Android only) - :virtual-key-release "virtualKeyRelease" ; (Android only) - }) - -(defn trigger - [method] - (.trigger ^js react-native-haptic-feedback (get haptic-methods method))) diff --git a/src/quo/platform.cljs b/src/quo/platform.cljs deleted file mode 100644 index 61dc7845af..0000000000 --- a/src/quo/platform.cljs +++ /dev/null @@ -1,9 +0,0 @@ -(ns quo.platform - (:require ["react-native" :as rn])) - -(def platform (.-Platform ^js rn)) - -(def os (when platform (.-OS platform))) - -(def android? (= os "android")) -(def ios? (= os "ios")) diff --git a/src/quo/previews/bottom_sheet.cljs b/src/quo/previews/bottom_sheet.cljs deleted file mode 100644 index cafa10c0bd..0000000000 --- a/src/quo/previews/bottom_sheet.cljs +++ /dev/null @@ -1,77 +0,0 @@ -(ns quo.previews.bottom-sheet - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.previews.preview :as preview] - [quo.react-native :as rn] - [reagent.core :as reagent])) - -(def descriptor - [{:label "Show handle:" - :key :show-handle? - :type :boolean} - {:label "Backdrop dismiss:" - :key :backdrop-dismiss? - :type :boolean} - {:label "Disable drag:" - :key :disable-drag? - :type :boolean} - {:label "Android back cancel:" - :key :back-button-cancel - :type :boolean} - {:label "Scrollable:" - :key :scrollable - :type :boolean}]) - -(defn cool-preview - [] - (let [state (reagent/atom {:show-handle? true - :backdrop-dismiss? true - :disable-drag? false - :back-button-cancel true}) - visible (reagent/atom false) - scrollable (reagent/cursor state [:scrollable])] - (fn [] - [rn/view - {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [:<> - [rn/view - {:style {:align-items :center - :padding 16}} - [rn/touchable-opacity {:on-press #(reset! visible true)} - [rn/view - {:style {:padding-horizontal 16 - :padding-vertical 8 - :border-radius 4 - :background-color (:interactive-01 @colors/theme)}} - [quo/text {:color :secondary-inverse} - (str "Open sheet: " @visible)]]]] - - [quo/bottom-sheet - (merge @state - {:visible? @visible - :on-cancel #(reset! visible false)}) - [rn/view - {:style {:height (if @scrollable 1200 400) - :justify-content :center - :align-items :center}} - [rn/touchable-opacity {:on-press #(reset! visible false)} - [quo/text {:color :link} "Close"]] - [rn/touchable-opacity - {:on-press #(swap! scrollable not) - :style {:padding-vertical 16}} - [quo/text {:color :link} "Toggle size"]] - [quo/text "Hello world!"]]]]]))) - -(defn preview - [] - (fn [] - [rn/view - {:background-color (:ui-background @colors/theme) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]])) diff --git a/src/quo/previews/button.cljs b/src/quo/previews/button.cljs deleted file mode 100644 index 5d298e034c..0000000000 --- a/src/quo/previews/button.cljs +++ /dev/null @@ -1,85 +0,0 @@ -(ns quo.previews.button - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.previews.preview :as preview] - [quo.react-native :as rn] - [reagent.core :as reagent])) - -(def descriptor - [{:label "Type:" - :key :type - :type :select - :options [{:key :primary - :value "Primary"} - {:key :secondary - :value "Secondary"} - {:key :icon - :value "Icon"}]} - {:label "Theme:" - :key :theme - :type :select - :options [{:key :main - :value "Main"} - {:key :negative - :value "Negative"} - {:key :positive - :value "Positive"} - {:key :accent - :value "Accent"}]} - {:label "After icon:" - :key :after - :type :boolean} - {:label "Before icon:" - :key :before - :type :boolean} - {:label "Disabled:" - :key :disabled - :type :boolean} - {:label "Label" - :key :label - :type :text}]) - -(defn cool-preview - [] - (let [state (reagent/atom {:label "Press Me" - :type :primary - :theme :main - :icon :main-icons/share}) - theme (reagent/cursor state [:theme]) - label (reagent/cursor state [:label]) - before (reagent/cursor state [:before]) - after (reagent/cursor state [:after])] - (fn [] - [rn/view - {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view - {:padding-vertical 16 - :flex-direction :row - :justify-content :center} - [quo/button - (merge (dissoc @state - :theme - :before - :after) - {:on-press #(println "Hello world!")} - (when @theme - {:theme @theme}) - (when @before - {:before :main-icons/back}) - (when @after - {:after :main-icons/next})) - @label]]]))) - -(defn preview-button - [] - [rn/view - {:background-color (:ui-background @colors/theme) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/quo/previews/controls.cljs b/src/quo/previews/controls.cljs deleted file mode 100644 index ce7cf33212..0000000000 --- a/src/quo/previews/controls.cljs +++ /dev/null @@ -1,55 +0,0 @@ -(ns quo.previews.controls - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.react-native :as rn] - [reagent.core :as reagent])) - -(defn preview - [] - (let [switch-state (reagent/atom true) - radio-state (reagent/atom true) - checkbox-state (reagent/atom true)] - (fn [] - [rn/view - {:background-color (:ui-background @colors/theme) - :flex 1} - [rn/view - {:padding 20 - :flex-direction :row - :align-items :center - :justify-content :space-between} - [rn/touchable-opacity - {:style {:margin-vertical 10 - :padding 10} - :on-press #(swap! switch-state not)} - [quo/text (str "Switch state: " @switch-state)]] - [quo/switch - {:value @switch-state - :on-change #(reset! switch-state %)}]] - - [rn/view - {:padding 20 - :flex-direction :row - :align-items :center - :justify-content :space-between} - [rn/touchable-opacity - {:style {:margin-vertical 10 - :padding 10} - :on-press #(swap! radio-state not)} - [quo/text (str "Radio state: " @radio-state)]] - [quo/radio - {:value @radio-state - :on-change #(reset! radio-state %)}]] - [rn/view - {:padding 20 - :flex-direction :row - :align-items :center - :justify-content :space-between} - [rn/touchable-opacity - {:style {:margin-vertical 10 - :padding 10} - :on-press #(swap! checkbox-state not)} - [quo/text (str "Checkbox state: " @checkbox-state)]] - [quo/checkbox - {:value @checkbox-state - :on-change #(reset! checkbox-state %)}]]]))) diff --git a/src/quo/previews/header.cljs b/src/quo/previews/header.cljs deleted file mode 100644 index 05bc37f335..0000000000 --- a/src/quo/previews/header.cljs +++ /dev/null @@ -1,51 +0,0 @@ -(ns quo.previews.header - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.react-native :as rn]) - (:require-macros [quo.previews.preview :as preview])) - -(def accessories - [nil - [{:icon :main-icons/close - :on-press identity}] - [{:icon :main-icons/close - :on-press identity} - {:icon :main-icons/add - :on-press identity}] - [{:icon :main-icons/add - :on-press identity} - {:label "Text" - :on-press identity}] - [{:label "Text" - :on-press identity}]]) - -(def all-props - (preview/list-comp [left-accessories accessories - right-accessories accessories - title [nil "This is a title" "This is a very long super title"] - subtitle [nil "This is a subtitle"] - title-align [:left :center]] - {:left-accessories left-accessories - :right-accessories right-accessories - :title title - :subtitle subtitle - :title-align title-align})) - -(defn render-item - [props] - [rn/view - {:border-bottom-color "#EEF2F5" - :border-bottom-width 2} - [quo/header props]]) - -(defn preview-header - [] - [rn/view - {:background-color (:ui-background @colors/theme) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :data all-props - :render-fn render-item - :key-fn str}]]) diff --git a/src/quo/previews/icons.cljs b/src/quo/previews/icons.cljs deleted file mode 100644 index 9c04ec219c..0000000000 --- a/src/quo/previews/icons.cljs +++ /dev/null @@ -1,14 +0,0 @@ -(ns quo.previews.icons - (:require [quo.design-system.colors :as colors] - [quo.react-native :as rn] - [status-im.ui.components.icons.icons :as icons])) - -(defn preview - [] - [rn/scroll-view - {:background-color (:ui-background @colors/theme) - :flex 1} - (for [i (keys icons/icons)] - [rn/view {:flex-direction :row} - [icons/icon (keyword i)] - [rn/text i]])]) diff --git a/src/quo/previews/lists.cljs b/src/quo/previews/lists.cljs deleted file mode 100644 index b6770f6ef8..0000000000 --- a/src/quo/previews/lists.cljs +++ /dev/null @@ -1,121 +0,0 @@ -(ns quo.previews.lists - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.previews.preview :as preview] - [quo.react-native :as rn] - [reagent.core :as reagent])) - -(def all-props (preview/list-comp [] {})) - -(defn avatar - [] - [rn/view - {:border-radius 20 - :width 40 - :height 40 - :justify-content :center - :align-items :center - :background-color :red} - [quo/text - {:weight :bold - :size :large} - "T"]]) - -(defn icon-element - [type] - (case type - :icon :main-icons/add-contact - :component [avatar] - nil)) - -(def descriptor - [{:label "Accessory:" - :key :accessory - :type :select - :options [{:key :radio - :value "Radio"} - {:key :checkbox - :value "Checkbox"} - {:key :switch - :value "Switch"} - {:key :text - :value "Text"} - {:key :default - :value "Default"}]} - {:label "Size:" - :key :size - :type :select - :options [{:key :small - :value "Small"} - {:key :default - :value "Default"}]} - {:label "Icon:" - :key :icon - :type :select - :options [{:key :icon - :value "Icon"} - {:key :component - :value "Component"}]} - {:label "Theme:" - :key :theme - :type :select - :options [{:key :main - :value "Main"} - {:key :accent - :value "Accent"} - {:key :negative - :value "Negative"} - {:key :positive - :value "Positive"}]} - {:label "Selectable" - :key :selectable - :type :boolean} - {:label "Chevron" - :key :chevron - :type :boolean} - {:label "Disabled:" - :key :disabled - :type :boolean} - {:label "Title" - :key :title - :type :text} - {:label "Subtitle" - :key :subtitle - :type :text}]) - -(defn render-item - [_] - [rn/view {:style {:padding-vertical 24}}]) - -(defn cool-preview - [] - (let [state (reagent/atom {:title "Title" - :active false}) - icon (reagent/cursor state [:icon]) - active (reagent/cursor state [:active]) - selectable (reagent/cursor state [:selectable])] - (fn [] - [rn/view {:margin-bottom 50} - [rn/view {:padding-horizontal 16} - [preview/customizer state descriptor]] - [rn/view {:padding-vertical 16} - [quo/list-item - (merge (dissoc @state :active :selectable) - (when @selectable - {:active @active - :on-press #(swap! active not)}) - {:accessory-text "Accessory" - :icon (icon-element @icon)})]]]))) - -(defn preview - [] - [rn/view - {:background-color (:ui-background @colors/theme) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :data all-props - :render-fn render-item - :key-fn str}]]) diff --git a/src/quo/previews/main.cljs b/src/quo/previews/main.cljs deleted file mode 100644 index 0dbfaa99e0..0000000000 --- a/src/quo/previews/main.cljs +++ /dev/null @@ -1,92 +0,0 @@ -(ns quo.previews.main - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.previews.bottom-sheet :as bottom-sheet] - [quo.previews.button :as button] - [quo.previews.controls :as controls] - [quo.previews.header :as header] - [quo.previews.icons :as icons] - [quo.previews.lists :as lists] - [quo.previews.text :as text] - [quo.previews.text-input :as text-input] - [quo.previews.tooltip :as tooltip] - [quo.react-native :as rn] - [quo.theme :as theme] - [re-frame.core :as re-frame])) - -(def screens - [{:name :texts - :insets {:top false} - :component text/preview-text} - {:name :tooltip - :insets {:top false} - :component tooltip/preview-tooltip} - {:name :text-input - :insets {:top false} - :component text-input/preview-text} - {:name :headers - :insets {:top false} - :component header/preview-header} - {:name :button - :insets {:top false} - :component button/preview-button} - {:name :lists - :instes {:top false} - :component lists/preview} - {:name :bottom-sheet - :insets {:top false} - :component bottom-sheet/preview} - {:name :controls - :insets {:top false} - :component controls/preview} - {:name :icons - :insets {:top false} - :component icons/preview}]) - -(defn theme-switcher - [] - [rn/view - {:style {:flex-direction :row - :margin-vertical 8 - :border-radius 4 - :background-color (:ui-01 @colors/theme) - :border-width 1 - :border-color (:ui-02 @colors/theme)}} - [rn/touchable-opacity - {:style {:padding 8 - :flex 1 - :justify-content :center - :align-items :center} - :on-press #(theme/set-theme :light)} - [quo/text "Set light theme"]] - [rn/view - {:width 1 - :margin-vertical 4 - :background-color (:ui-02 @colors/theme)}] - [rn/touchable-opacity - {:style {:padding 8 - :flex 1 - :justify-content :center - :align-items :center} - :on-press #(theme/set-theme :dark)} - [quo/text "Set dark theme"]]]) - -(defn main-screen - [] - [rn/scroll-view - {:flex 1 - :padding-vertical 8 - :padding-horizontal 16 - :background-color (:ui-background @colors/theme)} - [theme-switcher] - [rn/view - (for [{:keys [name]} screens] - ^{:key name} - [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])} - [rn/view {:style {:padding-vertical 8}} - [quo/text (str "Preview " name)]]])]]) - -(def main-screens - [{:name :quo-preview - :insets {:top false} - :component main-screen}]) diff --git a/src/quo/previews/preview.clj b/src/quo/previews/preview.clj deleted file mode 100644 index 4a25f2b1d9..0000000000 --- a/src/quo/previews/preview.clj +++ /dev/null @@ -1,10 +0,0 @@ -(ns quo.previews.preview) - -(defmacro list-comp - [[the-binding seq-expr & bindings] body-expr] - (cond (not the-binding) - `(list ~body-expr) - - :else - `(mapcat (fn [~the-binding] (list-comp ~bindings ~body-expr)) - ~seq-expr))) diff --git a/src/quo/previews/preview.cljs b/src/quo/previews/preview.cljs deleted file mode 100644 index b1303f77f3..0000000000 --- a/src/quo/previews/preview.cljs +++ /dev/null @@ -1,199 +0,0 @@ -(ns quo.previews.preview - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.react-native :as rn] - [reagent.core :as reagent]) - (:require-macros quo.previews.preview)) - -(def container - {:flex-direction :row - :padding-vertical 8 - :flex 1 - :align-items :center}) - -(defn touchable-style - [] - {:flex 1 - :align-items :center - :justify-content :center - :padding-horizontal 16 - :height 44}) - -(defn select-style - [] - {:flex 1 - :flex-direction :row - :align-items :center - :padding-horizontal 16 - :height 44 - :border-radius 4 - :background-color (:ui-01 @colors/theme) - :border-width 1 - :border-color (:ui-02 @colors/theme)}) - -(defn select-option-style - [selected] - (merge (select-style) - {:margin-vertical 8 - :justify-content :center} - (if selected - {:background-color (:interactive-02 @colors/theme)} - {:background-color (:ui-01 @colors/theme)}))) - -(def label-style - {:flex 0.4 - :padding-right 8}) - -(defn label-view - [state label] - [rn/view {:style label-style} - [quo/text - (when-let [label-color (:preview-label-color @state)] - {:style {:color label-color}}) - label]]) - -(defn modal-container - [] - {:flex 1 - :justify-content :center - :padding-horizontal 24 - :background-color "rgba(0,0,0,0.4)"}) - -(defn modal-view - [] - {:padding-horizontal 16 - :padding-vertical 8 - :border-radius 8 - :flex-direction :column - :background-color (:ui-background @colors/theme)}) - -(defn customizer-boolean - [{:keys [label state] :as args}] - (let [state* (reagent/cursor state [(:key args)])] - [rn/view {:style container} - [label-view state label] - [rn/view - {:style {:flex-direction :row - :flex 0.6 - :border-radius 4 - :background-color (:ui-01 @colors/theme) - :border-width 1 - :border-color (:ui-02 @colors/theme)}} - [rn/touchable-opacity - {:style (touchable-style) - :on-press #(reset! state* true)} - [quo/text {:color (if @state* :link :secondary)} - "True"]] - [rn/view - {:width 1 - :margin-vertical 4 - :background-color (:ui-02 @colors/theme)}] - [rn/touchable-opacity - {:style (touchable-style) - :on-press #(reset! state* false)} - [quo/text {:color (if (not @state*) :link :secondary)} - "False"]]]])) - -(defn customizer-text - [{:keys [label state] :as args}] - (let [state* (reagent/cursor state [(:key args)])] - [rn/view {:style container} - [label-view state label] - [rn/view {:style {:flex 0.6}} - [quo/text-input - {:value @state* - :show-cancel false - :style {:border-radius 4 - :border-width 1 - :border-color (:ui-02 @colors/theme)} - :on-change-text #(do - (reset! state* %) - (reagent/flush))}]]])) - -(defn value-for-key - [id v] - (:value (first (filter #(= (:key %) id) v)))) - -(defn customizer-select - [] - (let [open (reagent/atom nil)] - (fn [{:keys [label state options] :as args}] - (let [state* (reagent/cursor state [(:key args)]) - selected (value-for-key @state* options)] - [rn/view {:style container} - [label-view state label] - [rn/view {:style {:flex 0.6}} - [rn/modal - {:visible @open - :on-request-close #(reset! open false) - :statusBarTranslucent true - :transparent true - :animation :slide} - [rn/view {:style (modal-container)} - [rn/view {:style (modal-view)} - [rn/scroll-view - (doall - (for [{k :key v :value} options] - ^{:key k} - [rn/touchable-opacity - {:style (select-option-style (= @state* k)) - :on-press #(do - (reset! open false) - (reset! state* k))} - [quo/text {:color (if (= @state* k) :link :secondary)} - v]])) - [rn/view {:flex-direction :row} - [rn/touchable-opacity - {:style (select-option-style false) - :on-press #(do - (reset! state* nil) - (reset! open false))} - [quo/text "Clear"]] - [rn/view {:width 16}] - [rn/touchable-opacity - {:style (select-option-style false) - :on-press #(reset! open false)} - [quo/text "Close"]]]]]]] - - [rn/touchable-opacity - {:style (select-style) - :on-press #(reset! open true)} - (if selected - [quo/text {:color :link} selected] - [quo/text "Select option"]) - [rn/view - {:position :absolute - :right 16 - :top 0 - :bottom 0 - :justify-content :center} - [quo/text "↓"]]]]])))) - -(defn customizer - [state descriptors] - [rn/view - {:style {:flex 1} - :padding-horizontal 16} - (doall - (for [desc descriptors - :let [descriptor (merge desc {:state state})]] - ^{:key (:key desc)} - [:<> - (case (:type desc) - :boolean [customizer-boolean descriptor] - :text [customizer-text descriptor] - :select [customizer-select descriptor] - nil)]))]) - -(comment - [{:label "Show error:" - :key :error - :type :boolean} - {:label "Label:" - :key :label - :type :text} - {:label "Type:" - :key :type - :type :select - :options [{:key :primary :value "Primary"} - {:key :secondary :value "Secondary"}]}]) diff --git a/src/quo/previews/text.cljs b/src/quo/previews/text.cljs deleted file mode 100644 index b0c07f8334..0000000000 --- a/src/quo/previews/text.cljs +++ /dev/null @@ -1,99 +0,0 @@ -(ns quo.previews.text - (:require [quo.animated :as animated] - [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.previews.preview :as preview] - [quo.react-native :as rn] - [reagent.core :as reagent])) - -(def all-props - (preview/list-comp [size [:tiny :small :base :large :x-large :xx-large] - weight [:regular :medium :semi-bold :bold :monospace]] - {:weight weight - :size size})) - -(def descriptor - [{:label "Size:" - :key :size - :type :select - :options [{:key :tiny - :value "Tiny"} - {:key :small - :value "Small"} - {:key :base - :value "Base"} - {:key :large - :value "Large"} - {:key :x-large - :value "X-Large"} - {:key :xx-large - :value "XX-Large"}]} - {:label "Weight:" - :key :weight - :type :select - :options [{:key :regular - :value "Regular"} - {:key :medium - :value "Medium"} - {:key :semi-bold - :value "Semi-bold"} - {:key :bold - :value "Bold"} - {:key :monospace - :value "Monospace"}]} - {:label "Color:" - :key :color - :type :select - :options [{:key :main - :value "main"} - {:key :secondary - :value "secondary"} - {:key :secondary-inverse - :value "secondary-inverse"} - {:key :link - :value "link"} - {:key :negative - :value "negative"} - {:key :positive - :value "positive"}]} - {:label "Animated:" - :key :animated? - :type :boolean}]) - -(defn render-item - [props] - [rn/view - {:style {:padding-vertical 24 - :padding-horizontal 16}} - [quo/text props - (str "Text size " props " number 0 1x2")]]) - -(defn cool-preview - [] - (let [state (reagent/atom {}) - animation (animated/value 0)] - (fn [] - [rn/view - {:margin-bottom 50 - :padding 16} - [animated/code {:exec (animated/set animation (animated/loop* {:duration 1000}))}] - [preview/customizer state descriptor] - [rn/view {:padding-vertical 16} - [quo/text - (merge @state - (when (:animated? @state) - {:opacity animation})) - "This is a demo text 1 2 0 2x2 0x0"]]]))) - -(defn preview-text - [] - [rn/view - {:background-color (:ui-background @colors/theme) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :data all-props - :render-fn render-item - :key-fn str}]]) diff --git a/src/quo/previews/text_input.cljs b/src/quo/previews/text_input.cljs deleted file mode 100644 index 91df8df9e6..0000000000 --- a/src/quo/previews/text_input.cljs +++ /dev/null @@ -1,91 +0,0 @@ -(ns quo.previews.text-input - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.previews.preview :as preview] - [quo.react-native :as rn] - [reagent.core :as reagent])) - -(def all-props - (preview/list-comp [multiline [false true] - label [nil "Input label"] - default-value [nil "Test initial value"] - placeholder [nil "Placeholder value"] - before [nil {:icon :main-icons/search}] - after [nil {:icon :main-icons/close}] - error [nil "Something went wrong!"] - secure [false true] - show-cancel [false true]] - {:label label - :default-value default-value - :placeholder placeholder - :multiline multiline - :before before - :after after - :error error - :show-cancel show-cancel - :secure-text-entry secure})) - -(def descriptor - [{:label "Multiline:" - :key :multiline - :type :boolean} - {:label "Show cancel:" - :key :show-cancel - :type :boolean} - {:label "Secure:" - :key :secure-text-entry - :type :boolean} - {:label "After icon:" - :key :after - :type :boolean} - {:label "Before icon:" - :key :before - :type :boolean} - {:label "Show error:" - :key :error - :type :boolean} - {:label "Label" - :key :label - :type :text}]) - -(defn render-item - [props] - [rn/view - {:style {:padding-horizontal 16 - :padding-vertical 24}} - [quo/text-input props]]) - -(defn cool-preview - [] - (let [state (reagent/atom {:secure false - :show-cancel false - :multiline false - :label "I'm a cool label"}) - before (reagent/cursor state [:before]) - after (reagent/cursor state [:after]) - error (reagent/cursor state [:error])] - (fn [] - [rn/view - {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptor] - [quo/text-input - (merge @state - {:default-value nil - :placeholder "I'm a cool placeholder" - :before (when @before {:icon :main-icons/search}) - :after (when @after {:icon :main-icons/close}) - :error (when @error "Something went wrong!")})]]))) - -(defn preview-text - [] - [rn/view - {:background-color (:ui-background @colors/theme) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :data all-props - :render-fn render-item - :key-fn str}]]) diff --git a/src/quo/previews/tooltip.cljs b/src/quo/previews/tooltip.cljs deleted file mode 100644 index 04e6a0b0e6..0000000000 --- a/src/quo/previews/tooltip.cljs +++ /dev/null @@ -1,38 +0,0 @@ -(ns quo.previews.tooltip - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.react-native :as rn]) - (:require-macros [quo.previews.preview :as preview])) - -(def all-props - (preview/list-comp - [child [[quo/text {:size :small} "Simple text"] - [quo/text - {:color :negative - :size :small} - "Error text"] - [rn/view {:width 100 :height 20 :background-color :red}] - [quo/text - "Just text, but long. Officia autem est repellendus ad quia exercitationem veniam."]]] - child)) - -(defn render-item - [children] - [rn/view {:margin-vertical 50} - [rn/view - {:height 20 - :background-color "rgba(0,0,0,0.1)"}] - [quo/tooltip {} - children]]) - -(defn preview-tooltip - [] - [rn/view - {:background-color (:ui-background @colors/theme) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :data all-props - :render-fn render-item - :key-fn str}]]) diff --git a/src/quo/react.clj b/src/quo/react.clj deleted file mode 100644 index 7947dd34eb..0000000000 --- a/src/quo/react.clj +++ /dev/null @@ -1,30 +0,0 @@ -(ns quo.react) - -(defmacro maybe-js-deps - [deps] - `(if ~deps (into-array ~deps) js/undefined)) - -(defmacro with-deps-check - [[prev-deps] f deps] - `(let [~prev-deps (quo.react/ref ~deps)] - (when (not= @~prev-deps ~deps) - (reset! ~prev-deps ~deps)) - ~f)) - -(defmacro with-effect - "Takes optional vector of dependencies and body to be executed in an effect." - [deps & body] - (let [[deps setup-fn] (if (vector? deps) - [deps body] - [nil (cons deps body)])] - `(effect! #(do ~@setup-fn) ~deps))) - -(defmacro with-layout-effect - "Takes optional vector of dependencies and body to be executed in a layout effect." - [deps & body] - (let [[deps setup-fn] (if (vector? deps) - [deps body] - [nil (cons deps body)])] - `(layout-effect! #(do ~@setup-fn) ~deps))) - - diff --git a/src/quo/react.cljs b/src/quo/react.cljs deleted file mode 100644 index 16f85d3a0c..0000000000 --- a/src/quo/react.cljs +++ /dev/null @@ -1,136 +0,0 @@ -(ns quo.react - (:refer-clojure :exclude [ref]) - (:require ["react" :as react] - [oops.core :refer [oget oset!]]) - (:require-macros [quo.react :refer [with-deps-check maybe-js-deps]])) - -(def create-ref react/createRef) - -(defn current-ref - [ref] - (oget ref "current")) - -;; Inspired from UIX, Rum and Rumext -(defn set-ref-val! - [ref v] - (oset! ref "current" v) - v) - -(defn set-native-props - [^js ref ^js props] - (when-let [curr-ref ^js (current-ref ref)] - (.setNativeProps curr-ref props))) - -(deftype StateHook [value set-value] - cljs.core/IHash - (-hash [o] (goog/getUid o)) - - cljs.core/IDeref - (-deref [_o] - value) - - cljs.core/IReset - (-reset! [_o new-value] - (set-value new-value)) - - cljs.core/ISwap - (-swap! [_o f] - (set-value f)) - (-swap! [_o f a] - (set-value #(f % a))) - (-swap! [_o f a b] - (set-value #(f % a b))) - (-swap! [_o f a b xs] - (set-value #(apply f % a b xs)))) - -(defn state - [value] - (let [[value set-value] (react/useState value) - sh (react/useMemo #(StateHook. value set-value) #js [])] - (react/useMemo (fn [] - (set! (.-value sh) value) - (set! (.-set-value sh) set-value) - sh) - #js [value set-value]))) - -(defn use-ref - [v] - (let [ref (react/useRef v)] - (reify - cljs.core/IHash - (-hash [_] (goog/getUid ref)) - - cljs.core/IDeref - (-deref [_] - (current-ref ref)) - - cljs.core/IReset - (-reset! [_ new-value] - (set-ref-val! ref new-value)) - - cljs.core/ISwap - (-swap! [_ f] - (-reset! ref (f (current-ref ref)))) - (-swap! [_ f a] - (-reset! ref (f (current-ref ref) a))) - (-swap! [_ f a b] - (-reset! ref (f (current-ref ref) a b))) - (-swap! [_ f a b xs] - (-reset! ref (apply f (current-ref ref) a b xs)))))) - -(defn ref - [value] - (let [vref (use-ref value)] - (react/useMemo (fn [] vref) #js []))) - -(defn effect! - ([setup-fn] - (react/useEffect - #(let [ret (setup-fn)] - (if (fn? ret) ret js/undefined)))) - ([setup-fn deps] - (with-deps-check [prev-deps*] - (react/useEffect - (fn [] - (reset! prev-deps* deps) - (let [ret (setup-fn)] - (if (fn? ret) ret js/undefined))) - (maybe-js-deps @prev-deps*)) - deps))) - -(defn layout-effect! - ([setup-fn] - (react/useLayoutEffect - #(let [ret (setup-fn)] - (if (fn? ret) ret js/undefined)))) - ([setup-fn deps] - (with-deps-check [prev-deps*] - (react/useLayoutEffect - (fn [] - (reset! prev-deps* deps) - (let [ret (setup-fn)] - (if (fn? ret) ret js/undefined))) - (maybe-js-deps @prev-deps*)) - deps))) - -(defn callback - ([f] (react/useCallback f)) - ([f deps] - (with-deps-check [prev-deps*] - (react/useCallback f (maybe-js-deps @prev-deps*)) - deps))) - -(defn use-memo - ([f] (react/useMemo f)) - ([f deps] - (with-deps-check [prev-deps*] - (react/useMemo f (maybe-js-deps @prev-deps*)) - deps))) - -(def memo react/memo) - -(defn get-children - [^js children] - (->> children - (react/Children.toArray) - (into []))) diff --git a/src/quo/react_native.cljs b/src/quo/react_native.cljs deleted file mode 100644 index 202bebf8b0..0000000000 --- a/src/quo/react_native.cljs +++ /dev/null @@ -1,200 +0,0 @@ -(ns quo.react-native - (:require ["@react-native-community/hooks" :as hooks] - ["react-native" :as rn] - ["react-native-draggable-flatlist" :default DraggableFlatList] - ["react-native-hole-view" :refer (RNHoleView)] - ["react-native-navigation" :refer (Navigation)] - ["rn-emoji-keyboard" :refer (EmojiKeyboard)] - [cljs-bean.core :as bean] - [quo.platform :as platform] - [reagent.core :as reagent])) - -(def hole-view (reagent/adapt-react-class RNHoleView)) - -(def rn-draggable-flatlist (reagent/adapt-react-class DraggableFlatList)) - -(def emoji-keyboard (reagent/adapt-react-class EmojiKeyboard)) - -(def app-registry (.-AppRegistry rn)) - -(def platform (.-Platform ^js rn)) - -(def find-node-handle (.-findNodeHandle ^js rn)) - -(def view (reagent/adapt-react-class (.-View ^js rn))) -(def image (reagent/adapt-react-class (.-Image rn))) -(def text (reagent/adapt-react-class (.-Text ^js rn))) - -(defn resolve-asset-source - [uri] - (js->clj (.resolveAssetSource ^js (.-Image ^js rn) uri) :keywordize-keys true)) - -(def scroll-view (reagent/adapt-react-class (.-ScrollView ^js rn))) -(def modal (reagent/adapt-react-class (.-Modal ^js rn))) -(def refresh-control (reagent/adapt-react-class (.-RefreshControl ^js rn))) - -(def touchable-opacity (reagent/adapt-react-class (.-TouchableOpacity ^js rn))) -(def touchable-highlight (reagent/adapt-react-class (.-TouchableHighlight ^js rn))) -(def touchable-without-feedback (reagent/adapt-react-class (.-TouchableWithoutFeedback ^js rn))) -(def text-input (reagent/adapt-react-class (.-TextInput ^js rn))) - -(def keyboard-avoiding-view-class (reagent/adapt-react-class (.-KeyboardAvoidingView ^js rn))) - -(def navigation-const (atom nil)) - -(.then (.constants Navigation) - (fn [^js consts] - (reset! navigation-const {:top-bar-height (.-topBarHeight consts) - :bottom-tabs-height (.-bottomTabsHeight consts) - :status-bar-height (.-statusBarHeight consts)}))) - -(defn keyboard-avoiding-view - [] - (let [this (reagent/current-component) - props (reagent/props this)] - (into [keyboard-avoiding-view-class - (merge (when platform/ios? - {:behavior :padding}) - props - {:keyboardVerticalOffset (+ 44 (:status-bar-height @navigation-const))})] - (reagent/children this)))) - -(def status-bar (.-StatusBar ^js rn)) - -(def keyboard (.-Keyboard ^js rn)) - -(def dismiss-keyboard! #(.dismiss ^js keyboard)) - -(def dimensions (.-Dimensions ^js rn)) - -(def pan-responder (.-PanResponder ^js rn)) - -(defn create-pan-responder - [opts] - (.create ^js pan-responder (clj->js opts))) - -(def animated (.-Animated rn)) - -(def subtract (.-subtract ^js animated)) - -(def animated-flat-list-class - (reagent/adapt-react-class (.-FlatList ^js animated))) - -(def animated-view - (reagent/adapt-react-class (.-View ^js animated))) - -(def ui-manager (.-UIManager ^js rn)) - -(def layout-animation (.-LayoutAnimation ^js rn)) -(def configure-next (.-configureNext ^js layout-animation)) -(def create-animation (.-create ^js layout-animation)) - -(def layout-animation-presets - {:ease-in-ease-out (-> ^js layout-animation .-Presets .-easeInEaseOut) - :linear (-> ^js layout-animation .-Presets .-linear) - :spring (-> ^js layout-animation .-Presets .-spring)}) - -(def layout-animation-types - {:spring (-> ^js layout-animation .-Types .-spring) - :linear (-> ^js layout-animation .-Types .-linear) - :ease-in-ease-out (-> ^js layout-animation .-Types .-easeInEaseOut) - :ease-in (-> ^js layout-animation .-Types .-easeIn) - :ease-out (-> ^js layout-animation .-Types .-easeOut)}) - -(def layout-animation-properties - {:opacity (-> ^js layout-animation .-Properties .-opacity) - :scale-x (-> ^js layout-animation .-Properties .-scaleX) - :scale-y (-> ^js layout-animation .-Properties .-scaleY) - :scale-xy (-> ^js layout-animation .-Properties .-scaleXY)}) - -(def custom-animations - {:ease-opacity-200 #js - {:duration 200 - :create #js - {:type (:ease-in-ease-out layout-animation-types) - :property (:opacity layout-animation-properties)} - :update #js - {:type (:ease-in-ease-out layout-animation-types) - :property (:opacity layout-animation-properties)} - :delete #js - {:type (:ease-in-ease-out layout-animation-types) - :property (:opacity layout-animation-properties)}}}) - -(defonce enable-layout-animations - (when platform/android? - (.setLayoutAnimationEnabledExperimental ^js ui-manager true))) - -(def activity-indicator (reagent/adapt-react-class (.-ActivityIndicator ^js rn))) - -;; Flat-list -(def ^:private rn-flat-list (reagent/adapt-react-class (.-FlatList ^js rn))) - -(defn- wrap-render-fn - [f render-data] - (fn [data] - (reagent/as-element [f (.-item ^js data) (.-index ^js data) - (.-separators ^js data) render-data - (.-isActive ^js data) (.-drag ^js data)]))) - -(defn- wrap-on-drag-end-fn - [f] - (fn [data] - (f (.-from ^js data) (.-to ^js data) (.-data ^js data)))) - -(defn- wrap-key-fn - [f] - (fn [data index] - {:post [(some? %)]} - (f data index))) - -(defn base-list-props - [{:keys [key-fn render-fn empty-component header footer separator data render-data on-drag-end-fn] - :as props}] - (merge - {:data (to-array data)} - (when key-fn {:keyExtractor (wrap-key-fn key-fn)}) - (when render-fn {:renderItem (wrap-render-fn render-fn render-data)}) - (when separator {:ItemSeparatorComponent (fn [] (reagent/as-element separator))}) - (when empty-component {:ListEmptyComponent (fn [] (reagent/as-element empty-component))}) - (when header {:ListHeaderComponent (reagent/as-element header)}) - (when footer {:ListFooterComponent (reagent/as-element footer)}) - (when on-drag-end-fn {:onDragEnd (wrap-on-drag-end-fn on-drag-end-fn)}) - (dissoc props :data :header :footer :empty-component :separator :render-fn :key-fn :on-drag-end-fn))) - -(defn flat-list - [props] - [rn-flat-list (base-list-props props)]) - -(defn draggable-flat-list - [props] - [rn-draggable-flatlist (base-list-props props)]) - -(defn animated-flat-list - [props] - [animated-flat-list-class (base-list-props props)]) -;; Hooks - -(defn use-window-dimensions - [] - (let [window (rn/useWindowDimensions)] - {:font-scale (.-fontScale window) - :height (.-height ^js window) - :scale (.-scale ^js window) - :width (.-width ^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/quo/spec.cljs b/src/quo/spec.cljs deleted file mode 100644 index 75a6bf5e70..0000000000 --- a/src/quo/spec.cljs +++ /dev/null @@ -1,4 +0,0 @@ -(ns quo.spec - (:require [clojure.spec.alpha :as s])) - -(s/def ::style (s/nilable map?)) diff --git a/src/quo/theme.cljs b/src/quo/theme.cljs deleted file mode 100644 index b07cf19e50..0000000000 --- a/src/quo/theme.cljs +++ /dev/null @@ -1,21 +0,0 @@ -(ns quo.theme - (:require [quo.design-system.colors :as colors] - [reagent.core :as reagent])) - -(def theme (reagent/atom nil)) - -(defn dark? - [] - (= :dark @theme)) - -(defn get-theme - [] - @theme) - -(defn set-theme - [value] - (reset! theme value) - (reset! colors/theme (case value - :dark colors/dark-theme - colors/light-theme)) - (colors/set-legacy-theme-type value)) diff --git a/src/quo2/components/notifications/activity_log/view.cljs b/src/quo2/components/notifications/activity_log/view.cljs index 9dd4e1fa13..ad98462417 100644 --- a/src/quo2/components/notifications/activity_log/view.cljs +++ b/src/quo2/components/notifications/activity_log/view.cljs @@ -1,11 +1,11 @@ (ns quo2.components.notifications.activity-log.view (:require [clojure.string :as string] - [quo.core :as quo] [quo2.components.buttons.button.view :as button] [quo2.components.icon :as icon] [quo2.components.markdown.text :as text] [quo2.components.notifications.activity-log.style :as style] [quo2.components.tags.status-tags :as status-tags] + [quo2.components.inputs.input.view :as input] [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] @@ -29,20 +29,17 @@ colors/neutral-40 colors/danger-60)}} (str (count @reply-input) "/" max-reply-length)]] - [rn/view - ;; TODO(@ilmotta): Replace with quo2 component when available. - ;; https://github.com/status-im/status-mobile/issues/14364 - [quo/text-input - {:on-change-text #(do (reset! reply-input %) - (when on-update-reply - (on-update-reply %))) - :auto-capitalize :none - :auto-focus false - :accessibility-label :identity-verification-reply-text-input - :placeholder (i18n/label :t/type-something) - :return-key-type :none - :multiline false - :auto-correct false}]]]) + [input/input + {:on-change-text #(do (reset! reply-input %) + (when on-update-reply + (on-update-reply %))) + :auto-capitalize :none + :auto-focus false + :accessibility-label :identity-verification-reply-text-input + :placeholder (i18n/label :t/type-something) + :return-key-type :none + :multiline false + :auto-correct false}]]) (defn- activity-icon [icon] diff --git a/src/quo2/components/settings/reorder_item/items/item_skeleton.cljs b/src/quo2/components/settings/reorder_item/items/item_skeleton.cljs index 2a8fe73826..b525011972 100644 --- a/src/quo2/components/settings/reorder_item/items/item_skeleton.cljs +++ b/src/quo2/components/settings/reorder_item/items/item_skeleton.cljs @@ -1,5 +1,5 @@ (ns quo2.components.settings.reorder-item.items.item-skeleton - (:require [quo.react-native :as rn] + (:require [react-native.core :as rn] [quo2.components.settings.reorder-item.style :as style])) (defn view diff --git a/src/quo2/components/settings/reorder_item/items/item_tabs.cljs b/src/quo2/components/settings/reorder_item/items/item_tabs.cljs index 7a668b5150..8d99553145 100644 --- a/src/quo2/components/settings/reorder_item/items/item_tabs.cljs +++ b/src/quo2/components/settings/reorder_item/items/item_tabs.cljs @@ -1,7 +1,7 @@ (ns quo2.components.settings.reorder-item.items.item-tabs (:require [quo2.components.tabs.segmented-tab :as quo2] - [quo.react-native :as rn] - [quo.components.text :as text] + [react-native.core :as rn] + [quo2.components.markdown.text :as text] [quo2.components.settings.reorder-item.style :as style] [quo2.components.icon :as quo2-icons])) @@ -17,8 +17,8 @@ {:style style/tab-item-container} tab-image [text/text - {:style style/tab-item-label - :width :medium} + {:size :paragraph-1 + :weight :medium} (:label item)]])) (defn transform-data diff --git a/src/quo2/components/switchers/base_card/view.cljs b/src/quo2/components/switchers/base_card/view.cljs index c0804f8a09..c51334087c 100644 --- a/src/quo2/components/switchers/base_card/view.cljs +++ b/src/quo2/components/switchers/base_card/view.cljs @@ -1,5 +1,5 @@ (ns quo2.components.switchers.base-card.view - (:require [quo.react-native :as rn] + (:require [react-native.core :as rn] [quo2.components.buttons.button.view :as button] [quo2.components.switchers.base-card.style :as style])) diff --git a/src/quo2/components/switchers/card_main_info/view.cljs b/src/quo2/components/switchers/card_main_info/view.cljs index e1b0d991d5..7f28b595b3 100644 --- a/src/quo2/components/switchers/card_main_info/view.cljs +++ b/src/quo2/components/switchers/card_main_info/view.cljs @@ -1,7 +1,7 @@ (ns quo2.components.switchers.card-main-info.view (:require [quo2.components.markdown.text :as text] [quo2.components.switchers.card-main-info.style :as style] - [quo.react-native :as rn])) + [react-native.core :as rn])) (defn view [{:keys [title subtitle]}] diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs index 940422a901..d2e6dafe10 100644 --- a/src/react_native/core.cljs +++ b/src/react_native/core.cljs @@ -44,6 +44,7 @@ (def activity-indicator (reagent/adapt-react-class (.-ActivityIndicator ^js react-native))) (def modal (reagent/adapt-react-class (.-Modal ^js react-native))) +(def refresh-control (reagent/adapt-react-class (.-RefreshControl ^js react-native))) (def keyboard ^js (.-Keyboard ^js react-native)) diff --git a/src/status_im/bottom_sheet/view.cljs b/src/status_im/bottom_sheet/view.cljs index b44adecae3..35ce15b872 100644 --- a/src/status_im/bottom_sheet/view.cljs +++ b/src/status_im/bottom_sheet/view.cljs @@ -1,6 +1,6 @@ (ns status-im.bottom-sheet.view (:require [oops.core :refer [oget]] - [quo.react :as react] + [react-native.core :as react] [status-im.bottom-sheet.styles :as styles] [re-frame.core :as re-frame] [react-native.background-timer :as timer] @@ -153,57 +153,57 @@ handle-comp [gesture/gesture-detector {:gesture bottom-sheet-gesture} [handle-view window-width override-theme]]] - (react/effect! #(do - (cond - (and - (nil? @show-bottom-sheet?) - visible? - (some? @content-height) - (> @content-height 0)) - (reset! show-bottom-sheet? true) + (react/use-effect #(do + (cond + (and + (nil? @show-bottom-sheet?) + visible? + (some? @content-height) + (> @content-height 0)) + (reset! show-bottom-sheet? true) - (and @show-bottom-sheet? (not visible?)) - (close-bottom-sheet))) - [@show-bottom-sheet? @content-height visible?]) - (react/effect! #(do - (when @show-bottom-sheet? - (cond - keyboard-shown - (do - (reset! keyboard-was-shown? true) - (reset! expanded? true)) - (and @keyboard-was-shown? (not keyboard-shown)) - (reset! expanded? false)))) - [@show-bottom-sheet? @keyboard-was-shown? keyboard-shown]) - (react/effect! #(do - (when-not @gesture-running? - (cond - @show-bottom-sheet? - (if @expanded? - (do - (reanimated/set-shared-value - bottom-sheet-dy - (with-animation (+ bg-height-expanded (.-value pan-y)))) - ;; Workaround for - ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741 - ;; withTiming/withSpring callback not working on-expanded should - ;; be called as a callback of with-animation instead, once this - ;; issue has been resolved - (timer/set-timeout on-expanded animation-delay)) - (do - (reanimated/set-shared-value - bottom-sheet-dy - (with-animation (+ bg-height (.-value pan-y)))) - ;; Workaround for - ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741 - ;; withTiming/withSpring callback not working on-collapsed should - ;; be called as a callback of with-animation instead, once this - ;; issue has been resolved - (timer/set-timeout on-collapsed animation-delay))) + (and @show-bottom-sheet? (not visible?)) + (close-bottom-sheet))) + [@show-bottom-sheet? @content-height visible?]) + (react/use-effect #(do + (when @show-bottom-sheet? + (cond + keyboard-shown + (do + (reset! keyboard-was-shown? true) + (reset! expanded? true)) + (and @keyboard-was-shown? (not keyboard-shown)) + (reset! expanded? false)))) + [@show-bottom-sheet? @keyboard-was-shown? keyboard-shown]) + (react/use-effect #(do + (when-not @gesture-running? + (cond + @show-bottom-sheet? + (if @expanded? + (do + (reanimated/set-shared-value + bottom-sheet-dy + (with-animation (+ bg-height-expanded (.-value pan-y)))) + ;; Workaround for + ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741 + ;; withTiming/withSpring callback not working on-expanded should + ;; be called as a callback of with-animation instead, once this + ;; issue has been resolved + (timer/set-timeout on-expanded animation-delay)) + (do + (reanimated/set-shared-value + bottom-sheet-dy + (with-animation (+ bg-height (.-value pan-y)))) + ;; Workaround for + ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741 + ;; withTiming/withSpring callback not working on-collapsed should + ;; be called as a callback of with-animation instead, once this + ;; issue has been resolved + (timer/set-timeout on-collapsed animation-delay))) - (= @show-bottom-sheet? false) - (reanimated/set-shared-value bottom-sheet-dy (with-animation 0))))) - [@show-bottom-sheet? @expanded? @gesture-running?]) + (= @show-bottom-sheet? false) + (reanimated/set-shared-value bottom-sheet-dy (with-animation 0))))) + [@show-bottom-sheet? @expanded? @gesture-running?]) [:<> [rn/touchable-without-feedback {:on-press (when backdrop-dismiss? close-bottom-sheet)} diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs index 6f37100690..1a998041aa 100644 --- a/src/status_im/communities/core.cljs +++ b/src/status_im/communities/core.cljs @@ -2,7 +2,7 @@ (:require [clojure.set :as set] [clojure.string :as string] [clojure.walk :as walk] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [quo2.foundations.colors :as quo2.colors] [re-frame.core :as re-frame] [status-im.utils.deprecated-types :as types] diff --git a/src/status_im/multiaccounts/core.cljs b/src/status_im/multiaccounts/core.cljs index d4d7fa483a..100e47d1f4 100644 --- a/src/status_im/multiaccounts/core.cljs +++ b/src/status_im/multiaccounts/core.cljs @@ -1,6 +1,6 @@ (ns status-im.multiaccounts.core (:require [clojure.string :as string] - [quo.platform :as platform] + [react-native.platform :as platform] [re-frame.core :as re-frame] [status-im.bottom-sheet.events :as bottom-sheet] [status-im.multiaccounts.update.core :as multiaccounts.update] diff --git a/src/status_im/multiaccounts/create/core.cljs b/src/status_im/multiaccounts/create/core.cljs index cfabd634aa..c30f91cc54 100644 --- a/src/status_im/multiaccounts/create/core.cljs +++ b/src/status_im/multiaccounts/create/core.cljs @@ -1,5 +1,5 @@ (ns status-im.multiaccounts.create.core - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :as constants] [status-im.data-store.settings :as data-store.settings] diff --git a/src/status_im/notifications/android.cljs b/src/status_im/notifications/android.cljs new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/status_im/notifications/core.cljs b/src/status_im/notifications/core.cljs new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/status_im/notifications/local.cljs b/src/status_im/notifications/local.cljs new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/status_im/react_native/resources.cljs b/src/status_im/react_native/resources.cljs index 23f00ced08..4ce804a6b8 100644 --- a/src/status_im/react_native/resources.cljs +++ b/src/status_im/react_native/resources.cljs @@ -1,5 +1,5 @@ (ns status-im.react-native.resources - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def ui {:empty-chats-header (js/require "../resources/images/ui/empty-chats-header.png") diff --git a/src/status_im/ui/components/accordion.cljs b/src/status_im/ui/components/accordion.cljs index f60d6141ae..4f87cc1693 100644 --- a/src/status_im/ui/components/accordion.cljs +++ b/src/status_im/ui/components/accordion.cljs @@ -1,9 +1,9 @@ (ns status-im.ui.components.accordion - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [reagent.core :as reagent] [status-im.ui.components.icons.icons :as icons] - [status-im.ui.components.react :as react])) + [status-im.ui.components.react :as react] + [status-im.ui.components.list.item :as list.item])) (defn drop-down-icon [{:keys [opened? dropdown-margin-left]}] @@ -36,7 +36,7 @@ (merge {:padding-vertical padding-vertical} (when @opened? open-container-style)) (if (string? title) - [quo/list-item + [list.item/list-item {:title title :icon icon :on-press on-press diff --git a/src/status_im/ui/components/animated_header.cljs b/src/status_im/ui/components/animated_header.cljs new file mode 100644 index 0000000000..f706b5a247 --- /dev/null +++ b/src/status_im/ui/components/animated_header.cljs @@ -0,0 +1,68 @@ +(ns status-im.ui.components.animated-header + (:require [oops.core :refer [oget]] + [status-im.ui.components.header :as header] + [status-im.ui.components.colors :as colors] + [react-native.platform :as platform] + [reagent.core :as reagent] + [react-native.safe-area :as safe-area] + [react-native.core :as rn])) + +(defn header-wrapper-style + [{:keys [offset]}] + (merge + {:background-color (:ui-background @colors/theme)} + (when (and offset platform/ios?) + {:z-index 2 + :shadow-radius 16 + :shadow-color (:shadow-01 @colors/theme) + :shadow-offset {:width 0 :height 4}}))) + +(defn title-style + [layout] + {:flex 1 + :justify-content :center + :padding-right (get-in layout [:right :width])}) + +(defn header-container + [] + (let [layout (reagent/atom {}) + offset (reagent/atom 0) + on-layout (fn [evt] + (reset! offset (oget evt "nativeEvent" "layout" "height")))] + (fn [{:keys [extended-header refresh-control refreshing-sub refreshing-counter] :as props} children] + [rn/view + {:flex 1 + :pointer-events :box-none} + [rn/view + {:pointer-events :box-none + :style (header-wrapper-style {:offset @offset})} + [header/header + (merge + {:get-layout (fn [el l] (swap! layout assoc el l)) + :border-bottom false + :title-align :left} + (dissoc props :extended-header))]] + (into [rn/scroll-view + {:refreshControl (when refresh-control + (refresh-control + (and @refreshing-sub + @refreshing-counter))) + :style {:z-index 1} + :scrollEventThrottle 16} + [rn/view {:pointer-events :box-none} + [rn/view + {:pointer-events :box-none + :on-layout on-layout} + [extended-header + {:offset @offset}]]]] + children)]))) + +(defn header + [{:keys [use-insets] :as props} & children] + (if use-insets + [header-container + (-> props + (dissoc :use-insets) + (assoc :insets (safe-area/get-insets))) + children] + [header-container props children])) diff --git a/src/status_im/ui/components/badge.cljs b/src/status_im/ui/components/badge.cljs index d82f1cc5e8..fff8862dc9 100644 --- a/src/status_im/ui/components/badge.cljs +++ b/src/status_im/ui/components/badge.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.badge - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [utils.i18n :as i18n] [status-im.ui.components.react :as react])) diff --git a/src/status_im/ui/components/bottom_panel/views.cljs b/src/status_im/ui/components/bottom_panel/views.cljs index 801c4db7d1..3c9722a57e 100644 --- a/src/status_im/ui/components/bottom_panel/views.cljs +++ b/src/status_im/ui/components/bottom_panel/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.components.bottom-panel.views (:require ["react-native" :refer (BackHandler)] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [reagent.core :as reagent] [status-im.ui.components.animation :as anim] [status-im.ui.components.react :as react] diff --git a/src/quo/components/button/view.cljs b/src/status_im/ui/components/button/view.cljs similarity index 51% rename from src/quo/components/button/view.cljs rename to src/status_im/ui/components/button/view.cljs index dd6f7601bb..f9ffbc5380 100644 --- a/src/quo/components/button/view.cljs +++ b/src/status_im/ui/components/button/view.cljs @@ -1,10 +1,8 @@ -(ns quo.components.button.view - (:require [quo.components.animated.pressable :as animation] - [quo.components.text :as text] ;; FIXME: - [quo.design-system.colors :as colors] - [quo.design-system.spacing :as spacing] - [quo.haptic :as haptic] - [quo.react-native :as rn] +(ns status-im.ui.components.button.view + (:require [status-im.ui.components.text :as text] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.spacing :as spacing] + [react-native.core :as rn] [status-im.ui.components.icons.icons :as icons])) (defn style-container @@ -58,68 +56,55 @@ (defn button [{:keys [on-press disabled type theme before after - haptic-feedback haptic-type on-long-press on-press-start - accessibility-label loading border-radius style test-ID] - :or {theme :main - type :primary - haptic-feedback true - border-radius 8 - haptic-type :selection}} + on-long-press accessibility-label loading border-radius style test-ID] + :or {theme :main + type :primary + border-radius 8}} children] (let [theme' (cond disabled :disabled :else theme) {:keys [icon-color background-color text-color border-color]} - (themes theme') - - optional-haptic (fn [] - (when haptic-feedback - (haptic/trigger haptic-type)))] - [animation/pressable - (merge {:bg-color background-color - :border-radius border-radius - :type type - :disabled disabled - :accessibility-label accessibility-label} - (when border-color - {:border-color border-color - :border-width 1}) - (when on-press - {:on-press (fn [] - (optional-haptic) - (on-press))}) + (themes theme')] + (println "theme" theme' background-color) + [rn/touchable-without-feedback + (merge (when on-press + {:on-press on-press}) (when on-long-press - {:on-long-press (fn [] - (optional-haptic) - (on-long-press))}) - (when on-press-start - {:on-press-start (fn [] - (optional-haptic) - (on-press-start))})) - [rn/view {:test-ID test-ID :style (merge (style-container type) style)} - (when before - [rn/view - [icons/icon before {:color icon-color}]]) - (when loading - [rn/view {:style {:position :absolute}} - [rn/activity-indicator]]) - [rn/view - {:style (merge (content-style type) - (when loading - {:opacity 0}))} - (cond - (= type :icon) - [icons/icon children {:color icon-color}] + {:on-long-press on-long-press})) + [rn/view + (merge {:background-color background-color + :border-radius border-radius + :type type + :disabled disabled + :accessibility-label accessibility-label} + (when border-color + {:border-color border-color + :border-width 1})) + [rn/view {:test-ID test-ID :style (merge (style-container type) style)} + (when before + [rn/view + [icons/icon before {:color icon-color}]]) + (when loading + [rn/view {:style {:position :absolute}} + [rn/activity-indicator]]) + [rn/view + {:style (merge (content-style type) + (when loading + {:opacity 0}))} + (cond + (= type :icon) + [icons/icon children {:color icon-color}] - (string? children) - [text/text - {:weight :medium - :number-of-lines 1 - :style {:color text-color}} - children] + (string? children) + [text/text + {:weight :medium + :number-of-lines 1 + :style {:color text-color}} + children] - (vector? children) - children)] - (when after - [rn/view - [icons/icon after {:color icon-color}]])]])) + (vector? children) + children)] + (when after + [rn/view + [icons/icon after {:color icon-color}]])]]])) diff --git a/src/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index 3a5a318919..b8c5b52315 100644 --- a/src/status_im/ui/components/chat_icon/screen.cljs +++ b/src/status_im/ui/components/chat_icon/screen.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.components.chat-icon.screen (:require [clojure.string :as string] - [quo.design-system.colors :as colors] - [quo.react-native :as rn] + [status-im.ui.components.colors :as colors] + [react-native.core :as rn] [quo2.components.avatars.user-avatar.style :as user-avatar.style] [quo2.core :as quo] [quo2.theme :as theme] diff --git a/src/status_im/ui/components/chat_icon/styles.cljs b/src/status_im/ui/components/chat_icon/styles.cljs index 6ef0b4bef8..5b1ecfa39b 100644 --- a/src/status_im/ui/components/chat_icon/styles.cljs +++ b/src/status_im/ui/components/chat_icon/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.chat-icon.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.emoji-thumbnail.utils :as emoji-utils])) (defn default-chat-icon diff --git a/src/status_im/ui/components/checkbox/styles.cljs b/src/status_im/ui/components/checkbox/styles.cljs index 2ce6b68c1f..bf0472dc99 100644 --- a/src/status_im/ui/components/checkbox/styles.cljs +++ b/src/status_im/ui/components/checkbox/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.checkbox.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def wrapper {:width 24 :height 24 :align-items :center :justify-content :center}) diff --git a/src/status_im/ui/components/checkbox/view.cljs b/src/status_im/ui/components/checkbox/view.cljs index 9a58627069..84942e4f18 100644 --- a/src/status_im/ui/components/checkbox/view.cljs +++ b/src/status_im/ui/components/checkbox/view.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.checkbox.view - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.checkbox.styles :as styles] [status-im.ui.components.icons.icons :as icons] [status-im.ui.components.react :as react])) diff --git a/src/quo/design_system/colors.cljs b/src/status_im/ui/components/colors.cljs similarity index 96% rename from src/quo/design_system/colors.cljs rename to src/status_im/ui/components/colors.cljs index a4e4113625..9f919416bd 100644 --- a/src/quo/design_system/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -1,4 +1,4 @@ -(ns quo.design-system.colors +(ns status-im.ui.components.colors (:require [clojure.string :as string] [reagent.core :as reagent])) @@ -20,16 +20,16 @@ (def light-theme {:positive-01 "rgba(68,208,88,1)" ; Primary Positive, text, icons color :positive-02 "rgba(78,188,96,0.1)" ; Secondary Positive, Supporting color for success - ; illustrations + ; illustrations :positive-03 "rgba(78,188,96,1)" ; Lighter Positive, Supporting color for success illustrations :negative-01 "rgba(255,45,85,1)" ; Primary Negative, text, icons color :negative-02 "rgba(255,45,85,0.1))" ; Secondary Negative, Supporting color for errors - ; illustrations + ; illustrations :warning-01 "rgba(255, 202, 15, 1)" :warning-02 "rgba(255, 202, 15, 0.1)" :interactive-01 "rgba(67,96,223,1)" ; Accent color, buttons, own message, actions,active state :interactive-02 "rgba(236,239,252,1)" ; Light Accent, buttons background, actions background, - ; messages + ; messages :interactive-03 "rgba(255,255,255,0.1)" ; Background for interactive above accent :interactive-04 "rgba(147,155,161,1)" ; Disabled state :ui-background "rgba(255,255,255,1)" ; Default view background @@ -135,7 +135,7 @@ (def black (:text-01 light-theme)) ;; Used as the default text color (def black-persist (:ui-background dark-theme)) ;; this doesn't with theme (def black-transparent (:ui-02 light-theme)) ;; Used as background color for rounded button on dark background and as background - ;; color for containers like "Backup recovery phrase" +;; color for containers like "Backup recovery phrase" (def black-transparent-20 (:backdrop light-theme)) ; accounts divider (def black-transparent-40 (:backdrop light-theme)) (def black-transparent-40-persist (:backdrop light-theme)) @@ -145,7 +145,7 @@ ;; DARK GREY (def gray (:text-02 light-theme)) ;; Dark grey, used as a background for a light foreground and as - ;; section header and secondary text color +;; section header and secondary text color (def gray-transparent-10 (alpha gray 0.1)) (def gray-transparent-40 (alpha gray 0.4)) ;; LIGHT GREY diff --git a/src/status_im/ui/components/common/styles.cljs b/src/status_im/ui/components/common/styles.cljs index 50717a1704..16b55e26d5 100644 --- a/src/status_im/ui/components/common/styles.cljs +++ b/src/status_im/ui/components/common/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.common.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (defn logo-container [size] diff --git a/src/status_im/ui/components/connectivity/view.cljs b/src/status_im/ui/components/connectivity/view.cljs index 25fa666247..fed486de6c 100644 --- a/src/status_im/ui/components/connectivity/view.cljs +++ b/src/status_im/ui/components/connectivity/view.cljs @@ -1,11 +1,12 @@ (ns status-im.ui.components.connectivity.view (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.animation :as animation] - [status-im.ui.components.react :as react]) + [status-im.ui.components.react :as react] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views :refer [defview letsubs]])) (defn easing @@ -93,14 +94,14 @@ [quo/header {:title (i18n/label :t/connection-status) :border-bottom false}] [quo/list-header (i18n/label :t/peer-to-peer)] (if (= peers :offline) - [quo/list-item + [list.item/list-item {:title (i18n/label :t/not-connected-to-peers) :accessibility-label "not-connected-to-peers" :subtitle (i18n/label :t/unable-to-send-messages) :subtitle-max-lines 2 :theme :negative :icon :main-icons/network}] - [quo/list-item + [list.item/list-item {:title (str (i18n/label :t/connected-to) " " peers-count " " (string/lower-case (i18n/label :t/peers))) @@ -112,40 +113,40 @@ [quo/list-header (i18n/label :t/history-nodes)] (cond (#{:error :offline} node) - [quo/list-item + [list.item/list-item {:title (i18n/label :t/not-connected-nodes) :accessibility-label "not-connected-nodes" :subtitle (i18n/label :t/unable-to-fetch) :theme :negative :icon :main-icons/mailserver}] (= node :disabled) - [quo/list-item + [list.item/list-item {:title (i18n/label :t/nodes-disabled) :accessibility-label "nodes-disabled" :subtitle (i18n/label :t/unable-to-fetch) :disabled true :icon :main-icons/mailserver}] (and mobile (not sync)) - [quo/list-item + [list.item/list-item {:title (i18n/label :t/waiting-wi-fi) :accessibility-label "waiting-wi-fi" :subtitle (i18n/label :t/unable-to-fetch) :disabled true :icon :main-icons/mailserver}] (= node :connecting) - [quo/list-item + [list.item/list-item {:title (i18n/label :t/connecting) :accessibility-label "connecting" :subtitle (i18n/label :t/unable-to-fetch) :icon :main-icons/mailserver}] (= node :online) - [quo/list-item + [list.item/list-item {:title (str (i18n/label :t/connected-to) " " current-mailserver-name) :accessibility-label "connected-to-mailserver" :subtitle (i18n/label :t/you-can-fetch) :theme :positive :icon :main-icons/mailserver}]) - [quo/list-item + [list.item/list-item {:title (i18n/label :t/settings) :accessibility-label "settings" :theme :accent @@ -160,7 +161,7 @@ :align-items :center :justify-content :center} [react/text {:style {:color colors/gray}} (i18n/label :t/youre-on-mobile-network)]] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/mobile-network-use-mobile) :accessibility-label "mobile-network-use-mobile" :accessory :switch @@ -179,14 +180,3 @@ (if mobile (if sync :main-icons/mobile-sync :main-icons/mobile-sync-off) (when (#{:error :disabled} node) :main-icons/node-offline)))) - -(defview connectivity-button - [] - (letsubs [state [:connectivity/state]] - (when-let [icon (get-icon state)] - [quo/button - {:type :icon - :accessibility-label (str "conn-button-" (name icon)) - :on-press #(re-frame/dispatch [:bottom-sheet/show-sheet-old - {:content connectivity-sheet}]) - :theme (if (= (:peers state) :offline) :negative :secondary)} icon]))) diff --git a/src/status_im/ui/components/controls/styles.cljs b/src/status_im/ui/components/controls/styles.cljs new file mode 100644 index 0000000000..d7a0292a82 --- /dev/null +++ b/src/status_im/ui/components/controls/styles.cljs @@ -0,0 +1,71 @@ +(ns status-im.ui.components.controls.styles + (:require [status-im.ui.components.colors :as colors])) + +(defn switch-style + [value disabled] + {:width 52 + :height 28 + :border-radius 14 + :padding 4 + :background-color (if value + (if disabled + (:interactive-04 @colors/theme) + (:interactive-01 @colors/theme)) + (:ui-01 @colors/theme))}) + +(defn switch-bullet-style + [value hold] + {:width 20 + :height 20 + :border-radius 10 + :opacity (if hold 1 0.6) + :transform [{:translateX (if value 24 0)}] + :background-color colors/white-persist + :elevation 4 + :shadow-opacity 1 + :shadow-radius 16 + :shadow-color (:shadow-01 @colors/theme) + :shadow-offset {:width 0 :height 4}}) + +(defn radio-style + [value disabled] + {:width 20 + :height 20 + :border-radius 10 + :padding 4 + :background-color (if value + (if disabled + (:interactive-04 @colors/theme) + (:interactive-01 @colors/theme)) + (:ui-01 @colors/theme))}) + +(defn radio-bullet-style + [value hold] + {:width 12 + :height 12 + :border-radius 6 + :opacity (if hold 1 0.6) + :transform [{:scale (if value 1 0.0001)}] + :background-color colors/white-persist + :elevation 4 + :shadow-opacity 1 + :shadow-radius 16 + :shadow-color (:shadow-01 @colors/theme) + :shadow-offset {:width 0 :height 4}}) + +(defn checkbox-style + [value disabled] + {:width 18 + :height 18 + :border-radius 4 + :justify-content :center + :align-items :center + :background-color (if value + (if disabled + (:interactive-04 @colors/theme) + (:interactive-01 @colors/theme)) + (:ui-01 @colors/theme))}) + +(defn check-icon-style + [value] + {:opacity (if value 1 0)}) diff --git a/src/status_im/ui/components/controls/view.cljs b/src/status_im/ui/components/controls/view.cljs new file mode 100644 index 0000000000..2aadba8da4 --- /dev/null +++ b/src/status_im/ui/components/controls/view.cljs @@ -0,0 +1,30 @@ +(ns status-im.ui.components.controls.view + (:require [status-im.ui.components.controls.styles :as styles] + [status-im.ui.components.colors :as colors] + [react-native.core :as rn] + [status-im.ui.components.icons.icons :as icons])) + +(defn switch + [{:keys [disabled value]}] + [rn/view + {:style (styles/switch-style value disabled) + :accessibility-label (str "switch-" (if value "on" "off")) + :accessibility-role :switch} + [rn/view {:style (styles/switch-bullet-style value false)}]]) + +(defn radio + [{:keys [disabled value]}] + [rn/view + {:style (styles/radio-style value disabled) + :accessibility-label (str "radio-" (if value "on" "off")) + :accessibility-role :radio} + [rn/view {:style (styles/radio-bullet-style value false)}]]) + +(defn checkbox + [{:keys [value disabled]}] + [rn/view + {:style (styles/checkbox-style value disabled) + :accessibility-label (str "checkbox-" (if value "on" "off")) + :accessibility-role :checkbox} + [rn/view {:style (styles/check-icon-style value)} + [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]]) diff --git a/src/status_im/ui/components/copyable_text.cljs b/src/status_im/ui/components/copyable_text.cljs index f66019fb9c..63d16fbfc9 100644 --- a/src/status_im/ui/components/copyable_text.cljs +++ b/src/status_im/ui/components/copyable_text.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.copyable-text - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [reagent.core :as reagent] [utils.i18n :as i18n] [status-im.ui.components.animation :as animation] diff --git a/src/status_im/ui/components/core.cljs b/src/status_im/ui/components/core.cljs new file mode 100644 index 0000000000..69438238a3 --- /dev/null +++ b/src/status_im/ui/components/core.cljs @@ -0,0 +1,21 @@ +(ns status-im.ui.components.core + (:require [status-im.ui.components.animated-header :as animated-header] + [status-im.ui.components.button.view :as button] + [status-im.ui.components.controls.view :as controls] + [status-im.ui.components.header :as header] + [status-im.ui.components.list.footer :as list-footer] + [status-im.ui.components.list.header :as list-header] + [status-im.ui.components.separator :as separator] + [status-im.ui.components.text :as text] + [status-im.ui.components.text-input :as text-input])) + +(def text text/text) +(def header header/header) +(def animated-header animated-header/header) +(def text-input text-input/text-input) +(def button button/button) +(def list-header list-header/header) +(def list-footer list-footer/footer) + +(def radio controls/radio) +(def separator separator/separator) diff --git a/src/status_im/ui/components/emoji_thumbnail/color_picker.cljs b/src/status_im/ui/components/emoji_thumbnail/color_picker.cljs index dc226e20ce..4e0580b695 100644 --- a/src/status_im/ui/components/emoji_thumbnail/color_picker.cljs +++ b/src/status_im/ui/components/emoji_thumbnail/color_picker.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.emoji-thumbnail.color-picker - (:require [quo.react-native :as rn] + (:require [react-native.core :as rn] [status-im.ui.components.emoji-thumbnail.styles :as styles])) (def emoji-picker-colors-row1 diff --git a/src/status_im/ui/components/emoji_thumbnail/styles.cljs b/src/status_im/ui/components/emoji_thumbnail/styles.cljs index 4d4c3c3aff..78b0f2a494 100644 --- a/src/status_im/ui/components/emoji_thumbnail/styles.cljs +++ b/src/status_im/ui/components/emoji_thumbnail/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.emoji-thumbnail.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.emoji-thumbnail.utils :as emoji-utils] [react-native.platform :as platform])) diff --git a/src/quo/components/header.cljs b/src/status_im/ui/components/header.cljs similarity index 94% rename from src/quo/components/header.cljs rename to src/status_im/ui/components/header.cljs index 9be8106cf6..ebedb7a295 100644 --- a/src/quo/components/header.cljs +++ b/src/status_im/ui/components/header.cljs @@ -1,11 +1,11 @@ -(ns quo.components.header +(ns status-im.ui.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] + [react-native.reanimated :as animated] + [status-im.ui.components.button.view :as button] + [status-im.ui.components.text :as text] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.spacing :as spacing] + [react-native.core :as rn] [reagent.core :as reagent])) (def header-height 56) diff --git a/src/status_im/ui/components/icons/icons.cljs b/src/status_im/ui/components/icons/icons.cljs index 67ec599fc7..c2fc1145c1 100644 --- a/src/status_im/ui/components/icons/icons.cljs +++ b/src/status_im/ui/components/icons/icons.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.icons.icons - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react]) (:refer-clojure :exclude [use]) (:require-macros [status-im.ui.components.icons.icons :as icons])) diff --git a/src/status_im/ui/components/invite/views.cljs b/src/status_im/ui/components/invite/views.cljs index d980713d28..08a26d4bb1 100644 --- a/src/status_im/ui/components/invite/views.cljs +++ b/src/status_im/ui/components/invite/views.cljs @@ -1,7 +1,8 @@ (ns status-im.ui.components.invite.views - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] - [utils.i18n :as i18n])) + [utils.i18n :as i18n] + [status-im.ui.components.list.item :as list.item])) (defn button [] @@ -12,7 +13,7 @@ (defn list-item [{:keys [accessibility-label]}] - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/invite-friends) :icon :main-icons/share diff --git a/src/quo/components/list/footer.cljs b/src/status_im/ui/components/list/footer.cljs similarity index 67% rename from src/quo/components/list/footer.cljs rename to src/status_im/ui/components/list/footer.cljs index 9b5d89f132..16f544573e 100644 --- a/src/quo/components/list/footer.cljs +++ b/src/status_im/ui/components/list/footer.cljs @@ -1,7 +1,7 @@ -(ns quo.components.list.footer - (:require [quo.components.text :as text] - [quo.design-system.spacing :as spacing] - [quo.react-native :as rn] +(ns status-im.ui.components.list.footer + (:require [status-im.ui.components.text :as text] + [status-im.ui.components.spacing :as spacing] + [react-native.core :as rn] [reagent.core :as reagent])) (defn footer diff --git a/src/quo/components/list/header.cljs b/src/status_im/ui/components/list/header.cljs similarity index 69% rename from src/quo/components/list/header.cljs rename to src/status_im/ui/components/list/header.cljs index 773aba4b53..02a95a3e25 100644 --- a/src/quo/components/list/header.cljs +++ b/src/status_im/ui/components/list/header.cljs @@ -1,7 +1,7 @@ -(ns quo.components.list.header - (:require [quo.components.text :as text] - [quo.design-system.spacing :as spacing] - [quo.react-native :as rn] +(ns status-im.ui.components.list.header + (:require [status-im.ui.components.text :as text] + [status-im.ui.components.spacing :as spacing] + [react-native.core :as rn] [reagent.core :as reagent])) (defn header diff --git a/src/quo/components/list/item.cljs b/src/status_im/ui/components/list/item.cljs similarity index 85% rename from src/quo/components/list/item.cljs rename to src/status_im/ui/components/list/item.cljs index 63160a2fb7..f2f6bccbb8 100644 --- a/src/quo/components/list/item.cljs +++ b/src/status_im/ui/components/list/item.cljs @@ -1,14 +1,12 @@ -(ns quo.components.list.item - (:require [quo.components.animated.pressable :as animated] - [quo.components.controls.view :as controls] - [quo.components.text :as text] - [quo.components.tooltip :as tooltip] - [quo.design-system.colors :as colors] - [quo.design-system.spacing :as spacing] - [quo.haptic :as haptic] - [quo.platform :as platform] - [quo.react-native :as rn] - [status-im.ui.components.icons.icons :as icons])) +(ns status-im.ui.components.list.item + (:require [status-im.ui.components.controls.view :as controls] + [status-im.ui.components.text :as text] + [status-im.ui.components.tooltip :as tooltip] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.spacing :as spacing] + [status-im.ui.components.icons.icons :as icons] + [react-native.platform :as platform] + [react-native.core :as rn])) (defn themes [theme] @@ -174,7 +172,7 @@ [title-column props]]) (defn right-side - [{:keys [chevron active disabled accessory accessory-text accessory-style animated-accessory?]}] + [{:keys [chevron active disabled accessory accessory-text accessory-style]}] (when (or chevron accessory) [rn/view {:style (merge {:align-items :center @@ -193,10 +191,7 @@ [rn/view {:style (:tiny spacing/padding-horizontal)} (case accessory :radio [controls/radio {:value active :disabled disabled}] - :checkbox [(if animated-accessory? - controls/animated-checkbox - controls/checkbox) - {:value active :disabled disabled}] + :checkbox [controls/checkbox {:value active :disabled disabled}] :switch [controls/switch {:value active :disabled disabled}] :text [text/text {:color :secondary @@ -218,15 +213,12 @@ left-side-alignment icon-color icon-bg-color title subtitle subtitle-secondary active on-press on-long-press chevron size text-size accessory-text accessibility-label title-accessibility-label accessory-style - haptic-feedback haptic-type error animated animated-accessory? title-text-weight + error title-text-weight container-style active-background-enabled background-color] :or {subtitle-max-lines 1 theme :main - haptic-feedback true - animated platform/ios? - active-background-enabled true - haptic-type :selection}}] + active-background-enabled true}}] (let [theme (if disabled :disabled theme) {:keys [text-color active-background passive-background]} (themes theme) @@ -234,14 +226,10 @@ (:icon-color (themes theme))) icon-bg-color (or icon-bg-color (:icon-bg-color (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-highlight)] [rn/view {:background-color (cond (not= background-color nil) @@ -257,13 +245,9 @@ :accessibility-label accessibility-label :underlay-color (:interactive-02 @colors/theme)} (when on-press - {:on-press (fn [] - (optional-haptic) - (on-press))}) + {:on-press on-press}) (when on-long-press - {:on-long-press (fn [] - (optional-haptic) - (on-long-press))})) + {:on-long-press on-long-press})) [container {:size size :container-style container-style} [left-side {:icon-color icon-color @@ -284,14 +268,13 @@ :subtitle-secondary subtitle-secondary :right-side-present? (or accessory chevron)}] [right-side - {:chevron chevron - :active active - :disabled disabled - :on-press on-press - :accessory-text accessory-text - :animated-accessory? animated-accessory? - :accessory-style accessory-style - :accessory accessory}]]] + {:chevron chevron + :active active + :disabled disabled + :on-press on-press + :accessory-text accessory-text + :accessory-style accessory-style + :accessory accessory}]]] (when error [tooltip/tooltip (merge {:bottom-value 0} diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index 923a07e2f2..0b2ddd0b87 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.list.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def item diff --git a/src/status_im/ui/components/plus_button.cljs b/src/status_im/ui/components/plus_button.cljs index 7a0748965a..5e15bc6117 100644 --- a/src/status_im/ui/components/plus_button.cljs +++ b/src/status_im/ui/components/plus_button.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.components.plus-button - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.icons :as icons] [status-im.ui.components.react :as react])) diff --git a/src/status_im/ui/components/profile_header/view.cljs b/src/status_im/ui/components/profile_header/view.cljs index 5f112a2857..3091f4a3d2 100644 --- a/src/status_im/ui/components/profile_header/view.cljs +++ b/src/status_im/ui/components/profile_header/view.cljs @@ -1,9 +1,9 @@ (ns status-im.ui.components.profile-header.view - (:require [quo.animated :as animated] - [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.design-system.spacing :as spacing] - [quo.react-native :as rn] + (:require [react-native.reanimated :as animated] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.spacing :as spacing] + [react-native.core :as rn] [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.icons.icons :as icons])) diff --git a/src/status_im/ui/components/react.cljs b/src/status_im/ui/components/react.cljs index af612e2ffc..3dd1e5f72c 100644 --- a/src/status_im/ui/components/react.cljs +++ b/src/status_im/ui/components/react.cljs @@ -8,10 +8,10 @@ ["react-native-image-crop-picker" :default image-picker] ["react-native-linear-gradient" :default LinearGradient] ["react-native-navigation" :refer (Navigation)] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [reagent.core :as reagent] [utils.i18n :as i18n] - [status-im.ui.components.typography :as typography] + [status-im.ui.components.text-style :as typography] [react-native.platform :as platform] [status-im.utils.utils :as utils]) (:require-macros [status-im.utils.views :as views])) diff --git a/src/status_im/ui/components/search_input/view.cljs b/src/status_im/ui/components/search_input/view.cljs index 52f38e104d..b3cbf5967a 100644 --- a/src/status_im/ui/components/search_input/view.cljs +++ b/src/status_im/ui/components/search_input/view.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.components.search-input.view - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [reagent.core :as reagent] [utils.i18n :as i18n])) diff --git a/src/quo/components/separator.cljs b/src/status_im/ui/components/separator.cljs similarity index 60% rename from src/quo/components/separator.cljs rename to src/status_im/ui/components/separator.cljs index f175666641..a9c5cb07b1 100644 --- a/src/quo/components/separator.cljs +++ b/src/status_im/ui/components/separator.cljs @@ -1,6 +1,6 @@ -(ns quo.components.separator - (:require [quo.design-system.colors :as colors] - [quo.react-native :as react])) +(ns status-im.ui.components.separator + (:require [status-im.ui.components.colors :as colors] + [react-native.core :as react])) (defn separator [{:keys [color style]}] diff --git a/src/quo/design_system/spacing.cljs b/src/status_im/ui/components/spacing.cljs similarity index 91% rename from src/quo/design_system/spacing.cljs rename to src/status_im/ui/components/spacing.cljs index 3d6197a23e..888495683e 100644 --- a/src/quo/design_system/spacing.cljs +++ b/src/status_im/ui/components/spacing.cljs @@ -1,4 +1,4 @@ -(ns quo.design-system.spacing) +(ns status-im.ui.components.spacing) (def spacing {:x-tiny 4 diff --git a/src/status_im/ui/components/tabs.cljs b/src/status_im/ui/components/tabs.cljs index 87de060ab2..759ef267ef 100644 --- a/src/status_im/ui/components/tabs.cljs +++ b/src/status_im/ui/components/tabs.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.tabs - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react])) (defn tab-title diff --git a/src/quo/components/text.cljs b/src/status_im/ui/components/text.cljs similarity index 89% rename from src/quo/components/text.cljs rename to src/status_im/ui/components/text.cljs index e8b4e828ad..3e20eb34ac 100644 --- a/src/quo/components/text.cljs +++ b/src/status_im/ui/components/text.cljs @@ -1,8 +1,8 @@ -(ns quo.components.text - (:require [quo.animated :as animated] - [quo.design-system.colors :as colors] - [quo.design-system.typography :as typography] - [quo.react-native :as rn] +(ns status-im.ui.components.text + (:require [react-native.reanimated :as animated] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.typography :as typography] + [react-native.core :as rn] [reagent.core :as reagent])) (defn text-style diff --git a/src/quo/components/text_input.cljs b/src/status_im/ui/components/text_input.cljs similarity index 95% rename from src/quo/components/text_input.cljs rename to src/status_im/ui/components/text_input.cljs index 78edd8d176..9198649365 100644 --- a/src/quo/components/text_input.cljs +++ b/src/status_im/ui/components/text_input.cljs @@ -1,13 +1,13 @@ -(ns quo.components.text-input +(ns status-im.ui.components.text-input (:require [clojure.spec.alpha :as s] [oops.core :refer [ocall]] - [quo.components.text :as text] - [quo.components.tooltip :as tooltip] - [quo.design-system.colors :as colors] - [quo.design-system.spacing :as spacing] - [quo.design-system.typography :as typography] - [quo.platform :as platform] - [quo.react-native :as rn] ;; TODO(Ferossgp): Move icon component to lib + [status-im.ui.components.text :as text] + [status-im.ui.components.tooltip :as tooltip] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.spacing :as spacing] + [status-im.ui.components.typography :as typography] + [react-native.platform :as platform] + [react-native.core :as rn] ;; TODO(Ferossgp): Move icon component to lib [reagent.core :as reagent] [status-im.ui.components.icons.icons :as icons])) diff --git a/src/status_im/ui/components/text_style.cljs b/src/status_im/ui/components/text_style.cljs new file mode 100644 index 0000000000..7138b2fe78 --- /dev/null +++ b/src/status_im/ui/components/text_style.cljs @@ -0,0 +1,71 @@ +(ns status-im.ui.components.text-style + (:require [status-im.ui.components.colors :as colors])) + +(def default-font-family "Inter") +(defn default-style + [] + {:color colors/black + :font-weight "400" + :font-size 15}) + +(def typography-styles + {:header {:font-weight "700" + :font-size 22} + + :title-bold {:font-weight "700" + :font-size 17} + + :title {:font-size 17} + + :main-semibold {:font-weight "600"} + + :main-medium {:font-weight "500"} + + :caption {:font-size 12} + + :timestamp {:font-size 10 + :text-transform :uppercase}}) + +(defn get-style + [{:keys [typography] :as style}] + {:pre [(or (nil? typography) (contains? typography-styles typography))]} + (let [{:keys [font-weight font-style] + :as style} + (merge (default-style) + (get typography-styles + typography) + (dissoc style :typography :nested?))] + (-> style + (assoc :font-family + (str default-font-family + "-" + (case font-weight + "400" (when-not (= font-style :italic) + "Regular") + "500" "Medium" + "600" "SemiBold" + "700" "Bold") + (when (= font-style :italic) + "Italic"))) + (dissoc :font-weight :font-style)))) + +(defn get-nested-style + [{:keys [typography] :as style}] + {:pre [(or (nil? typography) (contains? typography-styles typography))]} + (let [{:keys [font-weight font-style] :as style} + (merge (get typography-styles + typography) + (dissoc style :typography))] + (cond-> (dissoc style :font-weight :font-style) + (or font-weight font-style) + (assoc :font-family + (str default-font-family + "-" + (case font-weight + "500" "Medium" + "600" "SemiBold" + "700" "Bold" + (when-not (= font-style :italic) + "Regular")) + (when (= font-style :italic) + "Italic")))))) diff --git a/src/status_im/ui/components/toastable_highlight.cljs b/src/status_im/ui/components/toastable_highlight.cljs index 292236aef8..4edd76ab0d 100644 --- a/src/status_im/ui/components/toastable_highlight.cljs +++ b/src/status_im/ui/components/toastable_highlight.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.components.toastable-highlight "A wrapped touchable highlight that presents a toast when clicked" - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [reagent.core :as reagent] [status-im.ui.components.animation :as animation] [status-im.ui.components.react :as react])) diff --git a/src/status_im/ui/components/toolbar.cljs b/src/status_im/ui/components/toolbar.cljs index 69a011a1c9..7926dd2252 100644 --- a/src/status_im/ui/components/toolbar.cljs +++ b/src/status_im/ui/components/toolbar.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.toolbar - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react])) (defn toolbar-container diff --git a/src/quo/components/tooltip.cljs b/src/status_im/ui/components/tooltip.cljs similarity index 58% rename from src/quo/components/tooltip.cljs rename to src/status_im/ui/components/tooltip.cljs index 19e576379e..7f38e9e126 100644 --- a/src/quo/components/tooltip.cljs +++ b/src/status_im/ui/components/tooltip.cljs @@ -1,17 +1,16 @@ -(ns quo.components.tooltip +(ns status-im.ui.components.tooltip (:require [oops.core :refer [oget]] - [quo.animated :as animated] - [quo.design-system.colors :as colors] - [quo.design-system.spacing :as spacing] - [quo.platform :as platform] ;; FIXME(Ferossgp): Dependecy on status - [quo.react-native :as rn] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.spacing :as spacing] + [react-native.platform :as platform] + [react-native.core :as rn] [reagent.core :as reagent] [status-im.ui.components.icons.icons :as icons])) (def ^:private initial-height 22) (defn tooltip-style - [{:keys [bottom-value animation]}] + [{:keys [bottom-value]}] (merge (:base spacing/padding-horizontal) {:position :absolute @@ -19,8 +18,8 @@ :left 0 :right 0 :top (- bottom-value) - :opacity animation - :transform [{:translateY (animated/mix animation 10 0)}]})) + :opacity 1 + :transform [{:translateY 10}]})) (defn container-style [] @@ -41,27 +40,19 @@ (defn tooltip [] - (let [layout (reagent/atom {:height initial-height}) - animation-v (animated/value 0) - animation (animated/with-timing-transition - animation-v - {:easing (:ease-in animated/easings)}) - on-layout (fn [evt] - (let [width (oget evt "nativeEvent" "layout" "width") - height (oget evt "nativeEvent" "layout" "height")] - (reset! layout {:width width - :height height})))] + (let [layout (reagent/atom {:height initial-height}) + on-layout (fn [evt] + (let [width (oget evt "nativeEvent" "layout" "width") + height (oget evt "nativeEvent" "layout" "height")] + (reset! layout {:width width + :height height})))] (fn [{:keys [bottom-value accessibility-label]} & children] [:<> - [animated/code - {:exec (animated/cond* (animated/not* animation-v) - (animated/set animation-v 1))}] - [animated/view + [rn/view {:style (tooltip-style {:bottom-value (- (get @layout :height) - bottom-value) - :animation animation}) + bottom-value)}) :pointer-events :box-none} - [animated/view + [rn/view {:style (container-style) :pointer-events :box-none} (into [rn/view diff --git a/src/status_im/ui/components/tooltip/styles.cljs b/src/status_im/ui/components/tooltip/styles.cljs index 09f32626dd..d56d2c3ddc 100644 --- a/src/status_im/ui/components/tooltip/styles.cljs +++ b/src/status_im/ui/components/tooltip/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.tooltip.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im2.config :as config] [status-im.utils.styles :as styles])) diff --git a/src/status_im/ui/components/tooltip/views.cljs b/src/status_im/ui/components/tooltip/views.cljs index 96ab0d6732..0b94fe03c4 100644 --- a/src/status_im/ui/components/tooltip/views.cljs +++ b/src/status_im/ui/components/tooltip/views.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.tooltip.views - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.animation :as animation] [status-im.ui.components.icons.icons :as icons] [status-im.ui.components.react :as react] diff --git a/src/status_im/ui/components/topbar.cljs b/src/status_im/ui/components/topbar.cljs index 0ea60ec383..79fa59ad99 100644 --- a/src/status_im/ui/components/topbar.cljs +++ b/src/status_im/ui/components/topbar.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.components.topbar (:require [re-frame.core :as re-frame] - [quo.core :as quo] + [status-im.ui.components.core :as quo] [quo2.foundations.colors :as quo2.colors] [react-native.safe-area :as safe-area])) diff --git a/src/status_im/ui/components/typography.cljs b/src/status_im/ui/components/typography.cljs index 90a839febd..1aaafa6dd5 100644 --- a/src/status_im/ui/components/typography.cljs +++ b/src/status_im/ui/components/typography.cljs @@ -1,71 +1,39 @@ -(ns status-im.ui.components.typography - (:require [quo.design-system.colors :as colors])) +(ns status-im.ui.components.typography) -(def default-font-family "Inter") -(defn default-style - [] - {:color colors/black - :font-weight "400" - :font-size 15}) +(def tiny + {:font-size 10 + :line-height 14}) -(def typography-styles - {:header {:font-weight "700" - :font-size 22} +(def x-small + {:font-size 12 + :line-height 16}) - :title-bold {:font-weight "700" - :font-size 17} +(def small + {:font-size 13 + :line-height 18}) - :title {:font-size 17} +(def base + {:font-size 15 + :line-height 22}) - :main-semibold {:font-weight "600"} +(def large + {:font-size 17 + :line-height 24}) - :main-medium {:font-weight "500"} +(def x-large + {:font-size 22 + :line-height 30}) - :caption {:font-size 12} +(def xx-large + {:font-size 28 + :line-height 38}) - :timestamp {:font-size 10 - :text-transform :uppercase}}) +(def font-regular {:font-family "Inter-Regular"}) ; 400 -(defn get-style - [{:keys [typography] :as style}] - {:pre [(or (nil? typography) (contains? typography-styles typography))]} - (let [{:keys [font-weight font-style] - :as style} - (merge (default-style) - (get typography-styles - typography) - (dissoc style :typography :nested?))] - (-> style - (assoc :font-family - (str default-font-family - "-" - (case font-weight - "400" (when-not (= font-style :italic) - "Regular") - "500" "Medium" - "600" "SemiBold" - "700" "Bold") - (when (= font-style :italic) - "Italic"))) - (dissoc :font-weight :font-style)))) +(def font-medium {:font-family "Inter-Medium"}) ; 500 ff -(defn get-nested-style - [{:keys [typography] :as style}] - {:pre [(or (nil? typography) (contains? typography-styles typography))]} - (let [{:keys [font-weight font-style] :as style} - (merge (get typography-styles - typography) - (dissoc style :typography))] - (cond-> (dissoc style :font-weight :font-style) - (or font-weight font-style) - (assoc :font-family - (str default-font-family - "-" - (case font-weight - "500" "Medium" - "600" "SemiBold" - "700" "Bold" - (when-not (= font-style :italic) - "Regular")) - (when (= font-style :italic) - "Italic")))))) +(def font-semi-bold {:font-family "Inter-SemiBold"}) ; 600 + +(def font-bold {:font-family "Inter-Bold"}) ; 700 + +(def monospace {:font-family "InterStatus-Regular"}) diff --git a/src/status_im/ui/screens/about_app/views.cljs b/src/status_im/ui/screens/about_app/views.cljs index 3c2438de25..cf25e77cdf 100644 --- a/src/status_im/ui/screens/about_app/views.cljs +++ b/src/status_im/ui/screens/about_app/views.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.screens.about-app.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :refer [principles-link privacy-policy-link terms-of-service-link]] @@ -8,7 +7,8 @@ [status-im.ui.components.copyable-text :as copyable-text] [status-im.ui.components.icons.icons :as icons] [status-im.ui.components.react :as react] - [status-im.ui.components.webview :refer [webview]]) + [status-im.ui.components.webview :refer [webview]] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (views/defview about-app @@ -17,14 +17,14 @@ commit-hash [:get-commit-hash] node-version [:get-app-node-version]] [react/scroll-view - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/privacy-policy) :accessibility-label :privacy-policy :on-press #(re-frame/dispatch [:navigate-to :privacy-policy]) :chevron true}] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/terms-of-service) :accessibility-label :terms-of-service @@ -32,7 +32,7 @@ :chevron true}] [copyable-text/copyable-text-view {:copied-text app-version} - [quo/list-item + [list.item/list-item {:size :small :accessibility-label :app-version :title (i18n/label :t/version) @@ -40,7 +40,7 @@ :accessory-text app-version}]] [copyable-text/copyable-text-view {:copied-text commit-hash} - [quo/list-item + [list.item/list-item {:size :small :accessibility-label :commit-hash :title (i18n/label :t/app-commit) @@ -48,7 +48,7 @@ :accessory-text commit-hash}]] [copyable-text/copyable-text-view {:copied-text node-version} - [quo/list-item + [list.item/list-item {:size :small :accessibility-label :node-version :title (i18n/label :t/node-version) diff --git a/src/status_im/ui/screens/advanced_settings/views.cljs b/src/status_im/ui/screens/advanced_settings/views.cljs index 5a326b7b18..92dea96edf 100644 --- a/src/status_im/ui/screens/advanced_settings/views.cljs +++ b/src/status_im/ui/screens/advanced_settings/views.cljs @@ -1,8 +1,9 @@ (ns status-im.ui.screens.advanced-settings.views - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [utils.i18n :as i18n] - [status-im.ui.components.list.views :as list]) + [status-im.ui.components.list.views :as list] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (defn- normal-mode-settings-data @@ -111,7 +112,7 @@ [props] (if (= (:type props) :section-header) [quo/list-header (:title props)] - [quo/list-item props])) + [list.item/list-item props])) (views/defview advanced-settings [] diff --git a/src/status_im/ui/screens/appearance/views.cljs b/src/status_im/ui/screens/appearance/views.cljs index 8f1acf3aaa..0992a421ec 100644 --- a/src/status_im/ui/screens/appearance/views.cljs +++ b/src/status_im/ui/screens/appearance/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.appearance.views (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.react-native.resources :as resources] diff --git a/src/status_im/ui/screens/backup_settings/view.cljs b/src/status_im/ui/screens/backup_settings/view.cljs index 7c60689606..ffc7e3da2c 100644 --- a/src/status_im/ui/screens/backup_settings/view.cljs +++ b/src/status_im/ui/screens/backup_settings/view.cljs @@ -1,11 +1,11 @@ (ns status-im.ui.screens.backup-settings.view (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.react :as react] - [utils.datetime :as datetime])) + [utils.datetime :as datetime] + [status-im.ui.components.list.item :as list.item])) (defn perform-backup! [] @@ -36,7 +36,7 @@ performing-backup? [:backup/performing-backup]] [:<> [react/scroll-view - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/backup-through-waku) :accessibility-label :backup-enabled @@ -46,7 +46,7 @@ [:multiaccounts.ui/switch-backup-enabled (not backup-enabled?)]) :accessory :switch :active backup-enabled?}] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/last-backup-performed) :accessory :text 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 d36baaee31..1e644b943b 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,5 +1,5 @@ (ns status-im.ui.screens.bootnodes-settings.edit-bootnode.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def edit-bootnode-view 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 52cf096e3f..c3697d7bee 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 @@ -1,6 +1,6 @@ (ns status-im.ui.screens.bootnodes-settings.edit-bootnode.views (:require [clojure.string :as string] - [quo.core :as quo] + [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.qr-scanner.core :as qr-scanner] diff --git a/src/status_im/ui/screens/browser/accounts.cljs b/src/status_im/ui/screens/browser/accounts.cljs index 8af0170978..c28795b782 100644 --- a/src/status_im/ui/screens/browser/accounts.cljs +++ b/src/status_im/ui/screens/browser/accounts.cljs @@ -1,15 +1,15 @@ (ns status-im.ui.screens.browser.accounts - (:require [quo.core :as quo] - [re-frame.core :as re-frame] + (:require [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] - [status-im.utils.utils :as utils])) + [status-im.utils.utils :as utils] + [status-im.ui.components.list.item :as list.item])) (defn render-account [account _ _ dapps-account] - [quo/list-item + [list.item/list-item (merge {:accessory :radio :active (= (:address dapps-account) (:address account)) :icon [chat-icon/custom-icon-view-list (:name account) (:color account)] diff --git a/src/status_im/ui/screens/browser/bookmarks/views.cljs b/src/status_im/ui/screens/browser/bookmarks/views.cljs index d594eac1d5..8c654edfc6 100644 --- a/src/status_im/ui/screens/browser/bookmarks/views.cljs +++ b/src/status_im/ui/screens/browser/bookmarks/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.browser.bookmarks.views (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/browser/eip3085/sheet.cljs b/src/status_im/ui/screens/browser/eip3085/sheet.cljs index 4664e01cbe..43f5aec9db 100644 --- a/src/status_im/ui/screens/browser/eip3085/sheet.cljs +++ b/src/status_im/ui/screens/browser/eip3085/sheet.cljs @@ -1,13 +1,14 @@ (ns status-im.ui.screens.browser.eip3085.sheet - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.copyable-text :as copyable-text] [status-im.ui.components.icons.icons :as icons] [status-im.ui.components.react :as react] - [status-im.ui.screens.browser.styles :as styles]) + [status-im.ui.screens.browser.styles :as styles] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (views/defview permissions-panel @@ -42,7 +43,7 @@ [react/scroll-view [copyable-text/copyable-text-view {:copied-text (:name (:new-network params))} - [quo/list-item + [list.item/list-item {:size :small :accessibility-label :network-name :title "Network Name" @@ -50,7 +51,7 @@ :accessory-text (:name (:new-network params))}]] [copyable-text/copyable-text-view {:copied-text (get-in params [:new-network :config :UpstreamConfig :URL])} - [quo/list-item + [list.item/list-item {:size :small :accessibility-label :network-url :title "Network URL" @@ -58,7 +59,7 @@ :accessory-text (get-in params [:new-network :config :UpstreamConfig :URL])}]] [copyable-text/copyable-text-view {:copied-text (str (get-in params [:new-network :config :NetworkId]))} - [quo/list-item + [list.item/list-item {:size :small :accessibility-label :network-id :title "Chain ID" diff --git a/src/status_im/ui/screens/browser/eip3326/sheet.cljs b/src/status_im/ui/screens/browser/eip3326/sheet.cljs index 406d1c7c6f..023abb4366 100644 --- a/src/status_im/ui/screens/browser/eip3326/sheet.cljs +++ b/src/status_im/ui/screens/browser/eip3326/sheet.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.browser.eip3326.sheet - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.network.core :as network] diff --git a/src/status_im/ui/screens/browser/empty_tab/styles.cljs b/src/status_im/ui/screens/browser/empty_tab/styles.cljs index 86c826f4ce..a55c71b97a 100644 --- a/src/status_im/ui/screens/browser/empty_tab/styles.cljs +++ b/src/status_im/ui/screens/browser/empty_tab/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.browser.empty-tab.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def input {:height 36 diff --git a/src/status_im/ui/screens/browser/empty_tab/views.cljs b/src/status_im/ui/screens/browser/empty_tab/views.cljs index 803e9bf7aa..47d46e97e5 100644 --- a/src/status_im/ui/screens/browser/empty_tab/views.cljs +++ b/src/status_im/ui/screens/browser/empty_tab/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.browser.empty-tab.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -13,7 +13,8 @@ [status-im.ui.screens.browser.empty-tab.styles :as styles] [status-im.ui.screens.browser.views :as browser] [status-im.ui.screens.wallet.components.views :as components] - [utils.url :as url]) + [utils.url :as url] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (defn hide-sheet-and-dispatch @@ -25,7 +26,7 @@ [_] (let [loaded (reagent/atom nil)] (fn [{:keys [name url] :as bookmark}] - [quo/list-item + [list.item/list-item {:accessibility-label (keyword (str "fav-item" name)) :on-press #(re-frame/dispatch [:browser.ui/open-url url]) :on-long-press (fn [] @@ -33,14 +34,14 @@ [:bottom-sheet/show-sheet-old {:content (fn [] [react/view {:flex 1} - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/open-in-new-tab) :accessibility-label :open-in-new-tab :icon :main-icons/tabs :on-press #(hide-sheet-and-dispatch [:browser.ui/open-url url])}] - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/edit) :accessibility-label :edit-bookmark @@ -48,7 +49,7 @@ :on-press #(hide-sheet-and-dispatch [:open-modal :new-bookmark bookmark])}] - [quo/list-item + [list.item/list-item {:theme :negative :title (i18n/label :t/delete) :accessibility-label :delete-bookmark diff --git a/src/status_im/ui/screens/browser/options/views.cljs b/src/status_im/ui/screens/browser/options/views.cljs index 78da3a2dff..1f20177a14 100644 --- a/src/status_im/ui/screens/browser/options/views.cljs +++ b/src/status_im/ui/screens/browser/options/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.browser.options.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im.browser.core :as browser] [status-im2.constants :as constants] @@ -11,7 +11,8 @@ [status-im.ui.components.react :as react] [status-im.ui.screens.wallet.components.views :as components] [utils.url :as url] - [status-im.utils.utils :as utils])) + [status-im.utils.utils :as utils] + [status-im.ui.components.list.item :as list.item])) (defn hide-sheet-and-dispatch [event] @@ -24,14 +25,14 @@ [react/view {:flex 1} [react/text {:style {:align-self :center :margin-horizontal 16 :margin-vertical 8}} (str "“" host "” " (i18n/label :t/has-permissions))] - [quo/list-item + [list.item/list-item {:icon [chat-icon/custom-icon-view-list (:name account) (:color account)] :title (:name account) :subtitle (utils/get-shortened-checksum-address (:address account)) :accessory [icons/icon :main-icons/check {:color colors/gray}]}] [react/view {:padding-vertical 8} [components/separator]] - [quo/list-item + [list.item/list-item {:theme :negative :title (i18n/label :t/revoke-access) :accessibility-label :revoke-access @@ -59,13 +60,13 @@ :main-icons/qr] (when-not empty-tab [:<> - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/new-tab) :accessibility-label :new-tab :icon :main-icons/add :on-press #(hide-sheet-and-dispatch [:browser.ui/open-empty-tab])}] - [quo/list-item + [list.item/list-item {:theme :accent :title (if fav? (i18n/label :t/remove-favourite) (i18n/label :t/add-favourite)) :accessibility-label :add-remove-fav @@ -74,7 +75,7 @@ (if fav? [:browser/delete-bookmark url] [:open-modal :new-bookmark {:url url :name name :new true}]))}] - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/share) :accessibility-label :share @@ -86,7 +87,7 @@ 200))}] [components/separator]]) (if connected? - [quo/list-item + [list.item/list-item {:icon [chat-icon/custom-icon-view-list (:name account) (:color account)] :title (:name account) :subtitle (i18n/label :t/connected) @@ -95,7 +96,7 @@ :on-press #(hide-sheet-and-dispatch [:bottom-sheet/show-sheet-old {:content (wallet-connection (url/url-host url) account)}])}] - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/connect-wallet) :accessibility-label :connect-account diff --git a/src/status_im/ui/screens/browser/permissions/views.cljs b/src/status_im/ui/screens/browser/permissions/views.cljs index 48be564845..f6961a1398 100644 --- a/src/status_im/ui/screens/browser/permissions/views.cljs +++ b/src/status_im/ui/screens/browser/permissions/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.browser.permissions.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.browser.permissions :as browser.permissions] diff --git a/src/status_im/ui/screens/browser/site_blocked/styles.cljs b/src/status_im/ui/screens/browser/site_blocked/styles.cljs index 838dccd6a6..4a13710c1a 100644 --- a/src/status_im/ui/screens/browser/site_blocked/styles.cljs +++ b/src/status_im/ui/screens/browser/site_blocked/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.browser.site-blocked.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def container {:justify-content :center diff --git a/src/status_im/ui/screens/browser/site_blocked/views.cljs b/src/status_im/ui/screens/browser/site_blocked/views.cljs index 899730e974..865e35b204 100644 --- a/src/status_im/ui/screens/browser/site_blocked/views.cljs +++ b/src/status_im/ui/screens/browser/site_blocked/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.browser.site-blocked.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.icons.icons :as icons] diff --git a/src/status_im/ui/screens/browser/styles.cljs b/src/status_im/ui/screens/browser/styles.cljs index c8a6a8c09c..3cead714ef 100644 --- a/src/status_im/ui/screens/browser/styles.cljs +++ b/src/status_im/ui/screens/browser/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.browser.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def browser {:flex 1}) diff --git a/src/status_im/ui/screens/browser/tabs/views.cljs b/src/status_im/ui/screens/browser/tabs/views.cljs index b3f260987b..651eec0481 100644 --- a/src/status_im/ui/screens/browser/tabs/views.cljs +++ b/src/status_im/ui/screens/browser/tabs/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.browser.tabs.views (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] + [status-im.ui.components.list.item :as list.item] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -19,7 +19,7 @@ (fn [{:keys [browser-id name url empty-tab]}] [react/view {:flex-direction :row :flex 1} [react/view {:flex 1} - [quo/list-item + [list.item/list-item {:on-press #(if empty-tab (re-frame/dispatch [:browser.ui/open-empty-tab]) (re-frame/dispatch [:browser.ui/browser-item-selected browser-id])) diff --git a/src/status_im/ui/screens/browser/views.cljs b/src/status_im/ui/screens/browser/views.cljs index ca073dd944..a7ad118dee 100644 --- a/src/status_im/ui/screens/browser/views.cljs +++ b/src/status_im/ui/screens/browser/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.browser.views (:require - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.browser.core :as browser] diff --git a/src/status_im/ui/screens/bug_report.cljs b/src/status_im/ui/screens/bug_report.cljs index 308c2861ab..e180dbf9c7 100644 --- a/src/status_im/ui/screens/bug_report.cljs +++ b/src/status_im/ui/screens/bug_report.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.bug-report - (:require [quo.core :as quo] - [quo.react-native :as react-native] + (:require [status-im.ui.components.core :as quo] + [react-native.core :as react-native] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.topbar :as topbar])) diff --git a/src/status_im/ui/screens/chat/group.cljs b/src/status_im/ui/screens/chat/group.cljs index c866e1fdd4..1c8eb8132b 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 [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/chat/message/legacy_view.cljs b/src/status_im/ui/screens/chat/message/legacy_view.cljs index 3ad367cd01..07be171912 100644 --- a/src/status_im/ui/screens/chat/message/legacy_view.cljs +++ b/src/status_im/ui/screens/chat/message/legacy_view.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.chat.message.legacy-view (:require - [quo.design-system.colors :as quo.colors] - [quo.react-native :as rn] + [status-im.ui.components.colors :as quo.colors] + [react-native.core :as rn] [status-im.react-native.resources :as resources] [status-im.ui.components.fast-image :as fast-image] [status-im.ui.screens.chat.message.gap :as message.gap] diff --git a/src/status_im/ui/screens/chat/photos.cljs b/src/status_im/ui/screens/chat/photos.cljs index 629cb5f706..86f03b9507 100644 --- a/src/status_im/ui/screens/chat/photos.cljs +++ b/src/status_im/ui/screens/chat/photos.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.chat.photos - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.fast-image :as fast-image] [status-im.ui.components.react :as react] [status-im.ui.screens.chat.styles.photos :as style])) diff --git a/src/status_im/ui/screens/chat/sheets.cljs b/src/status_im/ui/screens/chat/sheets.cljs index 174b52cb28..bb2b7c4b33 100644 --- a/src/status_im/ui/screens/chat/sheets.cljs +++ b/src/status_im/ui/screens/chat/sheets.cljs @@ -1,10 +1,10 @@ (ns status-im.ui.screens.chat.sheets - (:require [quo.core :as quo] - [re-frame.core :as re-frame] + (:require [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] [status-im.ui.components.chat-icon.screen :as chat-icon] - [status-im.ui.components.react :as react])) + [status-im.ui.components.react :as react] + [status-im.ui.components.list.item :as list.item])) (defn hide-sheet-and-dispatch [event] @@ -15,7 +15,7 @@ [chat-id] (let [{:keys [primary-name] :as contact} @(re-frame/subscribe [:contacts/contact-by-identity chat-id])] [react/view - [quo/list-item + [list.item/list-item {:theme :accent :icon [chat-icon/contact-icon-contacts-tab contact] :title primary-name @@ -25,13 +25,13 @@ :on-press #(do (hide-sheet-and-dispatch [:chat.ui/show-profile chat-id]) (re-frame/dispatch [:pin-message/load-pin-messages chat-id]))}] - [quo/list-item + [list.item/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])}] - [quo/list-item + [list.item/list-item {:theme :negative :title (i18n/label :t/delete-chat) :accessibility-label :delete-chat-button @@ -42,7 +42,7 @@ [] (fn [{:keys [chat-id group-chat chat-name color emoji]}] [react/view - [quo/list-item + [list.item/list-item {:theme :accent :title chat-name :icon [chat-icon/emoji-chat-icon-view-chat-sheet @@ -54,7 +54,7 @@ (hide-sheet-and-dispatch [:navigate-to :community-channel-details {:chat-id chat-id}]) (re-frame/dispatch [:pin-message/load-pin-messages chat-id]))}] - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/mark-all-read) :accessibility-label :mark-all-read-button @@ -67,7 +67,7 @@ (let [{:keys [member?]} @(re-frame/subscribe [:group-chat/inviter-info chat-id]) removed? @(re-frame/subscribe [:group-chat/removed-from-current-chat?])] (if invitation-admin - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/remove) :accessibility-label :remove-group-chat @@ -75,7 +75,7 @@ :on-press #(hide-sheet-and-dispatch [:group-chats.ui/remove-chat-confirmed chat-id])}] [react/view - [quo/list-item + [list.item/list-item {:theme :accent :title chat-name :subtitle (i18n/label :t/group-info) @@ -85,21 +85,21 @@ :on-press #(do (hide-sheet-and-dispatch [:show-group-chat-profile chat-id]) (re-frame/dispatch [:pin-message/load-pin-messages chat-id]))}] - [quo/list-item + [list.item/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])}] (when member? - [quo/list-item + [list.item/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])}]) (when removed? - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/remove) :accessibility-label :remove-group-chat diff --git a/src/status_im/ui/screens/chat/stickers/views.cljs b/src/status_im/ui/screens/chat/stickers/views.cljs index 016bb6cb3c..435c462102 100644 --- a/src/status_im/ui/screens/chat/stickers/views.cljs +++ b/src/status_im/ui/screens/chat/stickers/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.chat.stickers.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/chat/styles/input/gap.cljs b/src/status_im/ui/screens/chat/styles/input/gap.cljs index 58c48328e8..948715536b 100644 --- a/src/status_im/ui/screens/chat/styles/input/gap.cljs +++ b/src/status_im/ui/screens/chat/styles/input/gap.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.chat.styles.input.gap - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (defn gap-container [] diff --git a/src/status_im/ui/screens/chat/styles/main.cljs b/src/status_im/ui/screens/chat/styles/main.cljs index 96de9d7553..77fa776cc0 100644 --- a/src/status_im/ui/screens/chat/styles/main.cljs +++ b/src/status_im/ui/screens/chat/styles/main.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.chat.styles.main - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def toolbar-container {:flex 1 diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index 490578b2ec..9dc00a7781 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.chat.styles.message.message - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [quo2.foundations.colors :as quo2.colors] [status-im2.constants :as constants] [status-im.ui.components.react :as react] diff --git a/src/status_im/ui/screens/chat/styles/message/sheets.cljs b/src/status_im/ui/screens/chat/styles/message/sheets.cljs index 41667acc17..8de78fda29 100644 --- a/src/status_im/ui/screens/chat/styles/message/sheets.cljs +++ b/src/status_im/ui/screens/chat/styles/message/sheets.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.chat.styles.message.sheets - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def sheet-text {:color colors/gray diff --git a/src/status_im/ui/screens/chat/styles/photos.cljs b/src/status_im/ui/screens/chat/styles/photos.cljs index cda13ab59b..b9dca205ec 100644 --- a/src/status_im/ui/screens/chat/styles/photos.cljs +++ b/src/status_im/ui/screens/chat/styles/photos.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.chat.styles.photos - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def default-size 36) diff --git a/src/status_im/ui/screens/chat/utils.cljs b/src/status_im/ui/screens/chat/utils.cljs index bff3506b28..bc8ed7f77c 100644 --- a/src/status_im/ui/screens/chat/utils.cljs +++ b/src/status_im/ui/screens/chat/utils.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.chat.utils - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [utils.i18n :as i18n] [status-im.ui.components.react :as react] [clojure.string :as string])) diff --git a/src/status_im/ui/screens/communities/create.cljs b/src/status_im/ui/screens/communities/create.cljs index d9e9297941..ccc21ebb37 100644 --- a/src/status_im/ui/screens/communities/create.cljs +++ b/src/status_im/ui/screens/communities/create.cljs @@ -1,8 +1,8 @@ (ns status-im.ui.screens.communities.create (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.react-native :as rn] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] + [react-native.core :as rn] [status-im.communities.core :as communities] [utils.i18n :as i18n] [status-im.ui.components.icons.icons :as icons] @@ -10,7 +10,8 @@ [status-im.ui.components.toolbar :as toolbar] [utils.re-frame :as rf] [status-im.utils.image :as utils.image] - [utils.debounce :as debounce])) + [utils.debounce :as debounce] + [status-im.ui.components.list.item :as list.item])) (def max-name-length 30) (def max-description-length 140) @@ -56,7 +57,7 @@ [has-picture editing?] (fn [] [:<> - [quo/list-item + [list.item/list-item {:accessibility-label :take-photo :theme :accent :icon :main-icons/camera @@ -64,7 +65,7 @@ :on-press #(do (rf/dispatch [:bottom-sheet/hide-old]) (take-pic))}] - [quo/list-item + [list.item/list-item {:accessibility-label :pick-photo :icon :main-icons/gallery :theme :accent @@ -73,7 +74,7 @@ (rf/dispatch [:bottom-sheet/hide-old]) (pick-pic))}] (when (and has-picture (not editing?)) - [quo/list-item + [list.item/list-item {:accessibility-label :remove-photo :icon :main-icons/delete :theme :accent @@ -187,7 +188,7 @@ (when-not editing? [:<> [quo/separator {:style {:margin-vertical 10}}] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/membership-button) :accessory :text :on-press #(rf/dispatch [:navigate-to :community-membership]) diff --git a/src/status_im/ui/screens/communities/import.cljs b/src/status_im/ui/screens/communities/import.cljs index 46168f1b6b..93ecba1ed7 100644 --- a/src/status_im/ui/screens/communities/import.cljs +++ b/src/status_im/ui/screens/communities/import.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.communities.import - (:require [quo.core :as quo] - [quo.react-native :as rn] + (:require [status-im.ui.components.core :as quo] + [react-native.core :as rn] [reagent.core :as reagent] [status-im.communities.core :as communities] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/communities/invite.cljs b/src/status_im/ui/screens/communities/invite.cljs index 884553a2c6..d295e40f7b 100644 --- a/src/status_im/ui/screens/communities/invite.cljs +++ b/src/status_im/ui/screens/communities/invite.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.communities.invite (:require [clojure.string :as string] - [quo.core :as quo] - [quo.react-native :as rn] + [status-im.ui.components.core :as quo] + [react-native.core :as rn] [reagent.core :as reagent] [status-im.communities.core :as communities] [status-im2.constants :as constants] @@ -10,7 +10,8 @@ [status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.topbar :as topbar] [utils.debounce :as debounce] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [status-im.ui.components.list.item :as list.item])) (defn header [user-pk] @@ -30,7 +31,7 @@ (defn contacts-list-item [{:keys [public-key active] :as contact} _ _ {:keys [selected]}] (let [{:keys [primary-name secondary-name]} contact] - [quo/list-item + [list.item/list-item {:title primary-name :subtitle secondary-name :icon [chat-icon.screen/contact-icon-contacts-tab contact] diff --git a/src/status_im/ui/screens/communities/members.cljs b/src/status_im/ui/screens/communities/members.cljs index 82e1fd4636..9642087a4a 100644 --- a/src/status_im/ui/screens/communities/members.cljs +++ b/src/status_im/ui/screens/communities/members.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.communities.members - (:require [quo.core :as quo] - [quo.react-native :as rn] + (:require [status-im.ui.components.core :as quo] + [react-native.core :as rn] [reagent.core :as reagent] [status-im.communities.core :as communities] [status-im2.constants :as constants] @@ -10,7 +10,8 @@ [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] [status-im.ui.components.unviewed-indicator :as unviewed-indicator] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [status-im.ui.components.list.item :as list.item])) (defn hide-sheet-and-dispatch [event] @@ -20,7 +21,7 @@ (defn member-sheet [primary-name {:keys [public-key] :as member} community-id can-kick-users? can-manage-users? admin?] [:<> - [quo/list-item + [list.item/list-item {:theme :accent :icon [chat-icon/contact-icon-contacts-tab member] :title primary-name @@ -31,21 +32,21 @@ (when can-kick-users? [:<> [quo/separator {:style {:margin-vertical 8}}] - [quo/list-item + [list.item/list-item {:theme :negative :icon :main-icons/arrow-left :title (i18n/label :t/member-kick) :on-press #(rf/dispatch [::communities/member-kick community-id public-key])}]]) (when can-manage-users? [:<> - [quo/list-item + [list.item/list-item {:theme :negative :icon :main-icons/cancel :title (i18n/label :t/member-ban) :on-press #(rf/dispatch [::communities/member-ban community-id public-key])}]]) (when admin? [:<> - [quo/list-item + [list.item/list-item {:theme :accent :icon :main-icons/make-admin :title (i18n/label :t/make-moderator) @@ -61,7 +62,7 @@ admin?]}] (let [member (rf/sub [:contacts/contact-by-identity public-key]) [primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity public-key])] - [quo/list-item + [list.item/list-item {:title primary-name :subtitle secondary-name :accessibility-label :member-item @@ -83,7 +84,7 @@ (defn header [community-id] [:<> - [quo/list-item + [list.item/list-item {:icon :main-icons/share :title (i18n/label :t/invite-people) :accessibility-label :community-invite-people @@ -96,7 +97,7 @@ (let [requests (rf/sub [:communities/requests-to-join-for-community community-id]) requests-count (count requests)] [:<> - [quo/list-item + [list.item/list-item {:chevron true :accessory [react/view {:flex-direction :row} diff --git a/src/status_im/ui/screens/communities/membership.cljs b/src/status_im/ui/screens/communities/membership.cljs index 89b4bc7bcb..6648c0ec43 100644 --- a/src/status_im/ui/screens/communities/membership.cljs +++ b/src/status_im/ui/screens/communities/membership.cljs @@ -1,11 +1,12 @@ (ns status-im.ui.screens.communities.membership - (:require [quo.core :as quo] - [quo.react-native :as rn] + (:require [status-im.ui.components.core :as quo] + [react-native.core :as rn] [status-im.communities.core :as communities] [status-im2.constants :as constants] [utils.i18n :as i18n] [status-im.ui.components.toolbar :as toolbar] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [status-im.ui.components.list.item :as list.item])) (def options {constants/community-on-request-access @@ -18,7 +19,7 @@ (defn option [{:keys [title description]} {:keys [selected on-select]}] [:<> - [quo/list-item + [list.item/list-item {:title (i18n/label title) :size :small :accessory :radio diff --git a/src/status_im/ui/screens/contacts_list/views.cljs b/src/status_im/ui/screens/contacts_list/views.cljs index ee5a78f576..20503e6bec 100644 --- a/src/status_im/ui/screens/contacts_list/views.cljs +++ b/src/status_im/ui/screens/contacts_list/views.cljs @@ -1,19 +1,19 @@ (ns status-im.ui.screens.contacts-list.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.invite.views :as invite] [status-im.ui.components.list.views :as list.views] [status-im.ui.components.react :as react] - [utils.i18n :as i18n]) + [utils.i18n :as i18n] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn contacts-list-item [{:keys [public-key] :as contact}] (let [{:keys [primary-name secondary-name customization-color]} contact] - [quo/list-item + [list.item/list-item {:title primary-name :subtitle secondary-name :icon [chat-icon.screen/profile-photo-plus-dot-view @@ -26,7 +26,7 @@ (defn add-new-contact [] - [quo/list-item + [list.item/list-item {:icon :main-icons/add :theme :accent :title (i18n/label :t/add-new-contact) @@ -41,7 +41,7 @@ [add-new-contact] (when (pos? blocked-contacts-count) [react/view {:margin-vertical 16} - [quo/list-item + [list.item/list-item {:title (i18n/label :t/blocked-users) :icon :main-icons/cancel :theme :negative diff --git a/src/status_im/ui/screens/dapps_permissions/styles.cljs b/src/status_im/ui/screens/dapps_permissions/styles.cljs index 77fdd830c5..75ede94fc8 100644 --- a/src/status_im/ui/screens/dapps_permissions/styles.cljs +++ b/src/status_im/ui/screens/dapps_permissions/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.dapps-permissions.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def icon-container {:width 40 diff --git a/src/status_im/ui/screens/dapps_permissions/views.cljs b/src/status_im/ui/screens/dapps_permissions/views.cljs index e8e6d75002..b9c75e9936 100644 --- a/src/status_im/ui/screens/dapps_permissions/views.cljs +++ b/src/status_im/ui/screens/dapps_permissions/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.dapps-permissions.views (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] @@ -9,7 +9,8 @@ [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.dapps-permissions.styles :as styles])) + [status-im.ui.screens.dapps-permissions.styles :as styles] + [status-im.ui.components.list.item :as list.item])) (defn d-icon [] @@ -41,7 +42,7 @@ [list/flat-list {:data (vec (map prepare-items (vals permissions))) :key-fn (fn [_ i] (str i)) - :render-fn quo/list-item}])) + :render-fn list.item/list-item}])) (views/defview manage [] @@ -52,7 +53,7 @@ [list/flat-list {:data (vec (map (prepare-items-manage name) permissions)) :key-fn (fn [_ i] (str i)) - :render-fn quo/list-item}] + :render-fn list.item/list-item}] [react/view {:padding-vertical 16 :padding-horizontal 16} diff --git a/src/status_im/ui/screens/default_sync_period_settings/view.cljs b/src/status_im/ui/screens/default_sync_period_settings/view.cljs index 5c154cd088..d0ca5d5275 100644 --- a/src/status_im/ui/screens/default_sync_period_settings/view.cljs +++ b/src/status_im/ui/screens/default_sync_period_settings/view.cljs @@ -1,11 +1,11 @@ (ns status-im.ui.screens.default-sync-period-settings.view (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [re-frame.core :as re-frame] + (:require [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] [status-im.ui.components.react :as react] - [status-im2.config :as config])) + [status-im2.config :as config] + [status-im.ui.components.list.item :as list.item])) (def titles {constants/two-mins (i18n/label :t/two-minutes) @@ -16,7 +16,7 @@ (defn radio-item [id value] - [quo/list-item + [list.item/list-item {:active (= value id) :accessory :radio :title (get titles id) diff --git a/src/status_im/ui/screens/ens/views.cljs b/src/status_im/ui/screens/ens/views.cljs index c457a6a27e..ac3d87275b 100644 --- a/src/status_im/ui/screens/ens/views.cljs +++ b/src/status_im/ui/screens/ens/views.cljs @@ -1,8 +1,8 @@ (ns status-im.ui.screens.ens.views (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.ens.core :as ens] @@ -23,7 +23,8 @@ [status-im.ui.screens.wallet.send.sheets :as sheets] [status-im.utils.utils :as utils] [utils.debounce :as debounce] - [utils.address :as address]) + [utils.address :as address] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (defn- link @@ -285,7 +286,7 @@ (defn render-account [address] (let [account @(re-frame/subscribe [:account-by-address address])] - [quo/list-item + [list.item/list-item {:icon [chat-icon/custom-icon-view-list (:name account) (:color account)] :title (:name account) :subtitle (utils/get-shortened-checksum-address (:address account)) @@ -557,7 +558,7 @@ ;;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? - [quo/list-item + [list.item/list-item {:title (i18n/label :t/ens-remove-username) ;:subtext (i18n/label :t/ens-remove-hints) :icon :main-icons/close @@ -565,7 +566,7 @@ :on-press #(re-frame/dispatch [::ens/remove-username name])}]) (when (and (not custom-domain?) (not pending?)) [react/view {:style {:margin-top 18}} - [quo/list-item + [list.item/list-item {:title (i18n/label :t/ens-release-username) :theme :accent :disabled (not releasable?) @@ -657,7 +658,7 @@ [{:keys [name action subtitle]}] (let [stateofus-username (stateofus/username name) s (or stateofus-username name)] - [quo/list-item + [list.item/list-item (merge {:title s :subtitle (if subtitle subtitle @@ -682,7 +683,7 @@ stateofus-username (stateofus/username name) s (or stateofus-username name)] ^{:key name} - [quo/list-item + [list.item/list-item {:accessibility-label (if (= name preferred-name) :primary-username :not-primary-username) @@ -722,7 +723,7 @@ [react/view {:style {:flex 1}} [react/scroll-view [react/view {:style {:margin-top 8}} - [quo/list-item + [list.item/list-item {:title (i18n/label :t/ens-add-username) :theme :accent :on-press #(re-frame/dispatch [::ens/add-username-pressed]) diff --git a/src/status_im/ui/screens/fleet_settings/styles.cljs b/src/status_im/ui/screens/fleet_settings/styles.cljs index e445e5e5ff..d038301f47 100644 --- a/src/status_im/ui/screens/fleet_settings/styles.cljs +++ b/src/status_im/ui/screens/fleet_settings/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.fleet-settings.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def wrapper diff --git a/src/status_im/ui/screens/glossary/view.cljs b/src/status_im/ui/screens/glossary/view.cljs index 4d6ac2ed34..525e34b7ba 100644 --- a/src/status_im/ui/screens/glossary/view.cljs +++ b/src/status_im/ui/screens/glossary/view.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.glossary.view - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [utils.i18n :as i18n] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react])) diff --git a/src/status_im/ui/screens/group/styles.cljs b/src/status_im/ui/screens/group/styles.cljs index b92c8e8462..966f06a314 100644 --- a/src/status_im/ui/screens/group/styles.cljs +++ b/src/status_im/ui/screens/group/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.group.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def group-container {:flex 1 diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index c213fe2b3f..f37b1bad1d 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.group.views (:require [clojure.string :as string] - [quo.core :as quo] + [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im2.constants :as constants] @@ -14,13 +14,14 @@ [status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.group.styles :as styles] - [utils.debounce :as debounce]) + [utils.debounce :as debounce] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (defn- render-contact [row] (let [{:keys [primary-name secondary-name]} row] - [quo/list-item + [list.item/list-item {:title primary-name :subtitle secondary-name :icon [chat-icon/contact-icon-contacts-tab row]}])) @@ -54,7 +55,7 @@ (fn [allow-new-users? subs-name {:keys [public-key] :as contact} on-toggle] (let [contact-selected? @(re-frame/subscribe [subs-name public-key]) {:keys [primary-name secondary-name]} contact] - [quo/list-item + [list.item/list-item {:title primary-name :subtitle secondary-name :icon [chat-icon/contact-icon-contacts-tab contact] diff --git a/src/status_im/ui/screens/help_center/views.cljs b/src/status_im/ui/screens/help_center/views.cljs index 9bdd172d54..1b954a768d 100644 --- a/src/status_im/ui/screens/help_center/views.cljs +++ b/src/status_im/ui/screens/help_center/views.cljs @@ -1,10 +1,10 @@ (ns status-im.ui.screens.help-center.views - (:require [quo.core :as quo] - [re-frame.core :as re-frame] + (:require [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] [status-im.ui.components.list.views :as list] - [status-im.ui.components.react :as react])) + [status-im.ui.components.react :as react] + [status-im.ui.components.list.item :as list.item])) (def data [{:size :small @@ -31,4 +31,4 @@ [list/flat-list {:data data :key-fn (fn [_ i] (str i)) - :render-fn quo/list-item}]) + :render-fn list.item/list-item}]) diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index 0fdd6667f2..90c3773ff0 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.home.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def last-message-text {:flex 1 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 aa252062f0..14f544e4f9 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.home.views.inner-item (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [quo2.components.markdown.text :as quo2.text] [quo2.foundations.colors :as quo2.colors] [re-frame.core :as re-frame] diff --git a/src/status_im/ui/screens/keycard/authentication_method/styles.cljs b/src/status_im/ui/screens/keycard/authentication_method/styles.cljs index 1d8cfdded5..7ac4f89ae2 100644 --- a/src/status_im/ui/screens/keycard/authentication_method/styles.cljs +++ b/src/status_im/ui/screens/keycard/authentication_method/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.keycard.authentication-method.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def container {:flex 1 diff --git a/src/status_im/ui/screens/keycard/authentication_method/views.cljs b/src/status_im/ui/screens/keycard/authentication_method/views.cljs index a547a63004..b0a104290c 100644 --- a/src/status_im/ui/screens/keycard/authentication_method/views.cljs +++ b/src/status_im/ui/screens/keycard/authentication_method/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.keycard.authentication-method.views - (:require [quo.components.separator :as separator] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.separator :as separator] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.react-native.resources :as resources] diff --git a/src/status_im/ui/screens/keycard/components/keycard_animation.cljs b/src/status_im/ui/screens/keycard/components/keycard_animation.cljs index 943135dc58..81c622c4b4 100644 --- a/src/status_im/ui/screens/keycard/components/keycard_animation.cljs +++ b/src/status_im/ui/screens/keycard/components/keycard_animation.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.keycard.components.keycard-animation - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [reagent.core :as reagent] [status-im.keycard.card :as keycard-nfc] [status-im.react-native.resources :as resources] diff --git a/src/status_im/ui/screens/keycard/components/style.cljs b/src/status_im/ui/screens/keycard/components/style.cljs index 1a0799f6a5..f5dec7f839 100644 --- a/src/status_im/ui/screens/keycard/components/style.cljs +++ b/src/status_im/ui/screens/keycard/components/style.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.keycard.components.style - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def wrapper-style {:flex 1 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 f10d1578de..0f392ed45e 100644 --- a/src/status_im/ui/screens/keycard/components/turn_nfc.cljs +++ b/src/status_im/ui/screens/keycard/components/turn_nfc.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.keycard.components.turn-nfc - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.icons.icons :as icons] diff --git a/src/status_im/ui/screens/keycard/frozen_card/view.cljs b/src/status_im/ui/screens/keycard/frozen_card/view.cljs index e63d2ed4a9..85eb5c34ec 100644 --- a/src/status_im/ui/screens/keycard/frozen_card/view.cljs +++ b/src/status_im/ui/screens/keycard/frozen_card/view.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.keycard.frozen-card.view (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.keycard.login :as login] diff --git a/src/status_im/ui/screens/keycard/keycard_interaction.cljs b/src/status_im/ui/screens/keycard/keycard_interaction.cljs index 3458a94ff7..80db338587 100644 --- a/src/status_im/ui/screens/keycard/keycard_interaction.cljs +++ b/src/status_im/ui/screens/keycard/keycard_interaction.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.keycard.keycard-interaction - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/keycard/onboarding/views.cljs b/src/status_im/ui/screens/keycard/onboarding/views.cljs index b8722b52e3..4cad0b1f2e 100644 --- a/src/status_im/ui/screens/keycard/onboarding/views.cljs +++ b/src/status_im/ui/screens/keycard/onboarding/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.keycard.onboarding.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/keycard/pairing/views.cljs b/src/status_im/ui/screens/keycard/pairing/views.cljs index 872b2d0249..4ffe392ffd 100644 --- a/src/status_im/ui/screens/keycard/pairing/views.cljs +++ b/src/status_im/ui/screens/keycard/pairing/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.keycard.pairing.views - (:require [quo.core :as quo] - [quo.react-native :as rn] + (:require [status-im.ui.components.core :as quo] + [react-native.core :as rn] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/keycard/pin/styles.cljs b/src/status_im/ui/screens/keycard/pin/styles.cljs index f41b611699..a47d821dea 100644 --- a/src/status_im/ui/screens/keycard/pin/styles.cljs +++ b/src/status_im/ui/screens/keycard/pin/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.keycard.pin.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def pin-container {:flex 1 diff --git a/src/status_im/ui/screens/keycard/pin/views.cljs b/src/status_im/ui/screens/keycard/pin/views.cljs index 8b53c8e383..44cb95993b 100644 --- a/src/status_im/ui/screens/keycard/pin/views.cljs +++ b/src/status_im/ui/screens/keycard/pin/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.keycard.pin.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/keycard/recovery/views.cljs b/src/status_im/ui/screens/keycard/recovery/views.cljs index 9064fcecaa..8ded8976e9 100644 --- a/src/status_im/ui/screens/keycard/recovery/views.cljs +++ b/src/status_im/ui/screens/keycard/recovery/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.keycard.recovery.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/keycard/settings/views.cljs b/src/status_im/ui/screens/keycard/settings/views.cljs index 453b4b1f31..a63964a004 100644 --- a/src/status_im/ui/screens/keycard/settings/views.cljs +++ b/src/status_im/ui/screens/keycard/settings/views.cljs @@ -1,13 +1,14 @@ (ns status-im.ui.screens.keycard.settings.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] [status-im.react-native.resources :as resources] [status-im.ui.components.react :as react] - [status-im.ui.screens.keycard.views :as keycard.views])) + [status-im.ui.screens.keycard.views :as keycard.views] + [status-im.ui.components.list.item :as list.item])) (defn- activity-indicator [loading?] @@ -90,7 +91,7 @@ (if (zero? puk-retry-counter) [card-blocked] [:<> - [quo/list-item + [list.item/list-item {:icon :main-icons/help :size :small :title (i18n/label :t/help-capitalized) @@ -98,26 +99,26 @@ constants/faq-keycard)}] (when pairing [:<> - [quo/list-item + [list.item/list-item {:icon :main-icons/add :size :small :title (i18n/label :t/change-pin) :on-press #(re-frame/dispatch [:keycard-settings.ui/change-credentials-pressed :pin])}] - [quo/list-item + [list.item/list-item {:icon :main-icons/security :size :small :title (i18n/label :t/change-puk) :accessibility-label "change-puk" :on-press #(re-frame/dispatch [:keycard-settings.ui/change-credentials-pressed :puk])}] - [quo/list-item + [list.item/list-item {:icon :main-icons/password :size :small :title (i18n/label :t/change-pairing) :accessibility-label "change-pairing" :on-press #(re-frame/dispatch [:keycard-settings.ui/change-credentials-pressed :pairing])}] - [quo/list-item + [list.item/list-item {:icon :main-icons/keycard :size :small :title (i18n/label :t/keycard-backup) @@ -126,7 +127,7 @@ :backup-card])}] ;; TODO(rasom): uncomment this when unpairing will be enabled ;; https://github.com/status-im/status-mobile/issues/9227 - #_[quo/list-item + #_[list/list-item {:icon :main-icons/close :size :small :title (i18n/label :t/unpair-card) diff --git a/src/status_im/ui/screens/keycard/views.cljs b/src/status_im/ui/screens/keycard/views.cljs index 865cef740d..a7a7cdd8b4 100644 --- a/src/status_im/ui/screens/keycard/views.cljs +++ b/src/status_im/ui/screens/keycard/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.keycard.views (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.bottom-sheet.events :as bottom-sheet] @@ -19,7 +19,8 @@ [status-im.ui.screens.keycard.pin.views :as pin.views] [status-im.ui.screens.keycard.styles :as styles] [utils.re-frame :as rf] - [status-im2.navigation.events :as navigation]) + [status-im2.navigation.events :as navigation] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) ;; NOTE(Ferossgp): Seems like it should be in popover @@ -449,7 +450,7 @@ (defn- more-sheet-content [] [react/view {:flex 1} - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/create-new-key) :icon :main-icons/profile diff --git a/src/status_im/ui/screens/link_previews_settings/views.cljs b/src/status_im/ui/screens/link_previews_settings/views.cljs index 1838c95790..1c97afc9b9 100644 --- a/src/status_im/ui/screens/link_previews_settings/views.cljs +++ b/src/status_im/ui/screens/link_previews_settings/views.cljs @@ -1,13 +1,14 @@ (ns status-im.ui.screens.link-previews-settings.views (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.react-native.resources :as resources] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.screens.link-previews-settings.styles :as styles] - [status-im2.contexts.chat.messages.link-preview.events])) + [status-im2.contexts.chat.messages.link-preview.events] + [status-im.ui.components.list.item :as list.item])) (defn prepare-urls-items-data [link-previews-enabled-sites] @@ -51,7 +52,7 @@ {:data (vec (map (prepare-urls-items-data link-previews-enabled-sites) link-previews-whitelist)) :key-fn (fn [_ i] (str i)) - :render-fn quo/list-item + :render-fn list.item/list-item :footer [quo/text {:color :secondary :style {:margin 16}} (i18n/label :t/previewing-may-share-metadata)]}]]))) diff --git a/src/status_im/ui/screens/log_level_settings/styles.cljs b/src/status_im/ui/screens/log_level_settings/styles.cljs index 55b643a848..fffab3c756 100644 --- a/src/status_im/ui/screens/log_level_settings/styles.cljs +++ b/src/status_im/ui/screens/log_level_settings/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.log-level-settings.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def wrapper 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 87864329ec..69edc03efb 100644 --- a/src/status_im/ui/screens/mobile_network_settings/sheets.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/sheets.cljs @@ -1,11 +1,11 @@ (ns status-im.ui.screens.mobile-network-settings.sheets (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [re-frame.core :as re-frame] + (:require [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.checkbox.view :as checkbox] [status-im.ui.components.react :as react] - [status-im.ui.screens.mobile-network-settings.sheets-styles :as styles])) + [status-im.ui.screens.mobile-network-settings.sheets-styles :as styles] + [status-im.ui.components.list.item :as list.item])) (defn title [label] @@ -72,7 +72,7 @@ [react/view {:align-items :center} [title :mobile-syncing-sheet-title] [details :mobile-syncing-sheet-details]] - [quo/list-item + [list.item/list-item {:theme :accent :accessibility-label "mobile-network-continue-syncing" :title (i18n/label :t/mobile-network-continue-syncing) @@ -80,7 +80,7 @@ :subtitle-max-lines 2 :icon :main-icons/network :on-press #(hide-sheet-and-dispatch [:mobile-network/continue-syncing])}] - [quo/list-item + [list.item/list-item {:theme :negative :accessibility-label "mobile-network-stop-syncing" :title (i18n/label :t/mobile-network-stop-syncing) @@ -100,7 +100,7 @@ [react/view {:align-items :center} [title :t/mobile-network-sheet-offline] [details :t/mobile-network-sheet-offline-details]] - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/mobile-network-start-syncing) :subtitle (i18n/label :t/mobile-network-continue-syncing-details) diff --git a/src/status_im/ui/screens/mobile_network_settings/sheets_styles.cljs b/src/status_im/ui/screens/mobile_network_settings/sheets_styles.cljs index 9d18c6f1bc..9eade48357 100644 --- a/src/status_im/ui/screens/mobile_network_settings/sheets_styles.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/sheets_styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.mobile-network-settings.sheets-styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def title {:height 21 diff --git a/src/status_im/ui/screens/mobile_network_settings/style.cljs b/src/status_im/ui/screens/mobile_network_settings/style.cljs index 70866515f4..af17d42650 100644 --- a/src/status_im/ui/screens/mobile_network_settings/style.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/style.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.mobile-network-settings.style - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def container {:flex 1}) diff --git a/src/status_im/ui/screens/network/edit_network/views.cljs b/src/status_im/ui/screens/network/edit_network/views.cljs index 55bfb5bdc8..80b13e007c 100644 --- a/src/status_im/ui/screens/network/edit_network/views.cljs +++ b/src/status_im/ui/screens/network/edit_network/views.cljs @@ -1,11 +1,12 @@ (ns status-im.ui.screens.network.edit-network.views - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.network.core :as network] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] - [status-im.ui.screens.network.edit-network.styles :as styles]) + [status-im.ui.screens.network.edit-network.styles :as styles] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (defn- render-network-type @@ -14,7 +15,7 @@ :mainnet (i18n/label :t/mainnet-network) :goerli (i18n/label :t/goerli-network) :custom (i18n/label :t/custom))] - [quo/list-item + [list.item/list-item {:title name :accessory :radio :active (= (get-in manage-network [:chain :value]) type) diff --git a/src/status_im/ui/screens/network/network_details/views.cljs b/src/status_im/ui/screens/network/network_details/views.cljs index b75f841ca2..0e2eaf0b97 100644 --- a/src/status_im/ui/screens/network/network_details/views.cljs +++ b/src/status_im/ui/screens/network/network_details/views.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.network.network-details.views - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.network.core :as network] diff --git a/src/status_im/ui/screens/network/styles.cljs b/src/status_im/ui/screens/network/styles.cljs index 2163d2f015..025e8f1c3d 100644 --- a/src/status_im/ui/screens/network/styles.cljs +++ b/src/status_im/ui/screens/network/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.network.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def wrapper diff --git a/src/status_im/ui/screens/network/views.cljs b/src/status_im/ui/screens/network/views.cljs index a6fd710269..087db46a8c 100644 --- a/src/status_im/ui/screens/network/views.cljs +++ b/src/status_im/ui/screens/network/views.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.screens.network.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.network.core :as network] @@ -8,7 +7,8 @@ [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.network.styles :as styles]) + [status-im.ui.screens.network.styles :as styles] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (defn- network-icon @@ -34,7 +34,7 @@ (defn render-network [{:keys [id name] :as network} _ _ current-network] (let [connected? (= id current-network)] - [quo/list-item + [list.item/list-item {:on-press #(re-frame/dispatch [::network/network-entry-pressed network]) :icon :main-icons/network :icon-bg-color (if connected? colors/blue colors/gray-lighter) diff --git a/src/status_im/ui/screens/notifications_settings/views.cljs b/src/status_im/ui/screens/notifications_settings/views.cljs index 3b500b3dac..cce1843ce7 100644 --- a/src/status_im/ui/screens/notifications_settings/views.cljs +++ b/src/status_im/ui/screens/notifications_settings/views.cljs @@ -1,10 +1,11 @@ (ns status-im.ui.screens.notifications-settings.views - (:require [quo.core :as quo] - [quo.design-system.colors :as quo-colors] - [quo.platform :as platform] - [utils.i18n :as i18n] + (:require [utils.i18n :as i18n] [status-im.ui.components.react :as react] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [status-im.ui.components.list.item :as list.item] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] + [react-native.platform :as platform])) (defn local-notifications [] @@ -12,10 +13,10 @@ {:keys [notifications-enabled?]} (rf/sub [:profile/profile])] [:<> [quo/separator - {:color (:ui-02 @quo-colors/theme) + {:color (:ui-02 @colors/theme) :style {:margin-vertical 8}}] [quo/list-header (i18n/label :t/local-notifications)] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/notifications-transactions) :accessibility-label :notifications-button @@ -31,7 +32,7 @@ push-notifications-from-contacts-only?]} (rf/sub [:profile/profile])] [:<> - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/show-notifications) :accessibility-label :notifications-button @@ -39,10 +40,10 @@ :on-press #(rf/dispatch [:push-notifications/switch (not notifications-enabled?)]) :accessory :switch}] [quo/separator - {:color (:ui-02 @quo-colors/theme) + {:color (:ui-02 @colors/theme) :style {:margin-vertical 8}}] [quo/list-header (i18n/label :t/notifications-preferences)] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/notifications-non-contacts) :accessibility-label :notifications-button @@ -52,7 +53,7 @@ [:push-notifications/switch-non-contacts (not push-notifications-from-contacts-only?)]) :accessory :switch}] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/allow-mention-notifications) :accessibility-label :notifications-button @@ -68,7 +69,7 @@ [] (let [{:keys [notifications-enabled?]} (rf/sub [:profile/profile])] [:<> - [quo/list-item + [list.item/list-item {:title (i18n/label :t/local-notifications) :accessibility-label :local-notifications-settings-button :subtitle (i18n/label :t/local-notifications-subtitle) 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 82213c987f..5d960ad8b1 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 @@ -1,5 +1,5 @@ (ns status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def edit-mailserver-view 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 4ec211eb23..f49d5175c2 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,7 +1,7 @@ (ns status-im.ui.screens.offline-messaging-settings.edit-mailserver.views (:require-macros [status-im.utils.views :as views]) (:require [clojure.string :as string] - [quo.core :as quo] + [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.qr-scanner.core :as qr-scanner] diff --git a/src/status_im/ui/screens/offline_messaging_settings/styles.cljs b/src/status_im/ui/screens/offline_messaging_settings/styles.cljs index afb95cb124..7ecca3ae5d 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/styles.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.offline-messaging-settings.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def wrapper diff --git a/src/status_im/ui/screens/offline_messaging_settings/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/views.cljs index 935d91022c..f14407221c 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/views.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.offline-messaging-settings.views (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.icons.icons :as icons] diff --git a/src/status_im/ui/screens/pairing/styles.cljs b/src/status_im/ui/screens/pairing/styles.cljs index 9441374c15..b4a71a859f 100644 --- a/src/status_im/ui/screens/pairing/styles.cljs +++ b/src/status_im/ui/screens/pairing/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.pairing.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def wrapper diff --git a/src/status_im/ui/screens/pairing/views.cljs b/src/status_im/ui/screens/pairing/views.cljs index b4df2eb4da..02fa2d8d52 100644 --- a/src/status_im/ui/screens/pairing/views.cljs +++ b/src/status_im/ui/screens/pairing/views.cljs @@ -1,14 +1,15 @@ (ns status-im.ui.screens.pairing.views (:require-macros [status-im.utils.views :as views]) (:require [clojure.string :as string] - [quo.core :as quo] + [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] [status-im.ui.components.icons.icons :as icons] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] - [status-im.ui.screens.pairing.styles :as styles])) + [status-im.ui.screens.pairing.styles :as styles] + [status-im.ui.components.list.item :as list.item])) (def syncing (reagent/atom false)) (def installation-name (reagent/atom "")) @@ -75,7 +76,7 @@ (defn your-device [{:keys [installation-id name device-type]}] - [quo/list-item + [list.item/list-item {:icon (if (= "desktop" device-type) :main-icons/desktop @@ -87,7 +88,7 @@ enabled? device-type installation-id]}] - [quo/list-item + [list.item/list-item {:icon (if (= "desktop" device-type) :main-icons/desktop :main-icons/mobile) diff --git a/src/status_im/ui/screens/popover/views.cljs b/src/status_im/ui/screens/popover/views.cljs index 86f60a48a5..42af8d9ef0 100644 --- a/src/status_im/ui/screens/popover/views.cljs +++ b/src/status_im/ui/screens/popover/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.popover.views (:require-macros [status-im.utils.views :as views]) (:require ["react-native" :refer (BackHandler)] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.ui.components.animation :as anim] diff --git a/src/status_im/ui/screens/privacy_and_security_settings/delete_profile.cljs b/src/status_im/ui/screens/privacy_and_security_settings/delete_profile.cljs index 5a3cf9b976..1d3e5af608 100644 --- a/src/status_im/ui/screens/privacy_and_security_settings/delete_profile.cljs +++ b/src/status_im/ui/screens/privacy_and_security_settings/delete_profile.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.privacy-and-security-settings.delete-profile - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -8,7 +8,8 @@ [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.react :as react] [status-im.ui.screens.privacy-and-security-settings.events :as delete-profile] - [utils.security.core :as security])) + [utils.security.core :as security] + [status-im.ui.components.list.item :as list.item])) (defn valid-password? [password] @@ -44,26 +45,26 @@ {:weight :bold :size :x-large} (i18n/label :t/delete-profile)]] - [quo/list-item + [list.item/list-item {:title (multiaccounts/displayed-name multiaccount) :icon [chat-icon.screen/contact-icon-contacts-tab multiaccount]}] (when keycard? [react/view [quo/list-header (i18n/label :t/actions)] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/delete-keys-keycard) :accessory :checkbox :active (not keep-keys-on-keycard?) :on-press #(re-frame/dispatch [::delete-profile/keep-keys-on-keycard (not keep-keys-on-keycard?)])}] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/unpair-keycard) :subtitle (i18n/label :t/unpair-keycard-warning) :subtitle-max-lines 4 :disabled true :active true :accessory :checkbox}] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/reset-database) :subtitle (i18n/label :t/reset-database-warning-keycard) :subtitle-max-lines 4 diff --git a/src/status_im/ui/screens/privacy_and_security_settings/messages_from_contacts_only.cljs b/src/status_im/ui/screens/privacy_and_security_settings/messages_from_contacts_only.cljs index 8bdce5f3af..8e0c69b8d7 100644 --- a/src/status_im/ui/screens/privacy_and_security_settings/messages_from_contacts_only.cljs +++ b/src/status_im/ui/screens/privacy_and_security_settings/messages_from_contacts_only.cljs @@ -1,11 +1,11 @@ (ns status-im.ui.screens.privacy-and-security-settings.messages-from-contacts-only (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [re-frame.core :as re-frame] + (:require [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.multiaccounts.update.core :as multiaccounts.update] [status-im.ui.components.react :as react] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [status-im.ui.components.list.item :as list.item])) (rf/defn handle-messages-from-contacts-only-switched {:events [::messages-from-contacts-only-switched]} @@ -19,12 +19,12 @@ [] (views/letsubs [{:keys [messages-from-contacts-only]} [:profile/profile]] [react/view {:margin-top 8} - [quo/list-item + [list.item/list-item {:active (not messages-from-contacts-only) :accessory :radio :title (i18n/label :t/anyone) :on-press #(re-frame/dispatch [::messages-from-contacts-only-switched false])}] - [quo/list-item + [list.item/list-item {:active messages-from-contacts-only :accessory :radio :title (i18n/label :t/contacts) 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 58f876aa6c..3bf4042725 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,5 +1,5 @@ (ns status-im.ui.screens.privacy-and-security-settings.views - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] @@ -8,7 +8,8 @@ [status-im.ui.components.common.common :as components.common] [status-im.ui.components.react :as react] [status-im2.config :as config] - [react-native.platform :as platform]) + [react-native.platform :as platform] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (defn separator @@ -37,7 +38,7 @@ profile-pictures-show-to [:multiaccount/profile-pictures-show-to]] [react/scroll-view {:padding-vertical 8} [quo/list-header (i18n/label :t/security)] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/back-up-seed-phrase) :accessibility-label :back-up-recovery-phrase-button @@ -47,13 +48,13 @@ :on-press #(re-frame/dispatch [:navigate-to :backup-seed])}] [separator] [quo/list-header (i18n/label :t/privacy)] - [quo/list-item + [list.item/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 + [list.item/list-item {:size :small :title (if platform/android? (i18n/label :t/hide-content-when-switching-apps) @@ -65,7 +66,7 @@ [:multiaccounts.ui/preview-privacy-mode-switched ((complement boolean) preview-privacy?)])}] (when config/collectibles-enabled? - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/display-collectibles) :container-margin-bottom 8 @@ -74,13 +75,13 @@ :on-press #(re-frame/dispatch [::multiaccounts.update/toggle-opensea-nfts-visiblity (not opensea-enabled?)])}]) - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/chat-link-previews) :chevron true :on-press #(re-frame/dispatch [:navigate-to :link-previews-settings]) :accessibility-label :chat-link-previews}] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/accept-new-chats-from) :chevron true @@ -91,7 +92,7 @@ :on-press #(re-frame/dispatch [:navigate-to :messages-from-contacts-only]) :accessibility-label :accept-new-chats-from}] (when (not keycard?) - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/reset-password) :chevron true @@ -101,7 +102,7 @@ (re-frame/dispatch [:navigate-to :reset-password])) :accessibility-label :reset-password}]) (when platform/android? - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/webview-camera-permission-requests) :active webview-allow-permission-requests? @@ -113,7 +114,7 @@ ((complement boolean) webview-allow-permission-requests?)])}]) [separator] [quo/list-header (i18n/label :t/privacy-photos)] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/show-profile-pictures) :accessibility-label :show-profile-pictures @@ -121,7 +122,7 @@ :accessory-text (get titles profile-pictures-visibility) :on-press #(re-frame/dispatch [:navigate-to :privacy-and-security-profile-pic]) :chevron true}] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/show-profile-pictures-to) :disabled (not has-picture) @@ -132,7 +133,7 @@ :chevron true}] [separator] - [quo/list-item + [list.item/list-item {:size :small :theme :negative :title (i18n/label :t/delete-my-profile) @@ -142,7 +143,7 @@ (defn ppst-radio-item [id value] - [quo/list-item + [list.item/list-item {:active (= value id) :accessory :radio :title (get titles id) @@ -162,7 +163,7 @@ (defn ppvf-radio-item [id value] - [quo/list-item + [list.item/list-item {:active (= value id) :accessory :radio :title (get titles id) diff --git a/src/status_im/ui/screens/profile/components/sheets.cljs b/src/status_im/ui/screens/profile/components/sheets.cljs index 9e01aba3d9..7a6fdf967d 100644 --- a/src/status_im/ui/screens/profile/components/sheets.cljs +++ b/src/status_im/ui/screens/profile/components/sheets.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.profile.components.sheets - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/profile/components/styles.cljs b/src/status_im/ui/screens/profile/components/styles.cljs index 2ca5fd4efb..219256b87c 100644 --- a/src/status_im/ui/screens/profile/components/styles.cljs +++ b/src/status_im/ui/screens/profile/components/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.profile.components.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) ;; profile header elements diff --git a/src/status_im/ui/screens/profile/components/views.cljs b/src/status_im/ui/screens/profile/components/views.cljs index 3ffe80500d..185f173b2c 100644 --- a/src/status_im/ui/screens/profile/components/views.cljs +++ b/src/status_im/ui/screens/profile/components/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.profile.components.views (:require [clojure.string :as string] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [utils.i18n :as i18n] [status-im.ui.components.icons.icons :as icons] [status-im.ui.components.react :as react] diff --git a/src/status_im/ui/screens/profile/contact/styles.cljs b/src/status_im/ui/screens/profile/contact/styles.cljs index 242092b35a..bd32a8ebb2 100644 --- a/src/status_im/ui/screens/profile/contact/styles.cljs +++ b/src/status_im/ui/screens/profile/contact/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.profile.contact.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def block-action-label {:color colors/red diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index dd93d92c94..2d101c608a 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -1,8 +1,7 @@ (ns status-im.ui.screens.profile.contact.views (:require [clojure.string :as string] - [quo.components.list.item :as list-item] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [quo2.components.avatars.user-avatar.style :as user-avatar.style] [quo2.theme :as theme] [re-frame.core :as re-frame] @@ -16,7 +15,8 @@ [status-im.ui.screens.profile.components.sheets :as sheets] [status-im2.constants :as constants] [utils.i18n :as i18n] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [status-im.ui.components.list.item :as list.item])) (defn actions [{:keys [public-key added? blocked? ens-name mutual?] :as contact} muted?] @@ -66,7 +66,7 @@ (defn pin-settings [public-key pin-count] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/pinned-messages) :size :small :accessibility-label :pinned-messages-item @@ -78,7 +78,7 @@ (defn nickname-settings [{:keys [nickname]}] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/nickname) :size :small :accessibility-label :profile-nickname-item @@ -148,7 +148,7 @@ :style {:flex 1} :accessibility-label (str label "-item-button")} [react/view {:flex 1 :align-items :center} - [list-item/icon-column + [list.item/icon-column {:icon icon :size :small :icon-bg-color (if disabled 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 4d89472768..b8520acc88 100644 --- a/src/status_im/ui/screens/profile/group_chat/views.cljs +++ b/src/status_im/ui/screens/profile/group_chat/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.profile.group-chat.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] @@ -15,13 +15,14 @@ [status-im.ui.screens.chat.sheets :as chat.sheets] [status-im.ui.screens.chat.utils :as chat.utils] [status-im.ui.screens.profile.components.styles :as profile.components.styles] - [utils.debounce :as debounce]) + [utils.debounce :as debounce] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn member-sheet [chat-id member us-admin?] [react/view - [quo/list-item + [list.item/list-item {:theme :accent :icon [chat-icon/contact-icon-contacts-tab member] :title (:primary-name member) @@ -33,7 +34,7 @@ (:public-key member)])}] (when (and us-admin? (not (:admin? member))) - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/make-admin) :accessibility-label :make-admin @@ -41,7 +42,7 @@ :on-press #(chat.sheets/hide-sheet-and-dispatch [:group-chats.ui/make-admin-pressed chat-id (:public-key member)])}]) (when-not (:admin? member) - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/remove-from-chat) :accessibility-label :remove-from-chat @@ -53,7 +54,7 @@ (defn render-member [{:keys [public-key] :as member} _ _ {:keys [chat-id admin? current-user-identity]}] (let [{:keys [primary-name secondary-name]} member] - [quo/list-item + [list.item/list-item (merge {:title primary-name :subtitle secondary-name @@ -94,7 +95,7 @@ [react/view [quo/list-header (i18n/label :t/members-title)] (when allow-adding-members? - [quo/list-item + [list.item/list-item {:title (i18n/label :t/add-members) :icon :main-icons/add-contact :theme :accent @@ -117,7 +118,7 @@ [react/view {:flex-direction :row :align-items :flex-end} [react/view {:padding-left 16 :padding-top 4} [photos/photo (multiaccounts/displayed-photo contact) {:size 36}]]]] - [quo/list-item + [list.item/list-item {:theme :accent :disabled (not allow-adding-members?) :title (i18n/label :t/accept) @@ -126,7 +127,7 @@ :icon :main-icons/checkmark-circle :on-press #(hide-sheet-and-dispatch [:group-chats.ui/add-members-from-invitation id (:public-key contact)])}] - [quo/list-item + [list.item/list-item {:theme :negative :title (i18n/label :t/decline) :accessibility-label :decline-invitation-button @@ -136,7 +137,7 @@ (defn contacts-list-item [{:keys [from] :as invitation}] (let [contact (or @(re-frame/subscribe [:contacts/contact-by-identity from]) {:public-key from})] - [quo/list-item + [list.item/list-item {:title (multiaccounts/displayed-name contact) :icon [chat-icon/contact-icon-contacts-tab contact] :on-press #(re-frame/dispatch [:bottom-sheet/show-sheet-old @@ -193,7 +194,7 @@ :subtitle-icon :icons/tiny-group})} [react/view profile.components.styles/profile-form (when admin? - [quo/list-item + [list.item/list-item {:chevron true :title (i18n/label :t/membership-requests) :accessibility-label :invite-chat-button @@ -205,7 +206,7 @@ (when (pos? invitations) [components.common/counter {:size 22} invitations])) :on-press #(re-frame/dispatch [:navigate-to :group-chat-invite])}]) - [quo/list-item + [list.item/list-item {:title (i18n/label :t/pinned-messages) :icon :main-icons/pin :accessory :text @@ -213,7 +214,7 @@ :chevron true :on-press #(re-frame/dispatch [:pin-message/show-pins-bottom-sheet chat-id])}] (when member? - [quo/list-item + [list.item/list-item {:theme :negative :title (i18n/label :t/leave-chat) :accessibility-label :leave-chat-button diff --git a/src/status_im/ui/screens/profile/seed/styles.cljs b/src/status_im/ui/screens/profile/seed/styles.cljs index 9298e864bb..bad00b7567 100644 --- a/src/status_im/ui/screens/profile/seed/styles.cljs +++ b/src/status_im/ui/screens/profile/seed/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.profile.seed.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def intro-image {:margin-top 16 diff --git a/src/status_im/ui/screens/profile/seed/views.cljs b/src/status_im/ui/screens/profile/seed/views.cljs index 7a97b50984..20aa19d913 100644 --- a/src/status_im/ui/screens/profile/seed/views.cljs +++ b/src/status_im/ui/screens/profile/seed/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.profile.seed.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [clojure.string :as string] - [quo.core :as quo] + [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/profile/user/edit_picture.cljs b/src/status_im/ui/screens/profile/user/edit_picture.cljs index e90b56f28b..fb5bbcc092 100644 --- a/src/status_im/ui/screens/profile/user/edit_picture.cljs +++ b/src/status_im/ui/screens/profile/user/edit_picture.cljs @@ -1,10 +1,10 @@ (ns status-im.ui.screens.profile.user.edit-picture - (:require [quo.core :as quo] - [re-frame.core :as re-frame] + (:require [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.multiaccounts.core :as multiaccounts] [status-im.ui.components.react :as react] - [status-im2.config :as config])) + [status-im2.config :as config] + [status-im.ui.components.list.item :as list.item])) (def crop-size 1000) (def crop-opts @@ -31,13 +31,13 @@ [has-picture] (fn [] [:<> - [quo/list-item + [list.item/list-item {:accessibility-label :take-photo :theme :accent :icon :main-icons/camera :title (i18n/label :t/profile-pic-take) :on-press take-pic}] - [quo/list-item + [list.item/list-item {:accessibility-label :pick-photo :icon :main-icons/gallery :theme :accent @@ -45,7 +45,7 @@ :on-press pick-pic}] (when (and config/enable-remove-profile-picture? has-picture) - [quo/list-item + [list.item/list-item {:accessibility-label :remove-photo :icon :main-icons/delete :theme :accent diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 74b12dd4d9..23fd3f1f73 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -1,27 +1,29 @@ (ns status-im.ui.screens.profile.user.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.design-system.spacing :as spacing] - [quo2.components.avatars.user-avatar.style :as user-avatar.style] - [quo2.theme :as theme] - [re-frame.core :as re-frame] - [reagent.core :as reagent] - [status-im.ethereum.stateofus :as stateofus] - [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.profile-header.view :as profile-header] - [status-im.ui.components.react :as react] - [status-im.ui.screens.profile.user.edit-picture :as edit] - [status-im.ui.screens.profile.user.styles :as styles] - [status-im.ui.screens.profile.visibility-status.views :as visibility-status] - [status-im.utils.gfycat.core :as gfy] - [status-im.utils.universal-links.utils :as universal-links] - [status-im.utils.utils :as utils] - [status-im2.common.qr-codes.view :as qr-codes] - [status-im2.config :as config] - [utils.i18n :as i18n]) + (:require + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.spacing :as spacing] + [quo2.components.avatars.user-avatar.style :as user-avatar.style] + [quo2.theme :as theme] + [re-frame.core :as re-frame] + [reagent.core :as reagent] + [status-im.ethereum.stateofus :as stateofus] + [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.profile-header.view :as profile-header] + [status-im.ui.components.react :as react] + [status-im.ui.screens.profile.user.edit-picture :as edit] + [status-im.ui.screens.profile.user.styles :as styles] + [status-im.ui.screens.profile.visibility-status.views :as visibility-status] + [status-im.utils.gfycat.core :as gfy] + [status-im.utils.universal-links.utils :as universal-links] + [status-im.utils.utils :as utils] + [status-im2.common.qr-codes.view :as qr-codes] + [status-im2.config :as config] + [utils.i18n :as i18n] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (views/defview share-chat-key @@ -84,7 +86,7 @@ [visibility-status/visibility-status-button visibility-status/calculate-button-height-and-dispatch-popover] [quo/separator {:style {:margin-top (:tiny spacing/spacing)}}] - [quo/list-item + [list.item/list-item (cond-> {:title (or (when registrar preferred-name) (i18n/label :t/ens-usernames)) :subtitle (if registrar @@ -102,7 +104,7 @@ :icon :main-icons/username} registrar (assoc :on-press #(re-frame/dispatch [:navigate-to :ens-main registrar])))] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/contacts) :icon :main-icons/in-contacts :accessibility-label :contacts-button @@ -114,7 +116,7 @@ :on-press #(re-frame/dispatch [:navigate-to :contacts-list])}] [react/view {:padding-top 16} [quo/list-header (i18n/label :t/settings)]] - [quo/list-item + [list.item/list-item {:icon :main-icons/security :title (i18n/label :t/privacy-and-security) :accessibility-label :privacy-and-security-settings-button @@ -123,64 +125,64 @@ [components.common/counter {:size 22} 1]) :on-press #(re-frame/dispatch [:navigate-to :privacy-and-security])}] (when config/quo-preview-enabled? - [quo/list-item + [list.item/list-item {:icon :main-icons/appearance :title "Quo2.0 Preview" :accessibility-label :appearance-settings-button :chevron true :on-press #(re-frame/dispatch [:navigate-to :quo2-preview])}]) - [quo/list-item + [list.item/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])}] - [quo/list-item + [list.item/list-item {:icon :main-icons/notification :title (i18n/label :t/notifications) :accessibility-label :notifications-settings-button :chevron true :on-press #(re-frame/dispatch [:navigate-to :notifications])}] - [quo/list-item + [list.item/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 keycard-pairing - [quo/list-item + [list.item/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 + [list.item/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 + [list.item/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 + [list.item/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])}] (when local-pairing-mode-enabled? - [quo/list-item + [list.item/list-item {:icon :i/mobile :title (i18n/label :t/syncing) :accessibility-label :syncing :chevron true :on-press #(re-frame/dispatch [:navigate-to :settings-syncing])}]) [react/view {:padding-vertical 24} - [quo/list-item + [list.item/list-item {:icon :main-icons/log-out :title (i18n/label :t/sign-out) :accessibility-label :log-out-button diff --git a/src/status_im/ui/screens/profile/visibility_status/styles.cljs b/src/status_im/ui/screens/profile/visibility_status/styles.cljs index 334da036d2..e67c435c16 100644 --- a/src/status_im/ui/screens/profile/visibility_status/styles.cljs +++ b/src/status_im/ui/screens/profile/visibility_status/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.profile.visibility-status.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [quo2.foundations.colors :as quo2.colors])) (defn visibility-status-button-container diff --git a/src/status_im/ui/screens/profile/visibility_status/utils.cljs b/src/status_im/ui/screens/profile/visibility_status/utils.cljs index e3b47c7750..4f2b9cca7e 100644 --- a/src/status_im/ui/screens/profile/visibility_status/utils.cljs +++ b/src/status_im/ui/screens/profile/visibility_status/utils.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.profile.visibility-status.utils - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [quo2.foundations.colors :as quo2.colors] [status-im2.constants :as constants] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/profile/visibility_status/views.cljs b/src/status_im/ui/screens/profile/visibility_status/views.cljs index e40ddb5a21..af5d56fab5 100644 --- a/src/status_im/ui/screens/profile/visibility_status/views.cljs +++ b/src/status_im/ui/screens/profile/visibility_status/views.cljs @@ -1,9 +1,9 @@ (ns status-im.ui.screens.profile.visibility-status.views (:require-macros [status-im.utils.views :as views]) (:require ["react-native" :refer (BackHandler)] - [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.react-native :as rn] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] + [react-native.core :as rn] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im2.constants :as constants] diff --git a/src/status_im/ui/screens/progress/views.cljs b/src/status_im/ui/screens/progress/views.cljs index 6735a7438f..559d24edb2 100644 --- a/src/status_im/ui/screens/progress/views.cljs +++ b/src/status_im/ui/screens/progress/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.progress.views (:require-macros [status-im.utils.views :refer [defview]]) - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react])) ;; a simple view with animated progress indicator in its center diff --git a/src/status_im/ui/screens/qr_scanner/views.cljs b/src/status_im/ui/screens/qr_scanner/views.cljs index 6a58ada02d..7dcfc052c5 100644 --- a/src/status_im/ui/screens/qr_scanner/views.cljs +++ b/src/status_im/ui/screens/qr_scanner/views.cljs @@ -2,8 +2,8 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [react-native.camera-kit :as camera-kit] [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.react :as react] diff --git a/src/status_im/ui/screens/reset_password/views.cljs b/src/status_im/ui/screens/reset_password/views.cljs index b5ffd6f414..0c50536afe 100644 --- a/src/status_im/ui/screens/reset_password/views.cljs +++ b/src/status_im/ui/screens/reset_password/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.reset-password.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.multiaccounts.reset-password.core :as reset-password] diff --git a/src/status_im/ui/screens/rpc_usage_info.cljs b/src/status_im/ui/screens/rpc_usage_info.cljs index 65b1366ed8..3da4a04d12 100644 --- a/src/status_im/ui/screens/rpc_usage_info.cljs +++ b/src/status_im/ui/screens/rpc_usage_info.cljs @@ -1,8 +1,7 @@ (ns status-im.ui.screens.rpc-usage-info (:require [clojure.string :as string] - [quo.core :as quo.core] - [quo.design-system.typography :as typography] - [quo.react-native :as quo.react-native] + [status-im.ui.components.core :as status-im.ui.components.core] + [status-im.ui.components.typography :as typography] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -10,7 +9,8 @@ [utils.re-frame :as rf] [status-im.utils.utils :as utils] [status-im2.common.json-rpc.events :as json-rpc] - [taoensso.timbre :as log])) + [taoensso.timbre :as log] + [react-native.core :as rn])) (re-frame/reg-sub :rpc-usage/raw-data (fn [db] (get db :rpc-usage/data))) (re-frame/reg-sub :rpc-usage/filter (fn [db] (get db :rpc-usage/filter))) @@ -85,29 +85,29 @@ (defn stats-table [{:keys [total filtered-total stats]}] - [quo.react-native/scroll-view - {:style {:padding-horizontal 8}} - [quo.react-native/view - {:style {:flex-direction :row - :justify-content :space-between - :margin-bottom 2}} - [quo.core/text {:style typography/font-semi-bold} - (i18n/label :t/rpc-usage-total)] - [quo.core/text {:style typography/font-semi-bold} - (i18n/label :t/rpc-usage-filtered-total {:filtered-total filtered-total :total total})]] - (when (seq stats) - (for [[k v] stats] - ^{:key (str k v)} - [:<> - [quo.react-native/view - {:style {:flex-direction :row - :align-items :center - :margin-vertical 10}} - [quo.core/text {:style {:flex 1}} - k] - [quo.core/text {:style {:margin-left 16}} - v]] - [quo.core/separator]]))]) + rn/scroll-view + {:style {:padding-horizontal 8}} + rn/view + {:style {:flex-direction :row + :justify-content :space-between + :margin-bottom 2}} + [status-im.ui.components.core/text {:style typography/font-semi-bold} + (i18n/label :t/rpc-usage-total)] + [status-im.ui.components.core/text {:style typography/font-semi-bold} + (i18n/label :t/rpc-usage-filtered-total {:filtered-total filtered-total :total total})] + (when (seq stats) + (for [[k v] stats] + ^{:key (str k v)} + [:<> + rn/view + {:style {:flex-direction :row + :align-items :center + :margin-vertical 10}} + [status-im.ui.components.core/text {:style {:flex 1}} + k] + [status-im.ui.components.core/text {:style {:margin-left 16}} + v] + [status-im.ui.components.core/separator]]))) (defn prepare-stats [{:keys [stats]}] @@ -124,20 +124,20 @@ [react/view {:flex 1 :margin-horizontal 8} - [quo.react-native/view - {:style {:flex-direction :row - :margin-vertical 8 - :justify-content :space-between}} - [quo.core/button - {:on-press #(re-frame/dispatch [::reset]) - :accessibility-label :rpc-usage-reset} - (i18n/label :t/rpc-usage-reset)] - [quo.core/button - {:on-press - #(react/copy-to-clipboard (prepare-stats stats)) - :accessibility-label :rpc-usage-copy} - (i18n/label :t/rpc-usage-copy)]] - [quo.core/text-input + rn/view + {:style {:flex-direction :row + :margin-vertical 8 + :justify-content :space-between}} + [status-im.ui.components.core/button + {:on-press #(re-frame/dispatch [::reset]) + :accessibility-label :rpc-usage-reset} + (i18n/label :t/rpc-usage-reset)] + [status-im.ui.components.core/button + {:on-press + #(react/copy-to-clipboard (prepare-stats stats)) + :accessibility-label :rpc-usage-copy} + (i18n/label :t/rpc-usage-copy)] + [status-im.ui.components.core/text-input {:on-change-text #(re-frame/dispatch [::set-filter %]) :label (i18n/label :t/rpc-usage-filter-methods) :placeholder (i18n/label :t/rpc-usage-filter) diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index 9a9a0525e8..a2d0640932 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.screens (:require - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [utils.i18n :as i18n] [status-im.ui.components.icons.icons :as icons] [status-im.ui.screens.about-app.views :as about-app] diff --git a/src/status_im/ui/screens/signing/sheets.cljs b/src/status_im/ui/screens/signing/sheets.cljs index 4940e50ece..459658f961 100644 --- a/src/status_im/ui/screens/signing/sheets.cljs +++ b/src/status_im/ui/screens/signing/sheets.cljs @@ -1,8 +1,8 @@ (ns status-im.ui.screens.signing.sheets (:require-macros [status-im.utils.views :as views]) (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/signing/styles.cljs b/src/status_im/ui/screens/signing/styles.cljs index acd53d28c0..a76c4eb537 100644 --- a/src/status_im/ui/screens/signing/styles.cljs +++ b/src/status_im/ui/screens/signing/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.signing.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def header {:flex-direction :row diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index b9d59d156f..32eb3324ec 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -2,8 +2,8 @@ (:require-macros [status-im.utils.views :as views]) (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.ethereum.tokens :as tokens] @@ -26,7 +26,8 @@ [status-im.utils.deprecated-types :as types] [status-im.utils.utils :as utils] [status-im.wallet.utils :as wallet.utils] - [utils.security.core :as security])) + [utils.security.core :as security] + [status-im.ui.components.list.item :as list.item])) (defn separator [] @@ -42,7 +43,7 @@ [title contact] [copyable-text/copyable-text-view {:copied-text (:address contact)} - [quo/list-item + [list.item/list-item {:title title :title-prefix-width 45 :size :small @@ -57,7 +58,7 @@ [{:keys [icon color] :as token} display-symbol] (when token [react/view - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/wallet-asset) :accessory [react/view {:flex-direction :row} @@ -385,7 +386,7 @@ (let [converted-value (* amount (get-in prices [(keyword display-symbol) (keyword (:code wallet-currency))]))] - [quo/list-item + [list.item/list-item {:size :small :title (if amount-error [error-item :t/send-request-amount show-error] @@ -413,7 +414,7 @@ (get-in prices [(keyword fee-display-symbol) (keyword (:code wallet-currency))]))] - [quo/list-item + [list.item/list-item {:size :small :title (if (and (not (or gas-price-loading? gas-loading?)) gas-error) [error-item :t/network-fee show-error] @@ -455,7 +456,7 @@ (views/defview network-item [] (views/letsubs [network-name [:network-name]] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/network) :size :small :accessory :text @@ -465,7 +466,7 @@ [] [:<> [separator] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/advanced) :chevron true diff --git a/src/status_im/ui/screens/stickers/styles.cljs b/src/status_im/ui/screens/stickers/styles.cljs index 356d029fdd..230d6936a8 100644 --- a/src/status_im/ui/screens/stickers/styles.cljs +++ b/src/status_im/ui/screens/stickers/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.stickers.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def screen {:flex 1}) diff --git a/src/status_im/ui/screens/stickers/views.cljs b/src/status_im/ui/screens/stickers/views.cljs index 7cec7a84f0..60333b2184 100644 --- a/src/status_im/ui/screens/stickers/views.cljs +++ b/src/status_im/ui/screens/stickers/views.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.stickers.views - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.fast-image :as fast-image] diff --git a/src/status_im/ui/screens/sync_settings/views.cljs b/src/status_im/ui/screens/sync_settings/views.cljs index 33eaea592f..c1dd76cf8c 100644 --- a/src/status_im/ui/screens/sync_settings/views.cljs +++ b/src/status_im/ui/screens/sync_settings/views.cljs @@ -1,11 +1,12 @@ (ns status-im.ui.screens.sync-settings.views (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :as constants] [utils.i18n :as i18n] - [status-im.ui.components.react :as react])) + [status-im.ui.components.react :as react] + [status-im.ui.components.list.item :as list.item])) (views/defview sync-settings [] @@ -17,7 +18,7 @@ current-mailserver-name [:mailserver/current-name]] [react/scroll-view [quo/list-header (i18n/label :t/data-syncing)] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/mobile-network-settings) :accessibility-label :notifications-button @@ -27,7 +28,7 @@ :accessory-text (if syncing-on-mobile-network? (i18n/label :t/mobile-network-use-mobile) (i18n/label :t/mobile-network-use-wifi))}] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/backup-settings) :accessibility-label :backup-settings-button @@ -37,7 +38,7 @@ :accessory-text (if backup-enabled? (i18n/label :t/backup-enabled) (i18n/label :t/backup-disabled))}] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/default-sync-period) :accessibility-label :default-sync-period-button @@ -57,7 +58,7 @@ (i18n/label :t/one-week) (= default-sync-period constants/one-month) (i18n/label :t/one-month))}] - [quo/list-item + [list.item/list-item {:size :small :accessibility-label :offline-messages-settings-button :title (i18n/label :t/history-nodes) @@ -71,7 +72,7 @@ :background-color colors/gray-lighter :margin-top 8}] [quo/list-header (i18n/label :t/device-syncing)] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/devices) :accessibility-label :pairing-settings-button diff --git a/src/status_im/ui/screens/wakuv2_settings/edit_node/styles.cljs b/src/status_im/ui/screens/wakuv2_settings/edit_node/styles.cljs index 5e6eb22145..8f487c6ecd 100644 --- a/src/status_im/ui/screens/wakuv2_settings/edit_node/styles.cljs +++ b/src/status_im/ui/screens/wakuv2_settings/edit_node/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wakuv2-settings.edit-node.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def edit-node-view diff --git a/src/status_im/ui/screens/wakuv2_settings/edit_node/views.cljs b/src/status_im/ui/screens/wakuv2_settings/edit_node/views.cljs index 8773df6207..f3b6cd23eb 100644 --- a/src/status_im/ui/screens/wakuv2_settings/edit_node/views.cljs +++ b/src/status_im/ui/screens/wakuv2_settings/edit_node/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.wakuv2-settings.edit-node.views (:require [clojure.string :as string] - [quo.core :as quo] + [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.react :as react] diff --git a/src/status_im/ui/screens/wakuv2_settings/views.cljs b/src/status_im/ui/screens/wakuv2_settings/views.cljs index 38c1949651..f578e1739f 100644 --- a/src/status_im/ui/screens/wakuv2_settings/views.cljs +++ b/src/status_im/ui/screens/wakuv2_settings/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.wakuv2-settings.views (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.list.views :as list] diff --git a/src/status_im/ui/screens/wallet/account/styles.cljs b/src/status_im/ui/screens/wallet/account/styles.cljs index 78dc54e663..210e961aa4 100644 --- a/src/status_im/ui/screens/wallet/account/styles.cljs +++ b/src/status_im/ui/screens/wallet/account/styles.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.wallet.account.styles (:require [clojure.string :as string] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [status-im.ui.components.animation :as animation])) (defn card diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs index d9baf17cf2..beaaa371a2 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/src/status_im/ui/screens/wallet/account/views.cljs @@ -1,8 +1,8 @@ (ns status-im.ui.screens.wallet.account.views (:require - [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.design-system.spacing :as spacing] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.spacing :as spacing] [quo2.core :as quo2] [quo2.components.markdown.text :as quo2.text] [quo2.foundations.colors :as quo2.colors] 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 768f00e884..9c03576930 100644 --- a/src/status_im/ui/screens/wallet/account_settings/views.cljs +++ b/src/status_im/ui/screens/wallet/account_settings/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.account-settings.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -10,7 +10,8 @@ [status-im.ui.components.react :as react] [status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.topbar :as topbar] - [utils.security.core :as security])) + [utils.security.core :as security] + [status-im.ui.components.list.item :as list.item])) (defn not-valid-password? [password] @@ -166,7 +167,7 @@ (when (#{:key :seed :watch} type) [react/view [react/view {:margin-bottom 8 :margin-top 28 :height 1 :background-color colors/gray-lighter}] - [quo/list-item + [list.item/list-item {:theme :negative :title (i18n/label :t/delete-account) :on-press #(if (= :watch type) diff --git a/src/status_im/ui/screens/wallet/accounts/common.cljs b/src/status_im/ui/screens/wallet/accounts/common.cljs index b4b11e918d..4e0ca68d14 100644 --- a/src/status_im/ui/screens/wallet/accounts/common.cljs +++ b/src/status_im/ui/screens/wallet/accounts/common.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.wallet.accounts.common - (:require [quo.core :as quo] - [quo.react-native :as rn] + (:require [status-im.ui.components.core :as quo] + [react-native.core :as rn] [quo2.components.markdown.text :as quo2.text] [quo2.foundations.colors :as quo2.colors] [re-frame.core :as re-frame] @@ -8,7 +8,8 @@ [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.screens.wallet.components.views :as wallet.components] [status-im.utils.utils :as utils.utils] - [status-im.wallet.utils :as wallet.utils])) + [status-im.wallet.utils :as wallet.utils] + [status-im.ui.components.list.item :as list.item])) ;; Note(rasom): sometimes `refreshing` might get stuck on iOS if action happened ;; too fast. By updating this atom in 1s we ensure that `refreshing?` property @@ -38,7 +39,7 @@ (defn render-asset [{:keys [icon decimals amount color value] :as token} _ _ currency] - [quo/list-item + [list.item/list-item {:title [quo/text {:weight :medium} [quo/text {:weight :inherit} (str (if amount @@ -76,20 +77,4 @@ (wallet.utils/format-amount amount decimals) "...") " " - (wallet.utils/display-symbol token))]]] - #_[quo/list-item - {:title [quo/text {:weight :medium} - [quo/text {:weight :inherit} - (str (if amount - (wallet.utils/format-amount amount decimals) - "...") - " ")] - [quo/text - {:color :secondary - :weight :inherit} - (wallet.utils/display-symbol token)]] - :subtitle (str (if value value "...") " " currency) - :accessibility-label (str (:symbol token) "-asset-value") - :icon (if icon - [wallet.components/token-icon icon] - [chat-icon/custom-icon-view-list (:name token) color])}]) + (wallet.utils/display-symbol token))]]]) diff --git a/src/status_im/ui/screens/wallet/accounts/sheets.cljs b/src/status_im/ui/screens/wallet/accounts/sheets.cljs index d744adbf59..89404c3faf 100644 --- a/src/status_im/ui/screens/wallet/accounts/sheets.cljs +++ b/src/status_im/ui/screens/wallet/accounts/sheets.cljs @@ -1,8 +1,8 @@ (ns status-im.ui.screens.wallet.accounts.sheets - (:require [quo.core :as quo] - [re-frame.core :as re-frame] + (:require [re-frame.core :as re-frame] [utils.i18n :as i18n] - [status-im.ui.components.react :as react])) + [status-im.ui.components.react :as react] + [status-im.ui.components.list.item :as list.item])) (defn hide-sheet-and-dispatch [event] @@ -13,49 +13,49 @@ [mnemonic] (fn [] [:<> - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/wallet-manage-accounts) :icon :main-icons/account :accessibility-label :wallet-manage-accounts :on-press #(hide-sheet-and-dispatch [:navigate-to :manage-accounts])}] - [quo/list-item + [list.item/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])}] - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/wallet-manage-app-connections) :icon :main-icons/manage-connections :accessibility-label :wallet-manage-app-connections :on-press #(hide-sheet-and-dispatch [:navigate-to :show-all-connections])}] - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/scan-tokens) :icon :main-icons/refresh :accessibility-label :wallet-scan-token :on-press #(hide-sheet-and-dispatch [:wallet/update-balances nil true])}] - [quo/list-item + [list.item/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])}] - [quo/list-item + [list.item/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 - [quo/list-item + [list.item/list-item {:theme :negative :title (i18n/label :t/wallet-backup-recovery-title) :icon :main-icons/security @@ -67,14 +67,14 @@ [account type wallet] [react/view (when-not (= type :watch) - [quo/list-item + [list.item/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])}]) - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/share) :icon :main-icons/share @@ -82,7 +82,7 @@ :on-press #(hide-sheet-and-dispatch [:wallet/share-popover (:address account)])}] (when-not wallet - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/hide) :icon :main-icons/hide @@ -94,7 +94,7 @@ [] (let [keycard? @(re-frame/subscribe [:keycard-multiaccount?])] [react/view - [quo/list-item + [list.item/list-item {:title (i18n/label :t/generate-a-new-account) :theme :accent :icon :main-icons/add @@ -102,7 +102,7 @@ :on-press #(hide-sheet-and-dispatch [:wallet.accounts/start-adding-new-account {:type :generate}])}] - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/add-a-watch-account) :icon :main-icons/show @@ -111,7 +111,7 @@ [:wallet.accounts/start-adding-new-account {:type :watch}])}] (when-not keycard? - [quo/list-item + [list.item/list-item {:title (i18n/label :t/enter-a-seed-phrase) :theme :accent :icon :main-icons/text @@ -120,7 +120,7 @@ [:wallet.accounts/start-adding-new-account {:type :seed}])}]) (when-not keycard? - [quo/list-item + [list.item/list-item {:title (i18n/label :t/enter-a-private-key) :theme :accent :icon :main-icons/address @@ -132,7 +132,7 @@ (defn account-settings [] [react/view - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/account-settings) :accessibility-label :account-settings-bottom-sheet diff --git a/src/status_im/ui/screens/wallet/accounts/styles.cljs b/src/status_im/ui/screens/wallet/accounts/styles.cljs index bf209616a3..fe5cec2678 100644 --- a/src/status_im/ui/screens/wallet/accounts/styles.cljs +++ b/src/status_im/ui/screens/wallet/accounts/styles.cljs @@ -1,7 +1,6 @@ (ns status-im.ui.screens.wallet.accounts.styles (:require [clojure.string :as string] - [quo.animated :as animated] - [quo.design-system.colors :as colors])) + [status-im.ui.components.colors :as colors])) (def dot-size 6) @@ -46,7 +45,7 @@ (defn accounts-mnemonic [{:keys [animation]}] - {:opacity (animated/mix animation 1 0) + {:opacity (if animation 1 0) :flex 1 :justify-content :center :position :absolute diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index a472b8cd21..c10d66293b 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/src/status_im/ui/screens/wallet/accounts/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.accounts.views - (:require [quo.animated :as reanimated] - [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [react-native.reanimated :as reanimated] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [quo2.core :as quo2] [quo2.components.markdown.text :as quo2.text] [quo2.foundations.colors :as quo2.colors] @@ -204,72 +204,15 @@ [] (views/letsubs [currency [:wallet/currency] portfolio-value [:portfolio-value]] - ;empty-balances? [:empty-balances?] - ;frozen-card? [:keycard/frozen-card?] - ;{:keys [mnemonic]} [:multiaccount]] [react/view {:padding-vertical 12} [quo2.text/text (i18n/label :t/wallet-total-value)] [quo2.text/text {:size :heading-1 :weight :semi-bold} (str portfolio-value " " (:code currency))] - [react/scroll-view {:horizontal true}]] - #_[reanimated/view {:style (styles/container {:minimized minimized})} - (when (or - (and frozen-card? minimized) - (and mnemonic minimized (not empty-balances?))) - [reanimated/view {:style (styles/accounts-mnemonic {:animation animation})} - [react/touchable-highlight - {:on-press #(re-frame/dispatch - (if frozen-card? - [::keycard.login/reset-pin] - [:navigate-to :backup-seed]))} - [react/view - {:flex-direction :row - :align-items :center} - [react/view - {:width 14 - :height 14 - :background-color colors/gray - :border-radius 7 - :align-items :center - :justify-content :center - :margin-right 9} - [react/text - {:style {:color colors/white - :font-size 13 - :font-weight "700"}} - "!"]] - [react/text - {:style {:color colors/gray} - :accessibility-label :back-up-your-seed-phrase-warning} - (if frozen-card? - (i18n/label :t/your-card-is-frozen) - (i18n/label :t/back-up-your-seed-phrase))]]]]) - - [reanimated/view - {:style (styles/value-container {:minimized minimized - :animation animation}) - :pointer-events :none} - [reanimated/view {:style {:justify-content :center}} - [quo/text - {:animated? true - :weight :semi-bold - :style (styles/value-text {:minimized minimized})} - portfolio-value - [quo/text - {:animated? true - :size :inherit - :weight :inherit - :color :secondary} - (str " " (:code currency))]]]] - (when-not minimized - [reanimated/view - [quo/text {:color :secondary} - (i18n/label :t/wallet-total-value)]])])) + [react/scroll-view {:horizontal true}]])) (views/defview accounts [selected-account-atom] (views/letsubs [visible-accounts [:multiaccount/visible-accounts]] - ;keycard? [:keycard-multiaccount?]] (do (reset! selected-account-atom (:address (first visible-accounts))) (let [accounts-data (for [account visible-accounts] diff --git a/src/status_im/ui/screens/wallet/accounts_manage/views.cljs b/src/status_im/ui/screens/wallet/accounts_manage/views.cljs index 64c9d2d14d..1db7039e21 100644 --- a/src/status_im/ui/screens/wallet/accounts_manage/views.cljs +++ b/src/status_im/ui/screens/wallet/accounts_manage/views.cljs @@ -1,11 +1,11 @@ (ns status-im.ui.screens.wallet.accounts-manage.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [reagent.core :as reagent] [status-im.ui.components.icons.icons :as icons] [status-im.ui.components.list.views :as list] [utils.re-frame :as rf] - [status-im.utils.utils :as utils])) + [status-im.utils.utils :as utils] + [status-im.ui.components.list.item :as list.item])) (defn render-account [_] @@ -15,7 +15,7 @@ (not= (:hidden old-item) (:hidden new-item))) :reagent-render (fn [{:keys [hidden name address wallet] :as account}] - [quo/list-item + [list.item/list-item {:accessory [icons/icon (if hidden :main-icos/hide :main-icos/show) (merge {:accessibility-label (if hidden :hide-icon :show-icon)} 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 a87865705d..a17e82e366 100644 --- a/src/status_im/ui/screens/wallet/add_new/views.cljs +++ b/src/status_im/ui/screens/wallet/add_new/views.cljs @@ -2,8 +2,8 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [cljs.spec.alpha :as spec] [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/ui/screens/wallet/buy_crypto/sheets.cljs b/src/status_im/ui/screens/wallet/buy_crypto/sheets.cljs index 669c65eab9..ae0fcbeba2 100644 --- a/src/status_im/ui/screens/wallet/buy_crypto/sheets.cljs +++ b/src/status_im/ui/screens/wallet/buy_crypto/sheets.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wallet.buy-crypto.sheets - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) ;; This needs to be a function because `colors/x` is a mutable reference ;; and changes dynamically based on the appearance settings diff --git a/src/status_im/ui/screens/wallet/buy_crypto/views.cljs b/src/status_im/ui/screens/wallet/buy_crypto/views.cljs index 5d9834a528..7a3ed55022 100644 --- a/src/status_im/ui/screens/wallet/buy_crypto/views.cljs +++ b/src/status_im/ui/screens/wallet/buy_crypto/views.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wallet.buy-crypto.views - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -10,7 +10,8 @@ [status-im.ui.components.webview :as components.webview] [status-im.ui.screens.browser.views :as browser.views] [status-im.ui.screens.chat.photos :as photos] - [status-im.ui.screens.wallet.buy-crypto.sheets :as sheets]) + [status-im.ui.screens.wallet.buy-crypto.sheets :as sheets] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (def learn-more-url "") @@ -26,7 +27,7 @@ [react/touchable-highlight {:on-press #(re-frame/dispatch [:open-modal :buy-crypto-website on-ramp]) :style {:flex 1}} - [quo/list-item + [list.item/list-item {:title [react/view {:style {:flex 1}} [quo/text {:size :large diff --git a/src/status_im/ui/screens/wallet/collectibles/views.cljs b/src/status_im/ui/screens/wallet/collectibles/views.cljs index 58724e1e4c..d59fe01971 100644 --- a/src/status_im/ui/screens/wallet/collectibles/views.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/views.cljs @@ -1,8 +1,8 @@ (ns status-im.ui.screens.wallet.collectibles.views (:require ["react-native-svg" :refer (SvgUri)] [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -16,7 +16,8 @@ [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.wallet.components.views :as wallet.components] [utils.re-frame :as rf] - [status-im.wallet.core :as wallet])) + [status-im.wallet.core :as wallet] + [status-im.ui.components.list.item :as list.item])) (def svg-uri (reagent/adapt-react-class SvgUri)) @@ -184,7 +185,7 @@ [accordion/section {:title [react/view {:flex 1} - [quo/list-item + [list.item/list-item {:title (:name collectible) :text-size :large :accessibility-label @@ -283,18 +284,18 @@ :border-color colors/gray-lighter}}] ;; TODO : Enable txns - ;; [quo/list-item {:title (i18n/label :t/wallet-send) + ;; [list/list-item {:title (i18n/label :t/wallet-send) ;; :icon :main-icons/send :accessibility-label :nft-send :theme :accent ;; :on-press #()}] ;; TODO : What to do with share? Share links or share image? - ;; [quo/list-item {:title (i18n/label :t/share) + ;; [list/list-item {:title (i18n/label :t/share) ;; :theme :accent ;; :accessibility-label ;; :nft-share ;; :on-press #() ;; :icon :main-icons/share}] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/view-on-opensea) :theme :accent :icon :main-icons/browser @@ -303,7 +304,7 @@ [toastable-highlight-view ;; the last string is an emoji. It might not show up in all editors but its there {:toast-label (str (i18n/label :t/profile-picture-updated)) " " "😎"} - [quo/list-item + [list.item/list-item {:title (i18n/label :t/use-as-profile-picture) :theme :accent :on-press #(re-frame/dispatch diff --git a/src/status_im/ui/screens/wallet/components/styles.cljs b/src/status_im/ui/screens/wallet/components/styles.cljs index ca1edeaf0c..bb7ffe18f6 100644 --- a/src/status_im/ui/screens/wallet/components/styles.cljs +++ b/src/status_im/ui/screens/wallet/components/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wallet.components.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (defn separator [] 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 212cb57506..76f0622e22 100644 --- a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs +++ b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs @@ -1,13 +1,14 @@ (ns status-im.ui.screens.wallet.custom-tokens.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.react :as react] [status-im.ui.components.toolbar :as toolbar] - [status-im.ui.components.topbar :as topbar])) + [status-im.ui.components.topbar :as topbar] + [status-im.ui.components.list.item :as list.item])) (def debounce-timers (atom {})) @@ -160,7 +161,7 @@ :editable false}]]]]] [react/view {:height 24}] (when custom? - [quo/list-item + [list.item/list-item {:theme :negative :title (i18n/label :t/remove-token) :icon :main-icons/delete diff --git a/src/status_im/ui/screens/wallet/manage_connections/styles.cljs b/src/status_im/ui/screens/wallet/manage_connections/styles.cljs index cbf338a452..1fe7b59573 100644 --- a/src/status_im/ui/screens/wallet/manage_connections/styles.cljs +++ b/src/status_im/ui/screens/wallet/manage_connections/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wallet.manage-connections.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def dapp-icon {:width 30 diff --git a/src/status_im/ui/screens/wallet/manage_connections/views.cljs b/src/status_im/ui/screens/wallet/manage_connections/views.cljs index e987470d63..a133bced5e 100644 --- a/src/status_im/ui/screens/wallet/manage_connections/views.cljs +++ b/src/status_im/ui/screens/wallet/manage_connections/views.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wallet.manage-connections.views - (:require [quo.react-native :as rn] + (:require [react-native.core :as rn] [re-frame.core :as re-frame] [status-im.ui.screens.wallet.manage-connections.styles :as styles] [status-im2.common.not-implemented :as not-implemented])) diff --git a/src/status_im/ui/screens/wallet/recipient/views.cljs b/src/status_im/ui/screens/wallet/recipient/views.cljs index 80cd0bd46e..5c4810eb8c 100644 --- a/src/status_im/ui/screens/wallet/recipient/views.cljs +++ b/src/status_im/ui/screens/wallet/recipient/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.recipient.views (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [status-im.ethereum.stateofus :as stateofus] @@ -17,7 +17,8 @@ [status-im.utils.utils :as utils] [utils.debounce :as debounce] [utils.string :as utils.string] - [utils.address :as address]) + [utils.address :as address] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :as views])) (defn- recipient-topbar @@ -60,7 +61,7 @@ (let [opened? (reagent/atom false)] (fn [title cnt content] [react/view {:padding-vertical 8} - [quo/list-item + [list.item/list-item {:title title :on-press #(swap! opened? not) :accessory @@ -78,7 +79,7 @@ (defn render-account [account] - [quo/list-item + [list.item/list-item {:icon [chat-icon/custom-icon-view-list (:name account) (:color account)] :title (:name account) :on-press #(re-frame/dispatch [:wallet.send/set-recipient (:address account)]) @@ -91,7 +92,7 @@ (defn contacts-list-item [{:keys [name] :as contact}] - [quo/list-item + [list.item/list-item {:title (:primary-name contact) :subtitle (:secondary-name contact) :on-press #(do @@ -125,7 +126,7 @@ [{:keys [from to type amount-text currency-text]}] (let [inbound? (= type :inbound) address (if inbound? from to)] - [quo/list-item + [list.item/list-item {:title [quo/text {:monospace true} (utils/get-shortened-checksum-address address)] :on-press #(re-frame/dispatch [:wallet.recipient/address-changed address]) @@ -153,7 +154,7 @@ [{:keys [address name]}] (let [noname? (string/blank? name) short-address (utils/get-shortened-checksum-address address)] - [quo/list-item + [list.item/list-item {:icon [chat-icon/custom-icon-view-list (if noname? " 2" name) (rand-nth colors/chat-colors)] @@ -178,7 +179,7 @@ cnt [react/view ;;TODO implement later - #_[quo/list-item + #_[list/list-item {:title "Add favourite" :icon :main-icons/add :theme :accent}] diff --git a/src/status_im/ui/screens/wallet/request/views.cljs b/src/status_im/ui/screens/wallet/request/views.cljs index e1df979d85..4fed477ff6 100644 --- a/src/status_im/ui/screens/wallet/request/views.cljs +++ b/src/status_im/ui/screens/wallet/request/views.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wallet.request.views - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.ethereum.eip.eip55 :as eip55] diff --git a/src/status_im/ui/screens/wallet/send/sheets.cljs b/src/status_im/ui/screens/wallet/send/sheets.cljs index cfed52325a..bd91914c37 100644 --- a/src/status_im/ui/screens/wallet/send/sheets.cljs +++ b/src/status_im/ui/screens/wallet/send/sheets.cljs @@ -1,12 +1,11 @@ (ns status-im.ui.screens.wallet.send.sheets (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [re-frame.core :as re-frame] - [utils.i18n :as i18n] + (:require [re-frame.core :as re-frame] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] - [status-im.ui.screens.wallet.accounts.common :as common])) + [status-im.ui.screens.wallet.accounts.common :as common] + [status-im.ui.components.list.item :as list.item])) (defn asset [currency token] @@ -27,7 +26,7 @@ (defn render-account [account _ _ {:keys [field event]}] - [quo/list-item + [list.item/list-item {:icon [chat-icon/custom-icon-view-list (:name account) (:color account)] :title (:name account) :on-press #(re-frame/dispatch [event field account])}]) @@ -50,25 +49,3 @@ {: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 :accent - :accessibility-label :chose-recipient-accounts-button - :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 #(re-frame/dispatch [:wallet.send/qr-scanner - {:handler :wallet.send/qr-scanner-result}])} - {: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])}]] - ^{:key item} - [quo/list-item item])]) diff --git a/src/status_im/ui/screens/wallet/send/styles.cljs b/src/status_im/ui/screens/wallet/send/styles.cljs index a92391a572..a04616a0c6 100644 --- a/src/status_im/ui/screens/wallet/send/styles.cljs +++ b/src/status_im/ui/screens/wallet/send/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wallet.send.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (defn sheet [] diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index 4b21f2db4e..37700c6bfa 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -1,8 +1,8 @@ (ns status-im.ui.screens.wallet.send.views (:require-macros [status-im.utils.views :refer [defview letsubs] :as views]) - (:require [quo.core :as quo] + (:require [status-im.ui.components.core :as quo] [quo2.core :as quo2] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im.commands.core :as commands] [utils.i18n :as i18n] @@ -20,7 +20,8 @@ [utils.money :as money] [status-im.utils.utils :as utils] [status-im.wallet.utils :as wallet.utils] - [utils.address :as address])) + [utils.address :as address] + [status-im.ui.components.list.item :as list.item])) (defn header [{:keys [label small-screen?]}] @@ -61,7 +62,7 @@ (defn render-account [account {:keys [amount decimals] :as token} event] - [quo/list-item + [list.item/list-item {:icon [chat-icon/custom-icon-view-list (:name account) (:color account)] :title (:name account) :subtitle (when token @@ -78,14 +79,14 @@ (defn render-contact [contact from-chat?] (if from-chat? - [quo/list-item + [list.item/list-item {:title (multiaccounts/displayed-name contact) :subtitle [quo/text {:monospace true :color :secondary} (utils/get-shortened-checksum-address (:address contact))] :icon [chat-icon/contact-icon-contacts-tab contact]}] - [quo/list-item + [list.item/list-item (merge {:title (if-not contact (i18n/label :t/wallet-choose-recipient) [quo/text diff --git a/src/status_im/ui/screens/wallet/settings/views.cljs b/src/status_im/ui/screens/wallet/settings/views.cljs index 90d7037086..c04ff0ebc7 100644 --- a/src/status_im/ui/screens/wallet/settings/views.cljs +++ b/src/status_im/ui/screens/wallet/settings/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.wallet.settings.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -9,7 +9,8 @@ [status-im.ui.components.react :as react] [status-im.ui.components.search-input.view :as search-input] [status-im.ui.components.topbar :as topbar] - [status-im.ui.screens.wallet.components.views :as wallet.components]) + [status-im.ui.screens.wallet.components.views :as wallet.components] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defonce search-active? (reagent/atom false)) @@ -30,14 +31,14 @@ [{:keys [custom?] :as token}] (fn [] [react/view - [quo/list-item + [list.item/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? - [quo/list-item + [list.item/list-item {:theme :negative :title (i18n/label :t/remove-token) :icon :main-icons/delete @@ -57,7 +58,7 @@ color :color checked? :checked? :as token}] - [quo/list-item + [list.item/list-item {:active checked? :accessory :checkbox :animated-accessory? false @@ -102,7 +103,7 @@ [list/section-list {:header [react/view {:margin-top 16} - [quo/list-item + [list.item/list-item {:theme :accent :title (i18n/label :t/add-custom-token) :icon :main-icons/add 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 c3bc34efaa..0477eaad04 100644 --- a/src/status_im/ui/screens/wallet/signing_phrase/views.cljs +++ b/src/status_im/ui/screens/wallet/signing_phrase/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.signing-phrase.views (:require-macros [status-im.utils.views :as views]) - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.icons.icons :as icons] diff --git a/src/status_im/ui/screens/wallet/swap/views.cljs b/src/status_im/ui/screens/wallet/swap/views.cljs index 7d8d0fafec..4c2530ecf3 100644 --- a/src/status_im/ui/screens/wallet/swap/views.cljs +++ b/src/status_im/ui/screens/wallet/swap/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.swap.views (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im.ethereum.tokens :as tokens] [utils.i18n :as i18n] @@ -16,7 +16,8 @@ [status-im.ui.screens.wallet.components.views :as wallet.components] [utils.re-frame :as rf] [status-im.wallet.swap.core :as wallet.swap] - [status-im.wallet.utils :as wallet.utils])) + [status-im.wallet.utils :as wallet.utils] + [status-im.ui.components.list.item :as list.item])) (defn render-asset [{{:keys @@ -25,7 +26,7 @@ :token currency :currency on-press :on-press}] - [quo/list-item + [list.item/list-item {:title [quo/text {:weight :medium} [quo/text {:weight :inherit} (str (if amount @@ -176,7 +177,7 @@ :border-radius 12 :margin-top 12 :border-color colors/gray-lighter}} - [quo/list-item + [list.item/list-item {:title title :subtitle body :active-background-enabled @@ -346,7 +347,7 @@ :on-change #() :on-save #()}] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/maximum-fee) :text-size :base :title-text-weight :regular @@ -383,7 +384,7 @@ :on-change #() :on-save #()}] - [quo/list-item + [list.item/list-item {:title (i18n/label :t/price-impact) :text-size :base :title-text-weight :regular diff --git a/src/status_im/ui/screens/wallet/transactions/styles.cljs b/src/status_im/ui/screens/wallet/transactions/styles.cljs index 4a04444286..c528a29577 100644 --- a/src/status_im/ui/screens/wallet/transactions/styles.cljs +++ b/src/status_im/ui/screens/wallet/transactions/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wallet.transactions.styles - (:require [quo.design-system.colors :as colors] + (:require [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def forward diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index f56556d8f9..d25e57e3fc 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.wallet.transactions.views - (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + (:require [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.icons.icons :as icons] @@ -10,7 +10,8 @@ [status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.wallet.transactions.styles :as styles] - [status-im.utils.utils :as utils]) + [status-im.utils.utils :as utils] + [status-im.ui.components.list.item :as list.item]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn- transaction-icon @@ -43,7 +44,7 @@ :as transaction} _ _ {:keys [keycard-account?]}] [:<> - [quo/list-item + [list.item/list-item (merge {:on-press on-touch-fn :accessibility-label :transaction-item @@ -104,10 +105,10 @@ :padding-horizontal 14 :flex-direction :row :align-items :center - :background-color (quo/get-color :warning-02) + :background-color (colors/get-color :warning-02) :height 52}} [react/text - {:style {:color (quo/get-color :warning-01)}} + {:style {:color (colors/get-color :warning-01)}} (i18n/label :t/custom-node)]]) (defn non-archival-node @@ -117,10 +118,10 @@ :padding-horizontal 14 :flex-direction :row :align-items :center - :background-color (quo/get-color :negative-02) + :background-color (colors/get-color :negative-02) :height 52}} [react/text - {:style {:color (quo/get-color :negative-01)}} + {:style {:color (colors/get-color :negative-01)}} (i18n/label :t/non-archival-node)]]) (defn history-list @@ -182,7 +183,7 @@ (defn details-header [date type amount-text currency-text] - [quo/list-item + [list.item/list-item (merge {:title [react/nested-text {:style styles/details-header-value} [{:accessibility-label :amount-text} amount-text] diff --git a/src/status_im/ui/screens/wallet_connect/session_proposal/styles.cljs b/src/status_im/ui/screens/wallet_connect/session_proposal/styles.cljs index 42596c5b19..3b05bdba07 100644 --- a/src/status_im/ui/screens/wallet_connect/session_proposal/styles.cljs +++ b/src/status_im/ui/screens/wallet_connect/session_proposal/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.wallet-connect.session-proposal.styles - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (defn toolbar-container [background-color] diff --git a/src/status_im/ui/screens/wallet_connect/session_proposal/views.cljs b/src/status_im/ui/screens/wallet_connect/session_proposal/views.cljs index b9ff27e307..4085b47660 100644 --- a/src/status_im/ui/screens/wallet_connect/session_proposal/views.cljs +++ b/src/status_im/ui/screens/wallet_connect/session_proposal/views.cljs @@ -1,9 +1,9 @@ (ns status-im.ui.screens.wallet-connect.session-proposal.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [clojure.string :as string] - [quo.core :as quo] - [quo.design-system.colors :as colors] - [quo.platform :as platform] + [status-im.ui.components.core :as quo] + [status-im.ui.components.colors :as colors] + [react-native.platform :as platform] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] diff --git a/src/status_im/wallet/accounts/core.cljs b/src/status_im/wallet/accounts/core.cljs index 2708af0ec1..07c50d80ed 100644 --- a/src/status_im/wallet/accounts/core.cljs +++ b/src/status_im/wallet/accounts/core.cljs @@ -1,7 +1,7 @@ (ns status-im.wallet.accounts.core (:require [clojure.string :as string] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [status-im2.constants :as constants] [status-im.ens.core :as ens.core] diff --git a/src/status_im/wallet/custom_tokens/core.cljs b/src/status_im/wallet/custom_tokens/core.cljs index a3cf7b947f..b8496c10b8 100644 --- a/src/status_im/wallet/custom_tokens/core.cljs +++ b/src/status_im/wallet/custom_tokens/core.cljs @@ -1,6 +1,6 @@ (ns status-im.wallet.custom-tokens.core (:require [clojure.string :as string] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [re-frame.core :as re-frame] [utils.i18n :as i18n] [status-im.ui.components.react :as react] diff --git a/src/status_im2/common/theme/core.cljs b/src/status_im2/common/theme/core.cljs index c402d14219..b6b264b976 100644 --- a/src/status_im2/common/theme/core.cljs +++ b/src/status_im2/common/theme/core.cljs @@ -1,10 +1,10 @@ (ns status-im2.common.theme.core - (:require [quo.theme :as quo] - [quo2.theme :as quo2] + (:require [quo2.theme :as quo2] [utils.re-frame :as rf] [oops.core :refer [oget]] [react-native.core :as rn] - [react-native.platform :as platform])) + [react-native.platform :as platform] + [status-im.ui.components.colors :as legacy-colors])) (def device-theme (atom (rn/get-color-scheme))) @@ -31,5 +31,8 @@ (defn set-theme [value] - (quo/set-theme value) - (quo2/set-theme value)) + (quo2/set-theme value) + (reset! legacy-colors/theme (case value + :dark legacy-colors/dark-theme + legacy-colors/light-theme)) + (legacy-colors/set-legacy-theme-type value)) diff --git a/src/status_im2/contexts/push_notifications/local/events.cljs b/src/status_im2/contexts/push_notifications/local/events.cljs index 5ed3fb3a61..27683712db 100644 --- a/src/status_im2/contexts/push_notifications/local/events.cljs +++ b/src/status_im2/contexts/push_notifications/local/events.cljs @@ -1,9 +1,10 @@ (ns status-im2.contexts.push-notifications.local.events - (:require [quo.platform :as platform] - [utils.re-frame :as rf] + (:require [utils.re-frame :as rf] + [react-native.platform :as platform] [status-im.notifications.wallet :as notifications.wallet] status-im2.contexts.push-notifications.local.effects)) + (defn foreground-chat? [{{:keys [current-chat-id view-id]} :db} chat-id] (and (= current-chat-id chat-id)