Skip to content

Commit 2b465cb

Browse files
ulisesmaculisesmac
authored
[#16118] bottom nav tab notification color (#16236)
1 parent 850ac3f commit 2b465cb

File tree

4 files changed

+56
-28
lines changed

4 files changed

+56
-28
lines changed

Diff for: ‎src/quo2/components/navigation/bottom_nav_tab/styles.cljs

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
(ns quo2.components.navigation.bottom-nav-tab.styles
2+
(:require [quo2.foundations.colors :as colors]))
3+
4+
(defn notification-dot
5+
[customization-color]
6+
{:width 8
7+
:height 8
8+
:border-radius 4
9+
:top 6
10+
:left 51
11+
:position :absolute
12+
:background-color (colors/custom-color customization-color 60)})
13+
14+
(def notification-counter
15+
{:position :absolute
16+
:left 48
17+
:top 2})

Diff for: ‎src/quo2/components/navigation/bottom_nav_tab.cljs renamed to ‎src/quo2/components/navigation/bottom_nav_tab/view.cljs

+10-15
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
(ns quo2.components.navigation.bottom-nav-tab
1+
(ns quo2.components.navigation.bottom-nav-tab.view
22
(:require [quo2.components.counter.counter :as counter]
33
[quo2.components.icons.icons :as icons]
4+
[quo2.components.navigation.bottom-nav-tab.styles :as styles]
45
[quo2.foundations.colors :as colors]
56
[react-native.core :as rn]
6-
[react-native.platform :as platform]
77
[react-native.hole-view :as hole-view]
8+
[react-native.platform :as platform]
89
[react-native.reanimated :as reanimated]))
910

1011
(defn toggle-background-color
@@ -26,9 +27,12 @@
2627
:on-press bottom-tab on-press function
2728
:pass-through? true/false
2829
:icon-color-anim reanimated shared value
30+
:customization-color Customization color for the notification mark
2931
"
3032
[{:keys [icon new-notifications? notification-indicator counter-label
31-
on-press pass-through? icon-color-anim accessibility-label test-ID]}]
33+
on-press pass-through? icon-color-anim accessibility-label test-ID
34+
customization-color]
35+
:or {customization-color :blue}}]
3236
(let [icon-animated-style (reanimated/apply-animations-to-style
3337
{:tint-color icon-color-anim}
3438
{:width 24
@@ -77,19 +81,10 @@
7781
(if (= notification-indicator :counter)
7882
[counter/counter
7983
{:override-text-color colors/white
80-
:override-bg-color colors/primary-50
81-
:style {:position :absolute
82-
:left 48
83-
:top 2}}
84+
:override-bg-color (colors/custom-color customization-color 60)
85+
:style styles/notification-counter}
8486
counter-label]
85-
[rn/view
86-
{:style {:width 8
87-
:height 8
88-
:border-radius 4
89-
:top 6
90-
:left 51
91-
:position :absolute
92-
:background-color colors/primary-50}}]))]]))
87+
[rn/view {:style (styles/notification-dot customization-color)}]))]]))
9388

9489
(defn bottom-nav-tab
9590
[opts]

Diff for: ‎src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
(ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab
2-
(:require [quo2.components.navigation.bottom-nav-tab :as quo2]
2+
(:require [clojure.string :as string]
3+
[quo2.components.navigation.bottom-nav-tab.view :as quo2]
34
[quo2.foundations.colors :as colors]
45
[react-native.core :as rn]
56
[react-native.reanimated :as reanimated]
@@ -36,7 +37,15 @@
3637
:value :unread-dot}]}
3738
{:label "Counter Label"
3839
:key :counter-label
39-
:type :text}])
40+
:type :text}
41+
42+
{:label "Customization color"
43+
:key :customization-color
44+
:type :select
45+
:options (map (fn [[k _]]
46+
{:key k
47+
:value (string/capitalize (name k))})
48+
colors/customization)}])
4049

4150
(defn get-icon-color
4251
[selected? pass-through?]
@@ -61,7 +70,8 @@
6170
:new-notifications? true
6271
:notification-indicator :counter
6372
:counter-label 8
64-
:preview-label-color colors/white})
73+
:preview-label-color colors/white
74+
:customization-color :turquoise})
6575
selected? (reagent/cursor state [:selected?])
6676
pass-through? (reagent/cursor state [:pass-through?])]
6777
(fn []

Diff for: ‎src/status_im2/contexts/shell/components/bottom_tabs/view.cljs

+16-10
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
[status-im2.contexts.shell.state :as state]
99
[status-im2.contexts.shell.animation :as animation]
1010
[status-im2.contexts.shell.constants :as shell.constants]
11-
[quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]
11+
[quo2.components.navigation.bottom-nav-tab.view :as bottom-nav-tab]
1212
[status-im2.contexts.shell.components.bottom-tabs.style :as style]))
1313

1414
(defn blur-overlay-params
@@ -21,15 +21,21 @@
2121

2222
(defn bottom-tab
2323
[icon stack-id shared-values notifications-data]
24-
[bottom-nav-tab/bottom-nav-tab
25-
(assoc (get notifications-data stack-id)
26-
:test-ID stack-id
27-
:icon icon
28-
:icon-color-anim (get
29-
shared-values
30-
(get shell.constants/tabs-icon-color-keywords stack-id))
31-
:on-press #(animation/bottom-tab-on-press stack-id true)
32-
:accessibility-label (str (name stack-id) "-tab"))])
24+
(let [{:keys [key-uid]} (rf/sub [:multiaccount])
25+
customization-color (or (:color (rf/sub [:onboarding-2/profile]))
26+
(rf/sub [:profile/customization-color key-uid]))
27+
icon-color (->> stack-id
28+
(get shell.constants/tabs-icon-color-keywords)
29+
(get shared-values))]
30+
[bottom-nav-tab/bottom-nav-tab
31+
(-> notifications-data
32+
(get stack-id)
33+
(assoc :test-ID stack-id
34+
:icon icon
35+
:icon-color-anim icon-color
36+
:on-press #(animation/bottom-tab-on-press stack-id true)
37+
:accessibility-label (str (name stack-id) "-tab")
38+
:customization-color customization-color))]))
3339

3440
(defn f-bottom-tabs
3541
[]

0 commit comments

Comments
 (0)