status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-17 05:16:46 +00:00
Code Issues Projects Releases Wiki Activity

Refactor toast component to use theme context (#16711)

Browse Source 
This commit refactors the "Toast" component to use theme context for consistency across the codebase.

Each toast will have its theme provider, which will help the children to use the context properly without interfering with other toast's context.

The following components are refactored to use with-theme / theme-context as it is used in the "Toast":

- "text" component
- "user-avatar" component
- "icon" component
- "circle-timer" component

This commit also updates the icon keyword used in the ":toasts/upsert" event dispatch to respect icon guidelines.

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit is contained in:
Mohamed Javid 2023-07-25 23:06:02 +08:00 committed by GitHub
parent ec6800216b
commit 1721b40b3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 148 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/quo2/components/avatars/user_avatar/style.cljs
View File

@ -41,7 +41,7 @@
:border-radius dimensions})) :border-radius dimensions}))
(defn initials-avatar (defn initials-avatar
[size draw-ring? customization-color] [size draw-ring? customization-color theme]
(let [outer-dimensions (get-in sizes [size :outer]) (let [outer-dimensions (get-in sizes [size :outer])
inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])] inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])]
{:position :absolute {:position :absolute
@ -52,7 +52,7 @@
:border-radius inner-dimensions :border-radius inner-dimensions
:justify-content :center :justify-content :center
:align-items :center :align-items :center
:background-color (colors/custom-color-by-theme customization-color 50 60)})) :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)}))
(def initials-avatar-text (def initials-avatar-text
{:color colors/white-opa-70}) {:color colors/white-opa-70})
@ -67,7 +67,7 @@
:background-color background})) :background-color background}))
(defn dot (defn dot
[size ring?] [size ring? theme]
(let [dimensions (get-in sizes [size :status-indicator]) (let [dimensions (get-in sizes [size :status-indicator])
border-width (get-in sizes [size :status-indicator-border]) border-width (get-in sizes [size :status-indicator-border])
right (case size right (case size
@ -89,5 +89,5 @@
:height dimensions :height dimensions
:border-width border-width :border-width border-width
:border-radius dimensions :border-radius dimensions
:background-color (colors/theme-colors colors/white colors/neutral-100) :background-color (colors/theme-colors colors/white colors/neutral-100 theme)
:border-color (colors/theme-colors colors/white colors/neutral-100)})) :border-color (colors/theme-colors colors/white colors/neutral-100 theme)}))

16
src/quo2/components/avatars/user_avatar/view.cljs
View File

@ -1,17 +1,18 @@
(ns quo2.components.avatars.user-avatar.view (ns quo2.components.avatars.user-avatar.view
(:require [quo2.components.avatars.user-avatar.style :as style] (:require [quo2.components.avatars.user-avatar.style :as style]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]
utils.string)) utils.string))
(defn initials-avatar (defn initials-avatar
[{:keys [full-name size draw-ring? customization-color]}] [{:keys [full-name size draw-ring? customization-color theme]}]
(let [font-size (get-in style/sizes [size :font-size]) (let [font-size (get-in style/sizes [size :font-size])
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)] amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
[rn/view [rn/view
{:accessibility-label :initials-avatar {:accessibility-label :initials-avatar
:style (style/initials-avatar size draw-ring? customization-color)} :style (style/initials-avatar size draw-ring? customization-color theme)}
[text/text [text/text
{:style style/initials-avatar-text {:style style/initials-avatar-text
:size font-size :size font-size
@ -20,12 +21,12 @@
(def valid-ring-sizes #{:big :medium :small}) (def valid-ring-sizes #{:big :medium :small})
(defn user-avatar (defn- user-avatar-internal
"If no `profile-picture` is given, draws the initials based on the `full-name` and "If no `profile-picture` is given, draws the initials based on the `full-name` and
uses `ring-background` to display the ring behind the initials when given. Otherwise, uses `ring-background` to display the ring behind the initials when given. Otherwise,
shows the `profile-picture` which already comes with the ring drawn." shows the `profile-picture` which already comes with the ring drawn."
[{:keys [full-name status-indicator? online? size profile-picture ring-background [{:keys [full-name status-indicator? online? size profile-picture ring-background
customization-color static? muted?] customization-color static? muted? theme]
:or {status-indicator? true :or {status-indicator? true
online? true online? true
size :big size :big
@ -49,11 +50,14 @@
{:full-name full-name {:full-name full-name
:size size :size size
:draw-ring? draw-ring? :draw-ring? draw-ring?
:customization-color customization-color}]) :customization-color customization-color
:theme theme}])
(when status-indicator? (when status-indicator?
[rn/view [rn/view
{:accessibility-label :status-indicator {:accessibility-label :status-indicator
:style (style/dot size draw-ring?)} :style (style/dot size draw-ring? theme)}
[rn/view [rn/view
{:accessibility-label :inner-status-indicator-dot {:accessibility-label :inner-status-indicator-dot
:style (style/inner-dot size online?)}]])])) :style (style/inner-dot size online?)}]])]))
(def user-avatar (quo.theme/with-theme user-avatar-internal))

14
src/quo2/components/icon.cljs
View File

@ -3,6 +3,7 @@
[quo2.components.icons.icons :as icons] [quo2.components.icons.icons :as icons]
[quo2.components.icons.svg :as icons.svg] [quo2.components.icons.svg :as icons.svg]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- valid-color? (defn- valid-color?
@ -12,11 +13,10 @@
(not (string/blank? color))))) (not (string/blank? color)))))
(defn memo-icon-fn (defn memo-icon-fn
[icon-name [{:keys [color color-2 no-color
{:keys [color color-2 no-color container-style size accessibility-label theme]
container-style size accessibility-label]
:or {accessibility-label :icon}} :or {accessibility-label :icon}}
_] icon-name]
(let [size (or size 20)] (let [size (or size 20)]
^{:key icon-name} ^{:key icon-name}
(if-let [svg-icon (icons.svg/get-icon icon-name size)] (if-let [svg-icon (icons.svg/get-icon icon-name size)]
@ -34,15 +34,15 @@
(when (not no-color) (when (not no-color)
{:tint-color (if (and (string? color) (not (string/blank? color))) {:tint-color (if (and (string? color) (not (string/blank? color)))
color color
(colors/theme-colors colors/neutral-100 colors/white))}) (colors/theme-colors colors/neutral-100 colors/white theme))})
container-style) container-style)
:accessibility-label accessibility-label :accessibility-label accessibility-label
:source (icons/icon-source (str (name icon-name) size))}]))) :source (icons/icon-source (str (name icon-name) size))}])))
(def themed-icon (memoize memo-icon-fn)) (def ^:private themed-icon (memoize (quo.theme/with-theme memo-icon-fn)))
(defn icon (defn icon
([icon-name] (icon icon-name nil)) ([icon-name] (icon icon-name nil))
([icon-name params] ([icon-name params]
(themed-icon icon-name params (colors/dark?)))) (themed-icon params icon-name)))

29
src/quo2/components/markdown/text.cljs
View File

@ -1,12 +1,12 @@
(ns quo2.components.markdown.text (ns quo2.components.markdown.text
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]
[quo2.foundations.typography :as typography] [quo2.foundations.typography :as typography]
[quo2.theme :as theme] [quo2.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent])) [reagent.core :as reagent]))
(defn text-style (defn text-style
[{:keys [size align weight style]}] [{:keys [size align weight style theme]}]
(merge (case (or weight :regular) (merge (case (or weight :regular)
:regular typography/font-regular :regular typography/font-regular
:medium typography/font-medium :medium typography/font-medium
@ -25,14 +25,23 @@
{:text-align (or align :auto)} {:text-align (or align :auto)}
(if (:color style) (if (:color style)
style style
(assoc style :color (if (= (theme/get-theme) :dark) colors/white colors/neutral-100))))) (assoc style
:color
(if (= (or theme (quo.theme/get-theme)) :dark) colors/white colors/neutral-100)))))
(defn- text-view-internal
[props & children]
(let [style (text-style props)]
(into [rn/text
(merge {:style style}
(dissoc props :style :size :align :weight :color :theme))]
children)))
(def ^:private text-view (quo.theme/with-theme text-view-internal))
(defn text (defn text
[] []
(let [this (reagent/current-component) (let [this (reagent/current-component)
props (reagent/props this) props (reagent/props this)
style (text-style props)] children (reagent/children this)]
(into [rn/text (into [text-view props] children)))
(merge {:style style}
(dissoc props :style :size :align :weight :color))]
(reagent/children this))))

10
src/quo2/components/notifications/count_down_circle.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.components.notifications.count-down-circle (ns quo2.components.notifications.count-down-circle
(:require [goog.string :as gstring] (:require [goog.string :as gstring]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme] [quo2.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.svg :as svg] [react-native.svg :as svg]
[reagent.core :as reagent])) [reagent.core :as reagent]))
@ -48,8 +48,8 @@
{:color {:dark colors/neutral-80-opa-40 {:color {:dark colors/neutral-80-opa-40
:light colors/white-opa-40}}) :light colors/white-opa-40}})
(defn circle-timer (defn- circle-timer-internal
[{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}] [{:keys [color duration size stroke-width trail-color rotation initial-remaining-time theme]}]
(let [rotation (or rotation :clockwise) (let [rotation (or rotation :clockwise)
duration (or duration 4) duration (or duration 4)
stroke-width (or stroke-width 1) stroke-width (or stroke-width 1)
@ -98,8 +98,10 @@
[svg/path [svg/path
{:d path {:d path
:fill :none :fill :none
:stroke (or color (get-in themes [:color (theme/get-theme)])) :stroke (or color (get-in themes [:color theme]))
:stroke-linecap :square :stroke-linecap :square
:stroke-width stroke-width :stroke-width stroke-width
:stroke-dasharray path-length :stroke-dasharray path-length
:stroke-dashoffset (linear-ease @display-time 0 path-length duration)}])]])}))) :stroke-dashoffset (linear-ease @display-time 0 path-length duration)}])]])})))
(def circle-timer (quo.theme/with-theme circle-timer-internal))

42
src/quo2/components/notifications/toast/style.cljs
View File

@ -3,10 +3,12 @@
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.foundations.shadows :as shadows])) [quo2.foundations.shadows :as shadows]))
(def box-container (defn box-container
{:margin-horizontal 12 [theme]
:border-radius 12 (merge (shadows/get 1 theme)
:overflow :hidden}) {:margin-horizontal 12
:border-radius 12
:overflow :hidden}))
(def blur-container (def blur-container
{:height "100%" {:height "100%"
@ -19,35 +21,33 @@
(defn content-container (defn content-container
[theme] [theme]
(merge {:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
(shadows/get 1 theme) :flex-direction :row
{:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme) :justify-content :space-between
:flex-direction :row :padding-vertical 8
:justify-content :space-between :padding-left 10
:padding-vertical 8 :padding-right 8
:padding-left 10 :border-radius 12})
:padding-right 8
:border-radius 12}))
(defn title (defn title
[override-theme] [theme]
{:color (colors/theme-colors colors/white colors/neutral-100 override-theme)}) {:color (colors/theme-colors colors/white colors/neutral-100 theme)})
(defn text (defn text
[override-theme] [theme]
{:color (colors/theme-colors colors/white colors/neutral-100 override-theme)}) {:color (colors/theme-colors colors/white colors/neutral-100 theme)})
(defn icon (defn icon
[override-theme] [theme]
{:color (colors/theme-colors colors/white colors/neutral-100 override-theme) {:color (colors/theme-colors colors/white colors/neutral-100 theme)
:container-style {:width 20 :height 20}}) :container-style {:width 20 :height 20}})
(def left-side-container {:padding 2}) (def left-side-container {:padding 2})
(def right-side-container {:padding 4 :flex 1}) (def right-side-container {:padding 4 :flex 1})
(defn action-container (defn action-container
[override-theme] [theme]
{:background-color (colors/theme-colors colors/white-opa-5 colors/neutral-80-opa-5 override-theme) {:background-color (colors/theme-colors colors/white-opa-5 colors/neutral-80-opa-5 theme)
:flex-direction :row :flex-direction :row
:padding-vertical 3 :padding-vertical 3
:padding-horizontal 8 :padding-horizontal 8

72
src/quo2/components/notifications/toast/view.cljs
View File

@ -4,33 +4,40 @@
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.components.notifications.count-down-circle :as count-down-circle] [quo2.components.notifications.count-down-circle :as count-down-circle]
[quo2.components.notifications.toast.style :as style] [quo2.components.notifications.toast.style :as style]
[quo2.theme :as theme] [quo2.theme :as quo.theme]
[react-native.blur :as blur] [react-native.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn toast-action-container (defn toast-action-container
[{:keys [on-press style]} & children] [{:keys [on-press style theme]} & children]
[rn/touchable-highlight [rn/touchable-highlight
{:on-press on-press {:on-press on-press
:underlay-color :transparent} :underlay-color :transparent}
[into [into
[rn/view [rn/view
{:style (merge (style/action-container (theme/get-theme)) style)}] {:style (merge (style/action-container theme) style)}]
children]]) children]])
(defn toast-undo-action (defn toast-undo-action-internal
[duration on-press override-theme] [{:keys [undo-duration undo-on-press theme]}]
[toast-action-container {:on-press on-press :accessibility-label :toast-undo-action} [toast-action-container
{:on-press undo-on-press
:accessibility-label :toast-undo-action
:theme theme}
[rn/view {:style {:margin-right 5}} [rn/view {:style {:margin-right 5}}
[count-down-circle/circle-timer {:duration duration}]] [count-down-circle/circle-timer {:duration undo-duration}]]
[text/text [text/text
{:size :paragraph-2 :weight :medium :style (style/text override-theme)} {:size :paragraph-2
:weight :medium
:style (style/text theme)}
[i18n/label :t/undo]]]) [i18n/label :t/undo]]])
(defn- toast-container (def ^:private toast-undo-action (quo.theme/with-theme toast-undo-action-internal))
[{:keys [left title text right container-style override-theme]}]
[rn/view {:style (merge style/box-container container-style)} (defn- toast-container-internal
[{:keys [left title text right container-style theme]}]
[rn/view {:style (merge (style/box-container theme) container-style)}
[blur/view [blur/view
{:style style/blur-container {:style style/blur-container
:blur-amount 13 :blur-amount 13
@ -38,7 +45,7 @@
:blur-type :transparent :blur-type :transparent
:overlay-color :transparent}] :overlay-color :transparent}]
[rn/view {:style (style/content-container override-theme)} [rn/view {:style (style/content-container theme)}
[rn/view {:style style/left-side-container} [rn/view {:style style/left-side-container}
left] left]
[rn/view {:style style/right-side-container} [rn/view {:style style/right-side-container}
@ -46,34 +53,39 @@
[text/text [text/text
{:size :paragraph-1 {:size :paragraph-1
:weight :semi-bold :weight :semi-bold
:style (style/title override-theme) :style (style/title theme)
:accessibility-label :toast-title} :accessibility-label :toast-title}
title]) title])
(when text (when text
[text/text [text/text
{:size :paragraph-2 {:size :paragraph-2
:weight :medium :weight :medium
:style (style/text override-theme) :style (style/text theme)
:accessibility-label :toast-content} :accessibility-label :toast-content}
text])] text])]
right]]) right]])
(def ^:private toast-container (quo.theme/with-theme toast-container-internal))
(defn toast (defn toast
[{:keys [icon icon-color title text action undo-duration undo-on-press container-style [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
override-theme user]}] theme user]}]
[toast-container (let [context-theme (or theme (quo.theme/get-theme))]
{:left (cond icon [quo.theme/provider {:theme context-theme}
[icon/icon icon [toast-container
(cond-> (style/icon override-theme) {:left (cond icon
icon-color [icon/icon icon
(assoc :color icon-color))] (cond-> (style/icon context-theme)
icon-color
(assoc :color icon-color))]
user user
[user-avatar/user-avatar user]) [user-avatar/user-avatar user])
:title title :title title
:text text :text text
:right (if undo-duration :right (if undo-duration
[toast-undo-action undo-duration undo-on-press override-theme] [toast-undo-action
action) {:undo-duration undo-duration
:container-style container-style :undo-on-press undo-on-press}]
:override-theme override-theme}]) action)
:container-style container-style}]]))

9
src/quo2/foundations/colors.cljs
View File

@ -262,11 +262,14 @@
suffix-light 50/60 suffix-light 50/60
suffix-dark 50/60 suffix-dark 50/60
opacity-light 0-100 (optional) opacity-light 0-100 (optional)
opacity-dark 0-100 (optional)" opacity-dark 0-100 (optional)
theme :light/:dark (optional)"
([color suffix-light suffix-dark] ([color suffix-light suffix-dark]
(custom-color-by-theme color suffix-light suffix-dark nil nil)) (custom-color-by-theme color suffix-light suffix-dark nil nil (theme/get-theme)))
([color suffix-light suffix-dark opacity-light opacity-dark] ([color suffix-light suffix-dark opacity-light opacity-dark]
(if (theme/dark?) (custom-color-by-theme color suffix-light suffix-dark opacity-light opacity-dark (theme/get-theme)))
([color suffix-light suffix-dark opacity-light opacity-dark theme]
(if (= theme :dark)
(custom-color color suffix-dark opacity-dark) (custom-color color suffix-dark opacity-dark)
(custom-color color suffix-light opacity-light)))) (custom-color color suffix-light opacity-light))))

8
src/status_im2/common/device_permissions.cljs
View File

@ -12,7 +12,7 @@
:on-allowed on-allowed :on-allowed on-allowed
:on-denied #(rf/dispatch :on-denied #(rf/dispatch
[:toasts/upsert [:toasts/upsert
{:icon :i/info {:icon :i/info
:icon-color colors/danger-50 :icon-color colors/danger-50
:override-theme :light :theme :dark
:text (i18n/label :t/camera-permission-denied)}])}])) :text (i18n/label :t/camera-permission-denied)}])}]))

2
src/status_im2/common/home/actions/view.cljs
View File

@ -217,7 +217,7 @@
(rf/dispatch [:hide-bottom-sheet]) (rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:toasts/upsert (rf/dispatch [:toasts/upsert
{:id :remove-nickname {:id :remove-nickname
:icon :correct :icon :i/correct
:icon-color (colors/theme-colors colors/success-60 :icon-color (colors/theme-colors colors/success-60
colors/success-50) colors/success-50)
:text (i18n/label :text (i18n/label

2
src/status_im2/contexts/chat/events.cljs
View File

@ -352,7 +352,7 @@
:t/channel-unmuted-successfully))))] :t/channel-unmuted-successfully))))]
{:db (assoc-in db [:chats chat-id :muted-till] muted-till) {:db (assoc-in db [:chats chat-id :muted-till] muted-till)
:dispatch [:toasts/upsert :dispatch [:toasts/upsert
{:icon :correct {:icon :i/correct
:icon-color (colors/theme-colors colors/success-60 :icon-color (colors/theme-colors colors/success-60
colors/success-50) colors/success-50)
:text (mute-duration-text (when (some? muted-till) :text (mute-duration-text (when (some? muted-till)

2
src/status_im2/contexts/chat/lightbox/top_view.cljs
View File

@ -57,7 +57,7 @@
uri uri
#(rf/dispatch [:toasts/upsert #(rf/dispatch [:toasts/upsert
{:id :random-id {:id :random-id
:icon :correct :icon :i/correct
:icon-color colors/success-50 :icon-color colors/success-50
:container-style {:bottom (when platform/android? 20)} :container-style {:bottom (when platform/android? 20)}
:text (i18n/label :t/photo-saved)}])))}]]])) :text (i18n/label :t/photo-saved)}])))}]]]))

2
src/status_im2/contexts/chat/messages/delete_message/events.cljs
View File

@ -107,7 +107,7 @@
[[:toasts/close :delete-message-for-everyone] [[:toasts/close :delete-message-for-everyone]
[:toasts/upsert [:toasts/upsert
{:id :delete-message-for-everyone {:id :delete-message-for-everyone
:icon :info :icon :i/info
:icon-color colors/danger-50-opa-40 :icon-color colors/danger-50-opa-40
:message-deleted-for-everyone-count toast-count :message-deleted-for-everyone-count toast-count
:message-deleted-for-everyone-undos existing-undos :message-deleted-for-everyone-undos existing-undos

2
src/status_im2/contexts/chat/messages/delete_message_for_me/events.cljs
View File

@ -62,7 +62,7 @@
:dispatch-n [[:toasts/close :delete-message-for-me] :dispatch-n [[:toasts/close :delete-message-for-me]
[:toasts/upsert [:toasts/upsert
{:id :delete-message-for-me {:id :delete-message-for-me
:icon :info :icon :i/info
:icon-color colors/danger-50-opa-40 :icon-color colors/danger-50-opa-40
:message-deleted-for-me-count toast-count :message-deleted-for-me-count toast-count
:message-deleted-for-me-undos existing-undos :message-deleted-for-me-undos existing-undos

2
src/status_im2/contexts/chat/photo_selector/view.cljs
View File

@ -23,7 +23,7 @@
[] []
(rf/dispatch [:toasts/upsert (rf/dispatch [:toasts/upsert
{:id :random-id {:id :random-id
:icon :info :icon :i/info
:icon-color colors/danger-50-opa-40 :icon-color colors/danger-50-opa-40
:container-style {:top (when platform/ios? 20)} :container-style {:top (when platform/ios? 20)}
:text (i18n/label :t/only-6-images)}])) :text (i18n/label :t/only-6-images)}]))

6
src/status_im2/contexts/quo_preview/notifications/toast.cljs
View File

@ -35,7 +35,7 @@
:undo-duration 4 :undo-duration 4
:undo-on-press #(do :undo-on-press #(do
(rf/dispatch [:toasts/upsert (rf/dispatch [:toasts/upsert
{:icon :correct {:icon :i/correct
:icon-color colors/success-50-opa-40 :icon-color colors/success-50-opa-40
:text "Undo pressed"}]) :text "Undo pressed"}])
(rf/dispatch [:toasts/close (rf/dispatch [:toasts/close
@ -54,7 +54,7 @@
#(do #(do
(rf/dispatch (rf/dispatch
[:toasts/upsert [:toasts/upsert
{:icon :correct :icon-color colors/success-50-opa-40 :text "Undo pressed"}]) {:icon :i/correct :icon-color colors/success-50-opa-40 :text "Undo pressed"}])
(rf/dispatch [:toasts/close "Toast: with undo action"]))}]) (rf/dispatch [:toasts/close "Toast: with undo action"]))}])
(defn toast-button-30s-duration (defn toast-button-30s-duration
@ -79,7 +79,7 @@
#(rf/dispatch #(rf/dispatch
[:toasts/upsert [:toasts/upsert
{:id "Toast: 30s duration" {:id "Toast: 30s duration"
:icon :info :icon :i/info
:icon-color colors/danger-50-opa-40 :icon-color colors/danger-50-opa-40
:text (str "This is an updated example toast" " - " (swap! suffix inc)) :text (str "This is an updated example toast" " - " (swap! suffix inc))
:duration 3000}])} :duration 3000}])}

25
src/status_im2/contexts/shell/activity_center/drawer/view.cljs
View File

@ -8,16 +8,15 @@
[] []
(let [unread-count (rf/sub [:activity-center/unread-count])] (let [unread-count (rf/sub [:activity-center/unread-count])]
[quo/action-drawer [quo/action-drawer
[[{:icon :i/mark-as-read [[{:icon :i/mark-as-read
:override-theme :dark :label (i18n/label :t/mark-all-notifications-as-read)
:label (i18n/label :t/mark-all-notifications-as-read) :disabled? (zero? unread-count)
:disabled? (zero? unread-count) :on-press (fn []
:on-press (fn [] (rf/dispatch [:activity-center.notifications/mark-all-as-read-locally
(rf/dispatch [:activity-center.notifications/mark-all-as-read-locally (fn []
(fn [] {:icon :up-to-date
{:icon :up-to-date :icon-color colors/success-50
:icon-color colors/success-50 :text (i18n/label :t/notifications-marked-as-read
:text (i18n/label :t/notifications-marked-as-read {:count unread-count})
{:count unread-count}) :theme :dark})])
:override-theme :dark})]) (rf/dispatch [:hide-bottom-sheet]))}]]]))
(rf/dispatch [:hide-bottom-sheet]))}]]]))

6
src/status_im2/contexts/shell/activity_center/header/view.cljs
View File

@ -28,7 +28,6 @@
:type :blur-bg :type :blur-bg
:size 32 :size 32
:accessibility-label :close-activity-center :accessibility-label :close-activity-center
:override-theme :dark
:on-press #(rf/dispatch [:navigate-back])} :on-press #(rf/dispatch [:navigate-back])}
:i/close] :i/close]
[quo/button [quo/button
@ -36,10 +35,9 @@
:type :blur-bg :type :blur-bg
:size 32 :size 32
:accessibility-label :activity-center-open-more :accessibility-label :activity-center-open-more
:override-theme :dark
:on-press #(rf/dispatch [:show-bottom-sheet :on-press #(rf/dispatch [:show-bottom-sheet
{:content drawer/options {:content drawer/options
:override-theme :dark}])} :theme :dark}])}
:i/options]] :i/options]]
[quo/text [quo/text
{:size :heading-1 {:size :heading-1

8
src/status_im2/contexts/syncing/scan_sync_code/view.cljs
View File

@ -253,10 +253,10 @@
connection-string] connection-string]
300) 300)
(rf/dispatch [:toasts/upsert (rf/dispatch [:toasts/upsert
{:icon :i/info {:icon :i/info
:icon-color colors/danger-50 :icon-color colors/danger-50
:override-theme :light :theme :dark
:text (i18n/label :t/error-this-is-not-a-sync-qr-code)}])))) :text (i18n/label :t/error-this-is-not-a-sync-qr-code)}]))))
(defn render-camera (defn render-camera
[show-camera? torch-mode qr-view-finder camera-ref on-read-code] [show-camera? torch-mode qr-view-finder camera-ref on-read-code]

2
src/status_im2/contexts/syncing/setup_syncing/view.cljs
View File

@ -122,7 +122,7 @@
{:on-press (fn [] {:on-press (fn []
(clipboard/set-string @code) (clipboard/set-string @code)
(rf/dispatch [:toasts/upsert (rf/dispatch [:toasts/upsert
{:icon :correct {:icon :i/correct
:icon-color colors/success-50 :icon-color colors/success-50
:text (i18n/label :text (i18n/label
:t/sharing-copied-to-clipboard)}])) :t/sharing-copied-to-clipboard)}]))