diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx index 5135eca2f2..d99fe7c931 100644 --- a/webview-ui/src/components/chat/ChatTextArea.tsx +++ b/webview-ui/src/components/chat/ChatTextArea.tsx @@ -947,7 +947,8 @@ const ChatTextArea = forwardRef( "bg-transparent border-none p-1.5", "rounded-md min-w-[28px] min-h-[28px]", "text-vscode-foreground opacity-85", - "transition-all duration-150", + // Fixed: Use specific transition to prevent flashing + "transition-opacity duration-100", "hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder", "active:bg-[rgba(255,255,255,0.1)]", @@ -969,7 +970,8 @@ const ChatTextArea = forwardRef( "bg-transparent border-none p-1.5", "rounded-md min-w-[28px] min-h-[28px]", "text-vscode-foreground opacity-85", - "transition-all duration-150", + // Fixed: Use specific transition to prevent flashing + "transition-opacity duration-100", "hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder", "active:bg-[rgba(255,255,255,0.1)]", @@ -1101,8 +1103,9 @@ const ChatTextArea = forwardRef( "relative inline-flex items-center justify-center", "bg-transparent border-none p-1.5", "rounded-md min-w-[28px] min-h-[28px]", - "opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", - "transition-all duration-150", + // Fixed: Consistent with send button fix to prevent flashing + "opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", + "transition-opacity duration-100", "hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder", "active:bg-[rgba(255,255,255,0.1)]", @@ -1124,8 +1127,12 @@ const ChatTextArea = forwardRef( "relative inline-flex items-center justify-center", "bg-transparent border-none p-1.5", "rounded-md min-w-[28px] min-h-[28px]", - "opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", - "transition-all duration-150", + // Fixed: Removed opacity transitions that were causing flashing + // Changed from opacity-60 to opacity-75 for better visibility + // Removed transition-all to prevent unwanted animations + "opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", + // Use transition only for specific properties to avoid flashing + "transition-opacity duration-100", "hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder", "active:bg-[rgba(255,255,255,0.1)]", diff --git a/webview-ui/src/components/chat/EditModeControls.tsx b/webview-ui/src/components/chat/EditModeControls.tsx index 82906bf1a3..fce6138e2b 100644 --- a/webview-ui/src/components/chat/EditModeControls.tsx +++ b/webview-ui/src/components/chat/EditModeControls.tsx @@ -76,8 +76,8 @@ export const EditModeControls: React.FC = ({ "relative inline-flex items-center justify-center", "bg-transparent border-none p-1.5", "rounded-md min-w-[28px] min-h-[28px]", - "opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", - "transition-all duration-150", + "opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", + "transition-opacity duration-100", "hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder", "active:bg-[rgba(255,255,255,0.1)]", @@ -97,8 +97,8 @@ export const EditModeControls: React.FC = ({ "relative inline-flex items-center justify-center", "bg-transparent border-none p-1.5", "rounded-md min-w-[28px] min-h-[28px]", - "opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", - "transition-all duration-150", + "opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", + "transition-opacity duration-100", "hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder", "active:bg-[rgba(255,255,255,0.1)]", diff --git a/webview-ui/src/components/chat/IconButton.tsx b/webview-ui/src/components/chat/IconButton.tsx index 75d8bc4b0b..7763950898 100644 --- a/webview-ui/src/components/chat/IconButton.tsx +++ b/webview-ui/src/components/chat/IconButton.tsx @@ -24,7 +24,7 @@ export const IconButton: React.FC = ({ "bg-transparent border-none p-1.5", "rounded-md min-w-[28px] min-h-[28px]", "text-vscode-foreground opacity-85", - "transition-all duration-150", + "transition-opacity duration-100", "hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder", "active:bg-[rgba(255,255,255,0.1)]", diff --git a/webview-ui/src/components/chat/IndexingStatusBadge.tsx b/webview-ui/src/components/chat/IndexingStatusBadge.tsx index 2462780b1d..a739ea60b1 100644 --- a/webview-ui/src/components/chat/IndexingStatusBadge.tsx +++ b/webview-ui/src/components/chat/IndexingStatusBadge.tsx @@ -118,7 +118,7 @@ export const IndexingStatusBadge: React.FC = ({ classN "bg-transparent border-none p-1.5", "rounded-md min-w-[28px] min-h-[28px]", "opacity-85 text-vscode-foreground", - "transition-all duration-150", + "transition-opacity duration-100", "hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder", "active:bg-[rgba(255,255,255,0.1)]",