diff --git a/src/app/atoms/tooltip/Tooltip.jsx b/src/app/atoms/tooltip/Tooltip.jsx index 131c6869..0f9067f5 100644 --- a/src/app/atoms/tooltip/Tooltip.jsx +++ b/src/app/atoms/tooltip/Tooltip.jsx @@ -4,7 +4,7 @@ import './Tooltip.scss'; import Tippy from '@tippyjs/react'; function Tooltip({ - className, placement, content, children, + className, placement, content, delay, children, }) { return ( {children} @@ -25,12 +25,14 @@ function Tooltip({ Tooltip.defaultProps = { placement: 'top', className: '', + delay: [200, 0], }; Tooltip.propTypes = { className: PropTypes.string, placement: PropTypes.string, content: PropTypes.node.isRequired, + delay: PropTypes.arrayOf(PropTypes.number), children: PropTypes.node.isRequired, }; diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss index 3f445dfd..ecb38128 100644 --- a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss +++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss @@ -14,6 +14,16 @@ margin: 0 !important; } + & .avatar-container, + & .notification-badge { + transition: transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97); + } + &:hover .avatar-container { + transform: translateX(4px) + } + &:hover .notification-badge { + transform: translate(calc(20% + 4px), -20%); + } &:focus { outline: none; } @@ -33,7 +43,7 @@ width: 3px; height: 12px; - background-color: var(--ic-surface-normal); + background-color: var(--tc-surface-high); border-radius: 0 4px 4px 0; transition: height 200ms linear; diff --git a/src/app/organisms/navigation/SideBar.jsx b/src/app/organisms/navigation/SideBar.jsx index b93a6b52..3be5e195 100644 --- a/src/app/organisms/navigation/SideBar.jsx +++ b/src/app/organisms/navigation/SideBar.jsx @@ -175,7 +175,6 @@ function SideBar() { notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0} isAlert={dmsNoti?.highlight > 0} /> - openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />