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

fix: fix copy button styling (#4473)

Browse Source 
* fix copy button styling

* fix positionig

* preserve original css for token safety warning use case
This commit is contained in:
lynn 2022-08-24 17:57:25 -04:00 committed by GitHub
parent ac27c89a44
commit 874f3fb737
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Tokens/TokenDetails/TokenDetail.tsx
View File

@ -46,6 +46,7 @@ const ContractAddress = styled.button`
align-items: center;
background: transparent;
border: none;
min-height: 38px;
padding: 0px;
cursor: pointer;
`

2
src/components/Tokens/TokenDetails/TokenDetailContainers.tsx
View File

@ -32,7 +32,7 @@ export const ChartHeader = styled.div`
margin-bottom: 24px;
`
export const ContractAddressSection = styled.div`
padding: 24px 0px;
padding: 36px 0px;
`
export const ChartContainer = styled.div`
display: flex;

33
src/theme/components.tsx
View File

@ -212,33 +212,42 @@ export function ExternalLinkIcon({
)
}
const ToolTipWrapper = styled.div`
const ToolTipWrapper = styled.div<{ isCopyContractTooltip?: boolean }>`
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
position: ${({ isCopyContractTooltip }) => (isCopyContractTooltip ? 'relative' : 'absolute')};
right: ${({ isCopyContractTooltip }) => isCopyContractTooltip && '50%'};
transform: translate(5px, 32px);
z-index: 9999;
`
const CopiedTooltip = styled.div`
const StyledTooltipTriangle = styled(TooltipTriangle)`
path {
fill: ${({ theme }) => theme.black};
}
`
const CopiedTooltip = styled.div<{ isCopyContractTooltip?: boolean }>`
background-color: ${({ theme }) => theme.black};
text-align: center;
justify-content: center;
width: 60px;
height: 32px;
line-height: 32px;
width: ${({ isCopyContractTooltip }) => !isCopyContractTooltip && '60px'};
height: ${({ isCopyContractTooltip }) => !isCopyContractTooltip && '32px'};
line-height: ${({ isCopyContractTooltip }) => !isCopyContractTooltip && '32px'};
padding: ${({ isCopyContractTooltip }) => isCopyContractTooltip && '8px'};
border-radius: 8px;
color: ${({ theme }) => theme.white};
font-size: 12px;
`
function ToolTip() {
function Tooltip({ isCopyContractTooltip }: { isCopyContractTooltip: boolean }) {
return (
<ToolTipWrapper>
<TooltipTriangle />
<CopiedTooltip>Copied!</CopiedTooltip>
<ToolTipWrapper isCopyContractTooltip={isCopyContractTooltip}>
<StyledTooltipTriangle />
<CopiedTooltip isCopyContractTooltip={isCopyContractTooltip}>Copied!</CopiedTooltip>
</ToolTipWrapper>
)
}
@ -259,7 +268,7 @@ export function CopyLinkIcon({ toCopy }: { toCopy: string }) {
return (
<CopyIconWrapper onClick={copy}>
<CopyIcon />
{isCopied && <ToolTip />}
{isCopied && <Tooltip isCopyContractTooltip={false} />}
</CopyIconWrapper>
)
}
@ -309,7 +318,7 @@ export function CopyContractAddress({ address }: { address: string }) {
<TruncatedAddress>{truncated}</TruncatedAddress>
<Copy size={14} />
</CopyAddressRow>
{isCopied && <ToolTip />}
{isCopied && <Tooltip isCopyContractTooltip={true} />}
</CopyContractAddressWrapper>
)
}