diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx index 441112a1..bd560976 100644 --- a/src/ethereum/EthHashInfo/index.tsx +++ b/src/ethereum/EthHashInfo/index.tsx @@ -33,10 +33,7 @@ const InfoContainer = styled.div` const AddressContainer = styled.div` display: flex; align-items: center; - - *:not(:first-child) { - margin-left: 8px; - } + gap: 4px; `; const StyledImg = styled.img<{ size: ThemeIdenticonSize }>` diff --git a/src/ethereum/ExplorerButton/index.tsx b/src/ethereum/ExplorerButton/index.tsx index 0ec412c9..d9156777 100644 --- a/src/ethereum/ExplorerButton/index.tsx +++ b/src/ethereum/ExplorerButton/index.tsx @@ -5,8 +5,23 @@ import { Icon } from '../..'; import { ExplorerInfo } from '../../typings/misc'; const StyledLink = styled.a` - display: inline-flex; - outline-color: ${({ theme }) => theme.colors.separator}; + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + border-radius: 50%; + transition: background-color 0.2s ease-in-out; + outline-color: transparent; + height: 24px; + width: 24px; + display: flex; + justify-content: center; + align-items: center; + :hover { + background-color: ${({ theme }) => theme.colors.inputField}; + } `; type Props = { diff --git a/src/navigation/EllipsisMenu/index.tsx b/src/navigation/EllipsisMenu/index.tsx index 4aa81b39..f0f115b4 100644 --- a/src/navigation/EllipsisMenu/index.tsx +++ b/src/navigation/EllipsisMenu/index.tsx @@ -42,7 +42,7 @@ const IconWrapper = styled.button` } :hover { - background-color: ${({ theme }) => theme.colors.inputField}; + background-color: ${({ theme }) => theme.colors.separator}; } `; diff --git a/src/utils/CopyToClipboardBtn/index.tsx b/src/utils/CopyToClipboardBtn/index.tsx index 48845c7e..bb24d32f 100644 --- a/src/utils/CopyToClipboardBtn/index.tsx +++ b/src/utils/CopyToClipboardBtn/index.tsx @@ -11,8 +11,17 @@ const StyledButton = styled.button` padding: 0; font: inherit; cursor: pointer; - outline-color: ${({ theme }) => theme.colors.separator}; + border-radius: 50%; + transition: background-color 0.2s ease-in-out; + outline-color: transparent; + height: 24px; + width: 24px; display: flex; + justify-content: center; + align-items: center; + :hover { + background-color: ${({ theme }) => theme.colors.separator}; + } `; type Props = {