Revamp Icon Effects

2025-11-29 16:43:16 +00:00 · 2023-10-23 17:01:41 +05:30
parent 465c4afe8d
commit 0668fea3b7
3 changed files with 103 additions and 33 deletions
--- a/frontend/src/assets/checkmark.svg
+++ b/frontend/src/assets/checkmark.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11" fill="none">
-  <path d="M4.95919 10.1906C4.84318 10.1902 4.72847 10.166 4.62222 10.1194C4.51596 10.0729 4.42041 10.0049 4.34152 9.91985L0.229353 5.54538C0.0756344 5.38157 -0.00671208 5.1634 0.000428491 4.93886C0.00756906 4.71433 0.103612 4.50183 0.267428 4.34812C0.431245 4.1944 0.649417 4.11205 0.873948 4.11919C1.09848 4.12633 1.31098 4.22238 1.4647 4.38619L4.95073 8.10068L12.0666 0.316329C12.1389 0.226405 12.2287 0.152193 12.3306 0.0982513C12.4326 0.0443098 12.5445 0.0117775 12.6594 0.00265255C12.7744 -0.00647237 12.89 0.00800286 12.9992 0.045189C13.1084 0.082375 13.2088 0.141487 13.2943 0.218894C13.3798 0.296301 13.4485 0.390369 13.4964 0.49532C13.5442 0.600272 13.57 0.713891 13.5723 0.829198C13.5746 0.944506 13.5534 1.05907 13.5098 1.16585C13.4662 1.27263 13.4012 1.36937 13.3189 1.45014L5.58533 9.91139C5.50718 9.998 5.41197 10.0675 5.30567 10.1156C5.19938 10.1636 5.0843 10.1892 4.96766 10.1906H4.95919Z" fill="#747474"/>
-</svg>
+<svg width="16px" height="16px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#11ee1c" stroke="#11ee1c" stroke-width="83.96799999999999"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M866.133333 258.133333L362.666667 761.6l-204.8-204.8L98.133333 618.666667 362.666667 881.066667l563.2-563.2z" fill="#11ee1c"></path></g></svg>
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -37,8 +37,13 @@ const ConversationBubble = forwardRef<
    // Reset copied to false after a few seconds
    setTimeout(() => {
      setCopied(false);
-    }, 2000);
+    }, 3000);
  };
+  const [isCopyHovered, setIsCopyHovered] = useState(false);
+  const [isLikeHovered, setIsLikeHovered] = useState(false);
+  const [isDislikeHovered, setIsDislikeHovered] = useState(false);
+  const [isLikeClicked, setIsLikeClicked] = useState(false);
+  const [isDislikeClicked, setIsDislikeClicked] = useState(false);

  let bubble;

@@ -55,7 +60,10 @@ const ConversationBubble = forwardRef<
    );
  } else {
    bubble = (
-      <div ref={ref} className={`flex self-start ${className} group flex-col`}>
+      <div
+        ref={ref}
+        className={`flex self-start ${className} group flex-col pr-20`}
+      >
        <div className="flex self-start">
          <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
          <div
@@ -146,52 +154,113 @@ const ConversationBubble = forwardRef<
            )}
          </div>
          <div
-            className={`relative mr-2 flex items-center justify-center md:invisible ${
+            className={`relative mr-5 flex items-center justify-center md:invisible ${
              type !== 'ERROR' ? 'group-hover:md:visible' : ''
            }`}
          >
-            {copied ? (
-              <Checkmark className="absolute left-2 top-4" />
-            ) : (
-              <Copy
-                className={`absolute left-2 top-4 cursor-pointer fill-gray-4000 hover:stroke-gray-4000`}
-                onClick={() => {
-                  handleCopyClick(message);
+            <div className="absolute left-2 top-4">
+              <div
+                className="flex items-center justify-center rounded-full p-2"
+                style={{
+                  backgroundColor: isCopyHovered ? '#edeef0' : '#ffffff',
                }}
-              ></Copy>
-            )}
+              >
+                {copied ? (
+                  <Checkmark
+                    className="cursor-pointer stroke-green-2000"
+                    onMouseEnter={() => setIsCopyHovered(true)}
+                    onMouseLeave={() => setIsCopyHovered(false)}
+                  />
+                ) : (
+                  <Copy
+                    className={`cursor-pointer fill-none`}
+                    onClick={() => {
+                      handleCopyClick(message);
+                    }}
+                    onMouseEnter={() => setIsCopyHovered(true)}
+                    onMouseLeave={() => setIsCopyHovered(false)}
+                  ></Copy>
+                )}
+              </div>
+            </div>
          </div>
          <div
-            className={`relative mr-2 flex items-center justify-center md:invisible ${
+            className={`relative mr-5 flex items-center justify-center ${
+              !isLikeClicked ? 'md:invisible' : ''
+            } ${
              feedback === 'LIKE' || type !== 'ERROR'
                ? 'group-hover:md:visible'
                : ''
            }`}
          >
-            <Like
-              className={`absolute left-6  top-4 cursor-pointer ${
-                feedback === 'LIKE'
-                  ? 'fill-purple-30 stroke-purple-30'
-                  : 'fill-none  stroke-gray-4000 hover:fill-gray-4000'
-              }`}
-              onClick={() => handleFeedback?.('LIKE')}
-            ></Like>
+            <div className="absolute left-6 top-4">
+              <div
+                className="flex items-center justify-center rounded-full p-2"
+                style={{
+                  backgroundColor: isLikeHovered
+                    ? isLikeClicked
+                      ? '#dfe3f5'
+                      : '#edeef0'
+                    : isLikeClicked
+                    ? '#dfe3f5'
+                    : '#ffffff',
+                }}
+              >
+                <Like
+                  className={`cursor-pointer ${
+                    feedback === 'LIKE'
+                      ? 'fill-white-3000 stroke-purple-30'
+                      : 'fill-none  stroke-gray-4000'
+                  }`}
+                  onClick={() => {
+                    handleFeedback?.('LIKE');
+                    setIsLikeClicked(true);
+                    setIsDislikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsLikeHovered(true)}
+                  onMouseLeave={() => setIsLikeHovered(false)}
+                ></Like>
+              </div>
+            </div>
          </div>
          <div
-            className={`relative mr-10 flex items-center justify-center md:invisible ${
+            className={`mr-13 relative flex items-center justify-center ${
+              !isDislikeClicked ? 'md:invisible' : ''
+            } ${
              feedback === 'DISLIKE' || type !== 'ERROR'
                ? 'group-hover:md:visible'
                : ''
            }`}
          >
-            <Dislike
-              className={`absolute left-10 top-4 cursor-pointer ${
-                feedback === 'DISLIKE'
-                  ? 'fill-red-2000 stroke-red-2000'
-                  : 'fill-none  stroke-gray-4000 hover:fill-gray-4000'
-              }`}
-              onClick={() => handleFeedback?.('DISLIKE')}
-            ></Dislike>
+            <div className="absolute left-10 top-4">
+              <div
+                className="flex items-center justify-center rounded-full p-2"
+                style={{
+                  backgroundColor: isDislikeHovered
+                    ? isDislikeClicked
+                      ? '#fceded'
+                      : '#edeef0'
+                    : isDislikeClicked
+                    ? '#fceded'
+                    : '#ffffff',
+                }}
+              >
+                <Dislike
+                  className={`cursor-pointer ${
+                    feedback === 'DISLIKE'
+                      ? 'fill-white-3000 stroke-red-2000'
+                      : 'fill-none  stroke-gray-4000'
+                  }`}
+                  onClick={() => {
+                    handleFeedback?.('DISLIKE');
+                    setIsDislikeClicked(true);
+                    setIsLikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsDislikeHovered(true)}
+                  onMouseLeave={() => setIsDislikeHovered(false)}
+                ></Dislike>
+              </div>
+            </div>
          </div>
        </div>

--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -28,6 +28,9 @@ module.exports = {
        'purple-30': '#7D54D1',
        'blue-4000': 'rgba(0, 125, 255, 0.36)',
        'blue-5000': 'rgba(0, 125, 255)',
+        'green-2000': '#0FFF50',
+        'light-gray': '#edeef0',
+        'white-3000': '#ffffff',
      },
    },
  },