Skip to content

Commit

Permalink
feat: improve toast style
Browse files Browse the repository at this point in the history
Signed-off-by: Innei <tukon479@gmail.com>
  • Loading branch information
Innei committed Aug 28, 2022
1 parent 6a8dae8 commit efbab23
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 10 deletions.
56 changes: 54 additions & 2 deletions src/assets/styles/extra.css
Original file line number Diff line number Diff line change
Expand Up @@ -437,8 +437,12 @@ pre[class*='language-'] {
.Toastify {
position: fixed;
z-index: 99;
top: 12px;
right: 12px;
top: 60px;
right: 0;
width: 100%;
}
.Toastify__toast-container {
width: 100%;
}

.Toastify--animate {
Expand All @@ -460,6 +464,54 @@ pre[class*='language-'] {
animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-enter--top-center {
animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-exit--top-center {
animation-name: Toastify__bounceOutUp;
}
@keyframes Toastify__bounceOutUp {
20% {
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
@keyframes Toastify__bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}

@keyframes Toastify__trackProgress {
0% {
transform: scaleX(1);
Expand Down
13 changes: 9 additions & 4 deletions src/components/widgets/Toast/card.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { observer } from 'mobx-react-lite'
import type { FC } from 'react'
import { memo, useRef } from 'react'
import { useRef } from 'react'

import { ImpressionView } from '~/components/biz/ImpressionView'
import { Avatar } from '~/components/universal/Avatar'
Expand All @@ -13,8 +14,9 @@ export const ToastCard: FC<{
description?: string
text?: string
avatar?: string
}> = memo((props) => {
const { userStore } = store
}> = observer((props) => {
const { userStore, appStore } = store
const isPadOrMobile = appStore.isPadOrMobile
const { seo } = useInitialData()
const { description, text, title = seo.title } = props
const date = useRef(new Date())
Expand All @@ -26,7 +28,10 @@ export const ToastCard: FC<{
className="relative flex space-x-4 items-center p-4 w-full text-[12px] bg-bg-opacity overflow-hidden
text-inherit border border-shallow border-opacity-50
rounded-xl backdrop-filter backdrop-brightness-150 backdrop-brightness-110 backdrop-saturate-150 backdrop-blur-md
select-none cursor-pointer mb-4"
select-none cursor-pointer mb-4 mr-4 box-border ml-auto"
style={{
width: isPadOrMobile ? 'calc(100% - 16px - 16px)' : '350px',
}}
>
<div className="flex-shrink-0">
<Avatar
Expand Down
3 changes: 0 additions & 3 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,6 @@ const Wrapper = memo((props) => {
closeButton: false,
toastClassName: () => '',
bodyClassName: () => '',
style: {
width: 350,
},
})
return (
<>
Expand Down
2 changes: 1 addition & 1 deletion src/utils/notice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export class Notice {
React.createElement(ToastCard, { text, title, description, avatar }),
{
autoClose: duration,

position: store.appUIStore.isPadOrMobile ? 'top-center' : 'top-right',
onClick(e) {
onClick?.(e.nativeEvent)
},
Expand Down

0 comments on commit efbab23

Please sign in to comment.