diff --git a/src/quo2/components/notifications/count_down_circle.cljs b/src/quo2/components/notifications/count_down_circle.cljs index 9d4dbfc60a..dae40f508f 100644 --- a/src/quo2/components/notifications/count_down_circle.cljs +++ b/src/quo2/components/notifications/count_down_circle.cljs @@ -45,8 +45,8 @@ :else 0)) (def ^:private themes - {:color {:light colors/neutral-80-opa-40 - :dark colors/white-opa-40}}) + {:color {:dark colors/neutral-80-opa-40 + :light colors/white-opa-40}}) (defn circle-timer [{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}] diff --git a/src/quo2/components/notifications/toast.cljs b/src/quo2/components/notifications/toast.cljs index 43266def85..da6bccba3f 100644 --- a/src/quo2/components/notifications/toast.cljs +++ b/src/quo2/components/notifications/toast.cljs @@ -1,23 +1,25 @@ (ns quo2.components.notifications.toast - (:require [utils.i18n :as i18n] - [quo2.components.icon :as icon] + (:require [quo2.components.icon :as icon] [quo2.components.markdown.text :as text] [quo2.components.notifications.count-down-circle :as count-down-circle] [quo2.foundations.colors :as colors] + [quo2.foundations.shadows :as shadows] [quo2.theme :as theme] - [react-native.core :as rn])) + [react-native.blur :as blur] + [react-native.core :as rn] + [utils.i18n :as i18n])) (def ^:private themes {:container {:dark {:background-color colors/white-opa-70} - :light {:background-color colors/neutral-80-opa-90}} + :light {:background-color colors/neutral-80-opa-70}} :title {:dark {:color colors/neutral-100} :light {:color colors/white}} :text {:dark {:color colors/neutral-100} :light {:color colors/white}} :icon {:dark {:color colors/neutral-100} :light {:color colors/white}} - :action-container {:dark {:background-color :colors/neutral-80-opa-5} - :light {:background-color :colors/white-opa-5}}}) + :action-container {:dark {:background-color colors/neutral-80-opa-5} + :light {:background-color colors/white-opa-5}}}) (defn- merge-theme-style [component-key styles override-theme] @@ -55,17 +57,23 @@ (defn- toast-container [{:keys [left title text right container-style override-theme]}] [rn/view {:style (merge {:padding-left 12 :padding-right 12} container-style)} - [rn/view - {:style (merge-theme-style :container - {:flex-direction :row - :width "100%" - :margin :auto - :justify-content :space-between - :padding-vertical 8 - :padding-left 10 - :padding-right 8 - :border-radius 12} - override-theme)} + [blur/view + {:style (merge-theme-style :container + (merge + (:shadow-1 shadows/normal-scale) + {:flex-direction :row + :flex 1 + :margin :auto + :justify-content :space-between + :padding-vertical 8 + :padding-left 10 + :padding-right 8 + :border-radius 12}) + override-theme) + :blur-amount 13 + :blur-radius 10 + :blur-type :transparent + :overlay-color :transparent} [rn/view {:style {:padding 2}} left] [rn/view {:style {:padding 4 :flex 1}} (when title diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs index 8dfa8d95ce..52b975cb10 100644 --- a/src/status_im/communities/core.cljs +++ b/src/status_im/communities/core.cljs @@ -4,17 +4,17 @@ [clojure.walk :as walk] [quo.design-system.colors :as colors] [re-frame.core :as re-frame] - [utils.i18n :as i18n] [status-im.async-storage.core :as async-storage] - [status-im2.common.bottom-sheet.events :as bottom-sheet] - [status-im2.constants :as constants] [status-im.ui.components.emoji-thumbnail.styles :as emoji-thumbnail-styles] - [utils.re-frame :as rf] [status-im.utils.universal-links.core :as universal-links] - [status-im2.contexts.activity-center.events :as activity-center] + [status-im2.common.bottom-sheet.events :as bottom-sheet] [status-im2.common.toasts.events :as toasts] + [status-im2.constants :as constants] + [status-im2.contexts.activity-center.events :as activity-center] [status-im2.navigation.events :as navigation] - [taoensso.timbre :as log])) + [taoensso.timbre :as log] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (def crop-size 1000) @@ -115,7 +115,7 @@ (let [community-name (aget response-js "communities" 0 "name")] (rf/merge cofx (handle-response cofx response-js) - (toasts/upsert {:icon :placeholder + (toasts/upsert {:icon :correct :icon-color (:positive-01 @colors/theme) :text (i18n/label :t/left-community {:community community-name})}) (navigation/navigate-back) @@ -128,7 +128,7 @@ community-name (aget response-js "communities" 0 "name")] (rf/merge cofx (handle-response cofx response-js) - (toasts/upsert {:icon :placeholder + (toasts/upsert {:icon :correct :icon-color (:positive-01 @colors/theme) :text (i18n/label (if (= event-name ::joined) :t/joined-community diff --git a/src/status_im2/contexts/quo_preview/notifications/toast.cljs b/src/status_im2/contexts/quo_preview/notifications/toast.cljs index 15406e129d..4b7c0c8d4b 100644 --- a/src/status_im2/contexts/quo_preview/notifications/toast.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/toast.cljs @@ -22,7 +22,7 @@ [] [toast-button "Toast: basic" - {:icon :placeholder :icon-color "green" :text "This is an example toast"}]) + {:icon :placeholder :icon-color "white" :text "This is an example toast"}]) (defn toast-button-with-undo-action [] @@ -35,8 +35,8 @@ :undo-duration 4 :undo-on-press #(do (rf/dispatch [:toasts/upsert - {:icon :placeholder - :icon-color "green" + {:icon :correct + :icon-color colors/success-50-opa-40 :text "Undo pressed"}]) (rf/dispatch [:toasts/close "Toast: with undo action"]))}]) @@ -45,8 +45,8 @@ [] [toast-button "Toast: multiline" - {:icon :placeholder - :icon-color "green" + {:icon :correct + :icon-color colors/success-50-opa-40 :text "This is an example multiline toast This is an example multiline toast This is an example multiline toast" :undo-duration 4 @@ -54,15 +54,15 @@ #(do (rf/dispatch [:toasts/upsert - {:icon :placeholder :icon-color "green" :text "Undo pressed"}]) + {:icon :correct :icon-color colors/success-50-opa-40 :text "Undo pressed"}]) (rf/dispatch [:toasts/close "Toast: with undo action"]))}]) (defn toast-button-30s-duration [] [toast-button "Toast: 30s duration" - {:icon :placeholder - :icon-color "green" + {:icon :correct + :icon-color colors/success-50-opa-40 :text "This is an example toast" :duration 30000}]) @@ -79,8 +79,8 @@ #(rf/dispatch [:toasts/upsert {:id "Toast: 30s duration" - :icon :placeholder - :icon-color "red" + :icon :info + :icon-color colors/danger-50-opa-40 :text (str "This is an updated example toast" " - " (swap! suffix inc)) :duration 3000}])} "update above toast"]])))))