From 09e5f84b8b2946cb75eac974af5e20cab52d8fb4 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 9 Mar 2025 09:09:54 +0800
Subject: [PATCH] style: update social share button styles for improved UI
 consistency

---
 app/components/ui/social-share.tsx | 31 ++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/components/ui/social-share.tsx b/app/components/ui/social-share.tsx
index 5b7017f..2fcbe9d 100644
--- a/app/components/ui/social-share.tsx
+++ b/app/components/ui/social-share.tsx
@@ -35,37 +35,44 @@ export const SocialShareButtons = ({
 
   return (
     <div className="flex items-center space-x-2">
-      {showPopup && (
-        <div className="absolute top-0 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg">
-          Link berhasil disalin!
-        </div>
-      )}
-      <button onClick={handleCopyLink}>
-        <LinkIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+      <button
+        onClick={handleCopyLink}
+        className="relative cursor-pointer"
+      >
+        <LinkIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        {showPopup && (
+          <div className="absolute top-12 w-48 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg">
+            Link berhasil disalin!
+          </div>
+        )}
       </button>
+
       <FacebookShareButton
         url={url}
         title={title}
       >
-        <FacebookIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+        <FacebookIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </FacebookShareButton>
 
       <LinkedinShareButton
         url={url}
         title={title}
       >
-        <LinkedinIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+        <LinkedinIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </LinkedinShareButton>
 
       <TwitterShareButton
         url={url}
         title={title}
       >
-        <XIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+        <XIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </TwitterShareButton>
 
-      <button onClick={handleInstagramShare}>
-        <InstagramIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+      <button
+        onClick={handleInstagramShare}
+        className="cursor-pointer"
+      >
+        <InstagramIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </button>
     </div>
   )