scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-07 08:26:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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
This commit is contained in:
hannesrudolph 2025-07-28 18:44:01 -06:00
parent 63fcac7aeb
commit 0ead2cd9b6
2 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
webview-ui/src/components/chat/ModeSelector.tsx
View file

@ -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 */}

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

@ -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()
})
})
})