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)) :else 0))
(def ^:private themes (def ^:private themes
{:color {:light colors/neutral-80-opa-40 {:color {:dark colors/neutral-80-opa-40
:dark colors/white-opa-40}}) :light colors/white-opa-40}})
(defn circle-timer (defn circle-timer
[{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}] [{: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 (ns quo2.components.notifications.toast
(:require [utils.i18n :as i18n] (:require [quo2.components.icon :as icon]
[quo2.components.icon :as icon]
[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.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.foundations.shadows :as shadows]
[quo2.theme :as theme] [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 (def ^:private themes
{:container {:dark {:background-color colors/white-opa-70} {: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} :title {:dark {:color colors/neutral-100}
:light {:color colors/white}} :light {:color colors/white}}
:text {:dark {:color colors/neutral-100} :text {:dark {:color colors/neutral-100}
:light {:color colors/white}} :light {:color colors/white}}
:icon {:dark {:color colors/neutral-100} :icon {:dark {:color colors/neutral-100}
:light {:color colors/white}} :light {:color colors/white}}
:action-container {:dark {:background-color :colors/neutral-80-opa-5} :action-container {:dark {:background-color colors/neutral-80-opa-5}
:light {:background-color :colors/white-opa-5}}}) :light {:background-color colors/white-opa-5}}})
(defn- merge-theme-style (defn- merge-theme-style
[component-key styles override-theme] [component-key styles override-theme]
@ -55,17 +57,23 @@
(defn- toast-container (defn- toast-container
[{:keys [left title text right container-style override-theme]}] [{: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 {:padding-left 12 :padding-right 12} container-style)}
[rn/view [blur/view
{:style (merge-theme-style :container {:style (merge-theme-style :container
{:flex-direction :row (merge
:width "100%" (:shadow-1 shadows/normal-scale)
:margin :auto {:flex-direction :row
:justify-content :space-between :flex 1
:padding-vertical 8 :margin :auto
:padding-left 10 :justify-content :space-between
:padding-right 8 :padding-vertical 8
:border-radius 12} :padding-left 10
override-theme)} :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 2}} left]
[rn/view {:style {:padding 4 :flex 1}} [rn/view {:style {:padding 4 :flex 1}}
(when title (when title

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

@ -4,17 +4,17 @@
[clojure.walk :as walk] [clojure.walk :as walk]
[quo.design-system.colors :as colors] [quo.design-system.colors :as colors]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[utils.i18n :as i18n]
[status-im.async-storage.core :as async-storage] [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] [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-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.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] [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) (def crop-size 1000)
@ -115,7 +115,7 @@
(let [community-name (aget response-js "communities" 0 "name")] (let [community-name (aget response-js "communities" 0 "name")]
(rf/merge cofx (rf/merge cofx
(handle-response cofx response-js) (handle-response cofx response-js)
(toasts/upsert {:icon :placeholder (toasts/upsert {:icon :correct
:icon-color (:positive-01 @colors/theme) :icon-color (:positive-01 @colors/theme)
:text (i18n/label :t/left-community {:community community-name})}) :text (i18n/label :t/left-community {:community community-name})})
(navigation/navigate-back) (navigation/navigate-back)
@ -128,7 +128,7 @@
community-name (aget response-js "communities" 0 "name")] community-name (aget response-js "communities" 0 "name")]
(rf/merge cofx (rf/merge cofx
(handle-response cofx response-js) (handle-response cofx response-js)
(toasts/upsert {:icon :placeholder (toasts/upsert {:icon :correct
:icon-color (:positive-01 @colors/theme) :icon-color (:positive-01 @colors/theme)
:text (i18n/label (if (= event-name ::joined) :text (i18n/label (if (= event-name ::joined)
:t/joined-community :t/joined-community

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

@ -22,7 +22,7 @@
[] []
[toast-button [toast-button
"Toast: basic" "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 (defn toast-button-with-undo-action
[] []
@ -35,8 +35,8 @@
:undo-duration 4 :undo-duration 4
:undo-on-press #(do :undo-on-press #(do
(rf/dispatch [:toasts/upsert (rf/dispatch [:toasts/upsert
{:icon :placeholder {:icon :correct
:icon-color "green" :icon-color colors/success-50-opa-40
:text "Undo pressed"}]) :text "Undo pressed"}])
(rf/dispatch [:toasts/close (rf/dispatch [:toasts/close
"Toast: with undo action"]))}]) "Toast: with undo action"]))}])
@ -45,8 +45,8 @@
[] []
[toast-button [toast-button
"Toast: multiline" "Toast: multiline"
{:icon :placeholder {:icon :correct
:icon-color "green" :icon-color colors/success-50-opa-40
:text :text
"This is an example multiline toast This is an example multiline toast This is an example multiline toast" "This is an example multiline toast This is an example multiline toast This is an example multiline toast"
:undo-duration 4 :undo-duration 4
@ -54,15 +54,15 @@
#(do #(do
(rf/dispatch (rf/dispatch
[:toasts/upsert [: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"]))}]) (rf/dispatch [:toasts/close "Toast: with undo action"]))}])
(defn toast-button-30s-duration (defn toast-button-30s-duration
[] []
[toast-button [toast-button
"Toast: 30s duration" "Toast: 30s duration"
{:icon :placeholder {:icon :correct
:icon-color "green" :icon-color colors/success-50-opa-40
:text "This is an example toast" :text "This is an example toast"
:duration 30000}]) :duration 30000}])
@ -79,8 +79,8 @@
#(rf/dispatch #(rf/dispatch
[:toasts/upsert [:toasts/upsert
{:id "Toast: 30s duration" {:id "Toast: 30s duration"
:icon :placeholder :icon :info
:icon-color "red" :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}])}
"update above toast"]]))))) "update above toast"]])))))