From 0668fea3b75ad157e618259375b17c341c4de7c2 Mon Sep 17 00:00:00 2001
From: Ankit Matth <ankitmatth111@gmail.com>
Date: Mon, 23 Oct 2023 17:01:41 +0530
Subject: [PATCH 1/2] Revamp Icon Effects

---
 frontend/src/assets/checkmark.svg             |   4 +-
 .../src/conversation/ConversationBubble.tsx   | 129 ++++++++++++++----
 frontend/tailwind.config.cjs                  |   3 +
 3 files changed, 103 insertions(+), 33 deletions(-)

diff --git a/frontend/src/assets/checkmark.svg b/frontend/src/assets/checkmark.svg
index 9ed02cbd..499000e8 100644
--- 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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 37b93f2e..dc02447c 100644
--- 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>
 
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index b76b0222..437f4a09 100644
--- 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',
       },
     },
   },

From 7a2e6e640dcddadf927d132c8c90a1ed6b9fc976 Mon Sep 17 00:00:00 2001
From: Ankit Matth <146843890+Ankit-Matth@users.noreply.github.com>
Date: Wed, 25 Oct 2023 21:48:25 +0530
Subject: [PATCH 2/2] [making required changes] - Update ConversationBubble.tsx

---
 .../src/conversation/ConversationBubble.tsx    | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index dc02447c..7fb377b2 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -162,7 +162,7 @@ const ConversationBubble = forwardRef<
               <div
                 className="flex items-center justify-center rounded-full p-2"
                 style={{
-                  backgroundColor: isCopyHovered ? '#edeef0' : '#ffffff',
+                  backgroundColor: isCopyHovered ? '#EEEEEE' : '#ffffff',
                 }}
               >
                 {copied ? (
@@ -199,16 +199,16 @@ const ConversationBubble = forwardRef<
                 style={{
                   backgroundColor: isLikeHovered
                     ? isLikeClicked
-                      ? '#dfe3f5'
-                      : '#edeef0'
+                      ? '#7D54D1'
+                      : '#EEEEEE'
                     : isLikeClicked
-                    ? '#dfe3f5'
+                    ? '#7D54D1'
                     : '#ffffff',
                 }}
               >
                 <Like
                   className={`cursor-pointer ${
-                    feedback === 'LIKE'
+                    isLikeClicked || (feedback === 'LIKE')
                       ? 'fill-white-3000 stroke-purple-30'
                       : 'fill-none  stroke-gray-4000'
                   }`}
@@ -238,16 +238,16 @@ const ConversationBubble = forwardRef<
                 style={{
                   backgroundColor: isDislikeHovered
                     ? isDislikeClicked
-                      ? '#fceded'
-                      : '#edeef0'
+                      ? '#F87171'
+                      : '#EEEEEE'
                     : isDislikeClicked
-                    ? '#fceded'
+                    ? '#F87171'
                     : '#ffffff',
                 }}
               >
                 <Dislike
                   className={`cursor-pointer ${
-                    feedback === 'DISLIKE'
+                   isDislikeClicked || (feedback === 'DISLIKE')
                       ? 'fill-white-3000 stroke-red-2000'
                       : 'fill-none  stroke-gray-4000'
                   }`}