Commit2b59cfa

authored

refactor: add nice enter animation for notification badge (#17119)

1 parent5bd2a3f commit2b59cfaCopy full SHA for 2b59cfa

File tree

-2

lines changed

site/src/modules/notifications/NotificationsInbox
- InboxButton.tsx
- UnreadBadge.tsx

-2

lines changed

Lines changed: 6 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import{Button,typeButtonProps}from"components/Button/Button";`
`2`	`2`	`import{BellIcon}from"lucide-react";`
`3`	`3`	`import{forwardRef}from"react";`
	`4`	`+import{cn}from"utils/cn";`
`4`	`5`	`import{UnreadBadge}from"./UnreadBadge";`
`5`	`6`
`6`	`7`	`typeInboxButtonProps={`
`@@ -21,7 +22,11 @@ export const InboxButton = forwardRef<HTMLButtonElement, InboxButtonProps>(`
`21`	`22`	`{unreadCount>0&&(`
`22`	`23`	`<UnreadBadge`
`23`	`24`	`count={unreadCount}`
`24`		`-className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2"`
	`25`	`+className={cn([`
	`26`	`+"[--offset:calc(var(--unread-badge-size)/2)]",`
	`27`	`+"absolute top-0 right-0 -mr-[--offset] -mt-[--offset]",`
	`28`	`+"animate-in fade-in zoom-in duration-200",`
	`29`	`+])}`
`25`	`30`	`/>`
`26`	`31`	`)}`
`27`	`32`	`</Button>`

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,8 @@ export const UnreadBadge: FC<UnreadBadgeProps> = ({`
`13`	`13`	`return(`
`14`	`14`	`<span`
`15`	`15`	`className={cn([`
`16`		`-"flex min-w-[18px] h-[18px] w-fit px-1 rounded text-2xs items-center justify-center",`
	`16`	`+"[--unread-badge-size:18px] min-w-[--unread-badge-size] h-[--unread-badge-size]",`
	`17`	`+"flex w-fit px-1 rounded text-2xs items-center justify-center",`
`17`	`18`	`"bg-surface-sky text-highlight-sky",`
`18`	`19`	`className,`
`19`	`20`	`])}`

Comments

(0)