From cd39b7b8066970b581a5c0b02b1f4c5373ee8b49 Mon Sep 17 00:00:00 2001 From: Untone Date: Wed, 9 Oct 2024 18:55:45 +0300 Subject: [PATCH] unfix --- package-lock.json | 52 ++++++++++++++++- package.json | 5 +- src/components/Snackbar/Snackbar.module.scss | 59 ++++++++++---------- src/components/Snackbar/Snackbar.tsx | 35 ++++++------ 4 files changed, 98 insertions(+), 53 deletions(-) diff --git a/package-lock.json b/package-lock.json index 25d76440..2cd1404e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,7 @@ "dependencies": { "form-data": "^4.0.0", "idb": "^8.0.0", - "mailgun.js": "^10.2.3", - "solid-popper": "0.3.0" + "mailgun.js": "^10.2.3" }, "devDependencies": { "@authorizerdev/authorizer-js": "^2.0.3", @@ -98,7 +97,9 @@ "prosemirror-view": "^1.34.3", "sass": "^1.79.4", "solid-js": "^1.9.2", + "solid-popper": "^0.3.0", "solid-tiptap": "0.7.0", + "solid-transition-group": "^0.2.3", "storybook": "^8.3.5", "storybook-addon-sass-postcss": "^0.3.2", "storybook-solidjs": "^1.0.0-beta.2", @@ -4870,6 +4871,7 @@ "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "dev": true, "license": "MIT", "funding": { "type": "opencollective", @@ -5459,6 +5461,19 @@ "solid-js": "^1.6.12" } }, + "node_modules/@solid-primitives/refs": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@solid-primitives/refs/-/refs-1.0.8.tgz", + "integrity": "sha512-+jIsWG8/nYvhaCoG2Vg6CJOLgTmPKFbaCrNQKWfChalgUf9WrVxWw0CdJb3yX15n5lUcQ0jBo6qYtuVVmBLpBw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@solid-primitives/utils": "^6.2.3" + }, + "peerDependencies": { + "solid-js": "^1.6.12" + } + }, "node_modules/@solid-primitives/rootless": { "version": "1.4.5", "resolved": "https://registry.npmjs.org/@solid-primitives/rootless/-/rootless-1.4.5.tgz", @@ -5537,6 +5552,16 @@ } } }, + "node_modules/@solid-primitives/transition-group": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@solid-primitives/transition-group/-/transition-group-1.0.5.tgz", + "integrity": "sha512-G3FuqvL13kQ55WzWPX2ewiXdZ/1iboiX53195sq7bbkDbXqP6TYKiadwEdsaDogW5rPnPYAym3+xnsNplQJRKQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "solid-js": "^1.6.12" + } + }, "node_modules/@solid-primitives/upload": { "version": "0.0.117", "resolved": "https://registry.npmjs.org/@solid-primitives/upload/-/upload-0.0.117.tgz", @@ -11091,6 +11116,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true, "license": "MIT" }, "node_modules/cwd": { @@ -22350,6 +22376,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.1.1.tgz", "integrity": "sha512-rqEO6FZk8mv7Hyv4UCj3FD3b6Waqft605TLfsCe/BiaylRpyyMC0b+uA5TJKawX3KzMrdi3wsLbCaLplrQmBvQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=10" @@ -22359,6 +22386,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.1.1.tgz", "integrity": "sha512-qNSy1+nUj7hsCOon7AO4wdAIo9P0jrzAMp18XhiOzA6/uO5TKtP7ScozVJ8T293oRIvi5wyCHSM4TrJo/c/GJA==", + "dev": true, "license": "MIT", "engines": { "node": ">=10" @@ -22601,6 +22629,7 @@ "version": "1.9.2", "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.2.tgz", "integrity": "sha512-fe/K03nV+kMFJYhAOE8AIQHcGxB4rMIEoEyrulbtmf217NffbbwBqJnJI4ovt16e+kaIt0czE2WA7mP/pYN9yg==", + "dev": true, "license": "MIT", "dependencies": { "csstype": "^3.1.0", @@ -22612,6 +22641,7 @@ "version": "0.3.0", "resolved": "https://registry.npmjs.org/solid-popper/-/solid-popper-0.3.0.tgz", "integrity": "sha512-XlfEWAyxGGqFgg/uRpF+BemSfCqjbLA8p6fToDa+6v3paw3eBQj0TU08aBOIj2VeigaEiz8ZTlDx1eBLVRivBg==", + "dev": true, "license": "MIT", "engines": { "node": ">=10" @@ -22651,6 +22681,24 @@ "solid-js": "^1.7" } }, + "node_modules/solid-transition-group": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/solid-transition-group/-/solid-transition-group-0.2.3.tgz", + "integrity": "sha512-iB72c9N5Kz9ykRqIXl0lQohOau4t0dhel9kjwFvx81UZJbVwaChMuBuyhiZmK24b8aKEK0w3uFM96ZxzcyZGdg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@solid-primitives/refs": "^1.0.5", + "@solid-primitives/transition-group": "^1.0.2" + }, + "engines": { + "node": ">=18.0.0", + "pnpm": ">=8.6.0" + }, + "peerDependencies": { + "solid-js": "^1.6.12" + } + }, "node_modules/solid-use": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/solid-use/-/solid-use-0.9.0.tgz", diff --git a/package.json b/package.json index b3d10bc9..d195cd13 100644 --- a/package.json +++ b/package.json @@ -105,6 +105,8 @@ "sass": "^1.79.4", "solid-js": "^1.9.2", "solid-tiptap": "0.7.0", + "solid-transition-group": "^0.2.3", + "solid-popper": "^0.3.0", "storybook": "^8.3.5", "storybook-addon-sass-postcss": "^0.3.2", "storybook-solidjs": "^1.0.0-beta.2", @@ -140,7 +142,6 @@ "dependencies": { "form-data": "^4.0.0", "idb": "^8.0.0", - "mailgun.js": "^10.2.3", - "solid-popper": "0.3.0" + "mailgun.js": "^10.2.3" } } diff --git a/src/components/Snackbar/Snackbar.module.scss b/src/components/Snackbar/Snackbar.module.scss index 612e60bc..49a7337d 100644 --- a/src/components/Snackbar/Snackbar.module.scss +++ b/src/components/Snackbar/Snackbar.module.scss @@ -1,40 +1,39 @@ .snackbar { - position: fixed; - bottom: 20px; - left: 50%; - transform: translateX(-50%) translateY(100%); - opacity: 0; - transition: transform 0.3s ease-out, opacity 0.3s ease-out; - z-index: 1000; - - &.show { - transform: translateX(-50%) translateY(0); - opacity: 1; + background-color: var(--default-color); + color: #fff; + font-size: 2rem; + font-weight: 500; + left: 0; + transition: background-color 0.3s; + position: absolute; + width: 100%; + + &.error { + background-color: #d00820; + } + + &.success { + .icon { + height: 1.8em; + margin-right: 0.5em; + margin-top: 0.1em; + width: 1.8em; + } } } .content { + transition: + height 0.3s, + color 0.3s; + height: 60px; display: flex; align-items: center; - padding: 12px 16px; - border-radius: 4px; - background-color: #333; - color: #fff; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); -} + justify-content: center; -.error { - .content { - background-color: #d32f2f; + &.enter, + &.exitTo { + height: 0; + color: transparent; } } - -.success { - .content { - background-color: #43a047; - } -} - -.icon { - margin-right: 8px; -} diff --git a/src/components/Snackbar/Snackbar.tsx b/src/components/Snackbar/Snackbar.tsx index 1742f29e..f0e76603 100644 --- a/src/components/Snackbar/Snackbar.tsx +++ b/src/components/Snackbar/Snackbar.tsx @@ -1,5 +1,6 @@ import { clsx } from 'clsx' -import { Show, createEffect } from 'solid-js' +import { Show } from 'solid-js' +import { Transition } from 'solid-transition-group' import { useSnackbar } from '~/context/ui' import { Icon } from '../_shared/Icon' @@ -9,33 +10,29 @@ import styles from './Snackbar.module.scss' export const Snackbar = () => { const { snackbarMessage } = useSnackbar() - let snackbarRef: HTMLDivElement | undefined - - createEffect(() => { - if (snackbarMessage()?.body) { - snackbarRef?.classList.add(styles.show) - } else { - snackbarRef?.classList.remove(styles.show) - } - }) return (
- -
- - - - {snackbarMessage()?.body || ''} -
- + setTimeout(() => done(), 300)} + > + +
+ + + + {snackbarMessage()?.body || ''} +
+ +
)