Revert package.json

Author: sachasayan

webview-ui/src/components/chat/Announcement.tsx

@@ -42,28 +42,20 @@ const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 
 	return (
 		<div className="flex flex-col justify-center absolute top-0 bottom-0 left-0 right-0 z-50 p-10 bg-black/50">
-			<div
-				style={{
-					backgroundColor: "var(--vscode-editor-background)",
-					borderRadius: "3px",
-					padding: "12px 16px",
-					margin: "5px 15px 5px 15px",
-					position: "relative",
-					flexShrink: 0,
-				}}>
+			<div className="bg-vscode-editor-background rounded-[3px] p-[12px_16px] m-[5px_15px] relative flex-shrink-0">
 				<VSCodeButton
 					appearance="icon"
 					onClick={hideAnnouncement}
 					title={t("chat:announcement.hideButton")}
-					style={{ position: "absolute", top: "8px", right: "8px" }}>
+					className="absolute top-2 right-2">
 					<span className="codicon codicon-close"></span>
 				</VSCodeButton>
-				<h2 style={{ margin: "0 0 8px" }}>{t("chat:announcement.title")}</h2>
+				<h2 className="m-0 mb-2">{t("chat:announcement.title")}</h2>
 
-				<p style={{ margin: "5px 0px" }}>{t("chat:announcement.description")}</p>
+				<p className="my-[5px]">{t("chat:announcement.description")}</p>
 
-				<h3 style={{ margin: "12px 0 5px", fontSize: "14px" }}>{t("chat:announcement.whatsNew")}</h3>
-				<ul style={{ margin: "5px 0" }}>
+				<h3 className="mt-3 mb-[5px] text-sm">{t("chat:announcement.whatsNew")}</h3>
+				<ul className="my-[5px]">
 					<li>
 						•{" "}
 						<Trans
@@ -96,7 +88,7 @@ const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 					</li>
 				</ul>
 
-				<p style={{ margin: "10px 0px 0px" }}>
+				<p className="mt-2.5 mb-0">
 					<Trans
 						i18nKey="chat:announcement.detailsDiscussLinks"
 						components={{

webview-ui/src/components/chat/AutoApproveMenu.tsx

@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from "react"
 import { Trans } from "react-i18next"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
+import { cn } from "@/lib/utils"
 import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
@@ -118,23 +119,13 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 
 	return (
 		<div
-			style={{
-				padding: "0 15px",
-				userSelect: "none",
-				borderTop: isExpanded
-					? `0.5px solid color-mix(in srgb, var(--vscode-titleBar-inactiveForeground) 20%, transparent)`
-					: "none",
-				overflowY: "auto",
-				...style,
-			}}>
+			className={cn(
+				"px-[15px] select-none overflow-y-auto",
+				isExpanded && "border-t-[0.5px] border-vscode-titleBar-inactiveForeground-20",
+			)}
+			style={style}>
 			<div
-				style={{
-					display: "flex",
-					alignItems: "center",
-					gap: "8px",
-					padding: isExpanded ? "8px 0" : "8px 0 0 0",
-					cursor: "pointer",
-				}}
+				className={`flex items-center gap-2 cursor-pointer ${isExpanded ? "py-2" : "pt-2 pb-0"}`}
 				onClick={toggleExpanded}>
 				<div onClick={(e) => e.stopPropagation()}>
 					<VSCodeCheckbox
@@ -146,49 +137,22 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 						}}
 					/>
 				</div>
-				<div
-					style={{
-						display: "flex",
-						alignItems: "center",
-						gap: "4px",
-						flex: 1,
-						minWidth: 0,
-					}}>
-					<span
-						style={{
-							color: "var(--vscode-foreground)",
-							flexShrink: 0,
-						}}>
-						{t("chat:autoApprove.title")}
-					</span>
-					<span
-						style={{
-							color: "var(--vscode-descriptionForeground)",
-							overflow: "hidden",
-							textOverflow: "ellipsis",
-							whiteSpace: "nowrap",
-							flex: 1,
-							minWidth: 0,
-						}}>
+				<div className="flex items-center gap-1 flex-1 min-w-0">
+					<span className="text-vscode-foreground flex-shrink-0">{t("chat:autoApprove.title")}</span>
+					<span className="text-vscode-descriptionForeground overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0">
 						{enabledActionsList || t("chat:autoApprove.none")}
 					</span>
 					<span
-						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}
-						style={{
-							flexShrink: 0,
-							marginLeft: isExpanded ? "2px" : "-2px",
-						}}
+						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"} flex-shrink-0 ${
+							isExpanded ? "ml-0.5" : "ml-[-2px]"
+						}`}
 					/>
 				</div>
 			</div>
 
 			{isExpanded && (
 				<div className="flex flex-col gap-2">
-					<div
-						style={{
-							color: "var(--vscode-descriptionForeground)",
-							fontSize: "12px",
-						}}>
+					<div className="text-vscode-descriptionForeground text-xs">
 						<Trans
 							i18nKey="chat:autoApprove.description"
 							components={{