status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: theming toast component (#17918)

This commit is contained in:
codemaster 2023-12-22 09:29:50 -06:00 committed by GitHub
parent 1bd6898e1c
commit 7915ba85ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 123 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/quo/components/notifications/toast/style.cljs
View File

@ -38,8 +38,13 @@
{:color (colors/theme-colors colors/white colors/neutral-100 theme)})
(defn icon
[theme]
{:color (colors/theme-colors colors/white colors/neutral-100 theme)
[toast-type theme]
{:color (case toast-type
:negative (colors/resolve-color :danger theme)
:positive (colors/resolve-color :success theme)
:neutral (colors/theme-colors colors/white-opa-40
colors/neutral-80-opa-40
theme))
:container-style {:width 20 :height 20}})
(def left-side-container {:padding 2})

25
src/quo/components/notifications/toast/view.cljs
View File

@ -69,17 +69,24 @@
(def ^:private toast-container (quo.theme/with-theme toast-container-internal))
(defn toast
[{:keys [icon icon-color title text action undo-duration undo-on-press container-style theme user]}]
(let [context-theme (or theme (quo.theme/get-theme))]
"Options:
:type => :neutral/:negative/:positive
"
[{:keys [type icon title text action undo-duration undo-on-press container-style theme user]
:or {type :neutral icon :i/placeholder}}]
(let [context-theme (or theme (quo.theme/get-theme))
icon-name (case type
:positive :i/correct
:negative :i/incorrect
:neutral icon)]
[quo.theme/provider {:theme context-theme}
[toast-container
{:left (cond icon
[icon/icon icon
(cond-> (style/icon context-theme)
icon-color
(assoc :color icon-color))]
user
[user-avatar/user-avatar user])
{:left (cond user
[user-avatar/user-avatar user]
icon-name
[icon/icon icon-name (style/icon type context-theme)]
)
:title title
:text text
:right (if undo-duration

7
src/quo/core_spec.cljs
View File

@ -1,5 +1,10 @@
(ns quo.core-spec
(:require
(:require ;; [quo.components.list-items.account.component-spec]
;; [quo.components.list-items.address.component-spec]
;; [quo.components.list-items.saved-address.component-spec]
;; [quo.components.list-items.saved-contact-address.component-spec]
;; [quo.components.list-items.saved-contact-address.component-spec]
;; [quo.components.list-items.token-network.component-spec]
[quo.components.avatars.account-avatar.component-spec]
[quo.components.avatars.user-avatar.component-spec]
[quo.components.banners.banner.component-spec]

4
src/status_im/common/device_permissions.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.common.device-permissions
(:require
[quo.foundations.colors :as colors]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -12,7 +11,6 @@
:on-allowed on-allowed
:on-denied #(rf/dispatch
[:toasts/upsert
{:icon :i/info
:icon-color colors/danger-50
{:type :negative
:theme :dark
:text (i18n/label :t/camera-permission-denied)}])}]))

5
src/status_im/common/home/actions/view.cljs
View File

@ -2,7 +2,6 @@
(:require
[clojure.string :as string]
[quo.core :as quo]
[quo.foundations.colors :as colors]
[status-im.common.confirmation-drawer.view :as confirmation-drawer]
[status-im.common.mute-drawer.view :as mute-drawer]
[status-im.common.muting.helpers :refer [format-mute-till]]
@ -222,9 +221,7 @@
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:toasts/upsert
{:id :remove-nickname
:icon :i/correct
:icon-color (colors/theme-colors colors/success-60
colors/success-50)
:type :positive
:text (i18n/label
:t/remove-nickname-toast
{:secondary-name secondary-name})}])

4
src/status_im/common/pairing/events.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.common.pairing.events
(:require
[quo.foundations.colors :as colors]
[status-im.constants :as constants]
[status-im.contexts.communities.discover.events]
[taoensso.timbre :as log]
@ -63,6 +62,5 @@
(and error-on-pairing? (some? error))
{:dispatch [:toasts/upsert
{:icon :i/alert
:icon-color colors/danger-50
{:type :negative
:text error}]}))))

3
src/status_im/common/scan_qr_code/view.cljs
View File

@ -141,8 +141,7 @@
(on-failed-scan)
(debounce/debounce-and-dispatch
[:toasts/upsert
{:icon :i/info
:icon-color colors/danger-50
{:type :negative
:theme :dark
:text error-message}]
300)))))

4
src/status_im/contexts/chat/composer/actions/view.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.contexts.chat.composer.actions.view
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.permissions :as permissions]
[react-native.platform :as platform]
@ -161,8 +160,7 @@
[]
(rf/dispatch [:toasts/upsert
{:id :random-id
:icon :info
:icon-color colors/danger-50-opa-40
:type :negative
:container-style {:top (when platform/ios? 20)}
:text (i18n/label :t/only-6-images)}]))

5
src/status_im/contexts/chat/events.cljs
View File

@ -3,7 +3,6 @@
[clojure.set :as set]
[legacy.status-im.chat.models.loading :as loading]
[legacy.status-im.data-store.chats :as chats-store]
[quo.foundations.colors :as colors]
[re-frame.core :as re-frame]
[reagent.core :as reagent]
[status-im.common.muting.helpers :refer [format-mute-till]]
@ -350,9 +349,7 @@
:t/channel-unmuted-successfully))))]
{:db (assoc-in db [:chats chat-id :muted-till] muted-till)
:dispatch [:toasts/upsert
{:icon :i/correct
:icon-color (colors/theme-colors colors/success-60
colors/success-50)
{:type :positive
:text (mute-duration-text (when (some? muted-till)
(str (format-mute-till muted-till))))}]}))

3
src/status_im/contexts/chat/lightbox/top_view.cljs
View File

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

14
src/status_im/contexts/chat/messages/delete_message/events.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.contexts.chat.messages.delete-message.events
(:require
[quo.foundations.colors :as colors]
[status-im.contexts.chat.messages.list.events :as message-list]
[taoensso.timbre :as log]
[utils.datetime :as datetime]
@ -73,9 +72,8 @@
{:events [:chat.ui/delete-message]}
[{:keys [db]} {:keys [chat-id message-id]} undo-time-limit-ms]
(when-let [message (get-in db [:messages chat-id message-id])]
;; all delete message toast are the same toast with id :delete-message-for-everyone
;; new delete operation will reset prev pending deletes' undo timelimit
;; undo will undo all pending deletes
;; all delete message toast are the same toast with id :delete-message-for-everyone new delete
;; operation will reset prev pending deletes' undo timelimit undo will undo all pending deletes
;; all pending deletes are stored in toast
(let [unpin? (should-and-able-to-unpin-to-be-deleted-message
db
@ -107,8 +105,7 @@
[[:toasts/close :delete-message-for-everyone]
[:toasts/upsert
{:id :delete-message-for-everyone
:icon :i/info
:icon-color colors/danger-50-opa-40
:type :negative
:message-deleted-for-everyone-count toast-count
:message-deleted-for-everyone-undos existing-undos
:text (i18n/label-pluralize
@ -164,9 +161,8 @@
(when-let [message (get-in db [:messages chat-id message-id])]
(when (or force? (check-before-delete-and-send db chat-id message-id))
(let [unpin-locally?
;; this only check against local client data
;; generally msg is already unpinned at delete locally phase when user
;; has unpin permission
;; this only check against local client data generally msg is already unpinned at delete
;; locally phase when user has unpin permission
;;
;; will be true only if
;; 1. admin delete an unpinned msg

4
src/status_im/contexts/chat/messages/delete_message_for_me/events.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.contexts.chat.messages.delete-message-for-me.events
(:require
[quo.foundations.colors :as colors]
[status-im.contexts.chat.messages.list.events :as message-list]
[taoensso.timbre :as log]
[utils.datetime :as datetime]
@ -62,8 +61,7 @@
:dispatch-n [[:toasts/close :delete-message-for-me]
[:toasts/upsert
{:id :delete-message-for-me
:icon :i/info
:icon-color colors/danger-50-opa-40
:type :negative
:message-deleted-for-me-count toast-count
:message-deleted-for-me-undos existing-undos
:text (i18n/label-pluralize toast-count

4
src/status_im/contexts/chat/messages/pin/events.cljs
View File

@ -2,7 +2,6 @@
(:require
[legacy.status-im.data-store.messages :as data-store.messages]
[legacy.status-im.data-store.pin-messages :as data-store.pin-messages]
[quo.foundations.colors :as colors]
[re-frame.core :as re-frame]
[status-im.common.toasts.events :as toasts]
[status-im.constants :as constants]
@ -123,8 +122,7 @@
{:events [:pin-message/show-pin-limit-modal]}
[cofx]
(toasts/upsert cofx
{:icon :alert
:icon-color colors/danger-50
{:type :negative
:text (i18n/label :t/pin-limit-reached)}))
(rf/defn show-pins-bottom-sheet

4
src/status_im/contexts/chat/photo_selector/view.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.contexts.chat.photo-selector.view
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.gesture :as gesture]
[react-native.linear-gradient :as linear-gradient]
@ -22,8 +21,7 @@
[]
(rf/dispatch [:toasts/upsert
{:id :random-id
:icon :i/info
:icon-color colors/danger-50-opa-40
:type :negative
:container-style {:top (when platform/ios? 20)}
:text (i18n/label :t/only-6-images)}]))

6
src/status_im/contexts/communities/actions/community_options/events.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.contexts.communities.actions.community-options.events
(:require [quo.foundations.colors :as quo.colors]
[status-im.common.muting.helpers :as muting.helpers]
(:require [status-im.common.muting.helpers :as muting.helpers]
[taoensso.timbre :as log]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -26,8 +25,7 @@
{:db (assoc-in db [:communities community-id :muted-till] muted-till)
:dispatch-n [[:community/update-community-chats-mute-status community-id muted? muted-till]
[:toasts/upsert
{:icon :correct
:icon-color (quo.colors/theme-colors quo.colors/success-60 quo.colors/success-50)
{:type :positive
:text (if muted?
(when (some? muted-till)
(time-string :t/muted-until

9
src/status_im/contexts/communities/actions/leave/events.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.contexts.communities.actions.leave.events
(:require [legacy.status-im.ui.components.colors :as colors]
[taoensso.timbre :as log]
(:require [taoensso.timbre :as log]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -9,8 +8,7 @@
{:fx [[:dispatch [:sanitize-messages-and-process-response response-js]]
[:dispatch
[:toasts/upsert
{:icon :correct
:icon-color (:positive-01 @colors/theme)
{:type :positive
:text (i18n/label :t/you-canceled-the-request)}]]]}))
(rf/reg-event-fx :communities/cancel-request-to-join
@ -28,8 +26,7 @@
{:fx [[:dispatch [:sanitize-messages-and-process-response response-js]]
[:dispatch
[:toasts/upsert
{:icon :correct
:icon-color (:positive-01 @colors/theme)
{:type :positive
:text (i18n/label :t/left-community {:community community-name})}]]
[:dispatch [:activity-center.notifications/fetch-unread-count]]
[:dispatch [:navigate-back]]]})))

6
src/status_im/contexts/communities/events.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.contexts.communities.events
(:require [clojure.set :as set]
[clojure.walk :as walk]
[legacy.status-im.ui.components.colors :as colors]
[status-im.constants :as constants]
status-im.contexts.communities.actions.community-options.events
status-im.contexts.communities.actions.leave.events
@ -93,9 +92,8 @@
(assoc-in db [:communities/my-pending-requests-to-join community-id] request)
(and (= constants/community-request-to-join-state-accepted state) (not deleted))
(do (rf/dispatch [:toasts/upsert
{:icon :i/correct
:id :joined-community
:icon-color (:positive-01 @colors/theme)
{:id :joined-community
:type :positive
:text (i18n/label :t/joined-community {:community name})}])
(update-in db [:communities/my-pending-requests-to-join] dissoc community-id))
:else (update-in db [:communities/my-pending-requests-to-join] dissoc community-id))))

4
src/status_im/contexts/communities/overview/events.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.contexts.communities.overview.events
(:require
[legacy.status-im.data-store.communities :as data-store]
[legacy.status-im.ui.components.colors :as colors]
[taoensso.timbre :as log]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -104,8 +103,7 @@
[:dispatch [:hide-bottom-sheet]]
[:dispatch
[:toasts/upsert
{:icon :correct
:icon-color (:positive-01 @colors/theme)
{:type :positive
:text (i18n/label
:t/requested-to-join-community
{:community community-name})}]]]})))

3
src/status_im/contexts/contacts/drawers/nickname_drawer/view.cljs
View File

@ -17,8 +17,7 @@
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:toasts/upsert
{:id :add-nickname
:icon :i/correct
:icon-color (colors/theme-colors colors/success-60 colors/success-50)
:type :positive
:text (i18n/label
:t/set-nickname-toast
{:primary-name primary-name

20
src/status_im/contexts/quo_preview/notifications/toast.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.contexts.quo-preview.notifications.toast
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im.common.resources :as resources]
@ -25,21 +24,19 @@
[]
[toast-button
"Toast: basic"
{:icon :placeholder :icon-color "white" :text "This is an example toast"}])
{:text "This is an example toast"}])
(defn toast-button-with-undo-action
[]
[toast-button
"Toast: with undo action"
{:icon :info
:icon-color colors/danger-50-opa-40
{:type :negative
:text "This is an example toast"
:duration 4000
:undo-duration 4
:undo-on-press #(do
(rf/dispatch [:toasts/upsert
{:icon :i/correct
:icon-color colors/success-50-opa-40
{:type :positive
:text "Undo pressed"}])
(rf/dispatch [:toasts/close
"Toast: with undo action"]))}])
@ -48,8 +45,7 @@
[]
[toast-button
"Toast: multiline"
{:icon :correct
:icon-color colors/success-50-opa-40
{:type :positive
:text
"This is an example multiline toast This is an example multiline toast This is an example multiline toast"
:undo-duration 4
@ -57,15 +53,14 @@
#(do
(rf/dispatch
[:toasts/upsert
{:icon :i/correct :icon-color colors/success-50-opa-40 :text "Undo pressed"}])
{:type :positive :text "Undo pressed"}])
(rf/dispatch [:toasts/close "Toast: with undo action"]))}])
(defn toast-button-30s-duration
[]
[toast-button
"Toast: 30s duration"
{:icon :correct
:icon-color colors/success-50-opa-40
{:type :positive
:text "This is an example toast"
:duration 30000}])
@ -90,8 +85,7 @@
#(rf/dispatch
[:toasts/upsert
{:id "Toast: 30s duration"
:icon :i/info
:icon-color colors/danger-50-opa-40
:type :negative
:text (str "This is an updated example toast" " - " (swap! suffix inc))
:duration 3000}])}
"update above toast"]])))))

6
src/status_im/contexts/shell/share/events.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.contexts.shell.share.events
(:require
[quo.foundations.colors :as colors]
[status-im.common.toasts.events :as toasts]
[utils.re-frame :as rf]))
@ -10,8 +9,7 @@
(rf/merge cofx
{:copy-to-clipboard text-to-copy}
(toasts/upsert
{:icon :correct
:id :successful-copy-toast-message
:icon-color colors/success-50
{:id :successful-copy-toast-message
:type :positive
:override-theme :dark
:text post-copy-message})))

3
src/status_im/contexts/syncing/enter_sync_code/view.cljs
View File

@ -69,8 +69,7 @@
@sync-code-value]
300)
(rf/dispatch [:toasts/upsert
{:icon :i/info
:icon-color colors/danger-50
{:type :negative
:theme :dark
:text (i18n/label
:t/error-this-is-not-a-sync-qr-code)}])))}

4
src/status_im/contexts/syncing/events.cljs
View File

@ -4,7 +4,6 @@
[legacy.status-im.data-store.settings :as data-store.settings]
[legacy.status-im.node.core :as node]
[native-module.core :as native-module]
[quo.foundations.colors :as colors]
[re-frame.core :as re-frame]
[react-native.platform :as platform]
[status-im.config :as config]
@ -52,8 +51,7 @@
(str "generic-error: " res))]
(when (some? error)
(rf/dispatch [:toasts/upsert
{:icon :i/alert
:icon-color colors/danger-50
{:type :negative
:text error}]))))
(rf/defn preflight-outbound-check-for-local-pairing

3
src/status_im/contexts/syncing/scan_sync_code/view.cljs
View File

@ -232,8 +232,7 @@
(on-failed-scan)
(debounce/debounce-and-dispatch
[:toasts/upsert
{:icon :i/info
:icon-color colors/danger-50
{:type :negative
:theme :dark
:text (i18n/label :t/error-this-is-not-a-sync-qr-code)}]
300)))))

3
src/status_im/contexts/syncing/setup_syncing/view.cljs
View File

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

3
src/status_im/contexts/wallet/common/sheets/account_options/view.cljs
View File

@ -70,8 +70,7 @@
:label (i18n/label :t/copy-address)
:on-press (fn []
(rf/dispatch [:toasts/upsert
{:icon :i/correct
:icon-color (colors/resolve-color :success theme)
{:type :positive
:text (i18n/label :t/address-copied)}])
(clipboard/set-string address))}
{:icon :i/share

28
src/status_im/contexts/wallet/edit_account/view.cljs
View File

@ -1,7 +1,5 @@
(ns status-im.contexts.wallet.edit-account.view
(:require [quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im.contexts.wallet.common.screen-base.create-or-edit-account.view
@ -13,7 +11,7 @@
[utils.re-frame :as rf]))
(defn- show-save-account-toast
[updated-key theme]
[updated-key]
(let [message (case updated-key
:name :t/edit-wallet-account-name-updated-message
:color :t/edit-wallet-account-colour-updated-message
@ -22,39 +20,34 @@
nil)]
(rf/dispatch [:toasts/upsert
{:id :edit-account
:icon :i/correct
:icon-color (colors/resolve-color :success theme)
:type :positive
:text (i18n/label message)}])))
(defn- save-account
[{:keys [account updated-key new-value theme]}]
[{:keys [account updated-key new-value]}]
(let [edited-account-data (assoc account updated-key new-value)]
(rf/dispatch [:wallet/save-account
{:account edited-account-data
:on-success #(show-save-account-toast updated-key theme)}])))
:on-success #(show-save-account-toast updated-key)}])))
(defn- view-internal
[{:keys [theme]}]
(def view
(let [edited-account-name (reagent/atom nil)
show-confirm-button? (reagent/atom false)
on-change-color (fn [edited-color {:keys [color] :as account}]
(when (not= edited-color color)
(save-account {:account account
:updated-key :color
:new-value edited-color
:theme theme})))
:new-value edited-color})))
on-change-emoji (fn [edited-emoji {:keys [emoji] :as account}]
(when (not= edited-emoji emoji)
(save-account {:account account
:updated-key :emoji
:new-value edited-emoji
:theme theme})))
:new-value edited-emoji})))
on-confirm-name (fn [account]
(rn/dismiss-keyboard!)
(save-account {:account account
:updated-key :name
:new-value @edited-account-name
:theme theme}))]
:new-value @edited-account-name}))]
(fn []
(let [{:keys [name emoji address color] :as account} (rf/sub [:wallet/current-viewing-account])
network-details (rf/sub [:wallet/network-preference-details])
@ -102,8 +95,5 @@
(save-account
{:account account
:updated-key :prod-preferred-chain-ids
:new-value chain-ids
:theme theme}))}])}]))
:new-value chain-ids}))}])}]))
:container-style style/data-item}]]))))
(def view (quo.theme/with-theme view-internal))

4
src/status_im/contexts/wallet/events.cljs
View File

@ -3,7 +3,6 @@
[camel-snake-kebab.core :as csk]
[camel-snake-kebab.extras :as cske]
[clojure.string :as string]
[quo.foundations.colors :as colors]
[react-native.background-timer :as background-timer]
[status-im.common.data-store.wallet :as data-store]
[status-im.contexts.wallet.item-types :as item-types]
@ -24,8 +23,7 @@
:fx [[:dispatch
[:toasts/upsert
{:id :new-wallet-account-created
:icon :i/correct
:icon-color colors/success-50
:type :positive
:text (i18n/label :t/account-created {:name (:name account)})}]]]})))
(rf/reg-event-fx :wallet/navigate-to-account