fix: notification center blur (#19861)

src/legacy/status_im/ui/screens/profile/seed/views.cljs

@@ -13,11 +13,11 @@
     [legacy.status-im.utils.utils :as utils]
     [re-frame.core :as re-frame]
     [react-native.core :as rn]
+    [react-native.platform :as platform]
+    [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [utils.i18n :as i18n]
-    [utils.re-frame :as rf]
+    [utils.re-frame :as rf]))
-    [react-native.platform :as platform]
-    [react-native.safe-area :as safe-area]))
 
 (def steps-numbers
   {:intro       1

src/quo/components/notifications/activity_log/view.cljs

@@ -8,6 +8,7 @@
     [quo.components.notifications.activity-log.style :as style]
     [quo.components.tags.status-tags :as status-tags]
     [quo.foundations.colors :as colors]
+    [quo.theme]
     [react-native.core :as rn]
     [utils.i18n :as i18n]))
 
@@ -144,12 +145,13 @@
      label]))
 
 (defmethod footer-item-view :status
-  [{:keys [label subtype blur?]} _ _]
+  [{:keys [label subtype blur? theme]} _ _]
+  [quo.theme/provider theme
    [status-tags/status-tag
     {:size   :small
      :label  label
      :status {:type subtype}
-    :blur?  blur?}])
+     :blur?  blur?}]])
 
 (defn- footer
   [{:keys [replying? items] :as props}]

src/status_im/contexts/shell/activity_center/notification/contact_requests/view.cljs

@@ -58,7 +58,7 @@
       child)))
 
 (defn- outgoing-contact-request-view
-  [{:keys [notification set-swipeable-height customization-color]}]
+  [{:keys [notification set-swipeable-height customization-color]} theme]
   (let [{:keys [chat-id message last-message accepted]} notification
         {:keys [contact-request-state] :as message}     (or message last-message)]
     (if accepted
@@ -89,19 +89,20 @@
                                  :subtype :pending
                                  :key     :status-pending
                                  :blur?   true
-                                 :label   (i18n/label :t/pending)}]
+                                 :label   (i18n/label :t/pending)
+                                 :theme   theme}]
 
                                constants/contact-request-message-state-declined
                                [{:type    :status
                                  :subtype :pending
                                  :key     :status-pending
                                  :blur?   true
-                                 :label   (i18n/label :t/pending)}]
+                                 :label   (i18n/label :t/pending)
-
+                                 :theme   theme}]
                                nil)}])))
 
 (defn- incoming-contact-request-view
-  [{:keys [notification set-swipeable-height customization-color]}]
+  [{:keys [notification set-swipeable-height customization-color]} theme]
   (let [{:keys [id author message last-message]} notification
         message                                  (or message last-message)]
     [quo/activity-log
@@ -122,14 +123,16 @@
           :subtype :positive
           :key     :status-accepted
           :blur?   true
-          :label   (i18n/label :t/accepted)}]
+          :label   (i18n/label :t/accepted)
+          :theme   theme}]
 
         constants/contact-request-message-state-declined
         [{:type    :status
           :subtype :negative
           :key     :status-declined
           :blur?   true
-          :label   (i18n/label :t/declined)}]
+          :label   (i18n/label :t/declined)
+          :theme   theme}]
 
         constants/contact-request-message-state-pending
         [{:type                :button
@@ -151,18 +154,19 @@
   [{:keys [notification] :as props}]
   (let [{:keys [author message last-message]} notification
         {:keys [public-key]}                  (rf/sub [:multiaccount/contact])
-        {:keys [contact-request-state]}       (or message last-message)]
+        {:keys [contact-request-state]}       (or message last-message)
+        app-theme                             (rf/sub [:theme])]
     [swipeable props
      (cond
        (= public-key author)
-       [outgoing-contact-request-view props]
+       [outgoing-contact-request-view props app-theme]
 
        (= contact-request-state constants/contact-request-message-state-accepted)
        [gesture/touchable-without-feedback
         {:on-press (fn []
                      (rf/dispatch [:hide-popover])
                      (rf/dispatch [:chat.ui/start-chat author]))}
-        [incoming-contact-request-view props]]
+        [incoming-contact-request-view props app-theme]]
 
        :else
-       [incoming-contact-request-view props])]))
+       [incoming-contact-request-view props app-theme])]))

src/status_im/contexts/shell/activity_center/style.cljs

@@ -56,5 +56,5 @@
 
 (def blur
   {:style        {:position :absolute :top 0 :left 0 :right 0 :bottom 0}
-   :overlayColor colors/neutral-80-opa-80
+   :overlayColor colors/neutral-80-opa-80-blur
    :blur-amount  20})

src/status_im/contexts/shell/activity_center/view.cljs

@@ -1,7 +1,7 @@
 (ns status-im.contexts.shell.activity-center.view
   (:require
     [oops.core :as oops]
-    [react-native.blur :as blur]
+    [quo.core :as quo]
     [react-native.core :as rn]
     [react-native.navigation :as navigation]
     [status-im.contexts.shell.activity-center.header.view :as header]
@@ -67,8 +67,8 @@
     (fn []
       (let [notifications       (rf/sub [:activity-center/notifications])
             customization-color (rf/sub [:profile/customization-color])]
+        [quo/overlay {:type :shell}
          [rn/view {:flex 1 :padding-top (navigation/status-bar-height)}
-         [blur/view style/blur]
           [header/header]
           [rn/flat-list
            {:data                      notifications
@@ -79,4 +79,5 @@
             :key-fn                    :id
             :on-scroll-to-index-failed identity
             :on-end-reached            #(rf/dispatch [:activity-center.notifications/fetch-next-page])
-           :render-fn                 notification-component}]]))))
+            :render-fn                 notification-component}]]
+        ]))))