style(components): update button styling in AgentItem and SessionItem

- Change hover background color and add shadow in AgentItem
- Use cn utility for className in SessionItem
- Update height and background color for active state in SessionItem
This commit is contained in:
icarus 2025-09-26 04:37:30 +08:00
parent f4e4586fbc
commit 5c8e06ed94
2 changed files with 5 additions and 5 deletions

View File

@ -84,7 +84,7 @@ const ButtonContainer: React.FC<React.ComponentProps<typeof Button>> = ({ classN
'rounded-[var(--list-item-border-radius)]',
'border-[0.5px] border-transparent',
'w-[calc(var(--assistants-width)_-_20px)]',
'bg-transparent hover:bg-[var(--color-list-item-hover)]',
'bg-transparent hover:bg-[var(--color-list-item)] hover:shadow-sm',
'cursor-pointer',
className?.includes('active') && 'bg-[var(--color-list-item)] shadow-sm',
className

View File

@ -46,7 +46,7 @@ const SessionItem: FC<SessionItemProps> = ({ session, agentId, isDisabled, isLoa
isDisabled={isDisabled}
isLoading={isLoading}
onPress={onPress}
className={isActive ? 'active' : ''}
className={cn(isActive ? 'active' : '')}
onDoubleClick={() => startEdit(session.name ?? '')}>
<SessionLabelContainer className="name h-full w-full" title={session.name ?? session.id}>
{isEditing && (
@ -99,14 +99,14 @@ const SessionItem: FC<SessionItemProps> = ({ session, agentId, isDisabled, isLoa
const ButtonContainer: React.FC<React.ComponentProps<typeof Button>> = ({ className, children, ...props }) => (
<Button
{...props}
variant="light"
className={cn(
'relative mb-2 flex h-[37px] flex-row justify-between p-0',
'relative mb-2 flex h-9 flex-row justify-between p-0',
'rounded-[var(--list-item-border-radius)]',
'border-[0.5px] border-transparent',
'w-[calc(var(--assistants-width)_-_20px)]',
'bg-transparent hover:bg-[var(--color-list-item-hover)]',
'cursor-pointer',
className?.includes('active') && 'bg-[var(--color-list-item)] shadow-sm',
className?.includes('active') && 'bg-foreground-100 shadow-sm',
className
)}>
{children}