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

🎨 style: Theming and Consistency Improvements for Agent Marketplace

Browse source 
style: AccessRolesPicker to use DropdownPopup, theming, import order, localization

refactor: Update localization keys for Agent Marketplace in NewChat component, remove duplicate key

style: Adjust layout and font size in NewChat component for Agent Marketplace button

style: theming in AgentGrid

style: Update theming and text colors across Agent components for improved consistency

chore: import order

style: Replace Dialog with OGDialog and update content components in AgentDetail

refactor: Simplify AgentDetail component by removing dropdown menu and replacing it with a copy link button

style: Enhance scrollbar visibility and layout in AgentMarketplace and CategoryTabs components

style: Adjust layout in AgentMarketplace component by removing unnecessary padding from the container

style: Refactor layout in AgentMarketplace component by reorganizing hero section and sticky wrapper for improved structure with collapsible header effect

style: Improve responsiveness and layout in AgentMarketplace component by adjusting header visibility and modifying container styles based on screen size

fix: Update localization key for no categories message in CategoryTabs component and corresponding test

style: Add className prop to OpenSidebar component for improved styling flexibility and update Header to utilize it for responsive design

style: Enhance layout and scrolling behavior in CategoryTabs component by adding scroll snap properties and adjusting class names for improved user experience

style: Update AgentGrid component layout and skeleton structure for improved visual consistency and responsiveness
This commit is contained in:
Danny Avila 2025-07-24 18:41:28 -04:00
parent 949682ef0f
commit 75324e1c7e
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
13 changed files with 331 additions and 298 deletions
Download patch file Download diff file Expand all files Collapse all files

12
client/src/components/SidePanel/Agents/AgentCard.tsx
View file

@ -24,7 +24,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
'group relative flex overflow-hidden rounded-2xl',
'cursor-pointer transition-colors duration-200',
'aspect-[5/2.5] w-full',
'bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600',
'bg-surface-tertiary hover:bg-surface-hover-alt',
className,
)}
onClick={onClick}
@ -51,7 +51,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
{/* Agent info section - right side, responsive */}
<div className="flex min-w-0 flex-1 flex-col justify-center">
{/* Agent name - responsive text sizing */}
<h3 className="mb-1 line-clamp-1 text-base font-bold text-gray-900 dark:text-white sm:mb-2 sm:text-lg">
<h3 className="mb-1 line-clamp-1 text-base font-bold text-text-primary sm:mb-2 sm:text-lg">
{agent.name}
</h3>
@ -59,13 +59,15 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
<p
id={`agent-${agent.id}-description`}
className={cn(
'mb-1 line-clamp-2 text-xs leading-relaxed text-gray-600 dark:text-gray-300',
'mb-1 line-clamp-2 text-xs leading-relaxed text-text-secondary',
'sm:mb-2 sm:text-sm',
)}
aria-label={`Description: ${agent.description || localize('com_agents_no_description')}`}
>
{agent.description || (
<span className="italic text-gray-400">{localize('com_agents_no_description')}</span>
<span className="italic text-text-secondary">
{localize('com_agents_no_description')}
</span>
)}
</p>
@ -75,7 +77,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
if (displayName) {
return (
<div className="flex items-center text-xs text-gray-500 dark:text-gray-400 sm:text-sm">
<div className="flex items-center text-xs text-text-tertiary sm:text-sm">
<span className="font-light">{localize('com_agents_created_by')}</span>
<span className="ml-1 font-bold">{displayName}</span>
</div>