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

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)})

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
+       {:style (style/container {:container-size      container-size
-        :height           container-size
+                                 :customization-color color
-        :align-items      :center
+                                 :theme               theme})}
-        :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}
        [icon/icon :i/group
         {:size  icon-size
          :color colors/white-opa-70}]])))
+
+(def view (quo.theme/with-theme view-internal))

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 []

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
+(defn- view-internal
-  [{:keys [hide-pin? latest-pin-text pins-count on-press]}]
+  [{: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))

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))

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))

src/quo2/components/buttons/dynamic_button.cljs

@@ -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])]])))

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)})

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))

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))))

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))

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]

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

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))})

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%"
+               :style          style/linear-gradient}])}]
-                                :height "100%"}}])}]
           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)
+   {:style (style/tab {:size             size
-            :padding-right (when (= index (dec number-of-items))
+                       :default-tab-size default-tab-size
-                             (:padding-left style))}}
+                       :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`.

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

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
+;;;; Banner
-(def banner quo2.components.banners.banner.view/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
+;;;; Browser
-(def browser-input quo2.components.browser.browser-input.view/browser-input)
+(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
+;;;; Tabs
-(def tabs quo2.components.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
+;;;; Wallet
-(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
 (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)
-

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

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}]

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]

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
   []

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]