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: toast style (#15144)

This commit is contained in:
yqrashawn 2023-02-22 09:55:21 +08:00 committed by GitHub
parent 1b33aa4988
commit 3fc4c36ac6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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]}]

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

@ -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

16
src/status_im/communities/core.cljs
View File

@ -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

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

@ -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"]])))))