fix: use Download icon from lucide-react for import button

- Replace codicon-cloud-download with Download icon to match ModesView
- Update Button styling to match other footer buttons
- Update tests to check for SVG icon instead of codicon class

Author: hannesrudolph

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { ChevronUp, Check, X, Upload } from "lucide-react"
+import { ChevronUp, Check, X, Upload, Download } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { useRooPortal } from "@/components/ui/hooks/useRooPortal"
 import { Popover, PopoverContent, PopoverTrigger, StandardTooltip, Button } from "@/components/ui"
@@ -368,14 +368,15 @@ export const ModeSelector = ({
 										setOpen(false)
 									}}
 								/>
-								{/* Import button - using IconButton for consistency */}
-								<IconButton
-									iconClass="codicon-cloud-download"
+								{/* Import button - using Button with Download icon to match ModesView */}
+								<Button
+									variant="ghost"
+									size="icon"
 									title={t("prompts:modes.importMode")}
 									onClick={() => setShowImportDialog(true)}
-									disabled={isImporting}
-									isLoading={isImporting}
-								/>
+									disabled={isImporting}>
+									<Download className="h-3.5 w-3.5" />
+								</Button>
 							</div>
 
 							{/* Info icon and title on the right - only show info icon when search bar is visible */}

webview-ui/src/components/chat/__tests__/ModeSelector.export-import.spec.tsx

@@ -213,8 +213,8 @@ describe("ModeSelector Export/Import", () => {
 			// Import button should be visible
 			const importButton = screen.getByRole("button", { name: "Import Mode" })
 			expect(importButton).toBeInTheDocument()
-			// Check for the icon inside the button
-			const icon = importButton.querySelector(".codicon-cloud-download")
+			// Check for the Download icon (SVG) inside the button
+			const icon = importButton.querySelector("svg")
 			expect(icon).toBeInTheDocument()
 		})
 
@@ -424,16 +424,17 @@ describe("ModeSelector Export/Import", () => {
 			expect(exportButton).toHaveAttribute("aria-label", "Export Mode")
 		})
 
-		test("import button uses IconButton component", async () => {
+		test("import button has proper structure", async () => {
 			render(<ModeSelector value={"code" as Mode} onChange={vi.fn()} modeShortcutText="Ctrl+M" />)
 
 			// Open the popover
 			fireEvent.click(screen.getByTestId("mode-selector-trigger"))
 
-			// Import button should have proper IconButton structure
+			// Import button should have proper structure
 			const importButton = screen.getByRole("button", { name: "Import Mode" })
-			expect(importButton).toHaveAttribute("aria-label", "Import Mode")
-			expect(importButton.querySelector(".codicon-cloud-download")).toBeInTheDocument()
+			expect(importButton).toHaveAttribute("title", "Import Mode")
+			// Check for the Download icon (SVG) inside the button
+			expect(importButton.querySelector("svg")).toBeInTheDocument()
 		})
 	})
 })