From 55ce94a65fe783c735d0f4ea9e6ab92dc6f2c066 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Fri, 15 Mar 2024 00:53:03 +0700
Subject: [PATCH] Update tooltip for super like button to be separated between
 the reward and like

---
 src/components/voting/SuperLike.module.sass | 10 +++
 src/components/voting/SuperLike.tsx         | 75 +++++++++++----------
 2 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/components/voting/SuperLike.module.sass b/src/components/voting/SuperLike.module.sass
index 3f6c67b89..0a5bbfb78 100644
--- a/src/components/voting/SuperLike.module.sass
+++ b/src/components/voting/SuperLike.module.sass
@@ -23,4 +23,14 @@
   &.SuperLikeActive
     background: linear-gradient(97deg, #8B55FD 8.3%, #7493FC 91.24%)
     color: white
+
+  &.SuperLikeDisabled
+    color: #94a3b8
+    color: rgba(0, 0, 0, 0.25)
+    background: #f5f5f5
+    border-color: #d9d9d9
+    text-shadow: none
+    -webkit-box-shadow: none
+    box-shadow: none
+    cursor: not-allowed
     
diff --git a/src/components/voting/SuperLike.tsx b/src/components/voting/SuperLike.tsx
index 6bd494512..66845aa30 100644
--- a/src/components/voting/SuperLike.tsx
+++ b/src/components/voting/SuperLike.tsx
@@ -175,44 +175,51 @@ export default function SuperLike({ post, iconClassName, isComment, ...props }:
   else if (!canBeSuperliked) tooltipTitle = `You cannot like ${entity}s that are older than 7 days`
   else if (!superLikeMessage.message) tooltipTitle = 'Loading...'
 
-  const button = (
-    <div>
-      <Button
-        className={clsx(
-          'FontSmall',
-          styles.SuperLike,
-          isActive && styles.SuperLikeActive,
-          props.className,
-        )}
-        onClick={onClick}
-        disabled={isDisabled}
-      >
-        <IconWithLabel renderZeroCount icon={icon} count={count} />
-        <PostRewardStatWrapper postId={post.id}>
-          {({ reward, tooltip }) => (
-            <Tooltip title={tooltip} className='d-flex align-items-center'>
-              <div
-                className='mx-2.5'
-                style={{ height: '1em', width: '1px', background: '#CBD5E1' }}
-              />
-              <span
-                className={clsx(
-                  'd-flex align-items-center GapTiny',
-                  isActive ? 'ColorWhite' : 'ColorMuted',
-                )}
-              >
-                {reward}
+  return (
+    <>
+      <div>
+        <Button
+          className={clsx(
+            'FontSmall',
+            styles.SuperLike,
+            isActive && styles.SuperLikeActive,
+            // Can't add disabled to the button itself because tooltip won't work if its disabled
+            isDisabled && styles.SuperLikeDisabled,
+            props.className,
+          )}
+          onClick={onClick}
+          title='test'
+        >
+          {tooltipTitle ? (
+            <Tooltip title={tooltipTitle}>
+              <span className='d-flex align-items-center'>
+                <IconWithLabel renderZeroCount icon={icon} count={count} />
               </span>
             </Tooltip>
+          ) : (
+            <IconWithLabel renderZeroCount icon={icon} count={count} />
           )}
-        </PostRewardStatWrapper>
-      </Button>
-    </div>
-  )
+          <PostRewardStatWrapper postId={post.id}>
+            {({ reward, tooltip }) => (
+              <Tooltip title={tooltip} className='d-flex align-items-center'>
+                <div
+                  className='mx-2.5'
+                  style={{ height: '1em', width: '1px', background: '#CBD5E1' }}
+                />
+                <span
+                  className={clsx(
+                    'd-flex align-items-center GapTiny',
+                    isActive ? 'ColorWhite' : 'ColorMuted',
+                  )}
+                >
+                  {reward}
+                </span>
+              </Tooltip>
+            )}
+          </PostRewardStatWrapper>
+        </Button>
+      </div>
 
-  return (
-    <>
-      {tooltipTitle ? <Tooltip title={tooltipTitle}>{button}</Tooltip> : button}
       <ShouldStakeModal
         visible={isOpenShouldStakeModal}
         onCancel={() => setIsOpenShouldStakeModal(false)}