Merge pull request #2288 from zeitgeistpm/restyle-favourite-button-ma…

…rket-card Restyle favourite toggle.
zeitgeistpm · Feb 19, 2024 · 168eb39 · 168eb39
2 parents 94d5ab1 + d74390e
commit 168eb39
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/components/markets/MarketFavoriteToggle.tsx b/components/markets/MarketFavoriteToggle.tsx
@@ -22,7 +22,7 @@ export const MarketFavoriteToggle = ({
       {isFavorite(marketId) ? (
         <MdFavorite className="text-red-600" size={size ?? 16} />
       ) : (
-        <MdFavoriteBorder size={size ?? 16} />
+        <MdFavoriteBorder className="text-gray-400" size={size ?? 16} />
       )}
     </div>
   );

diff --git a/components/markets/market-card/index.tsx b/components/markets/market-card/index.tsx
@@ -126,6 +126,9 @@ export const MarketCard = ({
           }`}
         >
           <div className="flex h-[54px] w-full gap-4 whitespace-normal">
+            <div className="absolute right-4 top-4">
+              <MarketFavoriteToggle marketId={marketId} />
+            </div>
             <div className="relative min-h-[54px] min-w-[54px] rounded-lg bg-gray-400 bg-opacity-30">
               <Image
                 priority
@@ -140,7 +143,7 @@ export const MarketCard = ({
                 sizes={"54px"}
               />
             </div>
-            <h5 className="line-clamp-2 h-fit w-full text-base duration-200">
+            <h5 className="line-clamp-2 h-fit w-full pr-4 text-base duration-200">
               {cmsMetadata?.question ?? question}
             </h5>
           </div>
@@ -190,7 +193,6 @@ export const MarketCard = ({
                 liquidity={liquidity}
               />
             </div>
-            <MarketFavoriteToggle marketId={marketId} />
           </div>
         </Link>
       </div>