fix: fix copy button styling (#4473)

* fix copy button styling

* fix positionig

* preserve original css for token safety warning use case

src/components/Tokens/TokenDetails/TokenDetail.tsx

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

src/components/Tokens/TokenDetails/TokenDetailContainers.tsx

@@ -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;

src/theme/components.tsx

@@ -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;
+  width: ${({ isCopyContractTooltip }) => !isCopyContractTooltip && '60px'};
-  height: 32px;
+  height: ${({ isCopyContractTooltip }) => !isCopyContractTooltip && '32px'};
-  line-height: 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>
+    <ToolTipWrapper isCopyContractTooltip={isCopyContractTooltip}>
-      <TooltipTriangle />
+      <StyledTooltipTriangle />
-      <CopiedTooltip>Copied!</CopiedTooltip>
+      <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>
   )
 }