From e95c0aaaedb18f4c689ef41f5a1d237e5d54fbaa Mon Sep 17 00:00:00 2001
From: Walber Cardoso <50842245+walbercardoso@users.noreply.github.com>
Date: Thu, 21 Mar 2024 09:39:43 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20style(fix):=20Convo=20Fade=20Eff?=
 =?UTF-8?q?ect=20(#2147)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔧 (fix) Convo Fade Effect

* 🔧style(fix): Convo Fade Effect (#2117)

* 🔧 style(fix): Convo Fade Effect (#2117)
---
 client/src/components/Conversations/Convo.tsx | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
index c304209a72..8df0637389 100644
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@@ -52,7 +52,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
       try {
         lastSelectedTools = JSON.parse(localStorage.getItem('lastSelectedTools') ?? '') ?? [];
       } catch (e) {
-      // console.error(e);
+        // console.error(e);
       }
       navigateToConvo({ ...conversation, tools: lastSelectedTools });
     } else {
@@ -119,14 +119,13 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
     (isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
 
   const aProps = {
-    className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-300 dark:bg-gray-800 py-2 px-2 ${
-      renaming ? 'pr-14' : ''
-    }`,
+    className:
+      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-200 dark:bg-gray-800 py-2 px-2',
   };
 
   if (!activeConvo) {
     aProps.className =
-      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 py-2 px-2';
+      'group relative grow overflow-hidden whitespace-nowrap rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 py-2 px-2';
   }
 
   return (
@@ -153,15 +152,17 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
           title
         )}
       </div>
-      {activeConvo && (
+      {activeConvo ? (
         <div
           className={`absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l ${
-            !renaming ? 'from-gray-300 from-60% to-transparent dark:from-gray-800' : ''
+            !renaming ? 'from-gray-200 from-60% to-transparent dark:from-gray-800' : ''
           }`}
         ></div>
+      ) : (
+        <div className="absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-0% to-transparent group-hover:w-1 group-hover:from-60%"></div>
       )}
-      {activeConvo && (
-        <div className="visible absolute right-1 z-10 flex from-gray-900 dark:text-gray-200">
+      {activeConvo ? (
+        <div className="visible absolute right-1 z-10 flex from-gray-900 text-gray-500 dark:text-gray-300">
           <RenameButton renaming={renaming} onRename={onRename} renameHandler={renameHandler} />
           <DeleteButton
             conversationId={conversationId}
@@ -170,6 +171,8 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
             title={title}
           />
         </div>
+      ) : (
+        <div className="absolute bottom-0 right-0 top-0 w-14 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 dark:from-gray-900 dark:group-hover:from-gray-800" />
       )}
     </a>
   );