From 1382ea4f93ab82d6801f7256f86470b2735472eb Mon Sep 17 00:00:00 2001 From: MasterK0927 Date: Fri, 16 Aug 2024 22:41:04 +0530 Subject: [PATCH] added tooltip support, all known bugs fixed --- .../components/Header/Header.tsx | 2 +- .../components/ToolTip/ToolTip.tsx | 51 ++++++++++---- .../components/ToolTip/styles.ts | 68 +++++++++---------- .../page/ping_doc_signer/pdf_renderer.tsx | 4 +- .../page/ping_doc_signer/utils/types.ts | 7 +- 5 files changed, 80 insertions(+), 52 deletions(-) diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx index dd0f365389ab..37f071d3ec6a 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx @@ -98,7 +98,7 @@ export const Header: React.FC = ({ = ({ children, text, isVisible = true, - isError = false + isError = false, + errorDelay = 1000 }) => { + const [isHovered, setIsHovered] = React.useState(false); + const [showErrorTooltip, setShowErrorTooltip] = React.useState(false); + const firstHoverRef = React.useRef(true); + + React.useEffect(() => { + let timer: NodeJS.Timeout; + if (isError && isHovered) { + if (firstHoverRef.current) { + timer = setTimeout(() => { + setShowErrorTooltip(true); + firstHoverRef.current = false; + }, errorDelay); + } else { + setShowErrorTooltip(true); + } + } else { + setShowErrorTooltip(false); + } + return () => clearTimeout(timer); + }, [isError, isHovered, errorDelay]); + return ( - + setIsHovered(true)} + onMouseLeave={() => { + setIsHovered(false); + setShowErrorTooltip(false); + }} + > {children} - - {text} - + {isVisible && ( + + {text} + + )} ); }; \ No newline at end of file diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/styles.ts b/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/styles.ts index 2c8bdcd2a355..906357a0b704 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/styles.ts +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/styles.ts @@ -1,42 +1,40 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at https://mozilla.org/MPL/2.0/. */ -import styled from 'styled-components'; + import styled from 'styled-components'; -export const TooltipContainer = styled.div` + export const TooltipContainer = styled.div` position: relative; display: inline-block; `; - -export const TooltipText = styled.div<{ isVisible: boolean; isError: boolean }>` - visibility: hidden; - width: fit-content; - text-wrap: wrap; - background-color: ${props => props.isError ? '#ff4d4d' : '#555'}; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 8px; - position: absolute; - z-index: 1; - top: 100%; - left: 50%; - margin-left: -60px; - transition: opacity 0.3s, visibility 0.3s; - - ${TooltipContainer}:hover & { - visibility: ${props => props.isVisible ? 'visible' : 'hidden'}; - - } - - &::after { - content: ""; - position: absolute; - bottom: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: transparent transparent ${props => props.isError ? '#ff4d4d' : '#555'} transparent; - } - `; \ No newline at end of file + + export const TooltipText = styled.div<{ isVisible: boolean; isError: boolean }>` + visibility: ${props => props.isVisible ? 'visible' : 'hidden'}; + opacity: ${props => props.isVisible ? 1 : 0}; + width: max-content; + max-width: 200px; + text-wrap: wrap; + background-color: ${props => props.isError ? '#ff4d4d' : '#555'}; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 8px; + position: absolute; + z-index: 1; + top: 100%; + left: 50%; + transform: translateX(-50%); + margin-top: 5px; + transition: opacity 0.3s, visibility 0.3s; + + &::after { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border-width: 5px; + border-style: solid; + border-color: transparent transparent ${props => props.isError ? '#ff4d4d' : '#555'} transparent; + } + `; \ No newline at end of file diff --git a/components/brave_rewards/resources/page/ping_doc_signer/pdf_renderer.tsx b/components/brave_rewards/resources/page/ping_doc_signer/pdf_renderer.tsx index ecdd208bc6df..1d469b96e41c 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/pdf_renderer.tsx +++ b/components/brave_rewards/resources/page/ping_doc_signer/pdf_renderer.tsx @@ -67,6 +67,7 @@ export const PdfRenderer: React.FC = () => { const pageRefs = useRef>([]); const fileInputRef = useRef(null); const [isSigned, setIsSigned] = useState(false); + const [verificationErrorMessage, setVerificationErrorMessage] = useState(''); const resetSignatureState = useCallback(() => { setIsSelectionEnabled(false); @@ -313,6 +314,7 @@ export const PdfRenderer: React.FC = () => { } catch (error) { setStatusMessage('Verification Failed'); setStatusType('error'); + setVerificationErrorMessage(`${error}`); setIsVerified(false); setIsVerificationFailed(true); } finally { @@ -451,7 +453,7 @@ export const PdfRenderer: React.FC = () => { handleLogoClick={handleLogoClick} fileInputRef={fileInputRef} isSigned={isSigned} - message={errorMessage} + message={verificationErrorMessage} /> {!pdfFile ? ( diff --git a/components/brave_rewards/resources/page/ping_doc_signer/utils/types.ts b/components/brave_rewards/resources/page/ping_doc_signer/utils/types.ts index 156d0b38ab16..d6f7720c8d1a 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/utils/types.ts +++ b/components/brave_rewards/resources/page/ping_doc_signer/utils/types.ts @@ -103,8 +103,9 @@ export type PdfPageProps = { } export type TooltipProps = { - text: string; - isVisible: boolean; - isVerificationFailed: boolean; children: React.ReactNode; + text: string; + isVisible?: boolean; + isError?: boolean; + errorDelay?: number; } \ No newline at end of file