From 1cdaff8ddf8d67dae4958671ae6c18634d6c06b1 Mon Sep 17 00:00:00 2001
From: aballerr <aball9423@gmail.com>
Date: Wed, 7 Sep 2022 12:44:19 -0400
Subject: [PATCH] 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 | 9 +++------
 src/pages/Tokens/index.tsx                          | 5 +++--
 2 files changed, 6 insertions(+), 8 deletions(-)

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 (
     <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>
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 = () => {
         </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>