From 98085cd9c9c5ddba5c20a0fd719494af359e1c90 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Thu, 3 Aug 2023 13:57:39 +0200 Subject: [PATCH] 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 | 4 +- .../components/community/channel_actions.cljs | 4 +- .../community/community_list_view.cljs | 50 +++++++++----- src/quo2/components/counter/counter.cljs | 67 ------------------- .../counter/{ => counter}/component_spec.cljs | 14 ++-- .../components/counter/counter/style.cljs | 32 +++++++++ src/quo2/components/counter/counter/view.cljs | 37 ++++++++++ src/quo2/components/list_items/channel.cljs | 4 +- .../components/list_items/community/view.cljs | 8 +-- .../navigation/bottom_nav_tab/view.cljs | 9 ++- .../components/notifications/info_count.cljs | 31 --------- src/quo2/core.cljs | 6 +- src/quo2/core_spec.cljs | 2 +- src/status_im2/common/home/view.cljs | 18 ++--- .../chat/home/chat_list_item/style.cljs | 10 --- .../chat/home/chat_list_item/view.cljs | 8 +-- .../chat/home/contact_request/view.cljs | 48 +++++++------ .../contexts/chat/photo_selector/style.cljs | 8 +-- .../contexts/chat/photo_selector/view.cljs | 9 +-- .../contexts/communities/home/view.cljs | 22 +++--- .../contexts/communities/overview/view.cljs | 3 +- .../contexts/quo_preview/counter/counter.cljs | 15 +++-- .../components/switcher_cards/view.cljs | 14 ++-- 23 files changed, 204 insertions(+), 219 deletions(-) delete mode 100644 src/quo2/components/counter/counter.cljs rename src/quo2/components/counter/{ => counter}/component_spec.cljs (68%) create mode 100644 src/quo2/components/counter/counter/style.cljs create mode 100644 src/quo2/components/counter/counter/view.cljs delete mode 100644 src/quo2/components/notifications/info_count.cljs diff --git a/src/quo2/components/banners/banner/view.cljs b/src/quo2/components/banners/banner/view.cljs index 103206648e..d4bcef7efc 100644 --- a/src/quo2/components/banners/banner/view.cljs +++ b/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]]])) diff --git a/src/quo2/components/community/channel_actions.cljs b/src/quo2/components/community/channel_actions.cljs index 03aa48315a..4e4c4a8039 100644 --- a/src/quo2/components/community/channel_actions.cljs +++ b/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 diff --git a/src/quo2/components/community/community_list_view.cljs b/src/quo2/components/community/community_list_view.cljs index 551d03c877..097d8ca1ed 100644 --- a/src/quo2/components/community/community_list_view.cljs +++ b/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 - [props +(defn- communities-list-view-item-internal + [{: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 - [props +(def communities-list-view-item (quo.theme/with-theme communities-list-view-item-internal)) + +(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?) - colors/neutral-60 - colors/neutral-40)})} + {:color (colors/theme-colors + 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)) diff --git a/src/quo2/components/counter/counter.cljs b/src/quo2/components/counter/counter.cljs deleted file mode 100644 index 17e4c6646f..0000000000 --- a/src/quo2/components/counter/counter.cljs +++ /dev/null @@ -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]])) diff --git a/src/quo2/components/counter/component_spec.cljs b/src/quo2/components/counter/counter/component_spec.cljs similarity index 68% rename from src/quo2/components/counter/component_spec.cljs rename to src/quo2/components/counter/counter/component_spec.cljs index 7f8782fb91..b8bc809cdc 100644 --- a/src/quo2/components/counter/component_spec.cljs +++ b/src/quo2/components/counter/counter/component_spec.cljs @@ -1,29 +1,29 @@ -(ns quo2.components.counter.component-spec - (:require [quo2.components.counter.counter :as counter] +(ns quo2.components.counter.counter.component-spec + (: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)))) diff --git a/src/quo2/components/counter/counter/style.cljs b/src/quo2/components/counter/counter/style.cljs new file mode 100644 index 0000000000..4751d1868f --- /dev/null +++ b/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)))) diff --git a/src/quo2/components/counter/counter/view.cljs b/src/quo2/components/counter/counter/view.cljs new file mode 100644 index 0000000000..007bb248f0 --- /dev/null +++ b/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)) diff --git a/src/quo2/components/list_items/channel.cljs b/src/quo2/components/list_items/channel.cljs index 7bdd57f118..63df2c2487 100644 --- a/src/quo2/components/list_items/channel.cljs +++ b/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? diff --git a/src/quo2/components/list_items/community/view.cljs b/src/quo2/components/list_items/community/view.cljs index 18c2aa1ca7..2cd2f1e94d 100644 --- a/src/quo2/components/list_items/community/view.cljs +++ b/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 - {:type :default - :override-bg-color customization-color} + [counter/view + {:type :default + :customization-color customization-color} unread-count] (and (= type :engage) (= info :notification)) diff --git a/src/quo2/components/navigation/bottom_nav_tab/view.cljs b/src/quo2/components/navigation/bottom_nav_tab/view.cljs index f2fa0ff81a..1e96eae912 100644 --- a/src/quo2/components/navigation/bottom_nav_tab/view.cljs +++ b/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 - {:override-text-color colors/white - :override-bg-color (colors/custom-color customization-color 60) - :style styles/notification-counter} + [counter/view + {:customization-color customization-color + :container-style styles/notification-counter} counter-label] [rn/view {:style (styles/notification-dot customization-color)}]))]])) diff --git a/src/quo2/components/notifications/info_count.cljs b/src/quo2/components/notifications/info_count.cljs deleted file mode 100644 index 8087ebdb75..0000000000 --- a/src/quo2/components/notifications/info_count.cljs +++ /dev/null @@ -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]]))) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index c86a3a0eaa..7fad161c81 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index c86dc735e7..e7fe275c30 100644 --- a/src/quo2/core_spec.cljs +++ b/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] diff --git a/src/status_im2/common/home/view.cljs b/src/status_im2/common/home/view.cljs index 118e6eedad..4e7b7426f8 100644 --- a/src/status_im2/common/home/view.cljs +++ b/src/status_im2/common/home/view.cljs @@ -35,17 +35,19 @@ (defn- unread-indicator [] - (let [unread-count (rf/sub [:activity-center/unread-count]) - indicator (rf/sub [:activity-center/unread-indicator]) - unread-type (case indicator - :unread-indicator/seen :grey - :unread-indicator/new :default - nil)] + (let [unread-count (rf/sub [:activity-center/unread-count]) + indicator (rf/sub [:activity-center/unread-indicator]) + unread-type (case indicator + :unread-indicator/seen :grey + :unread-indicator/new :default + 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]))) diff --git a/src/status_im2/contexts/chat/home/chat_list_item/style.cljs b/src/status_im2/contexts/chat/home/chat_list_item/style.cljs index b027cccaa9..3985cab9aa 100644 --- a/src/status_im2/contexts/chat/home/chat_list_item/style.cljs +++ b/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? diff --git a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs index b1c3b57976..62993b0836 100644 --- a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs +++ b/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 - {:style {:position :relative :right 0} + [quo/counter + {: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 - {:style {:position :relative :right 0} + [quo/counter + {:container-style {:position :relative :right 0} :customization-color customization-color :accessibility-label :new-message-counter} unviewed-messages-count])])) diff --git a/src/status_im2/contexts/chat/home/contact_request/view.cljs b/src/status_im2/contexts/chat/home/contact_request/view.cljs index 457c3af6c7..5552a8ed3a 100644 --- a/src/status_im2/contexts/chat/home/contact_request/view.cljs +++ b/src/status_im2/contexts/chat/home/contact_request/view.cljs @@ -34,25 +34,29 @@ (defn contact-requests [requests] - [rn/touchable-opacity - {:active-opacity 1 - :accessibility-label :open-activity-center-contact-requests - :on-press (fn [] - (rf/dispatch [:activity-center/open - {:filter-status :unread - :filter-type notification-types/contact-request}])) - :style style/contact-requests} - [rn/view {:style (style/contact-requests-icon)} - [quo/icon :i/pending-user {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]] - [rn/view {:style {:margin-left 8}} - [quo/text - {:size :paragraph-1 - :weight :semi-bold - :style {:color (colors/theme-colors colors/neutral-100 colors/white)}} - (i18n/label :t/pending-requests)] - [quo/text - {:size :paragraph-2 - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} - (requests-summary requests)]] - [quo/info-count {:accessibility-label :pending-contact-requests-count} - (count requests)]]) + (let [customization-color (rf/sub [:profile/customization-color])] + [rn/touchable-opacity + {:active-opacity 1 + :accessibility-label :open-activity-center-contact-requests + :on-press (fn [] + (rf/dispatch [:activity-center/open + {:filter-status :unread + :filter-type notification-types/contact-request}])) + :style style/contact-requests} + [rn/view {:style (style/contact-requests-icon)} + [quo/icon :i/pending-user {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]] + [rn/view {:style {:margin-left 8 :flex 1}} + [quo/text + {:size :paragraph-1 + :weight :semi-bold + :style {:color (colors/theme-colors colors/neutral-100 colors/white)}} + (i18n/label :t/pending-requests)] + [quo/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} + (requests-summary requests)]] + [quo/counter + {:container-style {:margin-right 2} + :customization-color customization-color + :accessibility-label :pending-contact-requests-count} + (count requests)]])) diff --git a/src/status_im2/contexts/chat/photo_selector/style.cljs b/src/status_im2/contexts/chat/photo_selector/style.cljs index eb334ec1a5..38dfa949f3 100644 --- a/src/status_im2/contexts/chat/photo_selector/style.cljs +++ b/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 - :height 24 - :border-radius 8 - :top 8 - :right 8}) + {:position :absolute + :top 8 + :right 8}) diff --git a/src/status_im2/contexts/chat/photo_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/view.cljs index 2bc8e3ffbc..9f079d9c1c 100644 --- a/src/status_im2/contexts/chat/photo_selector/view.cljs +++ b/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 - {:style style/image-count + [quo/counter + {:container-style style/image-count + :customization-color customization-color :accessibility-label (str "count-" index)} (inc (utils.collection/first-index #(= (:uri item) (:uri %)) @selected))]])])) diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index d3e984e54c..6d34db097b 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/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]) - item (merge item unviewed-counts)] + (let [unviewed-counts (rf/sub [:communities/unviewed-counts id]) + customization-color (rf/sub [:profile/customization-color]) + item (merge item unviewed-counts)] [quo/communities-membership-list-item - {:style {:padding-horizontal 18} - :on-press #(debounce/dispatch-and-chill [:navigate-to :community-overview id] 500) - :on-long-press #(rf/dispatch - [:show-bottom-sheet - {:content (fn [] - [options/community-options-bottom-sheet id]) - :selected-item (fn [] - [quo/communities-membership-list-item {} true item])}])} + {:customization-color customization-color + :style {:padding-horizontal 18} + :on-press #(debounce/dispatch-and-chill [:navigate-to :community-overview id] 500) + :on-long-press #(rf/dispatch + [:show-bottom-sheet + {:content (fn [] + [options/community-options-bottom-sheet id]) + :selected-item (fn [] + [quo/communities-membership-list-item {} true item])}])} false item])) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 2f5e5639ab..6d992a6bea 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/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)}} diff --git a/src/status_im2/contexts/quo_preview/counter/counter.cljs b/src/status_im2/contexts/quo_preview/counter/counter.cljs index 82ffe65df1..7a344244c6 100644 --- a/src/status_im2/contexts/quo_preview/counter/counter.cljs +++ b/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 [] diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs index 383283fde6..9bf27f1125 100644 --- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs +++ b/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 - :override-bg-color color-60} + :customization-color customization-color} 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) - color-60 (colors/custom-color customization-color 60)] + (let [color-50 (colors/custom-color customization-color 50)] [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 - :color-60 color-60} + (merge {:color-50 color-50 + :customization-color customization-color} content)]] (when avatar-params [rn/view {:style style/avatar-container}