[#16118] bottom nav tab notification color (#16236)

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

@@ -0,0 +1,17 @@
+(ns quo2.components.navigation.bottom-nav-tab.styles
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn notification-dot
+  [customization-color]
+  {:width            8
+   :height           8
+   :border-radius    4
+   :top              6
+   :left             51
+   :position         :absolute
+   :background-color (colors/custom-color customization-color 60)})
+
+(def notification-counter
+  {:position :absolute
+   :left     48
+   :top      2})

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

@@ -1,10 +1,11 @@
-(ns quo2.components.navigation.bottom-nav-tab
+(ns quo2.components.navigation.bottom-nav-tab.view
   (:require [quo2.components.counter.counter :as counter]
             [quo2.components.icons.icons :as icons]
+            [quo2.components.navigation.bottom-nav-tab.styles :as styles]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
-            [react-native.platform :as platform]
             [react-native.hole-view :as hole-view]
+            [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]))
 
 (defn toggle-background-color
@@ -26,9 +27,12 @@
     :on-press               bottom-tab on-press function
     :pass-through?          true/false
     :icon-color-anim        reanimated shared value
+    :customization-color    Customization color for the notification mark
   "
   [{:keys [icon new-notifications? notification-indicator counter-label
-           on-press pass-through? icon-color-anim accessibility-label test-ID]}]
+           on-press pass-through? icon-color-anim accessibility-label test-ID
+           customization-color]
+    :or   {customization-color :blue}}]
   (let [icon-animated-style       (reanimated/apply-animations-to-style
                                    {:tint-color icon-color-anim}
                                    {:width       24
@@ -77,19 +81,10 @@
         (if (= notification-indicator :counter)
           [counter/counter
            {:override-text-color colors/white
-            :override-bg-color   colors/primary-50
+            :override-bg-color   (colors/custom-color customization-color 60)
-            :style               {:position :absolute
+            :style               styles/notification-counter}
-                                  :left     48
-                                  :top      2}}
            counter-label]
-          [rn/view
+          [rn/view {:style (styles/notification-dot customization-color)}]))]]))
-           {:style {:width            8
-                    :height           8
-                    :border-radius    4
-                    :top              6
-                    :left             51
-                    :position         :absolute
-                    :background-color colors/primary-50}}]))]]))
 
 (defn bottom-nav-tab
   [opts]

src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab
-  (:require [quo2.components.navigation.bottom-nav-tab :as quo2]
+  (:require [clojure.string :as string]
+            [quo2.components.navigation.bottom-nav-tab.view :as quo2]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
@@ -36,7 +37,15 @@
                :value :unread-dot}]}
    {:label "Counter Label"
     :key   :counter-label
-    :type  :text}])
+    :type  :text}
+
+   {:label   "Customization color"
+    :key     :customization-color
+    :type    :select
+    :options (map (fn [[k _]]
+                    {:key   k
+                     :value (string/capitalize (name k))})
+                  colors/customization)}])
 
 (defn get-icon-color
   [selected? pass-through?]
@@ -61,7 +70,8 @@
                                      :new-notifications?     true
                                      :notification-indicator :counter
                                      :counter-label          8
-                                     :preview-label-color    colors/white})
+                                     :preview-label-color    colors/white
+                                     :customization-color    :turquoise})
         selected?     (reagent/cursor state [:selected?])
         pass-through? (reagent/cursor state [:pass-through?])]
     (fn []

src/status_im2/contexts/shell/components/bottom_tabs/view.cljs

@@ -8,7 +8,7 @@
             [status-im2.contexts.shell.state :as state]
             [status-im2.contexts.shell.animation :as animation]
             [status-im2.contexts.shell.constants :as shell.constants]
-            [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]
+            [quo2.components.navigation.bottom-nav-tab.view :as bottom-nav-tab]
             [status-im2.contexts.shell.components.bottom-tabs.style :as style]))
 
 (defn blur-overlay-params
@@ -21,15 +21,21 @@
 
 (defn bottom-tab
   [icon stack-id shared-values notifications-data]
-  [bottom-nav-tab/bottom-nav-tab
+  (let [{:keys [key-uid]}   (rf/sub [:multiaccount])
-   (assoc (get notifications-data stack-id)
+        customization-color (or (:color (rf/sub [:onboarding-2/profile]))
-          :test-ID             stack-id
+                                (rf/sub [:profile/customization-color key-uid]))
-          :icon                icon
+        icon-color          (->> stack-id
-          :icon-color-anim     (get
+                                 (get shell.constants/tabs-icon-color-keywords)
-                                shared-values
+                                 (get shared-values))]
-                                (get shell.constants/tabs-icon-color-keywords stack-id))
+    [bottom-nav-tab/bottom-nav-tab
-          :on-press            #(animation/bottom-tab-on-press stack-id true)
+     (-> notifications-data
-          :accessibility-label (str (name stack-id) "-tab"))])
+         (get stack-id)
+         (assoc :test-ID             stack-id
+                :icon                icon
+                :icon-color-anim     icon-color
+                :on-press            #(animation/bottom-tab-on-press stack-id true)
+                :accessibility-label (str (name stack-id) "-tab")
+                :customization-color customization-color))]))
 
 (defn f-bottom-tabs
   []