From 2b465cb98047ed1e8f45b63650a521ae231be37b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Mon, 19 Jun 2023 07:20:37 -0600 Subject: [PATCH] [#16118] bottom nav tab notification color (#16236) --- .../navigation/bottom_nav_tab/styles.cljs | 17 ++++++++++++ .../view.cljs} | 25 +++++++----------- .../navigation/bottom_nav_tab.cljs | 16 +++++++++--- .../shell/components/bottom_tabs/view.cljs | 26 ++++++++++++------- 4 files changed, 56 insertions(+), 28 deletions(-) create mode 100644 src/quo2/components/navigation/bottom_nav_tab/styles.cljs rename src/quo2/components/navigation/{bottom_nav_tab.cljs => bottom_nav_tab/view.cljs} (86%) diff --git a/src/quo2/components/navigation/bottom_nav_tab/styles.cljs b/src/quo2/components/navigation/bottom_nav_tab/styles.cljs new file mode 100644 index 0000000000..d3c47a15aa --- /dev/null +++ b/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}) diff --git a/src/quo2/components/navigation/bottom_nav_tab.cljs b/src/quo2/components/navigation/bottom_nav_tab/view.cljs similarity index 86% rename from src/quo2/components/navigation/bottom_nav_tab.cljs rename to src/quo2/components/navigation/bottom_nav_tab/view.cljs index a5b3894117..f2fa0ff81a 100644 --- a/src/quo2/components/navigation/bottom_nav_tab.cljs +++ b/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 - :style {:position :absolute - :left 48 - :top 2}} + :override-bg-color (colors/custom-color customization-color 60) + :style styles/notification-counter} counter-label] - [rn/view - {:style {:width 8 - :height 8 - :border-radius 4 - :top 6 - :left 51 - :position :absolute - :background-color colors/primary-50}}]))]])) + [rn/view {:style (styles/notification-dot customization-color)}]))]])) (defn bottom-nav-tab [opts] diff --git a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs b/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs index 36d115b6bc..303cb4cbc1 100644 --- a/src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs +++ b/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 [] diff --git a/src/status_im2/contexts/shell/components/bottom_tabs/view.cljs b/src/status_im2/contexts/shell/components/bottom_tabs/view.cljs index 23472b4fbe..604d945bf4 100644 --- a/src/status_im2/contexts/shell/components/bottom_tabs/view.cljs +++ b/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 - (assoc (get notifications-data stack-id) - :test-ID stack-id - :icon icon - :icon-color-anim (get - shared-values - (get shell.constants/tabs-icon-color-keywords stack-id)) - :on-press #(animation/bottom-tab-on-press stack-id true) - :accessibility-label (str (name stack-id) "-tab"))]) + (let [{:keys [key-uid]} (rf/sub [:multiaccount]) + customization-color (or (:color (rf/sub [:onboarding-2/profile])) + (rf/sub [:profile/customization-color key-uid])) + icon-color (->> stack-id + (get shell.constants/tabs-icon-color-keywords) + (get shared-values))] + [bottom-nav-tab/bottom-nav-tab + (-> notifications-data + (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 []