From 302c54b6c4de0351a34499c0b9245f81404fed6e Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Thu, 10 Aug 2023 12:59:13 +0200 Subject: [PATCH] Refactor some quo2 components to use best practices * chore: update quo2 group avatar to best practices * chore: update quo2 browser-input to best practices * chore: update quo2 dynamic-button to best practices * chore: update quo2 tabs to best practices * chore: cleanup quo2 core file * chore: use best practices in quo2 banner * chore: use best practices in quo2 step --- .../avatars/group_avatar/style.cljs | 14 +++ .../view.cljs} | 23 ++-- .../banners/banner/component_spec.cljs | 2 +- src/quo2/components/banners/banner/view.cljs | 11 +- .../browser/browser_input/component_spec.cljs | 18 +-- .../browser/browser_input/view.cljs | 4 +- .../components/buttons/dynamic_button.cljs | 107 ----------------- .../buttons/dynamic_button/style.cljs | 43 +++++++ .../buttons/dynamic_button/view.cljs | 90 +++++++++++++++ .../counter/step/component_spec.cljs | 6 +- src/quo2/components/counter/step/view.cljs | 4 +- src/quo2/components/markdown/list/view.cljs | 2 +- .../navigation/floating_shell_button.cljs | 4 +- src/quo2/components/tabs/tabs/style.cljs | 12 ++ .../tabs/{tabs.cljs => tabs/view.cljs} | 18 +-- .../components/tags/context_tag/view.cljs | 4 +- src/quo2/core.cljs | 109 +++++++++--------- .../ui/screens/wallet/account/views.cljs | 3 +- .../ui/screens/wallet/accounts/views.cljs | 3 +- .../quo_preview/avatars/group_avatar.cljs | 2 +- .../quo_preview/buttons/dynamic_button.cljs | 4 +- .../contexts/quo_preview/counter/step.cljs | 2 +- 22 files changed, 269 insertions(+), 216 deletions(-) create mode 100644 src/quo2/components/avatars/group_avatar/style.cljs rename src/quo2/components/avatars/{group_avatar.cljs => group_avatar/view.cljs} (53%) delete mode 100644 src/quo2/components/buttons/dynamic_button.cljs create mode 100644 src/quo2/components/buttons/dynamic_button/style.cljs create mode 100644 src/quo2/components/buttons/dynamic_button/view.cljs create mode 100644 src/quo2/components/tabs/tabs/style.cljs rename src/quo2/components/tabs/{tabs.cljs => tabs/view.cljs} (94%) diff --git a/src/quo2/components/avatars/group_avatar/style.cljs b/src/quo2/components/avatars/group_avatar/style.cljs new file mode 100644 index 0000000000..b769d8fbd8 --- /dev/null +++ b/src/quo2/components/avatars/group_avatar/style.cljs @@ -0,0 +1,14 @@ +(ns quo2.components.avatars.group-avatar.style + (:require [quo2.foundations.colors :as colors])) + +(defn container + [{:keys [container-size customization-color theme]}] + {:width container-size + :height container-size + :align-items :center + :justify-content :center + :border-radius (/ container-size 2) + :background-color + (colors/theme-colors (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme)}) diff --git a/src/quo2/components/avatars/group_avatar.cljs b/src/quo2/components/avatars/group_avatar/view.cljs similarity index 53% rename from src/quo2/components/avatars/group_avatar.cljs rename to src/quo2/components/avatars/group_avatar/view.cljs index 8beaab72e1..6508e7fd7a 100644 --- a/src/quo2/components/avatars/group_avatar.cljs +++ b/src/quo2/components/avatars/group_avatar/view.cljs @@ -1,7 +1,9 @@ -(ns quo2.components.avatars.group-avatar +(ns quo2.components.avatars.group-avatar.view (:require [quo2.components.icon :as icon] + [quo2.theme :as quo.theme] [quo2.foundations.colors :as colors] - [react-native.core :as rn])) + [react-native.core :as rn] + [quo2.components.avatars.group-avatar.style :as style])) (def sizes {:icon {:small 12 @@ -13,20 +15,17 @@ ;; TODO: this implementation does not support group display picture (can only display default group ;; icon). -(defn group-avatar +(defn- view-internal [_] - (fn [{:keys [color size]}] + (fn [{:keys [color size theme]}] (let [container-size (get-in sizes [:container size]) icon-size (get-in sizes [:icon size])] [rn/view - {:width container-size - :height container-size - :align-items :center - :justify-content :center - :border-radius (/ container-size 2) - ;:background-color (colors/custom-color-by-theme color 50 60) ; TODO: this is temporary only. - ;Issue: https://github.com/status-im/status-mobile/issues/14566 - :background-color color} + {:style (style/container {:container-size container-size + :customization-color color + :theme theme})} [icon/icon :i/group {:size icon-size :color colors/white-opa-70}]]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/banners/banner/component_spec.cljs b/src/quo2/components/banners/banner/component_spec.cljs index ca503d474f..f6ddaf4687 100644 --- a/src/quo2/components/banners/banner/component_spec.cljs +++ b/src/quo2/components/banners/banner/component_spec.cljs @@ -5,7 +5,7 @@ (defn render-banner [opts] - (rtl/render (reagent/as-element [banner/banner opts]))) + (rtl/render (reagent/as-element [banner/view opts]))) (js/global.test "basic render of banner component" (fn [] diff --git a/src/quo2/components/banners/banner/view.cljs b/src/quo2/components/banners/banner/view.cljs index d4bcef7efc..69170d5b85 100644 --- a/src/quo2/components/banners/banner/view.cljs +++ b/src/quo2/components/banners/banner/view.cljs @@ -4,10 +4,11 @@ [quo2.components.icon :as icons] [quo2.components.markdown.text :as text] [quo2.foundations.colors :as colors] - [react-native.core :as rn])) + [react-native.core :as rn] + [quo2.theme :as quo.theme])) -(defn banner - [{:keys [hide-pin? latest-pin-text pins-count on-press]}] +(defn- view-internal + [{:keys [hide-pin? latest-pin-text pins-count on-press theme]}] (when (pos? pins-count) [rn/touchable-opacity {:accessibility-label :pinned-banner @@ -17,7 +18,7 @@ (when-not hide-pin? [rn/view {:style style/icon} [icons/icon :i/pin - {:color (colors/theme-colors colors/neutral-100 colors/white) + {:color (colors/theme-colors colors/neutral-100 colors/white theme) :size 20}]]) [rn/view {:style (style/text hide-pin?)} [text/text @@ -28,3 +29,5 @@ {:accessibility-label :pins-count :style style/counter} [counter/view {:type :secondary} pins-count]]])) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/browser/browser_input/component_spec.cljs b/src/quo2/components/browser/browser_input/component_spec.cljs index 27e8e9ffc2..7ce1de36f2 100644 --- a/src/quo2/components/browser/browser_input/component_spec.cljs +++ b/src/quo2/components/browser/browser_input/component_spec.cljs @@ -4,14 +4,14 @@ (h/describe "Browser input" (h/test "Renders empty in default state" - (h/render [browser-input/browser-input + (h/render [browser-input/view {:on-change-text (h/mock-fn) :value ""}]) (h/is-truthy (h/get-by-label-text :browser-input))) (h/test "On change text is fired" (let [on-change-text (h/mock-fn)] - (h/render [browser-input/browser-input + (h/render [browser-input/view {:on-change-text on-change-text :value "mock text"}]) (h/fire-event :change-text (h/get-by-label-text :browser-input) "mock-text-new") @@ -19,38 +19,38 @@ (h/describe "Input Label" (h/test "Doesn't render label text when input is focused" - (h/render [browser-input/browser-input + (h/render [browser-input/view {:auto-focus true}]) (h/is-null (h/query-by-label-text :browser-input-label))) (h/test "Renders label text when input has a value and input is not focused" - (h/render [browser-input/browser-input + (h/render [browser-input/view {:default-value "mock default"}]) (h/is-truthy (h/query-by-label-text :browser-input-label))) (h/test "Renders site favicon when specified" - (h/render [browser-input/browser-input + (h/render [browser-input/view {:default-value "mock default" :favicon :i/verified}]) (h/is-truthy (h/query-by-label-text :browser-input-favicon))) (h/test "Renders lock icon when lock is enabled" - (h/render [browser-input/browser-input + (h/render [browser-input/view {:default-value "mock default" :locked? true}]) (h/is-truthy (h/query-by-label-text :browser-input-locked-icon)))) (h/describe "Clear button" (h/test "Doesn't render in default state" - (h/render [browser-input/browser-input]) + (h/render [browser-input/view]) (h/is-null (h/query-by-label-text :browser-input-clear-button))) (h/test "Renders when there is a value" - (h/render [browser-input/browser-input + (h/render [browser-input/view {:default-value "mock text"}]) (h/is-truthy (h/query-by-label-text :browser-input-clear-button))) (h/test "Is pressable" (let [on-clear (h/mock-fn)] - (h/render [browser-input/browser-input + (h/render [browser-input/view {:default-value "mock text" :on-clear on-clear}]) (h/is-truthy (h/query-by-label-text :browser-input-clear-button)) diff --git a/src/quo2/components/browser/browser_input/view.cljs b/src/quo2/components/browser/browser_input/view.cljs index 1df8961a10..4c22e28e10 100644 --- a/src/quo2/components/browser/browser_input/view.cljs +++ b/src/quo2/components/browser/browser_input/view.cljs @@ -67,7 +67,7 @@ [:cursor-color :placeholder-text-color :editable :on-change-text :on-focus :on-blur :on-clear :value :disabled? :blur? :customization-color :theme]) -(defn browser-input-internal +(defn- view-internal [{:keys [default-value] :or {default-value ""}}] (let [state (reagent/atom :default) @@ -141,4 +141,4 @@ (when on-clear (on-clear))) :theme theme}])]])))) -(def browser-input (quo2.theme/with-theme browser-input-internal)) +(def view (quo2.theme/with-theme view-internal)) diff --git a/src/quo2/components/buttons/dynamic_button.cljs b/src/quo2/components/buttons/dynamic_button.cljs deleted file mode 100644 index e6cc70661b..0000000000 --- a/src/quo2/components/buttons/dynamic_button.cljs +++ /dev/null @@ -1,107 +0,0 @@ -(ns quo2.components.buttons.dynamic-button - (:require [quo2.components.icon :as icon] - [quo2.components.markdown.text :as text] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent])) - -(defn- get-button-color - [type pressed? customization-color] - (if (#{:jump-to :mention} type) - (if pressed? - (colors/custom-color-by-theme customization-color 60 50) - (colors/custom-color-by-theme customization-color 50 60)) - (if pressed? - (colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80) - (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70)))) - -(defn- get-icon-and-text-color - [type] - (if (#{:jump-to :mention} type) - colors/white - (colors/theme-colors colors/white colors/neutral-100))) - -(defn- icon-view - [type] - [icon/icon - (case type - :jump-to :i/jump-to - :mention :i/mention - :notification-down :i/arrow-down - :notification-up :i/arrow-up - :search-with-label :i/search - :search :i/search - :scroll-to-bottom :i/arrow-down) - {:size 12 - :color (get-icon-and-text-color type) - :container-style {:margin-top 6 - :margin-bottom 6 - :margin-left (case type - :jump-to 0 - :mention 8 - :notification-down 2 - :notification-up 2 - :search-with-label 8 - :search 6 - :scroll-to-bottom 6) - :margin-right (case type - :jump-to 8 - :mention 2 - :notification-down 8 - :notification-up 8 - :search-with-label 4 - :search 6 - :scroll-to-bottom 6)}}]) - -(defn dynamic-button - "[dynamic-button opts] - opts - {:type :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom - :on-press fn - :count mentions or notifications count - :customization-color customize jump-to and mention button color}" - [_] - (let [pressed? (reagent/atom false)] - (fn [{:keys [type label on-press customization-color style] :as args}] - [rn/touchable-opacity - {:on-press-in #(reset! pressed? true) - :on-press-out #(reset! pressed? false) - :on-press on-press - :active-opacity 1 - :hit-slop {:top 5 :bottom 5 :left 5 :right 5} - :pointer-events :auto - :accessibility-label type} - [rn/view - {:style (merge - {:flex-direction :row - :height 24 - :border-radius 12 - :background-color (get-button-color type @pressed? (or customization-color :primary))} - style)} - (when (#{:mention :search :search-with-label :scroll-to-bottom} type) - [icon-view type]) - (when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type) - [text/text - {:weight :medium - :size :paragraph-2 - :style {:color (get-icon-and-text-color type) - :margin-top 2.5 - :margin-bottom 3.5 - :margin-left (case type - :jump-to 8 - :mention 0 - :notification-down 8 - :notification-up 8 - :search-with-label 0) - :margin-right (case type - :jump-to 0 - :mention 8 - :notification-down 0 - :notification-up 0 - :search-with-label 8)}} - (case type - :jump-to label - :search-with-label label - (:mention :notification-down :notification-up) (str (:count args)))]) - (when (#{:jump-to :notification-down :notification-up} type) - [icon-view type])]]))) diff --git a/src/quo2/components/buttons/dynamic_button/style.cljs b/src/quo2/components/buttons/dynamic_button/style.cljs new file mode 100644 index 0000000000..6f0dd75d56 --- /dev/null +++ b/src/quo2/components/buttons/dynamic_button/style.cljs @@ -0,0 +1,43 @@ +(ns quo2.components.buttons.dynamic-button.style) + +(defn container + [type] + {:margin-top 6 + :margin-bottom 6 + :margin-left (case type + :jump-to 0 + :mention 8 + :notification-down 2 + :notification-up 2 + :search-with-label 8 + :search 6 + :scroll-to-bottom 6 + nil) + :margin-right (case type + :jump-to 8 + :mention 2 + :notification-down 8 + :notification-up 8 + :search-with-label 4 + :search 6 + :scroll-to-bottom 6 + nil)}) + +(defn text + [type] + {:margin-top 2.5 + :margin-bottom 3.5 + :margin-left (case type + :jump-to 8 + :mention 0 + :notification-down 8 + :notification-up 8 + :search-with-label 0 + nil) + :margin-right (case type + :jump-to 0 + :mention 8 + :notification-down 0 + :notification-up 0 + :search-with-label 8 + nil)}) diff --git a/src/quo2/components/buttons/dynamic_button/view.cljs b/src/quo2/components/buttons/dynamic_button/view.cljs new file mode 100644 index 0000000000..1c9ce5b0e5 --- /dev/null +++ b/src/quo2/components/buttons/dynamic_button/view.cljs @@ -0,0 +1,90 @@ +(ns quo2.components.buttons.dynamic-button.view + (:require [quo2.components.icon :as icon] + [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [quo2.theme :as quo.theme] + [quo2.components.buttons.dynamic-button.style :as style])) + +(defn- get-button-color + [{:keys [type pressed? customization-color theme]}] + (if (#{:jump-to :mention} type) + (if pressed? + (colors/theme-colors + (colors/custom-color customization-color 60) + (colors/custom-color customization-color 50) + theme) + (colors/theme-colors + (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme)) + (if pressed? + (colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80 theme) + (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)))) + +(defn- get-icon-and-text-color + [type theme] + (if (#{:jump-to :mention} type) + colors/white + (colors/theme-colors colors/white colors/neutral-100 theme))) + +(defn- icon-view + [type theme] + [icon/icon + (case type + :jump-to :i/jump-to + :mention :i/mention + :notification-down :i/arrow-down + :notification-up :i/arrow-up + :search-with-label :i/search + :search :i/search + :scroll-to-bottom :i/arrow-down) + {:size 12 + :color (get-icon-and-text-color type theme) + :container-style (style/container type)}]) + +(defn- view-internal + "[dynamic-button opts] + opts + {:type :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom + :on-press fn + :count mentions or notifications count + :customization-color customize jump-to and mention button color}" + [_] + (let [pressed? (reagent/atom false)] + (fn [{:keys [type label on-press customization-color style theme] :as args}] + [rn/touchable-opacity + {:on-press-in #(reset! pressed? true) + :on-press-out #(reset! pressed? false) + :on-press on-press + :active-opacity 1 + :hit-slop {:top 5 :bottom 5 :left 5 :right 5} + :pointer-events :auto + :accessibility-label type} + [rn/view + {:style (merge + {:flex-direction :row + :height 24 + :border-radius 12 + :background-color (get-button-color {:type type + :pressed? @pressed? + :customization-color (or customization-color + :primary) + :theme theme})} + style)} + (when (#{:mention :search :search-with-label :scroll-to-bottom} type) + [icon-view type]) + (when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type) + [text/text + {:weight :medium + :size :paragraph-2 + :style (assoc (style/text type) :color (get-icon-and-text-color type theme))} + (case type + :jump-to label + :search-with-label label + (:mention :notification-down :notification-up) (str (:count args)))]) + (when (#{:jump-to :notification-down :notification-up} type) + [icon-view type theme])]]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/counter/step/component_spec.cljs b/src/quo2/components/counter/step/component_spec.cljs index 8564621500..506e8a6095 100644 --- a/src/quo2/components/counter/step/component_spec.cljs +++ b/src/quo2/components/counter/step/component_spec.cljs @@ -4,16 +4,16 @@ (h/describe "step component" (h/test "default render of step component" - (h/render [step/step {} nil]) + (h/render [step/view {} nil]) (-> (h/expect (h/query-by-label-text :step-counter)) (h/is-truthy))) (h/test "renders step with a string value" - (h/render [step/step {} "1"]) + (h/render [step/view {} "1"]) (-> (h/expect (h/get-by-text "1")) (h/is-truthy))) (h/test "renders step with an integer value" - (h/render [step/step {} 1]) + (h/render [step/view {} 1]) (-> (h/expect (h/get-by-text "1")) (h/is-truthy)))) diff --git a/src/quo2/components/counter/step/view.cljs b/src/quo2/components/counter/step/view.cljs index 5b1c06f671..cc8309cf85 100644 --- a/src/quo2/components/counter/step/view.cljs +++ b/src/quo2/components/counter/step/view.cljs @@ -6,7 +6,7 @@ [react-native.core :as rn] [utils.number])) -(defn step-internal +(defn- view-internal [{:keys [type accessibility-label theme in-blur-view? customization-color]} value] (let [type (or type :neutral) value (utils.number/parse-int value) @@ -25,4 +25,4 @@ :size :label :style {:color (style/text-color type theme)}} label]])) -(def step (theme/with-theme step-internal)) +(def view (theme/with-theme view-internal)) diff --git a/src/quo2/components/markdown/list/view.cljs b/src/quo2/components/markdown/list/view.cljs index 638c650b9e..b08f5bf558 100644 --- a/src/quo2/components/markdown/list/view.cljs +++ b/src/quo2/components/markdown/list/view.cljs @@ -41,7 +41,7 @@ [rn/view {:style (style/container container-style)} [rn/view {:style style/index} (if (= type :step) - [step/step + [step/view {:in-blur-view? blur? :customization-color customization-color :type (if customization-color :complete :neutral)} step-number] diff --git a/src/quo2/components/navigation/floating_shell_button.cljs b/src/quo2/components/navigation/floating_shell_button.cljs index 09c1053487..4b73fc11a7 100644 --- a/src/quo2/components/navigation/floating_shell_button.cljs +++ b/src/quo2/components/navigation/floating_shell_button.cljs @@ -1,12 +1,12 @@ (ns quo2.components.navigation.floating-shell-button - (:require [quo2.components.buttons.dynamic-button :as dynamic-button] + (:require [quo2.components.buttons.dynamic-button.view :as dynamic-button] [react-native.core :as rn] [react-native.reanimated :as reanimated])) (defn dynamic-button-view [type dynamic-buttons style] (when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)] - [dynamic-button/dynamic-button + [dynamic-button/view {:type type :label label :on-press on-press diff --git a/src/quo2/components/tabs/tabs/style.cljs b/src/quo2/components/tabs/tabs/style.cljs new file mode 100644 index 0000000000..ba66c77b7c --- /dev/null +++ b/src/quo2/components/tabs/tabs/style.cljs @@ -0,0 +1,12 @@ +(ns quo2.components.tabs.tabs.style + (:require [utils.number])) + +(def linear-gradient + {:width "100%" + :height "100%"}) + +(defn tab + [{:keys [size default-tab-size number-of-items index style]}] + {:margin-right (if (= size default-tab-size) 12 8) + :padding-right (when (= index (dec number-of-items)) + (:padding-left style))}) diff --git a/src/quo2/components/tabs/tabs.cljs b/src/quo2/components/tabs/tabs/view.cljs similarity index 94% rename from src/quo2/components/tabs/tabs.cljs rename to src/quo2/components/tabs/tabs/view.cljs index d8e1418099..f5e84d37fc 100644 --- a/src/quo2/components/tabs/tabs.cljs +++ b/src/quo2/components/tabs/tabs/view.cljs @@ -1,4 +1,4 @@ -(ns quo2.components.tabs.tabs +(ns quo2.components.tabs.tabs.view (:require [oops.core :refer [oget]] [quo2.components.tabs.tab.view :as tab] [react-native.core :as rn] @@ -7,7 +7,8 @@ [reagent.core :as reagent] [utils.collection :as utils.collection] [utils.number] - [react-native.gesture :as gesture])) + [react-native.gesture :as gesture] + [quo2.components.tabs.tabs.style :as style])) (def default-tab-size 32) (def unread-count-offset 3) @@ -34,8 +35,7 @@ :start {:x 0 :y 0} :end {:x 1 :y 0} :pointer-events :none - :style {:width "100%" - :height "100%"}}])}] + :style style/linear-gradient}])}] children) (into [:<>] children))) @@ -71,9 +71,11 @@ {:keys [id label notification-dot? accessibility-label]} index] [rn/view - {:style {:margin-right (if (= size default-tab-size) 12 8) - :padding-right (when (= index (dec number-of-items)) - (:padding-left style))}} + {:style (style/tab {:size size + :default-tab-size default-tab-size + :number-of-items number-of-items + :index index + :style style})} [tab/view {:id id :notification-dot? notification-dot? @@ -93,7 +95,7 @@ (on-change id)))} label]]) -(defn tabs +(defn view " Common options (for scrollable and non-scrollable tabs): - `blur?` Boolean passed down to `quo2.components.tabs.tab/tab`. diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs index f67e5713fd..dc2d20e327 100644 --- a/src/quo2/components/tags/context_tag/view.cljs +++ b/src/quo2/components/tags/context_tag/view.cljs @@ -1,5 +1,5 @@ (ns quo2.components.tags.context-tag.view - (:require [quo2.components.avatars.group-avatar :as group-avatar] + (:require [quo2.components.avatars.group-avatar.view :as group-avatar] [quo2.components.avatars.user-avatar.style :as user-avatar-style] [quo2.components.avatars.user-avatar.view :as user-avatar] [quo2.components.icon :as icons] @@ -24,7 +24,7 @@ (select-keys [:override-theme :style :blur?]) (assoc-in [:style :padding-left] 3) (assoc-in [:style :padding-vertical] 2)) - [group-avatar/group-avatar opts] + [group-avatar/view opts] [text/text {:weight :medium :size :paragraph-2 diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 4308e0fa29..5dd2f167ef 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -3,13 +3,13 @@ (:require quo2.components.avatars.account-avatar.view quo2.components.avatars.channel-avatar.view - quo2.components.avatars.group-avatar + quo2.components.avatars.group-avatar.view quo2.components.avatars.icon-avatar quo2.components.avatars.user-avatar.view quo2.components.avatars.wallet-user-avatar quo2.components.banners.banner.view quo2.components.buttons.button.view - quo2.components.buttons.dynamic-button + quo2.components.buttons.dynamic-button.view quo2.components.buttons.predictive-keyboard.view quo2.components.buttons.slide-button.view quo2.components.browser.browser-input.view @@ -97,7 +97,7 @@ quo2.components.share.share-qr-code.view quo2.components.tabs.account-selector quo2.components.tabs.segmented-tab - quo2.components.tabs.tabs + quo2.components.tabs.tabs.view quo2.components.tags.context-tag.view quo2.components.tags.permission-tag quo2.components.tags.status-tags @@ -116,43 +116,43 @@ (def separator quo2.components.common.separator.view/separator) -;;;; AVATAR +;;;; Avatar (def account-avatar quo2.components.avatars.account-avatar.view/view) (def channel-avatar quo2.components.avatars.channel-avatar.view/view) -(def group-avatar quo2.components.avatars.group-avatar/group-avatar) +(def group-avatar quo2.components.avatars.group-avatar.view/view) (def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar) (def user-avatar quo2.components.avatars.user-avatar.view/user-avatar) (def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar) -;;;; BANNER -(def banner quo2.components.banners.banner.view/banner) +;;;; Banner +(def banner quo2.components.banners.banner.view/view) -;;;; BUTTONS +;;;; Buttons (def button quo2.components.buttons.button.view/button) -(def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button) +(def dynamic-button quo2.components.buttons.dynamic-button.view/view) (def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view) (def slide-button quo2.components.buttons.slide-button.view/view) -;;;; BROWSER -(def browser-input quo2.components.browser.browser-input.view/browser-input) +;;;; Browser +(def browser-input quo2.components.browser.browser-input.view/view) -;;;; CALENDAR +;;;; Calendar (def calendar quo2.components.calendar.calendar.view/view) (def calendar-day quo2.components.calendar.calendar-day.view/view) (def calendar-year quo2.components.calendar.calendar-year.view/view) -;;;; CODE +;;;; Code (def snippet quo2.components.code.snippet/snippet) -;;;; CARDS +;;;; Cards (def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card) (def keycard quo2.components.keycard.view/keycard) -;;;; COLORS +;;;; Colors (def color-picker quo2.components.colors.color-picker.view/view) (def picker-colors quo2.components.colors.color-picker.view/picker-colors) -;;;; COMMUNITY +;;;; Community (def community-card-view-item quo2.components.community.community-card-view/view) (def communities-membership-list-item quo2.components.community.community-list-view/communities-membership-list-item) @@ -166,42 +166,45 @@ (def token-requirement-list quo2.components.community.token-gating/token-requirement-list) (def channel-actions quo2.components.community.channel-actions/channel-actions) -;;;; COUNTER +;;;; Counter (def counter quo2.components.counter.counter.view/view) -(def step quo2.components.counter.step.view/step) +(def step quo2.components.counter.step.view/view) -;;;; DIVIDERS +;;;; Dividers (def divider-label quo2.components.dividers.divider-label/divider-label) (def new-messages quo2.components.dividers.new-messages/new-messages) (def divider-date quo2.components.dividers.date/date) (def strength-divider quo2.components.dividers.strength-divider.view/view) -;;;; DRAWERS +;;;; Drawers (def action-drawer quo2.components.drawers.action-drawers.view/action-drawer) (def documentation-drawers quo2.components.drawers.documentation-drawers.view/view) (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view) (def permission-context quo2.components.drawers.permission-context.view/view) -;;;; DROPDOWNS +;;;; Dropdowns (def dropdown quo2.components.dropdowns.dropdown/dropdown) -;;;; EMPTY STATE +;;;; Empty State (def empty-state quo2.components.empty-state.empty-state.view/empty-state) -;;;; GRAPH +;;;; Graph (def wallet-graph quo2.components.graph.wallet-graph.view/view) -;;;; HEADER +;;;; Header (def header quo2.components.header/header) -;;;; ICON +;;;; Gradient +(def gradient-cover quo2.components.gradient.gradient-cover.view/view) + +;;;; Icon (def icon quo2.components.icon/icon) -;;;; INFO +;;;; Info (def info-message quo2.components.info.info-message/info-message) (def information-box quo2.components.info.information-box.view/view) -;;;; INPUTS +;;;; Inputs (def input quo2.components.inputs.input.view/input) (def locked-input quo2.components.inputs.locked-input.view/locked-input) (def profile-input quo2.components.inputs.profile-input.view/profile-input) @@ -209,11 +212,16 @@ (def search-input quo2.components.inputs.search-input.view/search-input) (def title-input quo2.components.inputs.title-input.view/title-input) -;;;; NUMBERED KEYBOARD +;;;; Numbered Keyboard (def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/view) (def numbered-keyboard quo2.components.numbered-keyboard.numbered-keyboard.view/view) -;;;; LIST ITEMS +;;;; Links +(def link-preview quo2.components.links.link-preview.view/view) +(def url-preview quo2.components.links.url-preview.view/view) +(def url-preview-list quo2.components.links.url-preview-list.view/view) + +;;;; List items (def channel-list-item quo2.components.list-items.channel/list-item) (def menu-item quo2.components.list-items.menu-item/menu-item) (def preview-list quo2.components.list-items.preview-list/preview-list) @@ -221,23 +229,23 @@ (def community-list-item quo2.components.list-items.community.view/view) (def token-value quo2.components.list-items.token-value.view/view) -;;;; LOADERS +;;;; Loaders (def skeleton quo2.components.loaders.skeleton/skeleton) (def static-skeleton quo2.components.loaders.skeleton.view/view) -;;;; NAVIGATION +;;;; Navigation (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button) (def page-nav quo2.components.navigation.page-nav/page-nav) -;;;; MARKDOWN +;;;; Markdown (def markdown-list quo2.components.markdown.list.view/view) (def text quo2.components.markdown.text/text) -;;;; MESSAGES +;;;; Messages (def gap quo2.components.messages.gap/gap) (def system-message quo2.components.messages.system-message/system-message) -;;;; NOTIFICATIONS +;;;; Notifications (def activity-log quo2.components.notifications.activity-log.view/view) (def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view) (def notification-dot quo2.components.notifications.notification-dot/notification-dot) @@ -245,45 +253,45 @@ (def notification quo2.components.notifications.notification.view/notification) (def toast quo2.components.notifications.toast.view/toast) -;;;; PASSWORD +;;;; Password (def tips quo2.components.password.tips.view/view) -;;;; PROFILE +;;;; Profile (def profile-card quo2.components.profile.profile-card.view/profile-card) (def select-profile quo2.components.profile.select-profile.view/view) -;;;; REACTIONS +;;;; Reactions (def reaction quo2.components.reactions.reaction/reaction) (def add-reaction quo2.components.reactions.reaction/add-reaction) -;;;; RECORD AUDIO +;;;; Record Audio (def record-audio quo2.components.record-audio.record-audio.view/record-audio) (def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack) -;;;; SELECTORS +;;;; Selectors (def author quo2.components.messages.author.view/author) (def disclaimer quo2.components.selectors.disclaimer.view/view) (def filter quo2.components.selectors.filter.view/view) (def reactions quo2.components.selectors.reactions.view/view) (def checkbox quo2.components.selectors.selectors.view/checkbox) -;;;; SETTINGS +;;;; Settings (def privacy-option quo2.components.settings.privacy-option/card) (def account quo2.components.settings.accounts.view/account) (def settings-list quo2.components.settings.settings-list.view/settings-list) (def reorder-item quo2.components.settings.reorder-item.view/reorder-item) (def category quo2.components.settings.category.view/category) -;;;; SHARE +;;;; Share (def qr-code quo2.components.share.qr-code.view/qr-code) (def share-qr-code quo2.components.share.share-qr-code.view/view) -;;;; TABS -(def tabs quo2.components.tabs.tabs/tabs) +;;;; Tabs +(def tabs quo2.components.tabs.tabs.view/view) (def segmented-control quo2.components.tabs.segmented-tab/segmented-control) (def account-selector quo2.components.tabs.account-selector/account-selector) -;;;; TAGS +;;;; Tags (def tag quo2.components.tags.tag/tag) (def tags quo2.components.tags.tags/tags) (def permission-tag quo2.components.tags.permission-tag/tag) @@ -295,18 +303,10 @@ (def audio-tag quo2.components.tags.context-tag.view/audio-tag) (def community-tag quo2.components.tags.context-tag.view/community-tag) -;;;; TITLE +;;;; Title (def title quo2.components.text-combinations.title.view/title) -;;;; LINKS -(def url-preview quo2.components.links.url-preview.view/view) -(def url-preview-list quo2.components.links.url-preview-list.view/view) -(def link-preview quo2.components.links.link-preview.view/view) - -;;;; GRADIENT -(def gradient-cover quo2.components.gradient.gradient-cover.view/view) - -;;;; WALLET +;;;; Wallet (def account-card quo2.components.wallet.account-card.view/view) (def account-overview quo2.components.wallet.account-overview.view/view) (def network-amount quo2.components.wallet.network-amount.view/view) @@ -315,4 +315,3 @@ (def summary-info quo2.components.wallet.summary-info.view/view) (def token-input quo2.components.wallet.token-input.view/view) (def wallet-overview quo2.components.wallet.wallet-overview.view/view) - diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs index 586e042c5b..7feb9a6313 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/src/status_im/ui/screens/wallet/account/views.cljs @@ -5,7 +5,6 @@ [quo.design-system.spacing :as spacing] [quo2.core :as quo2] [quo2.components.markdown.text :as quo2.text] - [quo2.components.tabs.tabs :as quo2.tabs] [quo2.foundations.colors :as quo2.colors] [re-frame.core :as re-frame] [reagent.core :as reagent] @@ -124,7 +123,7 @@ (let [tab @selected-tab] [react/view {:flex 1} [react/view {:padding-horizontal 20 :padding-bottom 20} - [quo2.tabs/tabs + [quo2/tabs {:size 24 :on-change #(reset! selected-tab %) :default-active :tokens diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index 4c6ea0a96b..e8bd48cb65 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/src/status_im/ui/screens/wallet/accounts/views.cljs @@ -4,7 +4,6 @@ [quo.design-system.colors :as colors] [quo2.core :as quo2] [quo2.components.markdown.text :as quo2.text] - [quo2.components.tabs.tabs :as quo2.tabs] [quo2.foundations.colors :as quo2.colors] [re-frame.core :as re-frame] [reagent.core :as reagent] @@ -283,7 +282,7 @@ :margin-top 12 :margin-bottom 20} [react/view {:flex-direction :row} - [quo2.tabs/tabs + [quo2/tabs {:default-active (:address (first accounts)) :on-change #(reset! selected-account-atom %) :data accounts-data}] diff --git a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs index 83d16f149e..9f52119bb7 100644 --- a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs @@ -1,5 +1,5 @@ (ns status-im2.contexts.quo-preview.avatars.group-avatar - (:require [quo2.components.avatars.group-avatar :as quo2] + (:require [quo2.core :as quo2] [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] diff --git a/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs b/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs index 1f58a1eab2..3bf659b731 100644 --- a/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs @@ -1,5 +1,5 @@ (ns status-im2.contexts.quo-preview.buttons.dynamic-button - (:require [quo2.components.buttons.dynamic-button :as quo2] + (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] @@ -41,7 +41,7 @@ [rn/view {:padding-vertical 60 :align-items :center} - [quo2/dynamic-button @state]]]]))) + [quo/dynamic-button @state]]]]))) (defn preview-dynamic-button [] diff --git a/src/status_im2/contexts/quo_preview/counter/step.cljs b/src/status_im2/contexts/quo_preview/counter/step.cljs index c87db5c377..01feb13457 100644 --- a/src/status_im2/contexts/quo_preview/counter/step.cljs +++ b/src/status_im2/contexts/quo_preview/counter/step.cljs @@ -1,5 +1,5 @@ (ns status-im2.contexts.quo-preview.counter.step - (:require [quo2.components.counter.step.view :as quo2] + (:require [quo2.core :as quo2] [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent]