ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: info tip light theme issue (#4825)

Browse Source 
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
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Tokens/TokenDetails/InfoTip.tsx
View File

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