Hoist The Sails ⛵ - Danger Ahead! (RooCodeInc#2405)

* Create Tailwind DangerButton

* changeset

* remove unused import

* Remove old DangerButton component

* rename DangerButtonTW to DangerButton

Author: celestial-vault

.changeset/tasty-cheetahs-vanish.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+DangerButton.tsx to Tailwind

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

@@ -1,30 +1,23 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import styled from "styled-components"
-
-const StyledButton = styled(VSCodeButton)`
-	--danger-button-bg: #c42b2b;
-	--danger-button-hover: #a82424;
-	--danger-button-active: #8f1f1f;
-
-	background-color: var(--danger-button-bg) !important;
-	border-color: var(--danger-button-bg) !important;
-	color: #ffffff !important;
-
-	&:hover {
-		background-color: var(--danger-button-hover) !important;
-		border-color: var(--danger-button-hover) !important;
-	}
-
-	&:active {
-		background-color: var(--danger-button-active) !important;
-		border-color: var(--danger-button-active) !important;
-	}
-`
 
 interface DangerButtonProps extends React.ComponentProps<typeof VSCodeButton> {}
 
 const DangerButton: React.FC<DangerButtonProps> = (props) => {
-	return <StyledButton {...props} />
+	return (
+		<VSCodeButton
+			{...props}
+			className={`
+				!bg-[#c42b2b] 
+				!border-[#c42b2b] 
+				!text-white
+				hover:!bg-[#a82424] 
+				hover:!border-[#a82424]
+				active:!bg-[#8f1f1f] 
+				active:!border-[#8f1f1f]
+				${props.className || ""}
+			`}
+		/>
+	)
 }
 
 export default DangerButton

webview-ui/src/components/history/HistoryView.tsx

@@ -6,9 +6,9 @@ import { memo, useMemo, useState, useEffect, useCallback } from "react"
 import Fuse, { FuseResult } from "fuse.js"
 import { formatLargeNumber } from "../../utils/format"
 import { formatSize } from "../../utils/size"
-import DangerButton from "../common/DangerButton"
 import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
 import { useEvent } from "react-use"
+import DangerButton from "../common/DangerButton"
 
 type HistoryViewProps = {
 	onDone: () => void

webview-ui/src/components/mcp/McpView.tsx

@@ -13,10 +13,10 @@ import { DEFAULT_MCP_TIMEOUT_SECONDS, McpServer } from "../../../../src/shared/m
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { getMcpServerDisplayName } from "../../utils/mcp"
 import { vscode } from "../../utils/vscode"
-import DangerButton from "../common/DangerButton"
 import McpMarketplaceView from "./marketplace/McpMarketplaceView"
 import McpResourceRow from "./McpResourceRow"
 import McpToolRow from "./McpToolRow"
+import DangerButton from "../common/DangerButton"
 
 type McpViewProps = {
 	onDone: () => void
@@ -387,13 +387,11 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 						}}>
 						{server.status === "connecting" ? "Retrying..." : "Retry Connection"}
 					</VSCodeButton>
+
 					<DangerButton
-						onClick={handleDelete}
+						style={{ width: "calc(100% - 20px)", margin: "0 10px 10px 10px" }}
 						disabled={isDeleting}
-						style={{
-							width: "calc(100% - 20px)",
-							margin: "0 10px 10px 10px",
-						}}>
+						onClick={handleDelete}>
 						{isDeleting ? "Deleting..." : "Delete Server"}
 					</DangerButton>
 				</div>
@@ -487,12 +485,9 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 						</VSCodeButton>
 
 						<DangerButton
-							onClick={handleDelete}
+							style={{ width: "calc(100% - 14px)", margin: "5px 7px 3px 7px" }}
 							disabled={isDeleting}
-							style={{
-								width: "calc(100% - 14px)",
-								margin: "5px 7px 3px 7px",
-							}}>
+							onClick={handleDelete}>
 							{isDeleting ? "Deleting..." : "Delete Server"}
 						</DangerButton>
 					</div>