Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 09:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 style: Convo fade effect (#2642)

Browse source 
* style: Improve fade effect into convos

* style: Improve fade effect into convos. WIP code

* 🔧 fix: Convo fade effect

* 🔧 fix: Convo fade effect: removed listeners
This commit is contained in:
Walber Cardoso 2024-05-08 22:21:55 -03:00 • committed by GitHub
parent c94278be85
commit b6d1f5fa53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Conversations/Convo.tsx
View file

@ -164,7 +164,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
className={cn( className={cn(
isActiveConvo isActiveConvo
? 'group relative mt-2 flex cursor-pointer items-center gap-2 break-all rounded-lg rounded-lg bg-gray-200 px-2 py-2 active:opacity-50 dark:bg-gray-700' ? 'group relative mt-2 flex cursor-pointer items-center gap-2 break-all rounded-lg rounded-lg bg-gray-200 px-2 py-2 active:opacity-50 dark:bg-gray-700'
: 'group relative mt-2 flex grow cursor-pointer items-center gap-2 overflow-hidden whitespace-nowrap break-all rounded-lg rounded-lg px-2 py-2 hover:bg-gray-200 active:opacity-50 dark:hover:bg-gray-800', : 'group relative mt-2 flex grow cursor-pointer items-center gap-2 overflow-hidden whitespace-nowrap break-all rounded-lg rounded-lg px-2 py-2 hover:bg-gray-200 active:opacity-50 dark:hover:bg-gray-700',
!isActiveConvo && !renaming ? 'peer-hover:bg-gray-200 dark:peer-hover:bg-gray-800' : '', !isActiveConvo && !renaming ? 'peer-hover:bg-gray-200 dark:peer-hover:bg-gray-800' : '',
)} )}
title={title} title={title}
@ -186,7 +186,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
)} )}
/> />
) : ( ) : (
<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 className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 group-hover:from-60% dark:from-[#181818] dark:group-hover:from-gray-700" />
)} )}
</a> </a>
</div> </div>

8
client/src/components/Conversations/HoverToggle.tsx
View file

@ -15,12 +15,12 @@ const HoverToggle = ({
<ToggleContext.Provider value={{ setPopoverActive }}> <ToggleContext.Provider value={{ setPopoverActive }}>
<div <div
className={cn( className={cn(
'peer absolute bottom-0 right-0 top-0 items-center gap-1.5 rounded-r-lg from-gray-900 pl-2 pr-2 text-gray-500 dark:text-gray-300', 'peer absolute bottom-0 right-0 top-0 items-center gap-1.5 rounded-r-lg from-gray-500 from-gray-900 pl-2 pr-2 dark:text-white',
isPopoverActive || isActiveConvo ? 'flex' : 'hidden group-hover:flex', isPopoverActive || isActiveConvo ? 'flex' : 'hidden group-hover:flex',
isActiveConvo isActiveConvo
? 'from-gray-50 from-85% to-transparent group-hover:bg-gradient-to-l group-hover:from-gray-200 dark:from-gray-750 dark:group-hover:from-gray-750' ? 'from-gray-50 from-85% to-transparent group-hover:bg-gradient-to-l group-hover:from-gray-200 dark:from-gray-800 dark:group-hover:from-gray-800'
: 'z-50 bg-gray-200 from-gray-50 from-0% to-transparent hover:bg-gray-200 hover:bg-gradient-to-l dark:bg-gray-800 dark:from-gray-750 dark:hover:bg-gray-800', : 'z-50 from-gray-200 from-gray-50 from-0% to-transparent hover:bg-gradient-to-l hover:from-gray-200 dark:from-gray-750 dark:from-gray-800 dark:hover:from-gray-800',
isPopoverActive && !isActiveConvo ? 'bg-gray-50 dark:bg-gray-750' : '', isPopoverActive && !isActiveConvo ? 'from-gray-50 dark:from-gray-800' : '',
)} )}
> >
{children} {children}