diff --git a/src/components/views/project/ProjectIndex.tsx b/src/components/views/project/ProjectIndex.tsx index 566fa59c06..7bd72de7cf 100644 --- a/src/components/views/project/ProjectIndex.tsx +++ b/src/components/views/project/ProjectIndex.tsx @@ -98,6 +98,15 @@ const ProjectIndex: FC = () => { const hasStellarAddress = recipientAddresses?.some( address => address.chainType === ChainType.STELLAR, ); + const [isTooltipVisible, setTooltipVisible] = useState(false); + + const handleMouseEnter = () => { + setTooltipVisible(true); + }; + + const handleMouseLeave = () => { + setTooltipVisible(false); + }; const isEmailVerifiedStatus = isAdmin ? isAdminEmailVerified : true; @@ -258,19 +267,42 @@ const ProjectIndex: FC = () => { {activeTab === 2 && } {activeTab === 3 && } {isDraft && ( - - - router.push( - idToProjectEdit(projectData?.id || ''), - ) - } - /> + + {/* Show tooltip only when the button is disabled (email not verified) */} + {!isEmailVerifiedStatus && ( + + {formatMessage({ + id: 'label.email_tooltip', + })} + + )} + + {/* Wrapper for hover events */} +
+ + router.push( + idToProjectEdit( + projectData?.id || '', + ), + ) + } + /> +
)} @@ -318,10 +350,6 @@ const Separator = styled.hr` margin: 40px 0; `; -const ContinueCreationButton = styled(Button)` - align-self: flex-end; -`; - const MobileContainer = styled.div<{ $hasActiveRound: boolean }>` padding: ${props => props.$hasActiveRound ? '0 26px 26px 26px' : '0 26px'}; @@ -387,5 +415,38 @@ const LinkItem = styled(P)<{ color: string }>` font-weight: 500; text-transform: capitalize; `; +const ContinueCreationButton = styled(Button)` + align-self: flex-end; + position: relative; + cursor: pointer; +`; +interface TooltipWrapperProps { + isTooltipVisible: boolean; + top?: string; + left?: string; +} +const TooltipWrapper = styled.div` + visibility: ${isTooltipVisible => (isTooltipVisible ? 'visible' : 'hidden')}; + opacity: ${({ isTooltipVisible }) => (isTooltipVisible ? 1 : 0)}; + position: absolute; + bottom: -35px; + left: buttonRect.left + window.scrollX + 10; + transform: translateX(-50%); + background: #1a1a1a; + color: #fff; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + white-space: nowrap; + transition: 'opacity 0.2s ease'; + z-index: 1000; + /* Tooltip on hover */ + ${ContinueCreationButton}:hover & { + opacity: 1; + visibility: visible; + display: 'inline-block', // Ensures it wraps the button + cursor: !isEmailVerifiedStatus ? 'not-allowed' : 'pointer' + } +`; export default ProjectIndex;