fix: fixing match design (#4577)

* fixing select token favorite icon to match design



Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>
This commit is contained in:
aballerr 2022-09-07 12:44:19 -04:00 committed by GitHub
parent eeea3d2dcc
commit 1cdaff8ddf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 8 deletions

@ -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 (
<StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
<FavoriteButtonContent>
<Heart
size={17}
color={showFavorites ? theme.accentActive : theme.textPrimary}
fill={showFavorites ? theme.accentActive : 'transparent'}
/>
<Heart size={17} color={showFavorites ? theme.accentActive : theme.textPrimary} />
<FavoriteText>
<Trans>Favorites</Trans>
</FavoriteText>

@ -87,8 +87,9 @@ const Tokens = () => {
</TitleContainer>
<FiltersWrapper>
<FiltersContainer>
{tokensNetworkFilterFlag === TokensNetworkFilterVariant.Enabled && <NetworkFilter />}
<FavoriteButton />
{tokensNetworkFilterFlag === TokensNetworkFilterVariant.Enabled && <NetworkFilter />}
<TimeSelector />
</FiltersContainer>
<SearchContainer>
@ -116,8 +117,8 @@ export const LoadingTokens = () => {
</TitleContainer>
<FiltersWrapper>
<FiltersContainer>
{tokensNetworkFilterFlag === TokensNetworkFilterVariant.Enabled && <NetworkFilter />}
<FavoriteButton />
{tokensNetworkFilterFlag === TokensNetworkFilterVariant.Enabled && <NetworkFilter />}
<TimeSelector />
</FiltersContainer>
<SearchContainer>