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.cljs → 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))

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
-  [{: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))

src/quo2/components/browser/browser_input/component_spec.cljs

@@ -4,53 +4,53 @@
 
 (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")
       (h/was-called on-change-text)))
 
   (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/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)})