From 949e1c14fe1da53ef9283d5018f709bfff4add16 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Fri, 9 Aug 2024 08:43:09 +0700
Subject: [PATCH] tooltip color fix, like/save button styling updates

---
 .../common/BookmarkButton/BookmarkButton.scss | 19 ++++++++-----------
 .../common/LikeButton/LikeButton.scss         | 19 +++++++++++--------
 .../common/LikeButton/LikeButton.tsx          |  8 ++++----
 .../fakeyou.com/src/scss/site-refresh.scss    |  2 +-
 4 files changed, 24 insertions(+), 24 deletions(-)

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" : ""}`}
         >
           <FontAwesomeIcon
-            icon={isToggled ? faHeart : faHeartOutline}
-            className={`${iconClass} me-2`}
+            icon={isToggled ? faThumbsUp : faThumbsUpOutline}
+            className={`${iconClass} me-2 fw-bold`}
           />
           <div className="like-number">
             <div className="like-number-wrapper">
diff --git a/src/website/packages/fakeyou.com/src/scss/site-refresh.scss b/src/website/packages/fakeyou.com/src/scss/site-refresh.scss
index afa313b67d..719bda5553 100644
--- a/src/website/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/src/website/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -1144,7 +1144,7 @@ styles with important tags:
   }
 
   .tippy-box[data-theme~="fakeyou"] {
-    background-color: darken($secondary, 12%);
+    background-color: lighten($secondary, 5%);
     color: $white;
   }