fix: info tip light theme issue (#4825)

fixed light theme issue

Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>
This commit is contained in:
cartcrom 2022-10-07 09:59:58 -04:00 committed by GitHub
parent 859258c25c
commit 64d6eeabcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -17,18 +17,24 @@ const InfoTipBody = styled.div`
line-height: 16px;
`
const InfoTipWrapper = styled.div`
margin-left: 4px;
display: flex;
align-items: center;
`
export default function InfoTip({ text }: { text: ReactNode; size?: number }) {
const [show, setShow] = useState<boolean>(false)
const open = useCallback(() => setShow(true), [setShow])
const close = useCallback(() => setShow(false), [setShow])
return (
<span style={{ marginLeft: 4, display: 'flex', alignItems: 'center', backgroundColor: 'black' }}>
<InfoTipWrapper>
<Tooltip text={<InfoTipBody>{text}</InfoTipBody>} show={show} placement="right">
<InfoTipContainer onClick={open} onMouseEnter={open} onMouseLeave={close}>
<Info size={14} />
</InfoTipContainer>
</Tooltip>
</span>
</InfoTipWrapper>
)
}