fix: fixing match design (#4577)

* fixing select token favorite icon to match design



Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>

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

src/pages/Tokens/index.tsx

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