remove hover feedback for liked heart (codesandbox#2891)

Author: siddharthkp

packages/app/src/embed/components/Header/elements.js

@@ -120,6 +120,16 @@ export const MenuIcon = styled(MenuIconSVG)(
 
 export const LinkIcon = styled(LinkIconSVG)(css({}));
 
+export const HeartButton = styled(Button)(props =>
+  css({
+    '&:hover': {
+      svg: {
+        color: props.liked ? 'reds.300' : 'white',
+      },
+    },
+  })
+);
+
 export const HeartIcon = styled(HeartIconSVG)(props =>
   css({
     color: props.liked ? 'reds.300' : 'grays.400',

packages/app/src/embed/components/Header/index.js

@@ -13,6 +13,7 @@ import {
   CenterAligned,
   LeftAligned,
   MenuIcon,
+  HeartButton,
   HeartIcon,
   LinkIcon,
   EditorViewIcon,
@@ -81,9 +82,9 @@ function Header({
         </Button>
 
         {toggleLike && (
-          <Button onClick={toggleLike}>
+          <HeartButton onClick={toggleLike} liked={liked}>
             <HeartIcon liked={liked} />
-          </Button>
+          </HeartButton>
         )}
       </RightAligned>
     </Container>