diff --git a/src/quo2/components/common/notification_dot/style.cljs b/src/quo2/components/common/notification_dot/style.cljs new file mode 100644 index 0000000000..ab7827e0a8 --- /dev/null +++ b/src/quo2/components/common/notification_dot/style.cljs @@ -0,0 +1,22 @@ +(ns quo2.components.common.notification-dot.style + (:require [quo2.foundations.colors :as colors])) + +(def ^:const size 8) + +(defn dot-background-color + [customization-color theme] + (if customization-color + (colors/theme-colors + (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme) + (colors/theme-colors colors/primary-50 colors/primary-60 theme))) + +(defn notification-dot + [customization-color theme] + {:background-color (dot-background-color customization-color theme) + :width size + :height size + :border-radius (/ size 2) + :position :absolute + :z-index 1}) diff --git a/src/quo2/components/common/notification_dot/view.cljs b/src/quo2/components/common/notification_dot/view.cljs new file mode 100644 index 0000000000..ee5790e5fa --- /dev/null +++ b/src/quo2/components/common/notification_dot/view.cljs @@ -0,0 +1,14 @@ +(ns quo2.components.common.notification-dot.view + (:require [react-native.core :as rn] + [quo2.components.common.notification-dot.style :as style] + [quo2.theme :as quo.theme])) + +(defn view-internal + [{:keys [customization-color style theme]}] + [rn/view + {:accessibility-label :notification-dot + :style (merge + (style/notification-dot customization-color theme) + style)}]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/community/community_list_view.cljs b/src/quo2/components/community/community_list_view.cljs index cf591d76fd..5218264a92 100644 --- a/src/quo2/components/community/community_list_view.cljs +++ b/src/quo2/components/community/community_list_view.cljs @@ -30,7 +30,8 @@ (pos? unread-mentions-count) [counter/view {:customization-color customization-color - :type :default} unread-mentions-count] + :type :default} + unread-mentions-count] unread-messages? [unread-grey-dot :unviewed-messages-public])) diff --git a/src/quo2/components/notifications/activity_log/style.cljs b/src/quo2/components/notifications/activity_log/style.cljs index e75cb35935..a987f7f089 100644 --- a/src/quo2/components/notifications/activity_log/style.cljs +++ b/src/quo2/components/notifications/activity_log/style.cljs @@ -46,8 +46,9 @@ :margin-left 8 :color colors/neutral-40}) -(def unread-dot - {:background-color colors/primary-50 +(defn unread-dot + [customization-color] + {:background-color (colors/custom-color (or customization-color :blue) 60) :border-radius 4 :width 8 :height 8}) diff --git a/src/quo2/components/notifications/activity_log/view.cljs b/src/quo2/components/notifications/activity_log/view.cljs index b26f694667..d5f32dbd74 100644 --- a/src/quo2/components/notifications/activity_log/view.cljs +++ b/src/quo2/components/notifications/activity_log/view.cljs @@ -110,11 +110,11 @@ timestamp]) (defn- activity-unread-dot - [] + [customization-color] [rn/view {:accessibility-label :activity-unread-indicator :style style/unread-dot-container} - [rn/view {:style style/unread-dot}]]) + [rn/view {:style (style/unread-dot customization-color)}]]) (defmulti footer-item-view (fn [item _ _] (:type item))) @@ -161,7 +161,8 @@ timestamp title replying? - unread?] + unread? + customization-color] :as props}] [rn/view {:accessibility-label :activity @@ -179,7 +180,7 @@ (when-not replying? [activity-timestamp timestamp])] (when (and unread? (not replying?)) - [activity-unread-dot])] + [activity-unread-dot customization-color])] (when context [activity-context context replying?])] (when message diff --git a/src/quo2/components/notifications/notification_dot.cljs b/src/quo2/components/notifications/notification_dot.cljs deleted file mode 100644 index 632d567d93..0000000000 --- a/src/quo2/components/notifications/notification_dot.cljs +++ /dev/null @@ -1,18 +0,0 @@ -(ns quo2.components.notifications.notification-dot - (:require [quo2.foundations.colors :as colors] - [react-native.core :as rn])) - -(def ^:const size 8) - -(defn notification-dot - [{:keys [style]}] - [rn/view - {:accessibility-label :notification-dot - :style (merge - {:background-color (colors/theme-colors colors/primary-50 colors/primary-60) - :width size - :height size - :border-radius (/ size 2) - :position :absolute - :z-index 1} - style)}]) diff --git a/src/quo2/components/selectors/filter/style.cljs b/src/quo2/components/selectors/filter/style.cljs index 117cbeec33..11c7455348 100644 --- a/src/quo2/components/selectors/filter/style.cljs +++ b/src/quo2/components/selectors/filter/style.cljs @@ -35,14 +35,16 @@ nil))) (defn container-background-color - [pressed? theme] + [customization-color pressed? theme] (when pressed? - (colors/theme-colors colors/primary-50 colors/primary-60 theme))) + (if customization-color + (colors/custom-color-by-theme customization-color 50 60) + (colors/theme-colors colors/primary-50 colors/primary-60 theme)))) (defn container-outer - [pressed? theme] + [customization-color pressed? theme] (merge container-default - {:background-color (container-background-color pressed? theme)})) + {:background-color (container-background-color customization-color pressed? theme)})) (defn container-inner [pressed? blur? theme] diff --git a/src/quo2/components/selectors/filter/view.cljs b/src/quo2/components/selectors/filter/view.cljs index e8193cb5bb..0531348099 100644 --- a/src/quo2/components/selectors/filter/view.cljs +++ b/src/quo2/components/selectors/filter/view.cljs @@ -8,14 +8,14 @@ (defn view-internal [initial-props] (let [pressed? (reagent/atom (:pressed? initial-props))] - (fn [{:keys [blur? theme on-press-out]}] + (fn [{:keys [blur? customization-color theme on-press-out]}] [rn/touchable-without-feedback {:accessibility-label :selector-filter :on-press-out (fn [] (swap! pressed? not) (when on-press-out (on-press-out @pressed?)))} - [rn/view {:style (style/container-outer @pressed? theme)} + [rn/view {:style (style/container-outer customization-color @pressed? theme)} [rn/view {:style (style/container-inner @pressed? blur? theme)} [icon/icon :i/unread {:color (style/icon-color @pressed? theme) diff --git a/src/quo2/components/tabs/tab/view.cljs b/src/quo2/components/tabs/tab/view.cljs index 298e3b60de..353fe2c533 100644 --- a/src/quo2/components/tabs/tab/view.cljs +++ b/src/quo2/components/tabs/tab/view.cljs @@ -1,7 +1,7 @@ (ns quo2.components.tabs.tab.view (:require [quo2.components.icon :as icons] [quo2.components.markdown.text :as text] - [quo2.components.notifications.notification-dot :as notification-dot] + [quo2.components.common.notification-dot.view :as notification-dot] [quo2.components.tabs.tab.style :as style] [quo2.theme :as theme] [react-native.core :as rn] @@ -60,7 +60,8 @@ theme segmented? size - notification-dot?] + notification-dot? + customization-color] :or {size 32}} children] (let [show-notification-dot? (and notification-dot? (= size 32)) @@ -78,8 +79,9 @@ (on-press id))})) [rn/view {:style style/container} (when show-notification-dot? - [notification-dot/notification-dot - {:style style/notification-dot}]) + [notification-dot/view + {:style style/notification-dot + :customization-color customization-color}]) [rn/view {:style (merge (style/tab diff --git a/src/quo2/components/tabs/tabs/view.cljs b/src/quo2/components/tabs/tabs/view.cljs index f5e84d37fc..a525870866 100644 --- a/src/quo2/components/tabs/tabs/view.cljs +++ b/src/quo2/components/tabs/tabs/view.cljs @@ -62,6 +62,7 @@ (defn- render-tab [{:keys [active-tab-id blur? + customization-color flat-list-ref number-of-items on-change @@ -79,6 +80,7 @@ [tab/view {:id id :notification-dot? notification-dot? + :customization-color customization-color :accessibility-label accessibility-label :size size :blur? blur? @@ -131,7 +133,8 @@ style size blur? - in-scroll-view?] + in-scroll-view? + customization-color] :or {fade-end-percentage fade-end-percentage fade-end? false scrollable? false @@ -176,24 +179,26 @@ :fading fading :on-scroll on-scroll}) :render-fn (partial render-tab - {:active-tab-id active-tab-id - :blur? blur? - :flat-list-ref flat-list-ref - :number-of-items (count data) - :on-change on-change - :scroll-on-press? scroll-on-press? - :size size - :style style})})]]] + {:active-tab-id active-tab-id + :blur? blur? + :customization-color customization-color + :flat-list-ref flat-list-ref + :number-of-items (count data) + :on-change on-change + :scroll-on-press? scroll-on-press? + :size size + :style style})})]]] [rn/view (merge style {:flex-direction :row}) (map-indexed (fn [index item] ^{:key (:id item)} [render-tab - {:active-tab-id active-tab-id - :blur? blur? - :number-of-items (count data) - :on-change on-change - :size size - :style style} + {:active-tab-id active-tab-id + :blur? blur? + :customization-color customization-color + :number-of-items (count data) + :on-change on-change + :size size + :style style} item index]) data)])))) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 7cd375b84b..efabfa8e3f 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -19,6 +19,7 @@ quo2.components.calendar.calendar-year.view quo2.components.code.snippet quo2.components.colors.color-picker.view + quo2.components.common.notification-dot.view quo2.components.common.separator.view quo2.components.community.banner.view quo2.components.community.channel-actions @@ -74,7 +75,6 @@ quo2.components.notifications.activity-log.view quo2.components.notifications.activity-logs-photos.view quo2.components.notifications.count-down-circle - quo2.components.notifications.notification-dot quo2.components.notifications.notification.view quo2.components.notifications.toast.view quo2.components.numbered-keyboard.keyboard-key.view @@ -252,7 +252,7 @@ ;;;; Notifications (def activity-log quo2.components.notifications.activity-log.view/view) (def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view) -(def notification-dot quo2.components.notifications.notification-dot/notification-dot) +(def notification-dot quo2.components.common.notification-dot.view/view) (def count-down-circle quo2.components.notifications.count-down-circle/circle-timer) (def notification quo2.components.notifications.notification.view/notification) (def toast quo2.components.notifications.toast.view/toast) diff --git a/src/status_im2/common/home/banner/view.cljs b/src/status_im2/common/home/banner/view.cljs index 0427fdd5b8..ed1cbb0b43 100644 --- a/src/status_im2/common/home/banner/view.cljs +++ b/src/status_im2/common/home/banner/view.cljs @@ -46,23 +46,24 @@ [quo/discover-card card-props]]]])) (defn- banner-card-tabs-layer - [{:keys [selected-tab tabs on-tab-change scroll-ref scroll-shared-value]}] + [{:keys [selected-tab tabs on-tab-change scroll-ref scroll-shared-value customization-color]}] [reanimated/view {:style (style/banner-card-tabs-layer scroll-shared-value)} ^{:key (str "tabs-" selected-tab)} [quo/tabs - {:style style/banner-card-tabs - :size 32 - :default-active selected-tab - :data tabs - :on-change (fn [tab] - (reset-banner-animation scroll-shared-value) - (some-> scroll-ref - deref - reset-scroll) - (on-tab-change tab))}]]) + {:style style/banner-card-tabs + :customization-color customization-color + :size 32 + :default-active selected-tab + :data tabs + :on-change (fn [tab] + (reset-banner-animation scroll-shared-value) + (some-> scroll-ref + deref + reset-scroll) + (on-tab-change tab))}]]) (defn animated-banner - [{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content]}] + [{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}] [:<> [:f> banner-card-blur-layer scroll-shared-value] [:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)] @@ -71,7 +72,8 @@ :selected-tab selected-tab :tabs tabs :on-tab-change on-tab-change - :scroll-ref scroll-ref}]]) + :scroll-ref scroll-ref + :customization-color customization-color}]]) (defn set-scroll-shared-value [{:keys [shared-value scroll-input]}] diff --git a/src/status_im2/contexts/chat/home/view.cljs b/src/status_im2/contexts/chat/home/view.cljs index a518ab8eba..78cc1e8223 100644 --- a/src/status_im2/contexts/chat/home/view.cljs +++ b/src/status_im2/contexts/chat/home/view.cljs @@ -106,15 +106,6 @@ {:scroll-input (oops/oget % "nativeEvent.contentOffset.y") :shared-value scroll-shared-value})}]))) -(defn get-tabs-data - [dot?] - [{:id :tab/recent :label (i18n/label :t/recent) :accessibility-label :tab-recent} - {:id :tab/groups :label (i18n/label :t/groups) :accessibility-label :tab-groups} - {:id :tab/contacts - :label (i18n/label :t/contacts) - :accessibility-label :tab-contacts - :notification-dot? dot?}]) - (def ^:private banner-data {:title-props {:label (i18n/label :t/messages) @@ -131,7 +122,8 @@ (let [scroll-ref (atom nil) set-scroll-ref #(reset! scroll-ref %)] (fn [] - (let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests]) + (let [customization-color (rf/sub [:profile/customization-color]) + pending-contact-requests (rf/sub [:activity-center/pending-contact-requests]) selected-tab (or (rf/sub [:messages-home/selected-tab]) :tab/recent) scroll-shared-value (reanimated/use-shared-value 0)] [:<> @@ -146,8 +138,18 @@ :scroll-shared-value scroll-shared-value}]) [:f> common.home.banner/animated-banner {:content banner-data + :customization-color customization-color :scroll-ref scroll-ref - :tabs (get-tabs-data (pos? (count pending-contact-requests))) + :tabs [{:id :tab/recent + :label (i18n/label :t/recent) + :accessibility-label :tab-recent} + {:id :tab/groups + :label (i18n/label :t/groups) + :accessibility-label :tab-groups} + {:id :tab/contacts + :label (i18n/label :t/contacts) + :accessibility-label :tab-contacts + :notification-dot? (pos? (count pending-contact-requests))}] :selected-tab selected-tab :on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab])) :scroll-shared-value scroll-shared-value}]])))) diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index a2a1c55a28..fa1ff5f7c0 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/src/status_im2/contexts/communities/home/view.cljs @@ -75,7 +75,8 @@ (let [flat-list-ref (atom nil) set-flat-list-ref #(reset! flat-list-ref %)] (fn [] - (let [selected-tab (or (rf/sub [:communities/selected-tab]) :joined) + (let [customization-color (rf/sub [:profile/customization-color]) + selected-tab (or (rf/sub [:communities/selected-tab]) :joined) {:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status]) selected-items (case selected-tab :joined joined @@ -102,6 +103,7 @@ :shared-value scroll-shared-value})}]) [:f> common.home.banner/animated-banner {:content banner-data + :customization-color customization-color :scroll-ref flat-list-ref :tabs tabs-data :selected-tab selected-tab diff --git a/src/status_im2/contexts/shell/activity_center/header/view.cljs b/src/status_im2/contexts/shell/activity_center/header/view.cljs index af6c58b65a..d5d143713c 100644 --- a/src/status_im2/contexts/shell/activity_center/header/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/header/view.cljs @@ -9,14 +9,16 @@ (defn filter-selector-read-toggle [] - (let [unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])] + (let [customization-color (rf/sub [:profile/customization-color]) + unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])] [quo/filter - {:pressed? unread-filter-enabled? - :blur? true - :on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page - {:filter-status (if unread-filter-enabled? - :all - :unread)}])}])) + {:pressed? unread-filter-enabled? + :customization-color customization-color + :blur? true + :on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page + {:filter-status (if unread-filter-enabled? + :all + :unread)}])}])) (defn header [] diff --git a/src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs index 1b6ee5d3cc..52a781c505 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs @@ -52,7 +52,7 @@ child))) (defn view - [{:keys [notification set-swipeable-height] :as props}] + [{:keys [notification set-swipeable-height customization-color] :as props}] (let [{:keys [author community-id id membership-status read timestamp]} notification community (rf/sub [:communities/community community-id]) @@ -60,48 +60,50 @@ community-image (get-in community [:images :thumbnail :uri])] [swipeable props [quo/activity-log - {:title (i18n/label :t/join-request) - :icon :i/add-user - :timestamp (datetime/timestamp->relative timestamp) - :unread? (not read) - :on-layout set-swipeable-height - :context [[common/user-avatar-tag author] - (i18n/label :t/wants-to-join) - [quo/context-tag - common/tag-params - community-image community-name]] - :items (case membership-status - constants/activity-center-membership-status-accepted - [{:type :status - :subtype :positive - :key :status-accepted - :blur? true - :label (i18n/label :t/accepted)}] + {:title (i18n/label :t/join-request) + :customization-color customization-color + :icon :i/add-user + :timestamp (datetime/timestamp->relative timestamp) + :unread? (not read) + :on-layout set-swipeable-height + :context [[common/user-avatar-tag author] + (i18n/label :t/wants-to-join) + [quo/context-tag + common/tag-params + community-image community-name]] + :items (case membership-status + constants/activity-center-membership-status-accepted + [{:type :status + :subtype :positive + :key :status-accepted + :blur? true + :label (i18n/label :t/accepted)}] - constants/activity-center-membership-status-declined - [{:type :status - :subtype :negative - :key :status-declined - :blur? true - :label (i18n/label :t/declined)}] + constants/activity-center-membership-status-declined + [{:type :status + :subtype :negative + :key :status-declined + :blur? true + :label (i18n/label :t/declined)}] - constants/activity-center-membership-status-pending - [{:type :button - :subtype :danger - :key :button-decline - :label (i18n/label :t/decline) - :accessibility-label :decline-join-request - :on-press (fn [] - (rf/dispatch - [:communities.ui/decline-request-to-join-pressed - community-id id]))} - {:type :button - :subtype :positive - :key :button-accept - :label (i18n/label :t/accept) - :accessibility-label :accept-join-request - :on-press (fn [] - (rf/dispatch [:communities.ui/accept-request-to-join-pressed - community-id id]))}] + constants/activity-center-membership-status-pending + [{:type :button + :subtype :danger + :key :button-decline + :label (i18n/label :t/decline) + :accessibility-label :decline-join-request + :on-press (fn [] + (rf/dispatch + [:communities.ui/decline-request-to-join-pressed + community-id id]))} + {:type :button + :subtype :positive + :key :button-accept + :label (i18n/label :t/accept) + :accessibility-label :accept-join-request + :on-press (fn [] + (rf/dispatch + [:communities.ui/accept-request-to-join-pressed + community-id id]))}] - nil)}]])) + nil)}]])) diff --git a/src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs index 2b465c7e55..9532ae0abd 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs @@ -18,7 +18,7 @@ child]) (defn view - [{:keys [notification set-swipeable-height] :as props}] + [{:keys [notification set-swipeable-height customization-color] :as props}] (let [{:keys [community-id read timestamp]} notification community (rf/sub [:communities/community community-id]) @@ -26,12 +26,13 @@ community-image (get-in community [:images :thumbnail :uri])] [swipeable props [quo/activity-log - {:title (i18n/label :t/community-kicked-heading) - :icon :i/placeholder - :on-layout set-swipeable-height - :timestamp (datetime/timestamp->relative timestamp) - :unread? (not read) - :context [[quo/text {:style common-style/user-avatar-tag-text} - (i18n/label :t/community-kicked-body)] - [quo/context-tag common/tag-params community-image - community-name]]}]])) + {:title (i18n/label :t/community-kicked-heading) + :customization-color customization-color + :icon :i/placeholder + :on-layout set-swipeable-height + :timestamp (datetime/timestamp->relative timestamp) + :unread? (not read) + :context [[quo/text {:style common-style/user-avatar-tag-text} + (i18n/label :t/community-kicked-body)] + [quo/context-tag common/tag-params community-image + community-name]]}]])) diff --git a/src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs index 1494b4d87c..d262de9680 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs @@ -48,7 +48,7 @@ :else nil))) (defn view - [{:keys [notification set-swipeable-height] :as props}] + [{:keys [notification set-swipeable-height customization-color] :as props}] (let [{:keys [community-id membership-status read timestamp]} notification community (rf/sub [:communities/community community-id]) @@ -56,9 +56,10 @@ membership-status)] [swipeable props [quo/activity-log - {:title header-text - :icon :i/communities - :on-layout set-swipeable-height - :timestamp (datetime/timestamp->relative timestamp) - :unread? (not read) - :context context}]])) + {:title header-text + :customization-color customization-color + :icon :i/communities + :on-layout set-swipeable-height + :timestamp (datetime/timestamp->relative timestamp) + :unread? (not read) + :context context}]])) diff --git a/src/status_im2/contexts/shell/activity_center/notification/contact_requests/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/contact_requests/view.cljs index e5c95389a3..ed10215c01 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/contact_requests/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/contact_requests/view.cljs @@ -58,52 +58,55 @@ child))) (defn- outgoing-contact-request-view - [{:keys [notification set-swipeable-height]}] + [{:keys [notification set-swipeable-height customization-color]}] (let [{:keys [chat-id message last-message]} notification {:keys [contact-request-state] :as message} (or message last-message)] (if (= contact-request-state constants/contact-request-message-state-accepted) [quo/activity-log - {:title (i18n/label :t/contact-request-was-accepted) - :on-layout set-swipeable-height - :icon :i/add-user - :timestamp (datetime/timestamp->relative (:timestamp notification)) - :unread? (not (:read notification)) - :context [[common/user-avatar-tag chat-id] - (i18n/label :t/contact-request-is-now-a-contact)]} + {:title (i18n/label :t/contact-request-was-accepted) + :customization-color customization-color + :on-layout set-swipeable-height + :icon :i/add-user + :timestamp (datetime/timestamp->relative (:timestamp notification)) + :unread? (not (:read notification)) + :context [[common/user-avatar-tag chat-id] + (i18n/label :t/contact-request-is-now-a-contact)]} :message {:body (get-in message [:content :text])} :items []] [quo/activity-log - {:title (i18n/label :t/contact-request) - :on-layout set-swipeable-height - :icon :i/add-user - :timestamp (datetime/timestamp->relative (:timestamp notification)) - :unread? (not (:read notification)) - :context [(i18n/label :t/contact-request-outgoing) - [common/user-avatar-tag chat-id]] - :message {:body (get-in message [:content :text])} - :items (case contact-request-state - constants/contact-request-message-state-pending - [{:type :status - :subtype :pending - :key :status-pending - :blur? true - :label (i18n/label :t/pending)}] + {:title (i18n/label :t/contact-request) + :customization-color customization-color + :on-layout set-swipeable-height + :icon :i/add-user + :timestamp (datetime/timestamp->relative (:timestamp notification)) + :unread? (not (:read notification)) + :context [(i18n/label :t/contact-request-outgoing) + [common/user-avatar-tag chat-id]] + :message {:body (get-in message [:content :text])} + :items (case contact-request-state + constants/contact-request-message-state-pending + [{:type :status + :subtype :pending + :key :status-pending + :blur? true + :label (i18n/label :t/pending)}] - constants/contact-request-message-state-declined - [{:type :status - :subtype :pending - :key :status-pending - :blur? true - :label (i18n/label :t/pending)}] + constants/contact-request-message-state-declined + [{:type :status + :subtype :pending + :key :status-pending + :blur? true + :label (i18n/label :t/pending)}] - nil)}]))) + nil)}]))) (defn- incoming-contact-request-view - [{:keys [notification set-swipeable-height]}] + [{:keys [notification set-swipeable-height customization-color]}] (let [{:keys [id author message last-message]} notification message (or message last-message)] [quo/activity-log {:title (i18n/label :t/contact-request) + :customization-color customization-color :on-layout set-swipeable-height :icon :i/add-user :timestamp (datetime/timestamp->relative (:timestamp notification)) diff --git a/src/status_im2/contexts/shell/activity_center/notification/contact_verification/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/contact_verification/view.cljs index fc79332b39..52f13a18eb 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/contact_verification/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/contact_verification/view.cljs @@ -153,7 +153,7 @@ (defn view [_] (let [reply (atom "")] - (fn [{:keys [notification set-swipeable-height replying?] :as props}] + (fn [{:keys [notification set-swipeable-height replying? customization-color] :as props}] (let [{:keys [id message contact-verification-status]} notification challenger? (:outgoing message)] @@ -169,6 +169,7 @@ (when-not replying? {:on-layout set-swipeable-height}) {:title (i18n/label :t/identity-verification-request) + :customization-color customization-color :icon :i/friend :timestamp (datetime/timestamp->relative (:timestamp notification)) :unread? (not (:read notification)) diff --git a/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs index aa5e8186e2..a80b4695f4 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs @@ -53,32 +53,35 @@ child]))) (defn view - [{:keys [notification set-swipeable-height] :as props}] + [{:keys [notification set-swipeable-height customization-color] :as props}] (let [{:keys [id accepted dismissed author read timestamp chat-name chat-id]} notification] [swipeable props [pressable {:accepted accepted :chat-id chat-id} [quo/activity-log - {:title (i18n/label :t/added-to-group-chat) - :on-layout set-swipeable-height - :icon :i/add-user - :timestamp (datetime/timestamp->relative timestamp) - :unread? (not read) - :context [[common/user-avatar-tag author] - (i18n/label :t/added-you-to) - [quo/group-avatar-tag chat-name - {:size :small - :color :purple}]] - :items (when-not (or accepted dismissed) - [{:type :button - :subtype :positive - :key :button-accept - :label (i18n/label :t/accept) - :accessibility-label :accept-group-chat-invitation - :on-press #(rf/dispatch [:activity-center.notifications/accept id])} - {:type :button - :subtype :danger - :key :button-decline - :label (i18n/label :t/decline) - :accessibility-label :decline-group-chat-invitation - :on-press #(rf/dispatch [:activity-center.notifications/dismiss - id])}])}]]])) + {:title (i18n/label :t/added-to-group-chat) + :customization-color customization-color + :on-layout set-swipeable-height + :icon :i/add-user + :timestamp (datetime/timestamp->relative timestamp) + :unread? (not read) + :context [[common/user-avatar-tag author] + (i18n/label :t/added-you-to) + [quo/group-avatar-tag chat-name + {:size :small + :color :purple}]] + :items (when-not (or accepted dismissed) + [{:type :button + :subtype :positive + :key :button-accept + :label (i18n/label :t/accept) + :accessibility-label :accept-group-chat-invitation + :on-press #(rf/dispatch + [:activity-center.notifications/accept id])} + {:type :button + :subtype :danger + :key :button-decline + :label (i18n/label :t/decline) + :accessibility-label :decline-group-chat-invitation + :on-press #(rf/dispatch + [:activity-center.notifications/dismiss + id])}])}]]])) diff --git a/src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs index 2db7aedba8..91e4159f1f 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs @@ -39,7 +39,7 @@ child]) (defn view - [{:keys [notification set-swipeable-height] :as props}] + [{:keys [notification set-swipeable-height customization-color] :as props}] (let [{:keys [author chat-name community-id chat-id message read timestamp]} notification community-chat? (not (string/blank? community-id)) @@ -52,14 +52,16 @@ (rf/dispatch [:hide-popover]) (rf/dispatch [:chat/navigate-to-chat chat-id]))} [quo/activity-log - {:title (i18n/label :t/mention) - :on-layout set-swipeable-height - :icon :i/mention - :timestamp (datetime/timestamp->relative timestamp) - :unread? (not read) - :context [[common/user-avatar-tag author] - [quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))] - (if community-chat? - [quo/context-tag common/tag-params community-image community-name chat-name] - [quo/group-avatar-tag chat-name common/tag-params])] - :message {:body (message-body message)}}]]])) + {:title (i18n/label :t/mention) + :customization-color customization-color + :on-layout set-swipeable-height + :icon :i/mention + :timestamp (datetime/timestamp->relative timestamp) + :unread? (not read) + :context [[common/user-avatar-tag author] + [quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))] + (if community-chat? + [quo/context-tag common/tag-params community-image community-name + chat-name] + [quo/group-avatar-tag chat-name common/tag-params])] + :message {:body (message-body message)}}]]])) diff --git a/src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs index a7ef54a696..3c3cffe723 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs @@ -52,7 +52,7 @@ child]) (defn view - [{:keys [notification set-swipeable-height] :as props}] + [{:keys [notification set-swipeable-height customization-color] :as props}] (let [{:keys [author chat-name community-id chat-id message read timestamp]} notification community-chat? (not (string/blank? community-id)) @@ -65,30 +65,36 @@ (rf/dispatch [:hide-popover]) (rf/dispatch [:chat/navigate-to-chat chat-id]))} [quo/activity-log - {:title (i18n/label :t/message-reply) - :on-layout set-swipeable-height - :icon :i/reply - :timestamp (datetime/timestamp->relative timestamp) - :unread? (not read) - :context [[common/user-avatar-tag author] - [quo/text {:style style/lowercase-text} (i18n/label :t/on)] - (if community-chat? - [quo/context-tag common/tag-params community-image community-name chat-name] - [quo/group-avatar-tag chat-name common/tag-params])] - :message {:body-number-of-lines 1 - :attachment (cond - (= (:content-type message) constants/content-type-text) - :text + {:title (i18n/label :t/message-reply) + :customization-color customization-color + :on-layout set-swipeable-height + :icon :i/reply + :timestamp (datetime/timestamp->relative timestamp) + :unread? (not read) + :context [[common/user-avatar-tag author] + [quo/text {:style style/lowercase-text} (i18n/label :t/on)] + (if community-chat? + [quo/context-tag common/tag-params community-image community-name + chat-name] + [quo/group-avatar-tag chat-name common/tag-params])] + :message {:body-number-of-lines 1 + :attachment (cond + (= (:content-type message) + constants/content-type-text) + :text - (= (:content-type message) constants/content-type-image) - :photo + (= (:content-type message) + constants/content-type-image) + :photo - (= (:content-type message) constants/content-type-sticker) - :sticker + (= (:content-type message) + constants/content-type-sticker) + :sticker - (= (:content-type message) constants/content-type-gif) - :gif + (= (:content-type message) + constants/content-type-gif) + :gif - :else - nil) - :body (get-message-content message)}}]]])) + :else + nil) + :body (get-message-content message)}}]]])) diff --git a/src/status_im2/contexts/shell/activity_center/tabs/view.cljs b/src/status_im2/contexts/shell/activity_center/tabs/view.cljs index 7bba0c311c..b4c0226cd3 100644 --- a/src/status_im2/contexts/shell/activity_center/tabs/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/tabs/view.cljs @@ -8,13 +8,15 @@ (defn tabs [] - (let [filter-type (rf/sub [:activity-center/filter-type]) + (let [customization-color (rf/sub [:profile/customization-color]) + filter-type (rf/sub [:activity-center/filter-type]) types-with-unread (rf/sub [:activity-center/notification-types-with-unread]) is-mark-all-as-read-undoable? (boolean (rf/sub [:activity-center/mark-all-as-read-undoable-till]))] [quo/tabs {:size 32 :scrollable? true + :customization-color customization-color :blur? true :style style/tabs :fade-end-percentage 0.79 diff --git a/src/status_im2/contexts/shell/activity_center/view.cljs b/src/status_im2/contexts/shell/activity_center/view.cljs index 3faf1770c3..7ad9185877 100644 --- a/src/status_im2/contexts/shell/activity_center/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/view.cljs @@ -25,8 +25,9 @@ [] (let [height (atom 0) set-swipeable-height #(reset! height (oops/oget % "nativeEvent.layout.height"))] - (fn [{:keys [type] :as notification} index _ active-swipeable] + (fn [{:keys [type] :as notification} index _ {:keys [active-swipeable customization-color]}] (let [props {:height height + :customization-color customization-color :active-swipeable active-swipeable :set-swipeable-height set-swipeable-height :notification notification @@ -66,13 +67,15 @@ (let [active-swipeable (atom nil)] (rf/dispatch [:activity-center.notifications/fetch-first-page]) (fn [] - (let [notifications (rf/sub [:activity-center/notifications])] + (let [notifications (rf/sub [:activity-center/notifications]) + customization-color (rf/sub [:profile/customization-color])] [rn/view {:flex 1 :padding-top (navigation/status-bar-height)} [blur/view style/blur] [header/header] [rn/flat-list {:data notifications - :render-data active-swipeable + :render-data {:active-swipeable active-swipeable + :customization-color customization-color} :content-container-style {:flex-grow 1} :empty-component [empty-tab/empty-tab] :key-fn :id