fix: sooner style

This commit is contained in:
molvqingtai 2024-11-04 06:01:25 +08:00
parent 44f395663f
commit 7e49ec210e
10 changed files with 93 additions and 76 deletions

View file

@ -86,7 +86,7 @@
"remesh-logger": "^4.1.0",
"remesh-react": "^4.1.2",
"rxjs": "^7.8.1",
"sonner": "^1.6.1",
"sonner": "^1.7.0",
"tailwind-merge": "^2.5.4",
"trystero": "^0.20.0",
"type-fest": "^4.26.1",
@ -104,7 +104,7 @@
"@types/eslint": "^9.6.1",
"@types/eslint__js": "^8.42.3",
"@types/eslint-plugin-tailwindcss": "^3.17.0",
"@types/node": "^22.8.6",
"@types/node": "^22.8.7",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@typescript-eslint/parser": "^8.12.2",

View file

@ -135,8 +135,8 @@ importers:
specifier: ^7.8.1
version: 7.8.1
sonner:
specifier: ^1.6.1
version: 1.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
specifier: ^1.7.0
version: 1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
tailwind-merge:
specifier: ^2.5.4
version: 2.5.4
@ -155,7 +155,7 @@ importers:
devDependencies:
'@commitlint/cli':
specifier: ^19.5.0
version: 19.5.0(@types/node@22.8.6)(typescript@5.6.3)
version: 19.5.0(@types/node@22.8.7)(typescript@5.6.3)
'@commitlint/config-conventional':
specifier: ^19.5.0
version: 19.5.0
@ -184,8 +184,8 @@ importers:
specifier: ^8.42.3
version: 8.42.3
'@types/node':
specifier: ^22.8.6
version: 22.8.6
specifier: ^22.8.7
version: 22.8.7
'@types/react':
specifier: ^18.3.12
version: 18.3.12
@ -197,7 +197,7 @@ importers:
version: 8.12.2(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3)
'@vitejs/plugin-react':
specifier: ^4.3.3
version: 4.3.3(vite@5.4.10(@types/node@22.8.6))
version: 4.3.3(vite@5.4.10(@types/node@22.8.7))
autoprefixer:
specifier: ^10.4.20
version: 10.4.20(postcss@8.4.47)
@ -260,13 +260,13 @@ importers:
version: 8.12.2(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3)
vite-plugin-svgr:
specifier: ^4.3.0
version: 4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6))
version: 4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.7))
webext-bridge:
specifier: ^6.0.1
version: 6.0.1
wxt:
specifier: ^0.19.13
version: 0.19.13(@types/node@22.8.6)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4)
version: 0.19.13(@types/node@22.8.7)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4)
packages:
@ -2002,8 +2002,8 @@ packages:
'@types/murmurhash3js-revisited@3.0.3':
resolution: {integrity: sha512-QvlqvYtGBYIDeO8dFdY4djkRubcrc+yTJtBc7n8VZPlJDUS/00A+PssbvERM8f9bYRmcaSEHPZgZojeQj7kzAA==}
'@types/node@22.8.6':
resolution: {integrity: sha512-tosuJYKrIqjQIlVCM4PEGxOmyg3FCPa/fViuJChnGeEIhjA46oy8FMVoF9su1/v8PNs2a8Q0iFNyOx0uOF91nw==}
'@types/node@22.8.7':
resolution: {integrity: sha512-LidcG+2UeYIWcMuMUpBKOnryBWG/rnmOHQR5apjn8myTQcx3rinFRn7DcIFhMnS0PPFSC6OafdIKEad0lj6U0Q==}
'@types/normalize-package-data@2.4.4':
resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@ -5844,8 +5844,8 @@ packages:
resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
engines: {node: '>=10.0.0'}
sonner@1.6.1:
resolution: {integrity: sha512-0iD+eDJHyJitl069BC6wVDykQD56FMKk4TD6XkcCcikcDYaGsFKlSU0mZQXYWKPpFof3jlV/u4vGZc2KCqz8OQ==}
sonner@1.7.0:
resolution: {integrity: sha512-W6dH7m5MujEPyug3lpI2l3TC3Pp1+LTgK0Efg+IHDrBbtEjyCmCHHo6yfNBOsf1tFZ6zf+jceWwB38baC8yO9g==}
peerDependencies:
react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
@ -6935,11 +6935,11 @@ snapshots:
'@colors/colors@1.5.0':
optional: true
'@commitlint/cli@19.5.0(@types/node@22.8.6)(typescript@5.6.3)':
'@commitlint/cli@19.5.0(@types/node@22.8.7)(typescript@5.6.3)':
dependencies:
'@commitlint/format': 19.5.0
'@commitlint/lint': 19.5.0
'@commitlint/load': 19.5.0(@types/node@22.8.6)(typescript@5.6.3)
'@commitlint/load': 19.5.0(@types/node@22.8.7)(typescript@5.6.3)
'@commitlint/read': 19.5.0
'@commitlint/types': 19.5.0
tinyexec: 0.3.0
@ -6986,7 +6986,7 @@ snapshots:
'@commitlint/rules': 19.5.0
'@commitlint/types': 19.5.0
'@commitlint/load@19.5.0(@types/node@22.8.6)(typescript@5.6.3)':
'@commitlint/load@19.5.0(@types/node@22.8.7)(typescript@5.6.3)':
dependencies:
'@commitlint/config-validator': 19.5.0
'@commitlint/execute-rule': 19.5.0
@ -6994,7 +6994,7 @@ snapshots:
'@commitlint/types': 19.5.0
chalk: 5.3.0
cosmiconfig: 9.0.0(typescript@5.6.3)
cosmiconfig-typescript-loader: 5.0.0(@types/node@22.8.6)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3)
cosmiconfig-typescript-loader: 5.0.0(@types/node@22.8.7)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3)
lodash.isplainobject: 4.0.6
lodash.merge: 4.6.2
lodash.uniq: 4.5.0
@ -7622,7 +7622,7 @@ snapshots:
'@grpc/grpc-js@1.9.15':
dependencies:
'@grpc/proto-loader': 0.7.13
'@types/node': 22.8.6
'@types/node': 22.8.7
'@grpc/proto-loader@0.7.13':
dependencies:
@ -8840,7 +8840,7 @@ snapshots:
'@types/conventional-commits-parser@5.0.0':
dependencies:
'@types/node': 22.8.6
'@types/node': 22.8.7
'@types/debug@4.1.12':
dependencies:
@ -8848,7 +8848,7 @@ snapshots:
'@types/dns-packet@5.6.5':
dependencies:
'@types/node': 22.8.6
'@types/node': 22.8.7
'@types/eslint-plugin-tailwindcss@3.17.0':
dependencies:
@ -8899,7 +8899,7 @@ snapshots:
'@types/murmurhash3js-revisited@3.0.3': {}
'@types/node@22.8.6':
'@types/node@22.8.7':
dependencies:
undici-types: 6.19.8
@ -8920,7 +8920,7 @@ snapshots:
'@types/readable-stream@4.0.15':
dependencies:
'@types/node': 22.8.6
'@types/node': 22.8.7
safe-buffer: 5.1.2
'@types/semver@7.5.8': {}
@ -8935,11 +8935,11 @@ snapshots:
'@types/ws@8.5.12':
dependencies:
'@types/node': 22.8.6
'@types/node': 22.8.7
'@types/yauzl@2.10.3':
dependencies:
'@types/node': 22.8.6
'@types/node': 22.8.7
optional: true
'@typescript-eslint/eslint-plugin@8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3))(eslint@9.14.0(jiti@2.4.0))(typescript@5.6.3)':
@ -9075,14 +9075,14 @@ snapshots:
'@ungap/structured-clone@1.2.0': {}
'@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.8.6))':
'@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.8.7))':
dependencies:
'@babel/core': 7.25.2
'@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.25.2)
'@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.25.2)
'@types/babel__core': 7.20.5
react-refresh: 0.14.2
vite: 5.4.10(@types/node@22.8.6)
vite: 5.4.10(@types/node@22.8.7)
transitivePeerDependencies:
- supports-color
@ -9612,7 +9612,7 @@ snapshots:
chrome-launcher@1.1.0:
dependencies:
'@types/node': 22.8.6
'@types/node': 22.8.7
escape-string-regexp: 4.0.0
is-wsl: 2.2.0
lighthouse-logger: 2.0.1
@ -9804,9 +9804,9 @@ snapshots:
core-util-is@1.0.3: {}
cosmiconfig-typescript-loader@5.0.0(@types/node@22.8.6)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3):
cosmiconfig-typescript-loader@5.0.0(@types/node@22.8.7)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3):
dependencies:
'@types/node': 22.8.6
'@types/node': 22.8.7
cosmiconfig: 9.0.0(typescript@5.6.3)
jiti: 1.21.6
typescript: 5.6.3
@ -12760,7 +12760,7 @@ snapshots:
'@protobufjs/path': 1.1.2
'@protobufjs/pool': 1.1.0
'@protobufjs/utf8': 1.1.0
'@types/node': 22.8.6
'@types/node': 22.8.7
long: 5.2.3
protons-runtime@5.5.0:
@ -13346,7 +13346,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
sonner@1.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
sonner@1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
@ -14035,12 +14035,12 @@ snapshots:
'@types/unist': 3.0.3
vfile-message: 4.0.2
vite-node@2.1.3(@types/node@22.8.6):
vite-node@2.1.3(@types/node@22.8.7):
dependencies:
cac: 6.7.14
debug: 4.3.7
pathe: 1.1.2
vite: 5.4.10(@types/node@22.8.6)
vite: 5.4.10(@types/node@22.8.7)
transitivePeerDependencies:
- '@types/node'
- less
@ -14052,24 +14052,24 @@ snapshots:
- supports-color
- terser
vite-plugin-svgr@4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)):
vite-plugin-svgr@4.3.0(rollup@4.21.3)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.7)):
dependencies:
'@rollup/pluginutils': 5.1.3(rollup@4.21.3)
'@svgr/core': 8.1.0(typescript@5.6.3)
'@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.6.3))
vite: 5.4.10(@types/node@22.8.6)
vite: 5.4.10(@types/node@22.8.7)
transitivePeerDependencies:
- rollup
- supports-color
- typescript
vite@5.4.10(@types/node@22.8.6):
vite@5.4.10(@types/node@22.8.7):
dependencies:
esbuild: 0.21.5
postcss: 8.4.47
rollup: 4.21.3
optionalDependencies:
'@types/node': 22.8.6
'@types/node': 22.8.7
fsevents: 2.3.3
watchpack@2.4.1:
@ -14254,7 +14254,7 @@ snapshots:
bufferutil: 4.0.8
utf-8-validate: 6.0.4
wxt@0.19.13(@types/node@22.8.6)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4):
wxt@0.19.13(@types/node@22.8.7)(bufferutil@4.0.8)(rollup@4.21.3)(utf-8-validate@6.0.4):
dependencies:
'@aklinker1/rollup-plugin-visualizer': 5.12.0(rollup@4.21.3)
'@types/chrome': 0.0.269
@ -14297,8 +14297,8 @@ snapshots:
publish-browser-extension: 2.2.2
scule: 1.3.0
unimport: 3.13.1(rollup@4.21.3)
vite: 5.4.10(@types/node@22.8.6)
vite-node: 2.1.3(@types/node@22.8.6)
vite: 5.4.10(@types/node@22.8.7)
vite-node: 2.1.3(@types/node@22.8.7)
web-ext-run: 0.2.1(bufferutil@4.0.8)(utf-8-validate@6.0.4)
webextension-polyfill: 0.12.0
transitivePeerDependencies:

View file

@ -14,7 +14,9 @@ import { ToastImpl } from '@/domain/impls/Toast'
// import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
import '@/assets/styles/tailwind.css'
// Remove import after merging: https://github.com/emilkowalski/sonner/pull/508
import '@/assets/styles/sonner.css'
import '@/assets/styles/overlay.css'
import NotificationDomain from '@/domain/Notification'
import { createElement } from '@/utils'
@ -56,13 +58,13 @@ export default defineContentScript({
container.append(app)
const root = createRoot(app)
root.render(
// <React.StrictMode>
<RemeshRoot store={store}>
<RemeshScope domains={[NotificationDomain()]}>
<App />
</RemeshScope>
</RemeshRoot>
// </React.StrictMode>
<React.StrictMode>
<RemeshRoot store={store}>
<RemeshScope domains={[NotificationDomain()]}>
<App />
</RemeshScope>
</RemeshRoot>
</React.StrictMode>
)
return root
},

View file

@ -18,7 +18,7 @@ import LogoIcon6 from '@/assets/images/logo-6.svg'
import AppStatusDomain from '@/domain/AppStatus'
import { getDay } from 'date-fns'
import { messenger } from '@/messenger'
import useDarg from '@/hooks/useDarg'
import useDraggable from '@/hooks/useDraggable'
import useWindowResize from '@/hooks/useWindowResize'
export interface AppButtonProps {
@ -45,7 +45,7 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
x,
y,
setRef: appButtonRef
} = useDarg({
} = useDraggable({
initX: appPosition.x,
initY: appPosition.y,
minX: 50,

View file

@ -16,7 +16,7 @@ function App() {
<VersionLink></VersionLink>
<Main>
<ProfileForm></ProfileForm>
<Toaster richColors position="top-center" duration={1000000} />
<Toaster richColors position="top-center" />
</Main>
<BadgeList></BadgeList>
</Layout>

View file

@ -0,0 +1,17 @@
section[aria-live='polite'] {
display: contents;
}
:where([data-sonner-toaster]) {
max-width: 300px;
position: absolute;
display: flex;
justify-content: center;
}
:where([data-sonner-toast][data-styled='true']) {
max-width: 300px;
padding: 6px 12px;
border-radius: 9999px;
width: fit-content;
}

View file

@ -61,6 +61,17 @@
list-style: none;
outline: none;
z-index: 999999999;
transition: transform 400ms ease;
}
:where([data-sonner-toaster][data-lifted='true']) {
transform: translateY(-10px);
}
@media (hover: none) and (pointer: coarse) {
:where([data-sonner-toaster][data-lifted='true']) {
transform: none;
}
}
:where([data-sonner-toaster][data-x-position='right']) {
@ -234,7 +245,6 @@
justify-content: center;
align-items: center;
padding: 0;
background: var(--gray1);
color: var(--gray12);
border: 1px solid var(--gray4);
transform: var(--toast-close-button-transform);
@ -247,6 +257,10 @@
border-color 200ms;
}
[data-sonner-toast] [data-close-button] {
background: var(--gray1);
}
:where([data-sonner-toast]) :where([data-close-button]):focus-visible {
box-shadow:
0px 4px 12px rgba(0, 0, 0, 0.1),
@ -359,6 +373,10 @@
transition: none;
}
[data-sonner-toast][data-swiped='true'] {
user-select: none;
}
[data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'],
[data-sonner-toast][data-swipe-out='true'][data-y-position='top'] {
animation: swipe-out 200ms ease-out forwards;
@ -662,26 +680,7 @@
transform 200ms;
}
section:has([data-sonner-toaster]) {
display: contents;
}
.sonner-loader[data-visible='false'] {
opacity: 0;
transform: scale(0.8) translate(-50%, -50%);
}
/* Custom styles */
:where([data-sonner-toaster]) {
max-width: 300px;
position: absolute;
display: flex;
justify-content: center;
}
:where([data-sonner-toast][data-styled='true']) {
max-width: 300px;
padding: 6px 12px;
border-radius: 9999px;
width: fit-content;
}

View file

@ -73,6 +73,7 @@
* {
@apply border-border;
}
:host,
:root {
@apply !bg-background !text-foreground !text-base !visible;

View file

@ -506,7 +506,7 @@ const RoomDomain = Remesh.domain({
impl: ({ get }) => {
const onLeaveRoom$ = fromEventPattern<string>(peerRoom.onLeaveRoom).pipe(
map((peerId) => {
console.log('onLeaveRoom', peerId, get(SelfUserQuery()).peerId)
// console.log('onLeaveRoom', peerId)
const user = get(UserListQuery()).find((user) => user.peerId === peerId)
if (user) {
@ -550,8 +550,6 @@ const RoomDomain = Remesh.domain({
impl: ({ get }) => {
const beforeUnload$ = fromEvent(window, 'beforeunload').pipe(
map(() => {
console.log('beforeunload')
return get(JoinStatusModule.query.IsFinishedQuery()) ? LeaveRoomCommand() : null
})
)

View file

@ -10,7 +10,7 @@ export interface DargOptions {
minY: number
}
const useDarg = (options: DargOptions) => {
const useDraggable = (options: DargOptions) => {
const { initX, initY, maxX = 0, minX = 0, maxY = 0, minY = 0 } = options
const mousePosition = useRef({ x: 0, y: 0 })
@ -91,4 +91,4 @@ const useDarg = (options: DargOptions) => {
return { setRef, ...position }
}
export default useDarg
export default useDraggable