diff --git a/ios/Podfile.lock b/ios/Podfile.lock index d65479ef4c20..74d395bf130b 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -707,7 +707,7 @@ SPEC CHECKSUMS: FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991 FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 - glog: 166d178815c300e8126de9a7900101814eb16253 + glog: d93527a855523adb8c113837db4be68fb00e230d HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352 Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8 libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef diff --git a/src/quo/components/animated_header.cljs b/src/quo/components/animated_header.cljs index ac1a7886c151..a22e24bd0807 100644 --- a/src/quo/components/animated_header.cljs +++ b/src/quo/components/animated_header.cljs @@ -3,7 +3,7 @@ [quo.animated :as animated] [quo.components.header :as header] [quo.design-system.colors :as colors] - [quo.platform :as platform] + [react-native.platform :as platform] [reagent.core :as reagent] [react-native.safe-area :as safe-area])) diff --git a/src/quo/components/bottom_sheet/view.cljs b/src/quo/components/bottom_sheet/view.cljs index ae6fe501f87a..674ff1f293af 100644 --- a/src/quo/components/bottom_sheet/view.cljs +++ b/src/quo/components/bottom_sheet/view.cljs @@ -4,7 +4,7 @@ [quo.components.bottom-sheet.style :as styles] [quo.design-system.colors :as colors] [quo.gesture-handler :as gesture-handler] - [quo.platform :as platform] + [react-native.platform :as platform] [quo.react :as react] [quo.react-native :as rn] [reagent.core :as reagent] diff --git a/src/quo/components/button/view.cljs b/src/quo/components/button/view.cljs index dd6f7601bb32..db7895b6e15d 100644 --- a/src/quo/components/button/view.cljs +++ b/src/quo/components/button/view.cljs @@ -4,7 +4,7 @@ [quo.design-system.colors :as colors] [quo.design-system.spacing :as spacing] [quo.haptic :as haptic] - [quo.react-native :as rn] + [react-native.core :as rn] [status-im.ui.components.icons.icons :as icons])) (defn style-container diff --git a/src/quo/components/controls/view.cljs b/src/quo/components/controls/view.cljs index 75cff937b317..04e827c2c1b7 100644 --- a/src/quo/components/controls/view.cljs +++ b/src/quo/components/controls/view.cljs @@ -5,7 +5,7 @@ [quo.design-system.colors :as colors] [quo.gesture-handler :as gh] [quo.react :as react] - [quo.react-native :as rn] + [react-native.core :as rn] [reagent.core :as reagent] [status-im.ui.components.icons.icons :as icons])) diff --git a/src/quo/components/header.cljs b/src/quo/components/header.cljs index 9be8106cf667..16543ff11e3d 100644 --- a/src/quo/components/header.cljs +++ b/src/quo/components/header.cljs @@ -5,7 +5,7 @@ [quo.components.text :as text] [quo.design-system.colors :as colors] [quo.design-system.spacing :as spacing] - [quo.react-native :as rn] + [react-native.core :as rn] [reagent.core :as reagent])) (def header-height 56) diff --git a/src/quo/components/list/footer.cljs b/src/quo/components/list/footer.cljs index 9b5d89f13267..16e228500827 100644 --- a/src/quo/components/list/footer.cljs +++ b/src/quo/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] + [react-native.core :as rn] [reagent.core :as reagent])) (defn footer diff --git a/src/quo/components/list/header.cljs b/src/quo/components/list/header.cljs index 773aba4b53ca..3df9be51c7ea 100644 --- a/src/quo/components/list/header.cljs +++ b/src/quo/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] + [react-native.core :as rn] [reagent.core :as reagent])) (defn header diff --git a/src/quo/components/list/index.cljs b/src/quo/components/list/index.cljs index d45fdcfcdd1a..6e20b351b52b 100644 --- a/src/quo/components/list/index.cljs +++ b/src/quo/components/list/index.cljs @@ -1,7 +1,7 @@ (ns quo.components.list.index (:require [quo.components.text :as text] [quo.design-system.colors :as colors] - [quo.react-native :as rn])) + [react-native.core :as rn])) (defn index [{:keys [title]}] diff --git a/src/quo/components/separator.cljs b/src/quo/components/separator.cljs index f175666641f6..7ca217df3e0d 100644 --- a/src/quo/components/separator.cljs +++ b/src/quo/components/separator.cljs @@ -1,6 +1,6 @@ (ns quo.components.separator (:require [quo.design-system.colors :as colors] - [quo.react-native :as react])) + [react-native.core :as react])) (defn separator [{:keys [color style]}] diff --git a/src/quo/components/text.cljs b/src/quo/components/text.cljs index e8b4e828add4..06e36b8d0394 100644 --- a/src/quo/components/text.cljs +++ b/src/quo/components/text.cljs @@ -2,7 +2,7 @@ (:require [quo.animated :as animated] [quo.design-system.colors :as colors] [quo.design-system.typography :as typography] - [quo.react-native :as rn] + [react-native.core :as rn] [reagent.core :as reagent])) (defn text-style diff --git a/src/quo/components/text_input.cljs b/src/quo/components/text_input.cljs index 78edd8d176fa..931b6f6d34d4 100644 --- a/src/quo/components/text_input.cljs +++ b/src/quo/components/text_input.cljs @@ -6,8 +6,8 @@ [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 + [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/quo/components/tooltip.cljs b/src/quo/components/tooltip.cljs index 19e576379e62..8e5ed6436e55 100644 --- a/src/quo/components/tooltip.cljs +++ b/src/quo/components/tooltip.cljs @@ -3,8 +3,8 @@ [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] + [react-native.platform :as platform] ;; FIXME(Ferossgp): Dependecy on status + [react-native.core :as rn] [reagent.core :as reagent] [status-im.ui.components.icons.icons :as icons])) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 0b3eb3d4b7ad..d96b4dbaecdc 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -7,26 +7,21 @@ [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/platform.cljs b/src/quo/platform.cljs deleted file mode 100644 index 61dc7845afe7..000000000000 --- 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 cafa10c0bd0b..000000000000 --- 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 5d298e034cd4..000000000000 --- 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 ce7cf33212e5..000000000000 --- 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 05bc37f3351b..000000000000 --- 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 9c04ec219c61..000000000000 --- 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 b6770f6ef8e5..000000000000 --- 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 0dbfaa99e0a6..000000000000 --- 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 4a25f2b1d9b9..000000000000 --- 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 b1303f77f333..000000000000 --- 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 b0c07f833468..000000000000 --- 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 91df8df9e6d2..000000000000 --- 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 04e6a0b0e669..000000000000 --- 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_native.cljs b/src/quo/react_native.cljs index 202bebf8b022..323e83e26f64 100644 --- a/src/quo/react_native.cljs +++ b/src/quo/react_native.cljs @@ -3,10 +3,9 @@ ["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] + [react-native.platform :as platform] [reagent.core :as reagent])) (def hole-view (reagent/adapt-react-class RNHoleView)) @@ -15,20 +14,12 @@ (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))) @@ -38,27 +29,6 @@ (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)) 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 2a8fe738268c..b525011972fb 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 7a668b5150f4..ae0f79e8eb9a 100644 --- a/src/quo2/components/settings/reorder_item/items/item_tabs.cljs +++ b/src/quo2/components/settings/reorder_item/items/item_tabs.cljs @@ -1,6 +1,6 @@ (ns quo2.components.settings.reorder-item.items.item-tabs (:require [quo2.components.tabs.segmented-tab :as quo2] - [quo.react-native :as rn] + [react-native.core :as rn] [quo.components.text :as text] [quo2.components.settings.reorder-item.style :as style] [quo2.components.icon :as quo2-icons])) diff --git a/src/quo2/components/switchers/base_card/view.cljs b/src/quo2/components/switchers/base_card/view.cljs index c0804f8a09fd..c51334087ca6 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 e1b0d991d548..7f28b595b3df 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 940422a90162..d2e6dafe107b 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 b44adecae331..35ce15b8726b 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 09627e3a55da..e95813574fb8 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 7b6bda0a43ed..74ff0b5c8fa5 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 2967824d7926..c73fda989541 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 index 6e892465aff9..a5b04cddf6ca 100644 --- a/src/status_im/notifications/android.cljs +++ b/src/status_im/notifications/android.cljs @@ -1,6 +1,6 @@ (ns status-im.notifications.android (:require ["react-native" :as react-native] - [quo.platform :as platform] + [react-native.platform :as platform] [taoensso.timbre :as log])) (defn pn-android diff --git a/src/status_im/notifications/core.cljs b/src/status_im/notifications/core.cljs index bc05268d2d67..dfb881e44b39 100644 --- a/src/status_im/notifications/core.cljs +++ b/src/status_im/notifications/core.cljs @@ -1,6 +1,6 @@ (ns status-im.notifications.core (:require ["@react-native-community/push-notification-ios" :default pn-ios] - [quo.platform :as platform] + [react-native.platform :as platform] [re-frame.core :as re-frame] [status-im.multiaccounts.update.core :as multiaccounts.update] [status-im.notifications.android :as pn-android] diff --git a/src/status_im/notifications/local.cljs b/src/status_im/notifications/local.cljs index 8aa31d7d118f..2812935ffd39 100644 --- a/src/status_im/notifications/local.cljs +++ b/src/status_im/notifications/local.cljs @@ -2,7 +2,7 @@ (:require ["@react-native-community/push-notification-ios" :default pn-ios] [cljs-bean.core :as bean] [clojure.string :as string] - [quo.platform :as platform] + [react-native.platform :as platform] [re-frame.core :as re-frame] [react-native.async-storage :as async-storage] [status-im.ethereum.decode :as decode] diff --git a/src/status_im/react_native/resources.cljs b/src/status_im/react_native/resources.cljs index 23f00ced0849..4ce804a6b84d 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 f60d6141ae66..0d109b773ca5 100644 --- a/src/status_im/ui/components/accordion.cljs +++ b/src/status_im/ui/components/accordion.cljs @@ -1,9 +1,10 @@ (ns status-im.ui.components.accordion (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + [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 +37,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/badge.cljs b/src/status_im/ui/components/badge.cljs index d82f1cc5e83f..fff8862dc9c4 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 801c4db7d13d..3c9722a57e4b 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/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index 3a5a31891976..b8c5b5231531 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 6ef0b4bef837..5b1ecfa39b0b 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 2ce6b68c1fb3..bf0472dc992c 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 9a58627069ea..84942e4f18a6 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/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs new file mode 100644 index 000000000000..9f919416bdc4 --- /dev/null +++ b/src/status_im/ui/components/colors.cljs @@ -0,0 +1,241 @@ +(ns status-im.ui.components.colors + (:require [clojure.string :as string] + [reagent.core :as reagent])) + +;; Colors mapping from figma to code, note that theme is more extended and +;; one can follow the comments from the light theme to choose what to use in a component. +(comment + {"Accent blue, #4360DF" [:interactive-01 :text-04 :icon-04] + "Accent blue as background, #ECEFFC" [:interactive-02] + "Dark grey, #939BA1" [:text-02 :icon-02] + "Black" [:text-01 :icon-01] + "Main Green/Success, #4EBC60" [:positive-01] + "Shades 10% green, #EDFBEF" [:positive-02] + "Main Red/Error, #FF2D55" [:negative-01] + "Shades 10% Red, #FFEAEE" [:negative-02] + "Light grey, #EEF2F5" [:ui-01] + "White, #FFFFFF" [:ui-background] + "Devider, 0.1 of black" [:ui-02]}) + +(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 + :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 + :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 + :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 + :ui-01 "rgba(238,242,245,1)" ; Secondary background + :ui-02 "rgba(0,0,0,0.1)" ; Deviders + :ui-03 "rgba(0,0,0,0.86)" ; Dark background + :text-01 "rgba(0,0,0,1)" ; Main text color + :text-02 "rgba(147,155,161,1)" ; Secondary text + :text-03 "rgba(255,255,255,0.7)" ; Secondary on accent + :text-04 "rgba(67,96,223,1)" ; Links text color + :text-05 "rgba(255,255,255,1)" ; Text inverse on accent + :icon-01 "rgba(0,0,0,1)" ; Primary icons + :icon-02 "rgba(147,155,161,1)" ; Secondary icons + :icon-03 "rgba(255,255,255,0.4)" ; Secondary icons on accent bg + :icon-04 "rgba(67,96,223,1)" ; Interactive icon + :icon-05 "rgba(255,255,255,1)" ; Icons inverse on accent background + :shadow-01 "rgba(0,9,26,0.12)" ; Main shadow color + :backdrop "rgba(0,0,0,0.4)" ; Backdrop for modals and bottom sheet + :border-01 "rgba(238,242,245,1)" + :border-02 "rgba(67, 96, 223, 0.1)" + :highlight "rgba(67,96,223,0.4)" + :blurred-bg "rgba(255,255,255,0.3)"}) + +(def dark-theme + {:positive-01 "rgba(68,208,88,1)" + :positive-02 "rgba(78,188,96,0.1)" + :positive-03 "rgba(78,188,96,1)" + :negative-01 "rgba(252,95,95,1)" + :negative-02 "rgba(252,95,95,0.1)" + :warning-01 "rgba(255, 202, 15, 1)" + :warning-02 "rgba(255, 202, 15, 0.1)" + :interactive-01 "rgba(97,119,229,1)" + :interactive-02 "rgba(35,37,47,1)" + :interactive-03 "rgba(255,255,255,0.1)" + :interactive-04 "rgba(131,140,145,1)" + :ui-background "rgba(20,20,20,1)" + :ui-01 "rgba(37,37,40,1)" + :ui-02 "rgba(0,0,0,0.1)" + :ui-03 "rgba(0,0,0,0.86)" + :text-01 "rgba(255,255,255,1)" + :text-02 "rgba(131,140,145,1)" + :text-03 "rgba(255,255,255,0.7)" + :text-04 "rgba(97,119,229,1)" + :text-05 "rgba(20,20,20,1)" + :icon-01 "rgba(255,255,255,1)" + :icon-02 "rgba(131,140,145,1)" + :icon-03 "rgba(255,255,255,0.4)" + :icon-04 "rgba(97,119,229,1)" + :icon-05 "rgba(20,20,20,1)" + :shadow-01 "rgba(0,0,0,0.75)" + :backdrop "rgba(0,0,0,0.4)" + :border-01 "rgba(37,37,40,1)" + :border-02 "rgba(97,119,229,0.1)" + :highlight "rgba(67,96,223,0.4)" + :blurred-bg "rgba(0,0,0,0.3)"}) + +(def theme (reagent/atom light-theme)) + +(defn get-color + [color] + (get @theme color)) + +;; LEGACY COLORS + +(defn alpha + [value opacity] + (if (string/starts-with? value "#") + (let [hex (string/replace value #"#" "") + r (js/parseInt (subs hex 0 2) 16) + g (js/parseInt (subs hex 2 4) 16) + b (js/parseInt (subs hex 4 6) 16)] + (str "rgba(" r "," g "," b "," opacity ")")) + (let [rgb (string/split value #",")] + (str (string/join "," (butlast rgb)) "," opacity ")")))) + +(def old-colors-mapping-light + {:mentioned-background "#def6fc" + :mentioned-border "#b8ecf9" + :pin-background "#FFEECC"}) + +(def old-colors-mapping-dark + {:mentioned-background "#2a4046" + :mentioned-border "#2a4046" + :pin-background "#34232B"}) + +(def old-colors-mapping-themes {:dark old-colors-mapping-dark :light old-colors-mapping-light}) + +;; WHITE +(def white (:ui-background light-theme)) +(def white-persist (:ui-background light-theme)) ;; this doesn't with theme +(def white-transparent-10 (:interactive-03 light-theme)) ;; Used as icon background color for a dark foreground +(def white-transparent (:icon-03 light-theme)) ;; Used as icon color on dark background and input placeholder color +(def white-transparent-persist (:icon-03 light-theme)) +(def white-transparent-70 (:text-03 light-theme)) +(def white-transparent-70-persist (:text-03 light-theme)) + +(def mentioned-background (:mentioned-background old-colors-mapping-light)) +(def mentioned-border (:mentioned-border old-colors-mapping-light)) + +(def red-light "#ffe5ea") ;; error tooltip TODO (andrey) should be white, but shadow needed + +;; BLACK +(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" +(def black-transparent-20 (:backdrop light-theme)) ; accounts divider +(def black-transparent-40 (:backdrop light-theme)) +(def black-transparent-40-persist (:backdrop light-theme)) +(def black-transparent-50 (:backdrop light-theme)) +(def black-light "#2d2d2d") ;; sign-with-keycard-button +(def black-transparent-86 (:ui-03 light-theme)) + +;; 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 +(def gray-transparent-10 (alpha gray 0.1)) +(def gray-transparent-40 (alpha gray 0.4)) +;; LIGHT GREY +(def gray-lighter (:ui-01 light-theme)) ;; Light Grey, used as a background or shadow + +;; ACCENT BLUE +(def blue (:interactive-01 light-theme)) ;; Accent blue, used as main wallet color, and ios home add button +(def blue-persist (:interactive-01 light-theme)) +;; LIGHT BLUE +(def blue-light (:interactive-02 light-theme)) ;; Light Blue +(def blue-transparent-10 (alpha blue 0.1)) ;; unknown + +;; RED +(def red (:negative-01 light-theme)) ;; Used to highlight errors or "dangerous" actions +(def red-transparent-10 (alpha red 0.1)) ;;action-row ;; ttt finish +(def red-audio-recorder "#fa6565") + +;; GREEN +(def green "#44d058") ;; icon for successful inboud transaction +(def green-transparent-10 (alpha green 0.1)) ;; icon for successful inboud transaction + +;; YELLOW +(def pin-background (:pin-background old-colors-mapping-light)) ;; Light yellow, used as background for pinned messages + +(def purple "#887af9") +(def orange "#FE8F59") + +(def chat-colors + ["#fa6565" + "#7cda00" + purple + "#51d0f0" + orange + "#d37ef4"]) + +(def account-colors + ["#9B832F" + "#D37EF4" + "#1D806F" + "#FA6565" + "#7CDA00" + purple + "#8B3131"]) + +(def mention-incoming "#0DA4C9") +(def mention-outgoing "#9EE8FA") +(def text black) +(def text-gray gray) +(def default-community-color "#773377") + +(def default-chat-color "#a187d5") ;; legacy + +;; THEME + +(def theme-type (reagent/atom :light)) + +(defn dark? + [] + (= :dark @theme-type)) + +(defn set-legacy-theme-type + [type] + (when-not (= type @theme-type) + (let [old-colors-mapping-colors (get old-colors-mapping-themes type)] + (set! white (:ui-background @theme)) + (set! black (:text-01 @theme)) + (set! gray-lighter (:ui-01 @theme)) + (set! blue (:interactive-01 @theme)) + (set! gray (:text-02 @theme)) + (set! blue-light (:interactive-02 @theme)) + (set! red (:negative-01 @theme)) + (set! text black) + (set! mentioned-background (:mentioned-background old-colors-mapping-colors)) + (set! mentioned-border (:mentioned-border old-colors-mapping-colors)) + (set! white-transparent-10 (alpha white 0.1)) + (set! white-transparent (alpha white 0.4)) + (set! white-transparent-70 (alpha white 0.7)) + (set! black-transparent (alpha black 0.1)) + (set! black-transparent-20 (alpha black 0.2)) + (set! black-transparent-40 (alpha black 0.4)) + (set! black-transparent-50 (alpha black 0.5)) + (set! gray-transparent-10 (alpha gray 0.1)) + (set! gray-transparent-40 (alpha gray 0.4)) + (set! green-transparent-10 (alpha green 0.1)) + (set! red-transparent-10 (alpha red 0.1)) + (set! blue-transparent-10 (alpha blue 0.1)) + (set! pin-background (:pin-background old-colors-mapping-colors))) + (reset! theme-type type))) + +;; Colors related to Visibility Status +(def color-online "#7CDA00") +(def color-dnd "#FA6565") +(def color-inactive "#939BA1") diff --git a/src/status_im/ui/components/common/styles.cljs b/src/status_im/ui/components/common/styles.cljs index 50717a1704bc..16b55e26d559 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 25fa666247ae..3dceacc0eb1d 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.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/copyable_text.cljs b/src/status_im/ui/components/copyable_text.cljs index f66019fb9cff..63d16fbfc92b 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/emoji_thumbnail/color_picker.cljs b/src/status_im/ui/components/emoji_thumbnail/color_picker.cljs index dc226e20ce18..4e0580b695de 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 4d4c3c3affe7..78b0f2a49410 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/status_im/ui/components/icons/icons.cljs b/src/status_im/ui/components/icons/icons.cljs index 67ec599fc72a..c2fc1145c183 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 d980713d28d9..115fa7ccb1e3 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] [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/item.cljs b/src/status_im/ui/components/list/item.cljs similarity index 98% rename from src/quo/components/list/item.cljs rename to src/status_im/ui/components/list/item.cljs index 63160a2fb77a..1104fd3e7070 100644 --- a/src/quo/components/list/item.cljs +++ b/src/status_im/ui/components/list/item.cljs @@ -1,14 +1,14 @@ -(ns quo.components.list.item +(ns status-im.ui.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] + [status-im.ui.components.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])) + [status-im.ui.components.icons.icons :as icons] + [react-native.platform :as platform] + [react-native.core :as rn])) (defn themes [theme] diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index 923a07e2f2ac..0b2ddd0b87c9 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 7a0748965a21..1758e405cb77 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] + [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 5f112a285743..bb0784537648 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] + [status-im.ui.components.colors :as colors] [quo.design-system.spacing :as spacing] - [quo.react-native :as rn] + [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 af612e2ffccd..5e4a78aeffb0 100644 --- a/src/status_im/ui/components/react.cljs +++ b/src/status_im/ui/components/react.cljs @@ -8,7 +8,7 @@ ["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] diff --git a/src/status_im/ui/components/search_input/view.cljs b/src/status_im/ui/components/search_input/view.cljs index 52f38e104dc5..8e8c8d5017d9 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] + [status-im.ui.components.colors :as colors] [reagent.core :as reagent] [utils.i18n :as i18n])) diff --git a/src/status_im/ui/components/tabs.cljs b/src/status_im/ui/components/tabs.cljs index 87de060ab290..759ef267efa7 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/status_im/ui/components/toastable_highlight.cljs b/src/status_im/ui/components/toastable_highlight.cljs index 292236aef88b..4edd76ab0db5 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 69a011a1c9d9..7926dd2252f1 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/status_im/ui/components/tooltip/styles.cljs b/src/status_im/ui/components/tooltip/styles.cljs index 09f32626dd04..d56d2c3ddcbc 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 96ab0d673292..0b94fe03c4f6 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/typography.cljs b/src/status_im/ui/components/typography.cljs index 90a839febdcf..56ebcfd053c5 100644 --- a/src/status_im/ui/components/typography.cljs +++ b/src/status_im/ui/components/typography.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.typography - (:require [quo.design-system.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def default-font-family "Inter") (defn default-style diff --git a/src/status_im/ui/screens/about_app/views.cljs b/src/status_im/ui/screens/about_app/views.cljs index 3c2438de251f..cf25e77cdf30 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 5a326b7b18f2..6e750e8caac1 100644 --- a/src/status_im/ui/screens/advanced_settings/views.cljs +++ b/src/status_im/ui/screens/advanced_settings/views.cljs @@ -2,7 +2,8 @@ (:require [quo.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 8f1acf3aaa30..575c55bc8d34 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] + [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 7c6068960682..ffc7e3da2c21 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 d36baaee3133..1e644b943b70 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/browser/accounts.cljs b/src/status_im/ui/screens/browser/accounts.cljs index 8af01709780c..c28795b782b0 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 d594eac1d520..d8e19f767724 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.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 4664e01cbe04..e677645ba18c 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] + [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 406d1c7c6f17..458d642adbf0 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] + [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 86c826f4ce55..a55c71b97af9 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 803e9bf7aa0f..edeb1932cc29 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] + [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 78da3a2dffe2..a7cd64457bb5 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] + [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 48be56484552..de513aaafa27 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] + [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 838dccd6a6da..4a13710c1a9f 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 899730e974c4..dd66426228eb 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] + [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 c8a6a8c09c37..3cead714ef7e 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 b3f260987b6f..651eec04812d 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 ca073dd94486..276925667004 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.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 308c2861ab65..343216051463 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] + [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 c866e1fdd4ce..4f5074325b8a 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] + [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 3ad367cd0104..07be17191258 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 629cb5f70601..86f03b95074b 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 174b52cb28c0..bb2b7c4b3394 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 016bb6cb3cae..ea1b3ca71c2a 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] + [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 58c48328e833..948715536bf6 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 96de9d7553ae..77fa776cc0e0 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 490578b2eca4..9dc00a7781e0 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 41667acc1747..8de78fda293d 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 cda13ab59b11..b9dca205ec1f 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 bff3506b28e5..bc8ed7f77cb9 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 d9e92979416c..f1cc65092265 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.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 46168f1b6bbc..e96953f7daaf 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] + [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 884553a2c692..915cf584dc63 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] + [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 82e1fd463673..dacc8b180cc0 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] + [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 89b4bc7bcbfb..8a3c0131eaab 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] + [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 ee5a78f576fd..20503e6bec0e 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 77fdd830c52a..75ede94fc804 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 e8e6d7500236..766a769b3220 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] + [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 5c154cd0881f..d0ca5d527520 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 c457a6a27e55..3703c82c4c23 100644 --- a/src/status_im/ui/screens/ens/views.cljs +++ b/src/status_im/ui/screens/ens/views.cljs @@ -2,7 +2,7 @@ (:require [clojure.string :as string] [quo.core :as quo] - [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.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 e445e5e5ff94..d038301f47d1 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 4d6ac2ed3451..525e34b7ba5b 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 b92c8e84620a..966f06a31400 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 c213fe2b3fa5..93424fd9633e 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -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 9bdd172d548f..1b954a768d28 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 0fdd6667f2d6..90c3773ff099 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 aa252062f01e..75c326d4c907 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.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 1d8cfdded59f..7ac4f89ae22d 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 a547a63004c1..7dd0d14f5ff6 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] + [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 943135dc5845..81c622c4b415 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 1a0799f6a5ed..f5dec7f839a8 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 f10d1578de53..2fab933ccccb 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] + [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 e63d2ed4a97d..4c48de7c2fa4 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] + [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 3458a94ff772..80db33858781 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 b8722b52e3db..0f99772bf217 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] + [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 872b2d0249a0..736c545b689b 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] + [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 f41b611699ec..a47d821deaf4 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 8b53c8e3837e..44cb95993b78 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 9064fcecaa75..ff45111a320e 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] + [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 453b4b1f31b2..0c707d585315 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] + [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 865cef740dad..cea0df2b17ee 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.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 1838c95790c2..f53f147d19fe 100644 --- a/src/status_im/ui/screens/link_previews_settings/views.cljs +++ b/src/status_im/ui/screens/link_previews_settings/views.cljs @@ -7,7 +7,8 @@ [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 55b643a84896..fffab3c7568c 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 87864329ec5f..69edc03efbba 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 9d18c6f1bc7d..9eade4835785 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 70866515f483..af17d4265069 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 55bfb5bdc8c6..7a74e746f66d 100644 --- a/src/status_im/ui/screens/network/edit_network/views.cljs +++ b/src/status_im/ui/screens/network/edit_network/views.cljs @@ -5,7 +5,8 @@ [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/styles.cljs b/src/status_im/ui/screens/network/styles.cljs index 2163d2f01532..025e8f1c3d0e 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 a6fd71026992..087db46a8c24 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 e02c79f5169a..65225edd5ac2 100644 --- a/src/status_im/ui/screens/notifications_settings/views.cljs +++ b/src/status_im/ui/screens/notifications_settings/views.cljs @@ -1,13 +1,14 @@ (ns status-im.ui.screens.notifications-settings.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [quo.core :as quo] - [quo.design-system.colors :as quo-colors] - [quo.platform :as platform] + [status-im.ui.components.colors :as quo-colors] + [react-native.platform :as platform] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] [status-im.notifications.core :as notifications] - [status-im.ui.components.react :as react])) + [status-im.ui.components.react :as react] + [status-im.ui.components.list.item :as list.item])) (defonce server (reagent/atom "")) @@ -19,7 +20,7 @@ {:color (:ui-02 @quo-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 @@ -35,7 +36,7 @@ push-notifications-from-contacts-only?]} @(re-frame/subscribe [:profile/profile])] [:<> - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/show-notifications) :accessibility-label :notifications-button @@ -47,7 +48,7 @@ {:color (:ui-02 @quo-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 @@ -57,7 +58,7 @@ [::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 @@ -73,7 +74,7 @@ [] (let [{:keys [notifications-enabled?]} @(re-frame/subscribe [: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) @@ -101,7 +102,7 @@ [react/scroll-view {:style {:flex 1} :content-container-style {:padding-vertical 8}} - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/send-push-notifications) :accessibility-label :send-push-notifications-button @@ -113,7 +114,7 @@ [quo/list-footer (i18n/label :t/send-push-notifications-description)] [quo/separator {:style {:margin-vertical 8}}] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/push-notifications-server-enabled) :accessibility-label :send-push-notifications-button @@ -123,7 +124,7 @@ [::notifications/switch-push-notifications-server-enabled (not push-notifications-server-enabled?)]) :accessory :switch}] - [quo/list-item + [list.item/list-item {:size :small :title (i18n/label :t/push-notifications-servers) :accessibility-label :send-push-notifications-button @@ -133,7 +134,7 @@ (defn server-view [{:keys [public-key type registered]}] - [quo/list-item + [list.item/list-item {:size :small :title (str (subs public-key 0 8) " " 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 82213c987fc6..5d960ad8b120 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/styles.cljs b/src/status_im/ui/screens/offline_messaging_settings/styles.cljs index afb95cb124ff..7ecca3ae5d51 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 935d91022cec..a8a0422f34a8 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] + [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 9441374c15ec..b4a71a859f84 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 b4df2eb4da2f..1362d455e0ae 100644 --- a/src/status_im/ui/screens/pairing/views.cljs +++ b/src/status_im/ui/screens/pairing/views.cljs @@ -8,7 +8,8 @@ [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 86f60a48a570..42af8d9ef080 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 5a3cf9b976ca..68a424bdfd5f 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 @@ -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 8bdce5f3af5d..8e0c69b8d752 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 58f876aa6ca5..5dcfbdf12b76 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 @@ -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/styles.cljs b/src/status_im/ui/screens/profile/components/styles.cljs index 2ca5fd4efb44..219256b87c06 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 3ffe80500d11..185f173b2c14 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 242092b35a63..bd32a8ebb2c2 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 dd93d92c9462..c1a747e697c5 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.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 4d894727688d..793d18cdcfa4 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] + [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 9298e864bbd3..bad00b75677a 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/user/edit_picture.cljs b/src/status_im/ui/screens/profile/user/edit_picture.cljs index e90b56f28bd8..fb5bbcc0921b 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 74b12dd4d9f4..4c698da8cd3d 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 + [quo.core :as quo] + [status-im.ui.components.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] + [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 334da036d277..e67c435c168b 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 e3b47c775091..4f2b9cca7e7e 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 e40ddb5a216c..6833f91fc0fc 100644 --- a/src/status_im/ui/screens/profile/visibility_status/views.cljs +++ b/src/status_im/ui/screens/profile/visibility_status/views.cljs @@ -2,8 +2,8 @@ (: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.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 6735a7438fe8..559d24edb2cb 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 6a58ada02da8..80b65e1c1512 100644 --- a/src/status_im/ui/screens/qr_scanner/views.cljs +++ b/src/status_im/ui/screens/qr_scanner/views.cljs @@ -3,7 +3,7 @@ (: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.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 b5ffd6f414a0..ea36e6cbb4ca 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] + [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 65b1366ed804..5045fc54a1c8 100644 --- a/src/status_im/ui/screens/rpc_usage_info.cljs +++ b/src/status_im/ui/screens/rpc_usage_info.cljs @@ -2,7 +2,7 @@ (:require [clojure.string :as string] [quo.core :as quo.core] [quo.design-system.typography :as typography] - [quo.react-native :as quo.react-native] + [react-native.core :as quo.react-native] [re-frame.core :as re-frame] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -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]]))]) + react-native.core/scroll-view + {:style {:padding-horizontal 8}} + react-native.core/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)} + [:<> + react-native.core/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]]))) (defn prepare-stats [{:keys [stats]}] @@ -124,19 +124,19 @@ [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)]] + react-native.core/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 {:on-change-text #(re-frame/dispatch [::set-filter %]) :label (i18n/label :t/rpc-usage-filter-methods) diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index 688bff28b8e2..acdb09c28e64 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 4940e50ece33..eaf4df8175f1 100644 --- a/src/status_im/ui/screens/signing/sheets.cljs +++ b/src/status_im/ui/screens/signing/sheets.cljs @@ -2,7 +2,7 @@ (: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.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 acd53d28c0a1..a76c4eb5372b 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 b9d59d156f43..48de1d9f20d0 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -3,7 +3,7 @@ (:require [clojure.string :as string] [quo.core :as quo] - [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.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 356d029fdd89..230d6936a813 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 7cec7a84f03c..60333b218421 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 33eaea592f37..7aaec1f3b465 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] + [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 5e6eb22145f9..8f487c6ecd46 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/wallet/account/styles.cljs b/src/status_im/ui/screens/wallet/account/styles.cljs index 78dc54e663b1..210e961aa411 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 d9baf17cf2ca..ba260fbe9045 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/src/status_im/ui/screens/wallet/account/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.account.views (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + [status-im.ui.components.colors :as colors] [quo.design-system.spacing :as spacing] [quo2.core :as quo2] [quo2.components.markdown.text :as quo2.text] 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 768f00e88489..94f01acd0d65 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] + [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 b4b11e918d52..2202fbb0cd2a 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] + [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 d744adbf59c6..2b855fa1efa6 100644 --- a/src/status_im/ui/screens/wallet/accounts/sheets.cljs +++ b/src/status_im/ui/screens/wallet/accounts/sheets.cljs @@ -2,7 +2,8 @@ (:require [quo.core :as quo] [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 +14,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 +68,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 +83,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 +95,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 +103,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 +112,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 +121,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 +133,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 bf209616a36a..3ef984d692fa 100644 --- a/src/status_im/ui/screens/wallet/accounts/styles.cljs +++ b/src/status_im/ui/screens/wallet/accounts/styles.cljs @@ -1,7 +1,7 @@ (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) diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index a472b8cd2174..16bd21159d60 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] + [status-im.ui.components.colors :as colors] [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/accounts_manage/views.cljs b/src/status_im/ui/screens/wallet/accounts_manage/views.cljs index 64c9d2d14d35..ce3ec5851338 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,12 @@ (ns status-im.ui.screens.wallet.accounts-manage.views (:require [quo.core :as quo] - [quo.design-system.colors :as colors] + [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 +16,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 a87865705d0f..b2fcfd493e62 100644 --- a/src/status_im/ui/screens/wallet/add_new/views.cljs +++ b/src/status_im/ui/screens/wallet/add_new/views.cljs @@ -3,7 +3,7 @@ (:require [cljs.spec.alpha :as spec] [clojure.string :as string] [quo.core :as quo] - [quo.design-system.colors :as colors] + [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 669c65eab9c3..ae0fcbeba27d 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 5d9834a528ed..caab0090128a 100644 --- a/src/status_im/ui/screens/wallet/buy_crypto/views.cljs +++ b/src/status_im/ui/screens/wallet/buy_crypto/views.cljs @@ -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 58724e1e4c4a..41deb8362d51 100644 --- a/src/status_im/ui/screens/wallet/collectibles/views.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/views.cljs @@ -2,7 +2,7 @@ (:require ["react-native-svg" :refer (SvgUri)] [clojure.string :as string] [quo.core :as quo] - [quo.design-system.colors :as colors] + [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 ca1edeaf0cf6..bb7ffe18f6ef 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 212cb5750692..a7e36dd8949d 100644 --- a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs +++ b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs @@ -2,12 +2,13 @@ (: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.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 cbf338a45231..1fe7b5957323 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 e987470d633a..a133bced5e4a 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 80cd0bd46eb9..bf55ddf8f379 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.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/send/sheets.cljs b/src/status_im/ui/screens/wallet/send/sheets.cljs index cfed52325af2..bd91914c3748 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 a92391a572c3..a04616a0c6a2 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 4b21f2db4e68..882c2bbf12f2 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -2,7 +2,7 @@ (:require-macros [status-im.utils.views :refer [defview letsubs] :as views]) (:require [quo.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 90d70370869e..88e7a3952ab7 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] + [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 c3bc34efaa32..c11ff8c92d5c 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] + [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 7d8d0fafecd0..b70be68022a9 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.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 4a044442861f..c528a2957705 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 f56556d8f9c3..d5a1beabfb8c 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] + [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 @@ -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 42596c5b19e4..3b05bdba0780 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 b9ff27e307d3..fa50655894e7 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 @@ -2,8 +2,8 @@ (: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.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 2708af0ec1b8..07c50d80ed06 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 a3cf7b947f73..b8496c10b877 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]