Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhance tab button styling with hover effects and improved color contrast 

Co-authored-by: markokraemer.mail <markokraemer.mail@gmail.com>
This commit is contained in:
Cursor Agent 2025-07-17 10:41:26 +00:00
parent 4657c1495f
commit 0622a7618a
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/ui/fancy-tabs.tsx
View File

@ -34,11 +34,12 @@ const TabButton = ({ value, isActive, onClick, children }: TabButtonProps) => {
<button <button
onClick={onClick} onClick={onClick}
className={cn( className={cn(
"relative flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-medium transition-all duration-300", "relative flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-medium transition-all duration-300 ease-out",
isDark ? "hover:bg-white/5" : "hover:bg-muted/80", // Only apply hover background when not active - subtle and elegant
!isActive && (isDark ? "hover:bg-white/8 hover:scale-[1.02]" : "hover:bg-muted/60 hover:scale-[1.02]"),
isActive isActive
? isDark ? "text-white" : "text-foreground bg-background border border-border/50" ? isDark ? "text-white" : "text-foreground bg-background border border-border/50"
: isDark ? "text-white/50 hover:text-white/70" : "text-muted-foreground hover:text-foreground" : isDark ? "text-white/60 hover:text-white/85" : "text-muted-foreground hover:text-foreground"
)} )}
style={isActive && isDark ? { style={isActive && isDark ? {
background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08))', background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08))',