Change input icon button style

webview-ui/src/components/ChatView.tsx

@@ -659,7 +659,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						// borderLeft: "9px solid transparent", // NOTE: react-textarea-autosize doesn't calculate correct height when using borderLeft/borderRight so we need to use horizontal padding instead
 						// Instead of using boxShadow, we use a div with a border to better replicate the behavior when the textarea is focused
 						// boxShadow: "0px 0px 0px 1px var(--vscode-input-border)",
-						padding: "0 54px 0 9px",
+						padding: "0 49px 0 9px",
 						cursor: textAreaDisabled ? "not-allowed" : undefined,
 						flex: 1,
 					}}
@@ -681,30 +681,35 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 				<div
 					style={{
 						position: "absolute",
-						right: 20,
+						right: 23,
 						display: "flex",
 						alignItems: "flex-center",
 						height: textAreaBaseHeight || 31,
-						bottom: 10,
+						bottom: 9, // should be 10 but doesnt look good on mac
 					}}>
 					<div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
-						<VSCodeButton
+						<div
-							disabled={shouldDisableImages}
+							className={`input-icon-button ${
-							appearance="icon"
+								shouldDisableImages ? "disabled" : ""
-							aria-label="Attach Images"
+							} codicon codicon-device-camera`}
-							onClick={selectImages}
+							onClick={() => {
-							style={{ marginRight: "2px" }}>
+								if (!shouldDisableImages) {
-							<span
+									selectImages()
-								className="codicon codicon-device-camera"
+								}
-								style={{ fontSize: 18, marginLeft: -2, marginBottom: 1 }}></span>
+							}}
-						</VSCodeButton>
+							style={{
-						<VSCodeButton
+								marginRight: 5.5,
-							disabled={textAreaDisabled}
+								fontSize: 16.5,
-							appearance="icon"
+							}}
-							aria-label="Send Message"
+						/>
-							onClick={handleSendMessage}>
+						<div
-							<span className="codicon codicon-send" style={{ fontSize: 16, marginBottom: -1 }}></span>
+							className={`input-icon-button ${textAreaDisabled ? "disabled" : ""} codicon codicon-send`}
-						</VSCodeButton>
+							onClick={() => {
+								if (!textAreaDisabled) {
+									handleSendMessage()
+								}
+							}}
+							style={{ fontSize: 15 }}></div>
 					</div>
 				</div>
 			</div>

webview-ui/src/components/HistoryView.tsx

@@ -114,13 +114,6 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 						background-color: var(--vscode-editor-findMatchHighlightBackground);
 						color: inherit;
 					}
-					.clear-search-button {
-						cursor: pointer;
-						opacity: 0.5;
-					}
-					.clear-search-button:hover {
-						opacity: 1;
-					}
 				`}
 			</style>
 			<div
@@ -164,7 +157,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 								style={{ fontSize: 13, marginTop: 2.5, opacity: 0.8 }}></div>
 							{searchQuery && (
 								<div
-									className="clear-search-button"
+									className="input-icon-button codicon codicon-close"
 									aria-label="Clear search"
 									onClick={() => setSearchQuery("")}
 									slot="end"
@@ -173,9 +166,8 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 										justifyContent: "center",
 										alignItems: "center",
 										height: "100%",
-									}}>
+									}}
-									<span className="codicon codicon-close"></span>
+								/>
-								</div>
 							)}
 						</VSCodeTextField>
 						<VSCodeRadioGroup

webview-ui/src/index.css

@@ -125,3 +125,20 @@ vscode-dropdown::part(listbox) {
 	transition: none;
 	scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;
 }
+
+/* Faded icon buttons in textfields */
+
+.input-icon-button {
+	cursor: pointer;
+	opacity: 0.65;
+}
+.input-icon-button:hover {
+	opacity: 1;
+}
+.input-icon-button.disabled {
+	cursor: not-allowed;
+	opacity: 0.4;
+}
+.input-icon-button.disabled:hover {
+	opacity: 0.4;
+}