From 2b4851685e31559d92f4cebd493476d37a7f4e4b Mon Sep 17 00:00:00 2001 From: kKaskak <117831817+kKaskak@users.noreply.github.com> Date: Tue, 30 Jan 2024 13:17:06 +0200 Subject: [PATCH 1/4] feature: toasts new design --- src/common/Toast/ToastItem/ToastItem.js | 2 +- src/common/Toast/ToastItem/styles.less | 48 +++++++++++++------------ 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/src/common/Toast/ToastItem/ToastItem.js b/src/common/Toast/ToastItem/ToastItem.js index 869aa224f..f207f8e8e 100644 --- a/src/common/Toast/ToastItem/ToastItem.js +++ b/src/common/Toast/ToastItem/ToastItem.js @@ -17,7 +17,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) => const icon = React.useMemo(() => { return typeof props.icon === 'string' ? props.icon : type === 'success' ? 'checkmark' : - type === 'error' ? 'warning' : + type === 'error' ? 'close' : null; }, [type, props.icon]); const toastOnClick = React.useCallback((event) => { diff --git a/src/common/Toast/ToastItem/styles.less b/src/common/Toast/ToastItem/styles.less index 05bf68ec8..32b8e1dbf 100644 --- a/src/common/Toast/ToastItem/styles.less +++ b/src/common/Toast/ToastItem/styles.less @@ -5,45 +5,42 @@ .toast-item-container { display: flex; flex-direction: row; + align-items: center; width: 25rem; margin-bottom: 1rem; - background-color: @color-surface-light4; overflow: visible; - box-shadow: 0 0.3rem 0.5rem @color-background-dark5-40, - 0 0.6rem 1rem @color-background-dark5-20; + box-shadow: var(--outer-glow); + background-color: var(--modal-background-color); pointer-events: auto; - + border-radius: var(--border-radius); + border: 0.4px solid var(--primary-accent-color); + backdrop-filter: blur(10px); + padding: 0.5rem 1rem; &.success { .icon-container { - background-color: @color-accent3; - .icon { - color: @color-surface-light5-90; + color: @color-accent3; } } } &.error { .icon-container { - background-color: @color-accent2; - .icon { - color: @color-surface-light5-90; + color: var(--color-trakt); } } } .icon-container { - flex: none; - align-self: stretch; - width: 2.5rem; - padding: 0.5rem; + border-radius: 3px; + background-color: var(--overlay-color); .icon { display: block; width: 100%; height: 100%; - color: @color-background-dark5-90; + max-width: 2rem; } } @@ -54,6 +51,7 @@ .title-container { font-size: 1.2rem; + color: var(--primary-foreground-color); &:not(:last-child) { margin-bottom: 0.2rem; @@ -62,25 +60,29 @@ .message-container { font-size: 1.1rem; + color: var(--primary-foreground-color); + opacity: 0.8; } } .close-button-container { - flex: none; - align-self: flex-start; width: 2rem; height: 2rem; margin: 0.2rem; - padding: 0.5rem; - - &:hover { - background-color: @color-surface-light2; - } - + border-radius: 3px; + .icon { display: block; width: 100%; height: 100%; + color: var(--overlay-color); + } + + &:hover { + .icon { + color: var(--primary-foreground-color); + opacity: 0.7; + } } } } \ No newline at end of file From 18db30de9fff0d3a1c0d2a13fb2735faa8c59674 Mon Sep 17 00:00:00 2001 From: kKaskak <117831817+kKaskak@users.noreply.github.com> Date: Tue, 30 Jan 2024 13:41:57 +0200 Subject: [PATCH 2/4] refactor: changed the alignment of items in a toast --- src/common/Toast/ToastItem/styles.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/common/Toast/ToastItem/styles.less b/src/common/Toast/ToastItem/styles.less index 32b8e1dbf..53036689a 100644 --- a/src/common/Toast/ToastItem/styles.less +++ b/src/common/Toast/ToastItem/styles.less @@ -5,7 +5,7 @@ .toast-item-container { display: flex; flex-direction: row; - align-items: center; + align-items: flex-start; width: 25rem; margin-bottom: 1rem; overflow: visible; @@ -15,7 +15,7 @@ border-radius: var(--border-radius); border: 0.4px solid var(--primary-accent-color); backdrop-filter: blur(10px); - padding: 0.5rem 1rem; + padding: 1rem; &.success { .icon-container { .icon { @@ -47,7 +47,7 @@ .info-container { flex: 1; align-self: stretch; - padding: 1rem; + padding: 0 1rem; .title-container { font-size: 1.2rem; @@ -68,14 +68,14 @@ .close-button-container { width: 2rem; height: 2rem; - margin: 0.2rem; border-radius: 3px; .icon { display: block; width: 100%; height: 100%; - color: var(--overlay-color); + color: var(--primary-accent-color); + opacity: 0.3; } &:hover { From a2da36be8cf9c5f1be76529f193541a0ae8d4d0c Mon Sep 17 00:00:00 2001 From: kKaskak <117831817+kKaskak@users.noreply.github.com> Date: Tue, 30 Jan 2024 13:46:14 +0200 Subject: [PATCH 3/4] refactor: add padding to the top of info-container --- src/common/Toast/ToastItem/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/Toast/ToastItem/styles.less b/src/common/Toast/ToastItem/styles.less index 53036689a..5c4ac7d2f 100644 --- a/src/common/Toast/ToastItem/styles.less +++ b/src/common/Toast/ToastItem/styles.less @@ -47,7 +47,7 @@ .info-container { flex: 1; align-self: stretch; - padding: 0 1rem; + padding: 0.1rem 1rem; .title-container { font-size: 1.2rem; From a4fb719dc6d9f0fc8979b030ca48f256dd76b2b7 Mon Sep 17 00:00:00 2001 From: kKaskak <117831817+kKaskak@users.noreply.github.com> Date: Tue, 30 Jan 2024 13:53:03 +0200 Subject: [PATCH 4/4] fix: off-center info-container --- src/common/Toast/ToastItem/styles.less | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/common/Toast/ToastItem/styles.less b/src/common/Toast/ToastItem/styles.less index 5c4ac7d2f..bd35680ea 100644 --- a/src/common/Toast/ToastItem/styles.less +++ b/src/common/Toast/ToastItem/styles.less @@ -47,7 +47,7 @@ .info-container { flex: 1; align-self: stretch; - padding: 0.1rem 1rem; + padding: 0.2rem 1rem; .title-container { font-size: 1.2rem; @@ -74,14 +74,13 @@ display: block; width: 100%; height: 100%; - color: var(--primary-accent-color); - opacity: 0.3; + color: var(--primary-foreground-color); + opacity: 0.4; } &:hover { .icon { - color: var(--primary-foreground-color); - opacity: 0.7; + opacity: 1; } } }