diff --git a/src/components/Tokens/TokenTable/FavoriteButton.tsx b/src/components/Tokens/TokenTable/FavoriteButton.tsx index d236bfbe41..f4fa4c1ac1 100644 --- a/src/components/Tokens/TokenTable/FavoriteButton.tsx +++ b/src/components/Tokens/TokenTable/FavoriteButton.tsx @@ -16,7 +16,7 @@ const StyledFavoriteButton = styled.button<{ active: boolean }>` padding: 0px 16px; border-radius: 12px; background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)}; - border: none; + border: ${({ active, theme }) => (active ? `1px solid ${theme.accentActive}` : 'none')}; color: ${({ theme, active }) => (active ? theme.accentActive : theme.textPrimary)}; font-size: 16px; font-weight: 600; @@ -24,6 +24,7 @@ const StyledFavoriteButton = styled.button<{ active: boolean }>` :hover { background-color: ${({ theme, active }) => !active && theme.backgroundModule}; + opacity: ${({ active }) => (active ? '60%' : '100%')}; } ` const FavoriteText = styled.span` @@ -38,11 +39,7 @@ export default function FavoriteButton() { return ( setShowFavorites(!showFavorites)} active={showFavorites}> - + Favorites diff --git a/src/pages/Tokens/index.tsx b/src/pages/Tokens/index.tsx index 5b3c07ac0d..6fd8743e01 100644 --- a/src/pages/Tokens/index.tsx +++ b/src/pages/Tokens/index.tsx @@ -87,8 +87,9 @@ const Tokens = () => { - {tokensNetworkFilterFlag === TokensNetworkFilterVariant.Enabled && } + {tokensNetworkFilterFlag === TokensNetworkFilterVariant.Enabled && } + @@ -116,8 +117,8 @@ export const LoadingTokens = () => { - {tokensNetworkFilterFlag === TokensNetworkFilterVariant.Enabled && } + {tokensNetworkFilterFlag === TokensNetworkFilterVariant.Enabled && }