diff --git a/src/quo2/components/tabs/tab.cljs b/src/quo2/components/tabs/tab.cljs index 7662bbe7ff..073fe7b62f 100644 --- a/src/quo2/components/tabs/tab.cljs +++ b/src/quo2/components/tabs/tab.cljs @@ -24,6 +24,25 @@ :icon-color colors/neutral-40 :label {:style {:color colors/white}}}}}) +(def themes-for-blur-background {:light {:default {:background-color colors/neutral-80-opa-5 + :icon-color colors/neutral-80-opa-40 + :label {:style {:color colors/neutral-100}}} + :active {:background-color colors/neutral-80-opa-60 + :icon-color colors/white + :label {:style {:color colors/white}}} + :disabled {:background-color colors/neutral-80-opa-5 + :icon-color colors/neutral-80-opa-40 + :label {:style {:color colors/neutral-100}}}} + :dark {:default {:background-color colors/white-opa-5 + :icon-color colors/white + :label {:style {:color colors/white}}} + :active {:background-color colors/white-opa-20 + :icon-color colors/white + :label {:style {:color colors/white}}} + :disabled {:background-color colors/white-opa-5 + :icon-color colors/neutral-40 + :label {:style {:color colors/white}}}}}) + (defn style-container [size disabled background-color] (merge {:height size :align-items :center @@ -48,12 +67,12 @@ :before :icon-keyword :after :icon-keyword}" [_ _] - (fn [{:keys [id on-press disabled size before active accessibility-label] + (fn [{:keys [id on-press disabled size before active accessibility-label blur? override-theme] :or {size 32}} children] (let [state (cond disabled :disabled active :active :else :default) {:keys [icon-color background-color label]} - (get-in themes [(theme/get-theme) state])] + (get-in (if blur? themes-for-blur-background themes) [(or override-theme (theme/get-theme)) state])] [rn/touchable-without-feedback (merge {:disabled disabled :accessibility-label accessibility-label} (when on-press diff --git a/src/quo2/components/tabs/tabs.cljs b/src/quo2/components/tabs/tabs.cljs index a987e2bf36..5a01ae7661 100644 --- a/src/quo2/components/tabs/tabs.cljs +++ b/src/quo2/components/tabs/tabs.cljs @@ -73,7 +73,9 @@ on-scroll scroll-event-throttle scroll-on-press? - size] + size + blur? + override-theme] :or {fade-end-percentage fade-end-percentage fade-end? false scroll-event-throttle 64 @@ -127,16 +129,18 @@ [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8) :padding-right (when (= index (dec (count data))) (get-in props [:style :padding-left]))}} - [tab/tab {:id id - :size size - :active (= id @active-tab-id) - :on-press (fn [id] - (reset! active-tab-id id) - (when scroll-on-press? - (.scrollToIndex @flat-list-ref - #js {:animated true - :index index - :viewPosition 0.5})) - (when on-change - (on-change id)))} + [tab/tab {:id id + :size size + :override-theme override-theme + :blur? blur? + :active (= id @active-tab-id) + :on-press (fn [id] + (reset! active-tab-id id) + (when scroll-on-press? + (.scrollToIndex @flat-list-ref + #js {:animated true + :index index + :viewPosition 0.5})) + (when on-change + (on-change id)))} label]])})]))))) diff --git a/src/quo2/components/tags/context_tags.cljs b/src/quo2/components/tags/context_tags.cljs index c3577e548a..b2147f6944 100644 --- a/src/quo2/components/tags/context_tags.cljs +++ b/src/quo2/components/tags/context_tags.cljs @@ -48,15 +48,18 @@ (trim-public-key public-key)]])) (defn context-tag [params photo name] - [base-tag (assoc-in params [:style :padding-left] 3) - [rn/image {:style {:width 20 - :border-radius 10 - :background-color :white - :height 20} - :source photo}] - [text/text {:weight :medium - :size :paragraph-2} - (str " " name)]]) + (let [text-style (params :text-style)] + [base-tag (assoc-in params [:style :padding-left] 3) + [rn/image {:style {:width 20 + :border-radius 10 + :background-color :white + :height 20} + :source photo}] + [text/text + (merge {:weight :medium + :size :paragraph-2} + {:style text-style}) + (str " " name)]])) (defn user-avatar-tag [] (fn [params username photo] diff --git a/src/status_im/ui/components/topnav.cljs b/src/status_im/ui/components/topnav.cljs index 598aa0eb1a..85c3d452db 100644 --- a/src/status_im/ui/components/topnav.cljs +++ b/src/status_im/ui/components/topnav.cljs @@ -40,7 +40,11 @@ :on-press #(do (re-frame/dispatch [:mark-all-activity-center-notifications-as-read]) (if config/new-activity-center-enabled? - (re-frame/dispatch [:navigate-to :activity-center]) + (re-frame/dispatch [:show-popover {:view :activity-center + :disable-touchable-overlay? true + :blur-view? true + :blur-view-props {:blur-amount 20 + :blur-type :dark}}]) (re-frame/dispatch [:navigate-to :notifications-center])))} :main-icons2/notifications] (when (pos? notif-count) diff --git a/src/status_im/ui/screens/activity_center/views.cljs b/src/status_im/ui/screens/activity_center/views.cljs index d9253c5946..a213e22d37 100644 --- a/src/status_im/ui/screens/activity_center/views.cljs +++ b/src/status_im/ui/screens/activity_center/views.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.screens.activity-center.views (:require [quo.components.animated.pressable :as animation] - [quo.design-system.colors :as quo.colors] [quo.react-native :as rn] [quo2.components.buttons.button :as button] [quo2.components.markdown.text :as text] @@ -13,7 +12,8 @@ [status-im.i18n.i18n :as i18n] [status-im.multiaccounts.core :as multiaccounts] [status-im.utils.datetime :as datetime] - [status-im.utils.handlers :refer [evt]])) + [status-im.utils.handlers :refer [evt]] + [quo.components.safe-area :as safe-area])) (defn activity-title [{:keys [type]}] @@ -73,9 +73,10 @@ {:button-1 {:label (i18n/label :t/decline) :type :danger :on-press #(>evt [:contact-requests.ui/decline-request id])} - :button-2 {:label (i18n/label :t/accept) - :type :success - :on-press #(>evt [:contact-requests.ui/accept-request id])}} + :button-2 {:label (i18n/label :t/accept) + :type :success + :override-background-color colors/success-60 + :on-press #(>evt [:contact-requests.ui/accept-request id])}} nil)) (defn activity-pressable @@ -86,7 +87,9 @@ ;; `:contact.ui/send-message-pressed` instead of ;; `:chat.ui/navigate-to-chat`, otherwise the chat screen looks completely ;; broken if it has never been opened before for the accepted contact. - [animation/pressable {:on-press #(>evt [:contact.ui/send-message-pressed {:public-key (:author notification)}])} + [animation/pressable {:on-press (fn [] + (>evt [:hide-popover]) + (>evt [:contact.ui/send-message-pressed {:public-key (:author notification)}]))} activity] activity)) @@ -109,13 +112,14 @@ [] (let [unread-filter-enabled? (evt [:activity-center.notifications/fetch-first-page - {:filter-status (if unread-filter-enabled? - :read - :unread)}])} + [button/button {:icon true + :type (if unread-filter-enabled? :primary :blur-bg-outline) + :size 32 + :override-theme :dark + :on-press #(>evt [:activity-center.notifications/fetch-first-page + {:filter-status (if unread-filter-enabled? + :read + :unread)}])} :main-icons2/unread])) ;; TODO(2022-10-07): The empty state is still under design analysis, so we @@ -142,6 +146,8 @@ [] (let [filter-type (evt [:navigate-back])} + [rn/view + [button/button {:icon true + :type :blur-bg + :size 32 + :override-theme :dark + :style {:margin-vertical 12 + :margin-left screen-padding} + :on-press #(>evt [:hide-popover])} :main-icons2/close] [text/text {:size :heading-1 :weight :semi-bold :style {:padding-horizontal screen-padding - :padding-vertical 12}} + :padding-vertical 12 + :color colors/white}} (i18n/label :t/notifications)] [rn/view {:flex-direction :row :padding-vertical 12} @@ -201,12 +207,15 @@ {:component-did-mount #(>evt [:activity-center.notifications/fetch-first-page]) :reagent-render (fn [] - (let [notifications (evt [:activity-center.notifications/fetch-next-page]) - :render-fn render-notification - :sticky-header-indices [0]}]))})) + (let [notifications (evt [:activity-center.notifications/fetch-next-page]) + :render-fn render-notification}]]]))})) diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index e1852cde1b..c864c13fbc 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -257,7 +257,11 @@ :on-press #(do (re-frame/dispatch [:mark-all-activity-center-notifications-as-read]) (if config/new-activity-center-enabled? - (re-frame/dispatch [:navigate-to :activity-center]) + (re-frame/dispatch [:show-popover {:view :activity-center + :disable-touchable-overlay? true + :blur-view? true + :blur-view-props {:blur-amount 20 + :blur-type :dark}}]) (re-frame/dispatch [:navigate-to :notifications-center])))} [icons/icon :main-icons/notification2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]] (when (pos? notif-count) diff --git a/src/status_im/ui/screens/popover/views.cljs b/src/status_im/ui/screens/popover/views.cljs index 75c93e4b0e..cde947f5a8 100644 --- a/src/status_im/ui/screens/popover/views.cljs +++ b/src/status_im/ui/screens/popover/views.cljs @@ -19,7 +19,8 @@ [status-im.ui.screens.keycard.views :as keycard.views] [status-im.ui.screens.keycard.frozen-card.view :as frozen-card] [status-im.ui.screens.chat.message.pinned-message :as pinned-message] - [status-im.ui.screens.signing.sheets :as signing-sheets])) + [status-im.ui.screens.signing.sheets :as signing-sheets] + [status-im.ui.screens.activity-center.views :as activity-center])) (defn hide-panel-anim [bottom-anim-value alpha-value window-height] @@ -95,8 +96,10 @@ :reagent-render (fn [] (when @current-popover - (let [{:keys [view style]} @current-popover] - [react/view {:position :absolute :top 0 :bottom 0 :left 0 :right 0} + (let [{:keys [view style disable-touchable-overlay? blur-view? blur-view-props]} @current-popover + component (if blur-view? react/blur-view react/view) + overlay-component (if disable-touchable-overlay? react/view react/touchable-highlight)] + [component (merge {:style {:position :absolute :top 0 :bottom 0 :left 0 :right 0}} blur-view-props) (when platform/ios? [react/animated-view {:style {:flex 1 :background-color colors/black-persist :opacity alpha-value}}]) @@ -106,10 +109,10 @@ :left 0 :right 0 :transform [{:translateY bottom-anim-value}]}} - [react/touchable-highlight + [overlay-component {:style {:flex 1 :align-items :center :justify-content :center} :on-press request-close} - [react/view (merge {:background-color colors/white + [react/view (merge {:background-color (if blur-view? :transparent colors/white) :border-radius 16 :margin 32 :shadow-offset {:width 0 :height 2} @@ -117,64 +120,66 @@ :shadow-opacity 1 :shadow-color "rgba(0, 9, 26, 0.12)"} style) - [react/touchable-opacity {:active-opacity 1} - (cond - (vector? view) - view + (cond + (vector? view) + view - (= :signing-phrase view) - [signing-phrase/signing-phrase] + (= :signing-phrase view) + [signing-phrase/signing-phrase] - (= :share-account view) - [request/share-address] + (= :share-account view) + [request/share-address] - (= :share-chat-key view) - [profile.user/share-chat-key] + (= :share-chat-key view) + [profile.user/share-chat-key] - (= :custom-seed-phrase view) - [multiaccounts.recover/custom-seed-phrase] + (= :custom-seed-phrase view) + [multiaccounts.recover/custom-seed-phrase] - (= :enable-biometric view) - [biometric/enable-biometric-popover] + (= :enable-biometric view) + [biometric/enable-biometric-popover] - (= :secure-with-biometric view) - [biometric/secure-with-biometric-popover] + (= :secure-with-biometric view) + [biometric/secure-with-biometric-popover] - (= :disable-password-saving view) - [biometric/disable-password-saving-popover] + (= :disable-password-saving view) + [biometric/disable-password-saving-popover] - (= :transaction-data view) - [signing/transaction-data] + (= :transaction-data view) + [signing/transaction-data] - (= :frozen-card view) - [frozen-card/frozen-card] + (= :frozen-card view) + [frozen-card/frozen-card] - (= :blocked-card view) - [keycard.views/blocked-card-popover] + (= :blocked-card view) + [keycard.views/blocked-card-popover] - (= :export-community view) - [communities/export-community] + (= :export-community view) + [communities/export-community] - (= :seed-key-uid-mismatch view) - [multiaccounts.key-storage/seed-key-uid-mismatch-popover] + (= :seed-key-uid-mismatch view) + [multiaccounts.key-storage/seed-key-uid-mismatch-popover] - (= :transfer-multiaccount-to-keycard-warning view) - [multiaccounts.key-storage/transfer-multiaccount-warning-popover] + (= :transfer-multiaccount-to-keycard-warning view) + [multiaccounts.key-storage/transfer-multiaccount-warning-popover] - (= :transfer-multiaccount-unknown-error view) - [multiaccounts.key-storage/unknown-error-popover] + (= :transfer-multiaccount-unknown-error view) + [multiaccounts.key-storage/unknown-error-popover] - (= :password-reset-popover view) - [reset-password.views/reset-password-popover] + (= :password-reset-popover view) + [reset-password.views/reset-password-popover] - (= :pin-limit view) - [pinned-message/pin-limit-popover] + (= :pin-limit view) + [pinned-message/pin-limit-popover] - (= :fees-warning view) - [signing-sheets/fees-warning] + (= :fees-warning view) + [signing-sheets/fees-warning] - :else - [view])]]]]])))}))) + (= :activity-center view) + [activity-center/activity-center] + + :else + [view])]]]])))}))) (views/defview popover [] (views/letsubs [popover [:popover/popover]