Skip to content

Commit b47dc0c

Browse files
brunobergherbrunobergher
committed
Visual tweaks
1 parent 77708dc commit b47dc0c

File tree

2 files changed

+39
-44
lines changed

2 files changed

+39
-44
lines changed

‎webview-ui/src/components/chat/ChatTextArea.tsx‎

Lines changed: 37 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1067,7 +1067,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
10671067
: "bg-vscode-input-background",
10681068
"transition-background-color duration-150 ease-in-out",
10691069
"will-change-background-color",
1070-
"min-h-[90px]",
1070+
"min-h-[94px]",
10711071
"box-border",
10721072
"rounded",
10731073
"resize-none",
@@ -1082,7 +1082,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
10821082
onScroll={() => updateHighlights()}
10831083
/>
10841084

1085-
<div className="absolute top-2 right-2 z-30">
1085+
<div className="absolute bottom-2 right-1 z-30 flex flex-col items-center gap-0">
10861086
<StandardTooltip content={t("chat:addImages")}>
10871087
<button
10881088
aria-label={t("chat:addImages")}
@@ -1108,9 +1108,6 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
11081108
<Image className="w-4 h-4" />
11091109
</button>
11101110
</StandardTooltip>
1111-
</div>
1112-
1113-
<div className="absolute bottom-2 right-2 z-30 flex flex-col items-end gap-1">
11141111
<StandardTooltip content={t("chat:enhancePrompt")}>
11151112
<button
11161113
aria-label={t("chat:enhancePrompt")}
@@ -1134,52 +1131,50 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
11341131
<WandSparkles className={cn("w-4 h-4", isEnhancingPrompt && "animate-spin")} />
11351132
</button>
11361133
</StandardTooltip>
1137-
<div className="flex items-center gap-1">
1138-
{isEditMode && (
1139-
<StandardTooltip content={t("chat:cancel.title")}>
1140-
<button
1141-
aria-label={t("chat:cancel.title")}
1142-
disabled={false}
1143-
onClick={onCancel}
1144-
className={cn(
1145-
"relative inline-flex items-center justify-center",
1146-
"bg-transparent border-none p-1.5",
1147-
"rounded-md min-w-[28px] min-h-[28px]",
1148-
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
1149-
"transition-all duration-150",
1150-
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1151-
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1152-
"active:bg-[rgba(255,255,255,0.1)]",
1153-
"cursor-pointer",
1154-
)}>
1155-
<MessageSquareX className="w-4 h-4" />
1156-
</button>
1157-
</StandardTooltip>
1158-
)}
1159-
<StandardTooltip content={t("chat:sendMessage")}>
1134+
{isEditMode && (
1135+
<StandardTooltip content={t("chat:cancel.title")}>
11601136
<button
1161-
aria-label={t("chat:sendMessage")}
1137+
aria-label={t("chat:cancel.title")}
11621138
disabled={false}
1163-
onClick={onSend}
1139+
onClick={onCancel}
11641140
className={cn(
11651141
"relative inline-flex items-center justify-center",
11661142
"bg-transparent border-none p-1.5",
11671143
"rounded-md min-w-[28px] min-h-[28px]",
1168-
"text-vscode-descriptionForeground hover:text-vscode-foreground",
1169-
"transition-all duration-200",
1170-
hasInputContent
1171-
? "opacity-100 hover:opacity-100 pointer-events-auto"
1172-
: "opacity-0 pointer-events-none",
1173-
hasInputContent &&
1174-
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1144+
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
1145+
"transition-all duration-150",
1146+
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
11751147
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1176-
hasInputContent && "active:bg-[rgba(255,255,255,0.1)]",
1177-
hasInputContent && "cursor-pointer",
1148+
"active:bg-[rgba(255,255,255,0.1)]",
1149+
"cursor-pointer",
11781150
)}>
1179-
<SendHorizontal className="w-4 h-4" />
1151+
<MessageSquareX className="w-4 h-4" />
11801152
</button>
11811153
</StandardTooltip>
1182-
</div>
1154+
)}
1155+
<StandardTooltip content={t("chat:sendMessage")}>
1156+
<button
1157+
aria-label={t("chat:sendMessage")}
1158+
disabled={false}
1159+
onClick={onSend}
1160+
className={cn(
1161+
"relative inline-flex items-center justify-center",
1162+
"bg-transparent border-none p-1.5",
1163+
"rounded-md min-w-[28px] min-h-[28px]",
1164+
"text-vscode-descriptionForeground hover:text-vscode-foreground",
1165+
"transition-all duration-200",
1166+
hasInputContent
1167+
? "opacity-100 hover:opacity-100 pointer-events-auto"
1168+
: "opacity-0 pointer-events-none",
1169+
hasInputContent &&
1170+
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1171+
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1172+
hasInputContent && "active:bg-[rgba(255,255,255,0.1)]",
1173+
hasInputContent && "cursor-pointer",
1174+
)}>
1175+
<SendHorizontal className="w-4 h-4" />
1176+
</button>
1177+
</StandardTooltip>
11831178
</div>
11841179

11851180
{!inputValue && (
@@ -1237,7 +1232,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
12371232
/>
12381233
<AutoApproveDropdown triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink" />
12391234
</div>
1240-
<div className="flex flex-shrink-0 items-center gap-0.5">
1235+
<div className="flex flex-shrink-0 items-center gap-0.5 pr-2">
12411236
{isTtsPlaying && (
12421237
<StandardTooltip content={t("chat:stopTts")}>
12431238
<button

‎webview-ui/src/components/chat/IndexingStatusBadge.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export const IndexingStatusBadge: React.FC<IndexingStatusBadgeProps> = ({ classN
9191
size="sm"
9292
aria-label={tooltipText}
9393
className={cn(
94-
"relative h-7 w-7 p-0",
94+
"relative h-5 w-5 p-0",
9595
"text-vscode-foreground opacity-85",
9696
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)]",
9797
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
@@ -100,7 +100,7 @@ export const IndexingStatusBadge: React.FC<IndexingStatusBadgeProps> = ({ classN
100100
<Database className="w-4 h-4" />
101101
<span
102102
className={cn(
103-
"absolute top-1 right-1 w-1.5 h-1.5 rounded-full transition-colors duration-200",
103+
"absolute top-0 right-0 w-1.5 h-1.5 rounded-full transition-colors duration-200",
104104
statusColorClass,
105105
)}
106106
/>

0 commit comments

Comments
 (0)