changeset

.changeset/sharp-hats-hug.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+SuccessButton to Tailwind

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

@@ -22,13 +22,13 @@ import { CheckpointControls, CheckpointOverlay } from "../common/CheckpointContr
 import CodeAccordian, { cleanPathPrefix } from "../common/CodeAccordian"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import MarkdownBlock from "../common/MarkdownBlock"
-import SuccessButton from "../common/SuccessButton"
 import Thumbnails from "../common/Thumbnails"
 import McpResourceRow from "../mcp/McpResourceRow"
 import McpToolRow from "../mcp/McpToolRow"
 import CreditLimitError from "./CreditLimitError"
 import { OptionsButtons } from "./OptionsButtons"
 import { highlightMentions } from "./TaskHeader"
+import SuccessButton from "../common/SuccessButton"
 
 const ChatRowContainer = styled.div`
 	padding: 10px 6px 10px 15px;
@@ -1041,8 +1041,8 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 											})
 										}}
 										style={{
-											width: "100%",
 											cursor: seeNewChangesDisabled ? "wait" : "pointer",
+											width: "100%",
 										}}>
 										<i className="codicon codicon-new-file" style={{ marginRight: 6 }} />
 										See new changes

webview-ui/src/components/common/SuccessButton.tsx

@@ -1,30 +1,25 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import styled from "styled-components"
 
-const StyledButton = styled(VSCodeButton)`
-	--success-button-bg: #176f2c;
-	--success-button-hover: #197f31;
-	--success-button-active: #156528;
+interface SuccessButtonTWProps extends React.ComponentProps<typeof VSCodeButton> {}
 
-	background-color: var(--success-button-bg) !important;
-	border-color: var(--success-button-bg) !important;
-	color: #ffffff !important;
-
-	&:hover {
-		background-color: var(--success-button-hover) !important;
-		border-color: var(--success-button-hover) !important;
-	}
-
-	&:active {
-		background-color: var(--success-button-active) !important;
-		border-color: var(--success-button-active) !important;
-	}
-`
-
-interface SuccessButtonProps extends React.ComponentProps<typeof VSCodeButton> {}
-
-const SuccessButton: React.FC<SuccessButtonProps> = (props) => {
-	return <StyledButton {...props} />
+const SuccessButtonTW: React.FC<SuccessButtonTWProps> = (props) => {
+	return (
+		<VSCodeButton
+			{...props}
+			className={`
+				!bg-[#176f2c] 
+				!border-[#176f2c] 
+				!text-white
+				hover:!bg-[#197f31] 
+				hover:!border-[#197f31]
+				active:!bg-[#156528] 
+				active:!border-[#156528]
+				${props.className || ""}
+			`
+				.replace(/\s+/g, " ")
+				.trim()}
+		/>
+	)
 }
 
-export default SuccessButton
+export default SuccessButtonTW