From 75b441e7cbfeef38f516fe4cdb0605108994f3c9 Mon Sep 17 00:00:00 2001 From: Rafael Date: Mon, 20 Dec 2021 09:38:12 -0300 Subject: [PATCH] Add Tooltips to header buttons and replace reach/ui --- ui/component/channelStakedIndicator/view.jsx | 2 +- ui/component/comment/view.jsx | 4 +-- ui/component/common/tooltip.jsx | 24 +++++++++++---- ui/component/header/view.jsx | 18 +++++++---- ui/component/headerMenuButtons/view.jsx | 25 +++++++--------- .../headerNotificationButton/view.jsx | 19 ++++++------ ui/component/livestreamComment/view.jsx | 6 ++-- ui/component/livestreamComments/view.jsx | 2 +- ui/scss/component/_channel.scss | 11 ------- ui/scss/component/_tooltip.scss | 30 ++++++++++++++----- ui/scss/themes/dark.scss | 1 + 11 files changed, 82 insertions(+), 60 deletions(-) diff --git a/ui/component/channelStakedIndicator/view.jsx b/ui/component/channelStakedIndicator/view.jsx index fb6ba849f..0f4b503dd 100644 --- a/ui/component/channelStakedIndicator/view.jsx +++ b/ui/component/channelStakedIndicator/view.jsx @@ -41,7 +41,7 @@ function ChannelStakedIndicator(props: Props) { return ( SIMPLE_SITE && (
diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index 8b7cf3302..ef8c62469 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -250,7 +250,7 @@ function Comment(props: Props) {
{isGlobalMod && ( - + @@ -258,7 +258,7 @@ function Comment(props: Props) { )} {isModerator && ( - + diff --git a/ui/component/common/tooltip.jsx b/ui/component/common/tooltip.jsx index fd06493ab..11753e539 100644 --- a/ui/component/common/tooltip.jsx +++ b/ui/component/common/tooltip.jsx @@ -1,18 +1,30 @@ // @flow -import type { Node } from 'react'; import React from 'react'; -import ReachTooltip from '@reach/tooltip'; -// import '@reach/tooltip/styles.css'; --> 'scss/third-party.scss' +import MUITooltip from '@mui/material/Tooltip'; +import type { Node } from 'react'; type Props = { - label: string | Node, + arrow?: boolean, children: Node, + disableInteractive?: boolean, + enterDelay?: number, + title?: string | Node, }; function Tooltip(props: Props) { - const { children, label } = props; + const { arrow = true, children, disableInteractive = true, enterDelay = 300, title } = props; - return {children}; + return ( + + {children} + + ); } export default Tooltip; diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index 032715e00..ca51d8fb5 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -11,6 +11,7 @@ import Logo from 'component/logo'; import NotificationBubble from 'component/notificationBubble'; import React from 'react'; import SkipNavigationButton from 'component/skipNavigationButton'; +import Tooltip from 'component/common/tooltip'; import WunderBar from 'component/wunderbar'; type Props = { @@ -124,17 +125,22 @@ const Header = (props: Props) => {
{authenticated ? ( <> -
+ diff --git a/ui/component/headerMenuButtons/view.jsx b/ui/component/headerMenuButtons/view.jsx index 61f797451..34a720fae 100644 --- a/ui/component/headerMenuButtons/view.jsx +++ b/ui/component/headerMenuButtons/view.jsx @@ -7,6 +7,7 @@ import HeaderMenuLink from 'component/common/header-menu-link'; import Icon from 'component/common/icon'; import NotificationHeaderButton from 'component/headerNotificationButton'; import React from 'react'; +import Tooltip from 'component/common/tooltip'; type HeaderMenuButtonProps = { activeChannelStakedLevel: number, @@ -39,13 +40,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
{authenticated && ( - - - + + + + + @@ -59,13 +58,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) { {notificationsEnabled && } - - - + + + + + diff --git a/ui/component/headerNotificationButton/view.jsx b/ui/component/headerNotificationButton/view.jsx index eb1f99e3c..06c0ce9f8 100644 --- a/ui/component/headerNotificationButton/view.jsx +++ b/ui/component/headerNotificationButton/view.jsx @@ -7,6 +7,7 @@ import Button from 'component/button'; import Icon from 'component/common/icon'; import NotificationBubble from 'component/notificationBubble'; import React from 'react'; +import Tooltip from 'component/common/tooltip'; type Props = { unseenCount: number, @@ -28,14 +29,14 @@ export default function NotificationHeaderButton(props: Props) { if (!notificationsEnabled) return null; return ( - + + + ); } diff --git a/ui/component/livestreamComment/view.jsx b/ui/component/livestreamComment/view.jsx index 0ffa67d0b..8e43e5345 100644 --- a/ui/component/livestreamComment/view.jsx +++ b/ui/component/livestreamComment/view.jsx @@ -71,7 +71,7 @@ function LivestreamComment(props: Props) { })} > {isGlobalMod && ( - + @@ -79,7 +79,7 @@ function LivestreamComment(props: Props) { )} {isModerator && ( - + @@ -87,7 +87,7 @@ function LivestreamComment(props: Props) { )} {commentByOwnerOfContent && ( - + diff --git a/ui/component/livestreamComments/view.jsx b/ui/component/livestreamComments/view.jsx index 24d93446b..dd5fd62e7 100644 --- a/ui/component/livestreamComments/view.jsx +++ b/ui/component/livestreamComments/view.jsx @@ -245,7 +245,7 @@ export default function LivestreamComments(props: Props) { const isSticker = stickerSuperChats && stickerSuperChats.includes(superChat); const SuperChatWrapper = !isSticker - ? ({ children }) => {children} + ? ({ children }) => {children} : ({ children }) => <>{children}; return ( diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss index 8ebfb361f..e6afb9e8b 100644 --- a/ui/scss/component/_channel.scss +++ b/ui/scss/component/_channel.scss @@ -366,17 +366,6 @@ $actions-z-index: 2; } } -.channel-staked__tooltip { - display: flex; - align-items: center; - line-height: 1rem; -} - -.channel-staked__tooltip-text { - margin-left: var(--spacing-xs); - font-size: var(--font-xsmall); -} - .channel-staked__wrapper { display: flex; position: absolute; diff --git a/ui/scss/component/_tooltip.scss b/ui/scss/component/_tooltip.scss index 2013b410a..896a040b3 100644 --- a/ui/scss/component/_tooltip.scss +++ b/ui/scss/component/_tooltip.scss @@ -1,8 +1,24 @@ -[data-reach-tooltip] { - border-radius: var(--border-radius); - background-color: var(--color-tooltip-bg); - color: var(--color-tooltip-text); - border: none; - padding: var(--spacing-s); - overflow: hidden; +.MuiTooltip-tooltip { + border-radius: var(--border-radius) !important; + background-color: var(--color-tooltip-bg) !important; + color: var(--color-tooltip-text) !important; + font-size: var(--font-small) !important; +} + +.MuiTooltip-arrow { + color: var(--color-tooltip-bg) !important; + font-size: var(--font-xxsmall) !important; +} + +.channel-staked__tooltip { + display: flex; + align-items: center; + line-height: 1rem; + padding: var(--spacing-xs); + + .channel-staked__tooltip-text { + margin-left: var(--spacing-xs); + font-size: var(--font-xsmall); + font-size: var(--font-small); + } } diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index ae5d31e53..7b3d403ae 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -104,6 +104,7 @@ --color-purchased-text: black; --color-thumbnail-background: var(--color-gray-5); --color-tooltip-bg: #2f3337; + --color-tooltip-text: #fafafa; --color-focus: #e91e6329; --color-placeholder-background: #261a35; --color-spinner-light: white;