Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-02 06:10:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🎨 style: Unify Styles across Themes and Improve Accessibility (#7783)

Browse source 
* style: update button styles for improved hover effects and accessibility

* style: enhance CustomMenuItem styling for improved visual feedback

* style: improved accessibility and visual consistency

* chore: add missing localization in ActionsPanel

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Marco Beretta 2025-06-08 00:22:08 +02:00 • committed by GitHub
parent c22d74d41e
commit cd7dd576c1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 38 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/Chat/Messages/Feedback.tsx
View file

@ -216,18 +216,12 @@ function FeedbackButtons({
function buttonClasses(isActive: boolean, isLast: boolean) {
return cn(
'hover-button rounded-lg p-1.5',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',
'hover:bg-gray-100 hover:text-gray-500',
'data-[state=open]:active data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500',
isActive ? 'text-gray-500 dark:text-gray-200 font-bold' : 'dark:text-gray-400/70',
'dark:hover:bg-gray-700 dark:hover:text-gray-200',
'data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200',
'disabled:dark:hover:text-gray-400',
isLast
? ''
: 'data-[state=open]:opacity-100 md:opacity-0 md:group-focus-within:opacity-100 md:group-hover:opacity-100',
'md:group-focus-within:visible md:group-hover:visible md:group-[.final-completion]:visible',
'hover-button rounded-lg p-1.5 text-text-secondary-alt transition-colors duration-200',
'hover:text-text-primary hover:bg-surface-hover',
'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible',
!isLast && 'md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100',
'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none',
isActive && 'active text-text-primary bg-surface-hover',
);
}