chore: adjust quo2 counter component to use customization-color internally (#16799)

* chore: refactor use of customization-color in quo2 counter

* chore: fix uses of counter to use custom colors in app

src/quo2/components/banners/banner/view.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.banners.banner.view
   (:require [quo2.components.banners.banner.style :as style]
-            [quo2.components.counter.counter :as counter]
+            [quo2.components.counter.counter.view :as counter]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
@@ -27,4 +27,4 @@
      [rn/view
       {:accessibility-label :pins-count
        :style               style/counter}
-      [counter/counter {:type :secondary} pins-count]]]))
+      [counter/view {:type :secondary} pins-count]]]))

src/quo2/components/community/channel_actions.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.community.channel-actions
   (:require [react-native.core :as rn]
             [quo2.components.icon :as icons]
-            [quo2.components.counter.counter :as counter]
+            [quo2.components.counter.counter.view :as counter]
             [quo2.components.markdown.text :as text]
             [quo2.components.community.style :as style]))
 
@@ -15,7 +15,7 @@
     [rn/view {:style style/channel-action-row}
      [icons/icon icon]
      (when counter-value
-       [counter/counter {:type :secondary} counter-value])]
+       [counter/view {:type :secondary} counter-value])]
     [text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]])
 
 (defn channel-actions

src/quo2/components/community/community_list_view.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.community.community-list-view
   (:require [quo2.components.community.community-view :as community-view]
             [quo2.components.community.style :as style]
-            [quo2.components.counter.counter :as counter]
+            [quo2.components.counter.counter.view :as counter]
             [quo2.components.icon :as icons]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.community.icon :as community-icon]
@@ -11,9 +11,11 @@
             [react-native.core :as rn]))
 
 (defn notification-view
-  [{:keys [muted?
+  [{:keys [theme
+           muted?
            unread-messages?
-           unread-mentions-count]}]
+           unread-mentions-count
+           customization-color]}]
   (cond
     muted?
     [icons/icon :i/muted
@@ -23,15 +25,18 @@
       :size            20
       :color           (colors/theme-colors
                         colors/neutral-50
-                        colors/neutral-40)}]
+                        colors/neutral-40
+                        theme)}]
     (pos? unread-mentions-count)
-    [counter/counter {:type :default} unread-mentions-count]
+    [counter/view
+     {:customization-color customization-color
+      :type                :default} unread-mentions-count]
 
     unread-messages?
     [unread-grey-dot :unviewed-messages-public]))
 
-(defn communities-list-view-item
+(defn- communities-list-view-item-internal
-  [props
+  [{:keys [theme customization-color] :as props}
    {:keys [name
            locked?
            status
@@ -63,7 +68,8 @@
          :style               {:color (when muted
                                         (colors/theme-colors
                                          colors/neutral-40
-                                         colors/neutral-60))}}
+                                         colors/neutral-60
+                                         theme))}}
         name]
        [community-view/community-stats-column
         {:type :list-view}]]
@@ -72,12 +78,16 @@
          {:locked? locked?
           :tokens  tokens}]
         [notification-view
-         {:muted?                muted
+         {:customization-color   customization-color
+          :theme                 theme
+          :muted?                muted
           :unread-mentions-count unread-mentions-count
           :unread-messages?      unread-messages?}])]]]])
 
-(defn communities-membership-list-item
+(def communities-list-view-item (quo.theme/with-theme communities-list-view-item-internal))
-  [props
+
+(defn- communities-membership-list-item-internal
+  [{:keys [theme customization-color] :as props}
    bottom-sheet?
    {:keys [name
            muted
@@ -91,7 +101,8 @@
   [rn/touchable-highlight
    (merge {:underlay-color (colors/theme-colors
                             colors/neutral-5
-                            colors/neutral-95)
+                            colors/neutral-95
+                            theme)
            :style          {:border-radius 12
                             :margin-left   12}}
           props)
@@ -109,9 +120,10 @@
        :weight              :semi-bold
        :size                :paragraph-1
        :style               (when muted
-                              {:color (if (theme/dark?)
+                              {:color (colors/theme-colors
-                                        colors/neutral-60
+                                       colors/neutral-40
-                                        colors/neutral-40)})}
+                                       colors/neutral-60
+                                       theme)})}
       name]]
 
     [rn/view
@@ -123,6 +135,10 @@
         {:locked? locked?
          :tokens  tokens}]
        [notification-view
-        {:muted?                muted
+        {:theme                 theme
+         :customization-color   customization-color
+         :muted?                muted
          :unread-mentions-count unviewed-mentions-count
          :unread-messages?      (pos? unviewed-messages-count)}])]]])
+
+(def communities-membership-list-item (quo.theme/with-theme communities-membership-list-item-internal))

src/quo2/components/counter/counter.cljs

@@ -1,67 +0,0 @@
-(ns quo2.components.counter.counter
-  (:require
-    [quo2.components.markdown.text :as text]
-    [quo2.foundations.colors :as colors]
-    [quo2.theme :as theme]
-    [react-native.core :as rn]
-    [utils.number]))
-
-(def themes
-  {:light {:default   colors/primary-50
-           :secondary colors/neutral-80-opa-5
-           :grey      colors/neutral-10
-           :outline   colors/neutral-20}
-   :dark  {:default   colors/primary-60
-           :secondary colors/white-opa-5
-           :grey      colors/neutral-70
-           :outline   colors/neutral-70}})
-
-(defn get-color
-  [k]
-  (get-in themes [(theme/get-theme) k]))
-
-(defn counter
-  [{:keys [type override-text-color override-bg-color style accessibility-label max-value]
-    :or   {max-value 99}}
-   value]
-  (let [type       (or type :default)
-        text-color (or override-text-color
-                       (if (or
-                            (= (theme/get-theme) :dark)
-                            (= type :default))
-                         colors/white
-                         colors/neutral-100))
-        value      (utils.number/parse-int value)
-        label      (if (> value max-value)
-                     (str max-value "+")
-                     (str value))
-        width      (case (count label)
-                     1 16
-                     2 20
-                     28)]
-    [rn/view
-     {:test-ID             :counter-component
-      :accessible          true
-      :accessibility-label accessibility-label
-      :style               (cond-> (merge
-                                    {:align-items     :center
-                                     :justify-content :center
-                                     :border-radius   6
-                                     :width           width
-                                     :height          16}
-                                    style)
-                             (= type :outline)
-                             (merge {:border-width 1
-                                     :border-color (get-color type)})
-
-                             (not= type :outline)
-                             (assoc :background-color
-                                    (or override-bg-color
-                                        (get-color type)))
-
-                             (> value max-value)
-                             (assoc :padding-left 0.5))}
-     [text/text
-      {:weight :medium
-       :size   :label
-       :style  {:color text-color}} label]]))

src/quo2/components/counter/counter/component_spec.cljs

@@ -1,29 +1,29 @@
-(ns quo2.components.counter.component-spec
+(ns quo2.components.counter.counter.component-spec
-  (:require [quo2.components.counter.counter :as counter]
+  (:require [quo2.components.counter.counter.view :as counter]
             [test-helpers.component :as h]))
 
 (h/describe "counter component"
   (h/test "default render of counter component"
-    (h/render [counter/counter {} nil])
+    (h/render [counter/view {} nil])
     (-> (h/expect (h/get-by-test-id :counter-component))
         (h/is-truthy)))
 
   (h/test "renders counter with a string value"
-    (h/render [counter/counter {} "1"])
+    (h/render [counter/view {} "1"])
     (-> (h/expect (h/get-by-text "1"))
         (h/is-truthy)))
 
   (h/test "renders counter with an integer value"
-    (h/render [counter/counter {} 1])
+    (h/render [counter/view {} 1])
     (-> (h/expect (h/get-by-text "1"))
         (h/is-truthy)))
 
   (h/test "renders counter with max value 99+ by default"
-    (h/render [counter/counter {} 100])
+    (h/render [counter/view {} 100])
     (-> (h/expect (h/get-by-text "99+"))
         (h/is-truthy)))
 
   (h/test "renders counter with custom max value when set to 150"
-    (h/render [counter/counter {:max-value 150} 151])
+    (h/render [counter/view {:max-value 150} 151])
     (-> (h/expect (h/get-by-text "150+"))
         (h/is-truthy))))

src/quo2/components/counter/counter/style.cljs

@@ -0,0 +1,32 @@
+(ns quo2.components.counter.counter.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-color
+  [type customization-color theme]
+  (case type
+    :default   (colors/custom-color customization-color 50)
+    :secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+    :grey      (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
+    :outline   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+    nil))
+
+(defn container
+  [{:keys [type label container-style customization-color theme value max-value]}]
+  (let [width (case (count label)
+                1 16
+                2 20
+                28)]
+    (cond-> (merge
+             {:align-items     :center
+              :justify-content :center
+              :border-radius   6
+              :width           width
+              :height          16}
+             container-style)
+      (= type :outline)
+      (merge {:border-width 1
+              :border-color (get-color type customization-color theme)})
+      (not= type :outline)
+      (assoc :background-color (get-color type customization-color theme))
+      (> value max-value)
+      (assoc :padding-left 0.5))))

src/quo2/components/counter/counter/view.cljs

@@ -0,0 +1,37 @@
+(ns quo2.components.counter.counter.view
+  (:require
+    [quo2.components.markdown.text :as text]
+    [quo2.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [utils.number]
+    [quo2.theme :as quo.theme]
+    [quo2.components.counter.counter.style :as style]))
+
+(defn- view-internal
+  [{:keys [type customization-color theme container-style accessibility-label max-value]
+    :or   {max-value 99 customization-color :blue theme :dark}}
+   value]
+  (let [type  (or type :default)
+        value (utils.number/parse-int value)
+        label (if (> value max-value)
+                (str max-value "+")
+                (str value))]
+    [rn/view
+     {:test-ID             :counter-component
+      :accessible          true
+      :accessibility-label accessibility-label
+      :style               (style/container
+                            {:label               label
+                             :type                type
+                             :customization-color customization-color
+                             :theme               theme
+                             :container-style     container-style
+                             :value               value
+                             :max-value           max-value})}
+     [text/text
+      {:weight :medium
+       :size   :label
+       :style  (when (= type :default) {:color colors/white})}
+      label]]))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/list_items/channel.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.list-items.channel
   (:require [quo2.components.avatars.channel-avatar.view :as channel-avatar]
             [quo2.components.common.unread-grey-dot.view :as unread-grey-dot]
-            [quo2.components.counter.counter :as quo2.counter]
+            [quo2.components.counter.counter.view :as counter]
             [quo2.components.icon :as quo2.icons]
             [quo2.components.markdown.text :as quo2.text]
             [quo2.foundations.colors :as colors]
@@ -61,7 +61,7 @@
 
            (pos? (int mentions-count))
            [rn/view {:style {:margin-right 2 :margin-top 2}}
-            [quo2.counter/counter {:override-bg-color channel-color}
+            [counter/view {:customization-color channel-color}
              mentions-count]]
 
            unread-messages?

src/quo2/components/list_items/community/view.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.list-items.community.view
   (:require [quo2.components.community.community-view :as community-view]
-            [quo2.components.counter.counter :as counter]
+            [quo2.components.counter.counter.view :as counter]
             [quo2.components.icon :as icons]
             [quo2.components.list-items.community.style :as style]
             [quo2.components.markdown.text :as text]
@@ -54,9 +54,9 @@
             :blur?    blur?}]
 
           (and (= type :engage) (= info :mention) (pos? unread-count))
-          [counter/counter
+          [counter/view
-           {:type              :default
+           {:type                :default
-            :override-bg-color customization-color}
+            :customization-color customization-color}
            unread-count]
 
           (and (= type :engage) (= info :notification))

src/quo2/components/navigation/bottom_nav_tab/view.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.navigation.bottom-nav-tab.view
-  (:require [quo2.components.counter.counter :as counter]
+  (:require [quo2.components.counter.counter.view :as counter]
             [quo2.components.icons.icons :as icons]
             [quo2.components.navigation.bottom-nav-tab.styles :as styles]
             [quo2.foundations.colors :as colors]
@@ -79,10 +79,9 @@
           :source (icons/icon-source (keyword (str icon 24)))}])
       (when new-notifications?
         (if (= notification-indicator :counter)
-          [counter/counter
+          [counter/view
-           {:override-text-color colors/white
+           {:customization-color customization-color
-            :override-bg-color   (colors/custom-color customization-color 60)
+            :container-style     styles/notification-counter}
-            :style               styles/notification-counter}
            counter-label]
           [rn/view {:style (styles/notification-dot customization-color)}]))]]))
 

src/quo2/components/notifications/info_count.cljs

@@ -1,31 +0,0 @@
-(ns quo2.components.notifications.info-count
-  (:require [quo2.foundations.colors :as colors]
-            [quo2.foundations.typography :as typography]
-            [react-native.core :as rn]))
-
-(defn- counter-style
-  [customization-color overwritten-styles]
-  (merge {:width            16
-          :height           16
-          :position         :absolute
-          :right            22
-          :border-radius    6
-          :justify-content  :center
-          :align-items      :center
-          :background-color (colors/custom-color-by-theme customization-color 50 60)}
-         overwritten-styles))
-
-(defn info-count
-  ([amount]
-   (info-count {} amount))
-  ([{:keys [customization-color style]
-     :or   {customization-color :blue}
-     :as   props}
-    amount]
-   (when (pos? amount)
-     [rn/view (assoc props :style (counter-style customization-color style))
-      [rn/text
-       {:style (merge typography/font-medium
-                      typography/label
-                      {:color colors/white :text-align :center})}
-       amount]])))

src/quo2/core.cljs

@@ -26,7 +26,7 @@
     quo2.components.community.community-view
     quo2.components.community.icon
     quo2.components.community.token-gating
-    quo2.components.counter.counter
+    quo2.components.counter.counter.view
     quo2.components.counter.step.view
     quo2.components.dividers.date
     quo2.components.dividers.divider-label
@@ -70,7 +70,6 @@
     quo2.components.notifications.activity-log.view
     quo2.components.notifications.activity-logs-photos.view
     quo2.components.notifications.count-down-circle
-    quo2.components.notifications.info-count
     quo2.components.notifications.notification-dot
     quo2.components.notifications.notification.view
     quo2.components.notifications.toast.view
@@ -161,7 +160,7 @@
 (def channel-actions quo2.components.community.channel-actions/channel-actions)
 
 ;;;; COUNTER
-(def counter quo2.components.counter.counter/counter)
+(def counter quo2.components.counter.counter.view/view)
 (def step quo2.components.counter.step.view/step)
 
 ;;;; DIVIDERS
@@ -231,7 +230,6 @@
 ;;;; NOTIFICATIONS
 (def activity-log quo2.components.notifications.activity-log.view/view)
 (def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
-(def info-count quo2.components.notifications.info-count/info-count)
 (def notification-dot quo2.components.notifications.notification-dot/notification-dot)
 (def count-down-circle quo2.components.notifications.count-down-circle/circle-timer)
 (def notification quo2.components.notifications.notification.view/notification)

src/quo2/core_spec.cljs

@@ -12,7 +12,7 @@
     [quo2.components.calendar.calendar-year.component-spec]
     [quo2.components.browser.browser-input.component-spec]
     [quo2.components.colors.color-picker.component-spec]
-    [quo2.components.counter.component-spec]
+    [quo2.components.counter.counter.component-spec]
     [quo2.components.counter.step.component-spec]
     [quo2.components.dividers.divider-label-component-spec]
     [quo2.components.dividers.strength-divider.component-spec]

src/status_im2/common/home/view.cljs

@@ -35,17 +35,19 @@
 
 (defn- unread-indicator
   []
-  (let [unread-count (rf/sub [:activity-center/unread-count])
+  (let [unread-count        (rf/sub [:activity-center/unread-count])
-        indicator    (rf/sub [:activity-center/unread-indicator])
+        indicator           (rf/sub [:activity-center/unread-indicator])
-        unread-type  (case indicator
+        unread-type         (case indicator
-                       :unread-indicator/seen :grey
+                              :unread-indicator/seen :grey
-                       :unread-indicator/new  :default
+                              :unread-indicator/new  :default
-                       nil)]
+                              nil)
+        customization-color (rf/sub [:profile/customization-color])]
     (when (pos? unread-count)
       [quo/counter
-       {:accessibility-label :activity-center-unread-count
+       {:customization-color customization-color
+        :accessibility-label :activity-center-unread-count
         :type                unread-type
-        :style               (style/unread-indicator unread-count
+        :container-style     (style/unread-indicator unread-count
                                                      constants/activity-center-max-unread-count)}
        unread-count])))
 

src/status_im2/contexts/chat/home/chat_list_item/style.cljs

@@ -11,16 +11,6 @@
    :flex-direction     :row
    :align-items        :center})
 
-(defn count-container
-  []
-  {:width            8
-   :height           8
-   :border-radius    4
-   :position         :absolute
-   :right            26
-   :top              16
-   :background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)})
-
 (defn timestamp
   [muted?]
   {:color       (if muted?

src/status_im2/contexts/chat/home/chat_list_item/view.cljs

@@ -219,8 +219,8 @@
        [icons/icon :i/muted {:color colors/neutral-40}]
 
        (and group-chat unread-mentions?)
-       [quo/info-count
+       [quo/counter
-        {:style               {:position :relative :right 0}
+        {:container-style     {:position :relative :right 0}
          :customization-color customization-color
          :accessibility-label :new-message-counter}
         unviewed-mentions-count]
@@ -232,8 +232,8 @@
          :accessibility-label :unviewed-messages-public}]
 
        unread-messages?
-       [quo/info-count
+       [quo/counter
-        {:style               {:position :relative :right 0}
+        {:container-style     {:position :relative :right 0}
          :customization-color customization-color
          :accessibility-label :new-message-counter}
         unviewed-messages-count])]))

src/status_im2/contexts/chat/home/contact_request/view.cljs

@@ -34,25 +34,29 @@
 
 (defn contact-requests
   [requests]
-  [rn/touchable-opacity
+  (let [customization-color (rf/sub [:profile/customization-color])]
-   {:active-opacity      1
+    [rn/touchable-opacity
-    :accessibility-label :open-activity-center-contact-requests
+     {:active-opacity      1
-    :on-press            (fn []
+      :accessibility-label :open-activity-center-contact-requests
-                           (rf/dispatch [:activity-center/open
+      :on-press            (fn []
-                                         {:filter-status :unread
+                             (rf/dispatch [:activity-center/open
-                                          :filter-type   notification-types/contact-request}]))
+                                           {:filter-status :unread
-    :style               style/contact-requests}
+                                            :filter-type   notification-types/contact-request}]))
-   [rn/view {:style (style/contact-requests-icon)}
+      :style               style/contact-requests}
-    [quo/icon :i/pending-user {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]
+     [rn/view {:style (style/contact-requests-icon)}
-   [rn/view {:style {:margin-left 8}}
+      [quo/icon :i/pending-user {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]
-    [quo/text
+     [rn/view {:style {:margin-left 8 :flex 1}}
-     {:size   :paragraph-1
+      [quo/text
-      :weight :semi-bold
+       {:size   :paragraph-1
-      :style  {:color (colors/theme-colors colors/neutral-100 colors/white)}}
+        :weight :semi-bold
-     (i18n/label :t/pending-requests)]
+        :style  {:color (colors/theme-colors colors/neutral-100 colors/white)}}
-    [quo/text
+       (i18n/label :t/pending-requests)]
-     {:size  :paragraph-2
+      [quo/text
-      :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
+       {:size  :paragraph-2
-     (requests-summary requests)]]
+        :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
-   [quo/info-count {:accessibility-label :pending-contact-requests-count}
+       (requests-summary requests)]]
-    (count requests)]])
+     [quo/counter
+      {:container-style     {:margin-right 2}
+       :customization-color customization-color
+       :accessibility-label :pending-contact-requests-count}
+      (count requests)]]))

src/status_im2/contexts/chat/photo_selector/style.cljs

@@ -71,8 +71,6 @@
    :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)})
 
 (def image-count
-  {:width         24
+  {:position :absolute
-   :height        24
+   :top      8
-   :border-radius 8
+   :right    8})
-   :top           8
-   :right         8})

src/status_im2/contexts/chat/photo_selector/view.cljs

@@ -6,7 +6,6 @@
     [react-native.platform :as platform]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
-    [quo2.components.notifications.info-count :as info-count]
     [quo2.core :as quo]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
@@ -69,7 +68,8 @@
 
 (defn render-image
   [item index _ {:keys [window-width selected]}]
-  (let [item-selected? (some #(= (:uri item) (:uri %)) @selected)]
+  (let [customization-color (rf/sub [:profile/customization-color])
+        item-selected?      (some #(= (:uri item) (:uri %)) @selected)]
     [rn/touchable-opacity
      {:on-press            (fn []
                              (if item-selected?
@@ -84,8 +84,9 @@
      (when item-selected?
        [:<>
         [rn/view {:style (style/overlay window-width)}]
-        [info-count/info-count
+        [quo/counter
-         {:style               style/image-count
+         {:container-style     style/image-count
+          :customization-color customization-color
           :accessibility-label (str "count-" index)}
          (inc (utils.collection/first-index #(= (:uri item) (:uri %)) @selected))]])]))
 

src/status_im2/contexts/communities/home/view.cljs

@@ -19,17 +19,19 @@
 
 (defn item-render
   [{:keys [id] :as item}]
-  (let [unviewed-counts (rf/sub [:communities/unviewed-counts id])
+  (let [unviewed-counts     (rf/sub [:communities/unviewed-counts id])
-        item            (merge item unviewed-counts)]
+        customization-color (rf/sub [:profile/customization-color])
+        item                (merge item unviewed-counts)]
     [quo/communities-membership-list-item
-     {:style         {:padding-horizontal 18}
+     {:customization-color customization-color
-      :on-press      #(debounce/dispatch-and-chill [:navigate-to :community-overview id] 500)
+      :style               {:padding-horizontal 18}
-      :on-long-press #(rf/dispatch
+      :on-press            #(debounce/dispatch-and-chill [:navigate-to :community-overview id] 500)
-                       [:show-bottom-sheet
+      :on-long-press       #(rf/dispatch
-                        {:content       (fn []
+                             [:show-bottom-sheet
-                                          [options/community-options-bottom-sheet id])
+                              {:content       (fn []
-                         :selected-item (fn []
+                                                [options/community-options-bottom-sheet id])
-                                          [quo/communities-membership-list-item {} true item])}])}
+                               :selected-item (fn []
+                                                [quo/communities-membership-list-item {} true item])}])}
      false
      item]))
 

src/status_im2/contexts/communities/overview/view.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.communities.overview.view
   (:require [oops.core :as oops]
-            [quo2.components.navigation.floating-shell-button :as floating-shell-button]
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.blur :as blur]
@@ -363,7 +362,7 @@
         customization-color (rf/sub [:profile/customization-color])]
     [rn/view {:style style/community-overview-container}
      [community-card-page-view id]
-     [floating-shell-button/floating-shell-button
+     [quo/floating-shell-button
       {:jump-to {:on-press            #(rf/dispatch [:shell/navigate-to-jump-to])
                  :customization-color customization-color
                  :label               (i18n/label :t/jump-to)}}

src/status_im2/contexts/quo_preview/counter/counter.cljs

@@ -1,5 +1,5 @@
 (ns status-im2.contexts.quo-preview.counter.counter
-  (:require [quo2.components.counter.counter :as quo2]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
@@ -14,12 +14,19 @@
               {:key   :secondary
                :value "Secondary"}
               {:key   :grey
-               :value "Gray"}
+               :value "Grey"}
               {:key   :outline
                :value "Outline"}]}
    {:label "Value"
     :key   :value
-    :type  :text}])
+    :type  :text}
+   {:label   "Customization color:"
+    :key     :customization-color
+    :type    :select
+    :options (map (fn [color]
+                    (let [k (get color :name)]
+                      {:key k :value k}))
+                  (quo/picker-colors))}])
 
 (defn cool-preview
   []
@@ -31,7 +38,7 @@
         [rn/view
          {:padding-vertical 60
           :align-items      :center}
-         [quo2/counter @state (:value @state)]]]])))
+         [quo/counter @state (:value @state)]]]])))
 
 (defn preview-counter
   []

src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs

@@ -96,15 +96,14 @@
        nil))])
 
 (defn notification-container
-  [{:keys [notification-indicator counter-label color-60]}]
+  [{:keys [notification-indicator counter-label customization-color]}]
   [rn/view {:style style/notification-container}
    (if (= notification-indicator :counter)
      [quo/counter
       {:outline             false
-       :override-text-color colors/white
+       :customization-color customization-color}
-       :override-bg-color   color-60}
       counter-label]
-     [rn/view {:style (style/unread-dot color-60)}])])
+     [rn/view {:style (style/unread-dot customization-color)}])])
 
 (defn bottom-container
   [type {:keys [new-notifications?] :as content}]
@@ -223,8 +222,7 @@
   (let [card-ref (atom nil)]
     (fn [{:keys [avatar-params title type customization-color
                  content banner id channel-id]}]
-      (let [color-50 (colors/custom-color customization-color 50)
+      (let [color-50 (colors/custom-color customization-color 50)]
-            color-60 (colors/custom-color customization-color 60)]
         [rn/touchable-opacity
          {:on-press       #(calculate-card-position-and-open-screen
                             card-ref
@@ -253,8 +251,8 @@
              :style  style/subtitle}
             (subtitle type content)]
            [bottom-container type
-            (merge {:color-50 color-50
+            (merge {:color-50            color-50
-                    :color-60 color-60}
+                    :customization-color customization-color}
                    content)]]
           (when avatar-params
             [rn/view {:style style/avatar-container}