diff --git a/src/website/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.scss b/src/website/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.scss
index b86d430803..448e57097a 100644
--- a/src/website/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.scss
+++ b/src/website/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.scss
@@ -9,7 +9,7 @@
border: none;
padding: 0;
font: inherit;
- font-size: 14px !important;
+ font-size: 15px !important;
cursor: pointer;
outline: inherit;
transition: 0.2s;
@@ -36,18 +36,15 @@
}
&:hover .icon-default {
- color: map-get($badge-colors, "yellow");
+ color: $white;
opacity: 1;
}
&.toggled {
- background-color: darken(rgba(map-get($badge-colors, "yellow"), 0.9), 32%);
+ background-color: darken(rgba(map-get($badge-colors, "yellow"), 1), 15%);
&:hover {
- background-color: darken(
- rgba(map-get($badge-colors, "yellow"), 0.9),
- 25%
- );
+ background-color: darken(rgba(map-get($badge-colors, "yellow"), 1), 20%);
}
}
@@ -58,24 +55,24 @@
}
.favorite-button .icon-default {
- color: map-get($badge-colors, "yellow");
+ color: $white;
opacity: 0.7;
transition: 0.2s;
}
.favorite-button .icon-toggled {
- color: map-get($badge-colors, "yellow");
+ color: $white;
animation: pulse 0.3s ease;
}
.favorite-button .icon-toggled:hover {
- color: map-get($badge-colors, "yellow");
+ color: $white;
}
.favorite-text {
color: $white;
font-size: 14px;
- font-weight: 400 !important;
+ font-weight: 600 !important;
height: 100%;
opacity: 0.9;
transition: 0.2s;
diff --git a/src/website/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.scss b/src/website/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.scss
index 1b8fc9d56f..71b0908720 100644
--- a/src/website/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.scss
+++ b/src/website/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.scss
@@ -9,7 +9,7 @@
border: none;
padding: 0;
font: inherit;
- font-size: 14px !important;
+ font-size: 15px !important;
cursor: pointer;
outline: inherit;
transition: 0.2s;
@@ -36,15 +36,16 @@
}
&:hover .icon-default {
- color: $primary;
+ color: $white;
opacity: 1;
+ font-size: 16px;
}
&.toggled {
- background-color: rgba(#593a48, 0.9);
+ background-color: rgba(#545cb3, 1);
&:hover {
- background-color: lighten(rgba(#593a48, 0.9), 10%);
+ background-color: lighten(rgba(#545cb3, 1), 5%);
}
}
@@ -55,24 +56,26 @@
}
.like-button .icon-default {
- color: $primary;
+ color: $white;
opacity: 0.7;
transition: 0.2s;
+ font-size: 16px;
}
.like-button .icon-toggled {
- color: $primary;
+ color: $white;
animation: pulse 0.3s ease;
+ font-size: 16px;
}
.like-button .icon-toggled:hover {
- color: $primary;
+ color: $white;
}
.like-number {
color: $white;
font-size: 14px;
- font-weight: 400 !important;
+ font-weight: 600 !important;
opacity: 0.9;
transition: 0.2s;
}
diff --git a/src/website/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx b/src/website/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx
index 2ab44e5eb9..88afaddbab 100644
--- a/src/website/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx
+++ b/src/website/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faHeart } from "@fortawesome/pro-solid-svg-icons";
-import { faHeart as faHeartOutline } from "@fortawesome/pro-regular-svg-icons";
+import { faThumbsUp } from "@fortawesome/pro-solid-svg-icons";
+import { faThumbsUp as faThumbsUpOutline } from "@fortawesome/pro-regular-svg-icons";
import { WorkDots } from "components/svg";
import { AnimationStatus, useAnimationStatus } from "hooks";
import Tippy from "@tippyjs/react";
@@ -76,8 +76,8 @@ export default function LikeButton({
className={`${buttonClass} ${buttonShadow} ${large ? "large" : ""}`}
>