use teal icon color for file browser toolbar buttons

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-05 00:46:59 +00:00
co-authored by Claude Opus 4.6
parent 9a95773664
commit 9fedbe02d4
4 changed files with 15 additions and 15 deletions
@@ -15,7 +15,7 @@ export const ActionButtons = ({ fileBrowserManager }: ActionButtonsProps) => {
<button <button
onClick={refresh} onClick={refresh}
title="Refresh" title="Refresh"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<RefreshCw className="h-4 w-4" /> <RefreshCw className="h-4 w-4" />
</button> </button>
@@ -26,7 +26,7 @@ export const DefaultActions = ({ fileBrowserManager }: DefaultActionsProps) => {
if (name?.trim()) handleCreateDir(name.trim()); if (name?.trim()) handleCreateDir(name.trim());
}} }}
title="New folder" title="New folder"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<FolderPlus className="h-4 w-4" /> <FolderPlus className="h-4 w-4" />
</button> </button>
@@ -34,7 +34,7 @@ export const DefaultActions = ({ fileBrowserManager }: DefaultActionsProps) => {
<button <button
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
title="Upload files" title="Upload files"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<Upload className="h-4 w-4" /> <Upload className="h-4 w-4" />
<input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileChange} /> <input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileChange} />
@@ -43,7 +43,7 @@ export const DefaultActions = ({ fileBrowserManager }: DefaultActionsProps) => {
<button <button
onClick={() => folderInputRef.current?.click()} onClick={() => folderInputRef.current?.click()}
title="Upload folder" title="Upload folder"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<FolderUp className="h-4 w-4" /> <FolderUp className="h-4 w-4" />
<input <input
@@ -61,7 +61,7 @@ export const DefaultActions = ({ fileBrowserManager }: DefaultActionsProps) => {
<button <button
onClick={handlePaste} onClick={handlePaste}
title="Paste" title="Paste"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<ClipboardPaste className="h-4 w-4" /> <ClipboardPaste className="h-4 w-4" />
</button> </button>
@@ -18,14 +18,14 @@ export const SelectionActions = ({ fileBrowserManager }: SelectionActionsProps)
<button <button
onClick={handleCut} onClick={handleCut}
title="Cut" title="Cut"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<Scissors className="h-4 w-4" /> <Scissors className="h-4 w-4" />
</button> </button>
<button <button
onClick={handleCopy} onClick={handleCopy}
title="Copy" title="Copy"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<Copy className="h-4 w-4" /> <Copy className="h-4 w-4" />
</button> </button>
@@ -33,7 +33,7 @@ export const SelectionActions = ({ fileBrowserManager }: SelectionActionsProps)
<button <button
onClick={handlePaste} onClick={handlePaste}
title="Paste" title="Paste"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<ClipboardPaste className="h-4 w-4" /> <ClipboardPaste className="h-4 w-4" />
</button> </button>
@@ -41,7 +41,7 @@ export const SelectionActions = ({ fileBrowserManager }: SelectionActionsProps)
<button <button
onClick={handleDownloadSelected} onClick={handleDownloadSelected}
title="Download" title="Download"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<Download className="h-4 w-4" /> <Download className="h-4 w-4" />
</button> </button>
@@ -55,7 +55,7 @@ export const SelectionActions = ({ fileBrowserManager }: SelectionActionsProps)
<button <button
onClick={() => setSelected(new Set())} onClick={() => setSelected(new Set())}
title="Clear selection" title="Clear selection"
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
@@ -64,7 +64,7 @@ export const Toolbar = ({ fileBrowserManager }: ToolbarProps) => {
setShowCloneInput(false); setShowCloneInput(false);
setCloneUrl(''); setCloneUrl('');
}} }}
className="p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors disabled:opacity-40" className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors disabled:opacity-40"
title="Cancel" title="Cancel"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
@@ -74,7 +74,7 @@ export const Toolbar = ({ fileBrowserManager }: ToolbarProps) => {
<button <button
onClick={() => setShowCloneInput(true)} onClick={() => setShowCloneInput(true)}
title="Git clone" title="Git clone"
className="hidden md:block p-1.5 rounded-md text-duck-dark/50 hover:bg-duck-dark/5 cursor-pointer transition-colors" className="hidden md:block p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
> >
<GitBranch className="h-4 w-4" /> <GitBranch className="h-4 w-4" />
</button> </button>
@@ -105,7 +105,7 @@ export const Toolbar = ({ fileBrowserManager }: ToolbarProps) => {
</div> </div>
<button <button
onClick={() => setShowHidden((v) => !v)} onClick={() => setShowHidden((v) => !v)}
className={`hidden md:block p-1.5 rounded-md cursor-pointer transition-colors ${showHidden ? 'bg-duck-teal text-duck-yellow' : 'text-duck-dark/50 hover:bg-duck-dark/5'}`} className={`hidden md:block p-1.5 rounded-md cursor-pointer transition-colors ${showHidden ? 'bg-duck-teal text-duck-yellow' : 'text-duck-teal hover:bg-duck-dark/5'}`}
title={showHidden ? 'Hide hidden files' : 'Show hidden files'} title={showHidden ? 'Hide hidden files' : 'Show hidden files'}
> >
{showHidden ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />} {showHidden ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
@@ -113,13 +113,13 @@ export const Toolbar = ({ fileBrowserManager }: ToolbarProps) => {
<div className="flex items-center border border-duck-dark/20 rounded-md overflow-hidden"> <div className="flex items-center border border-duck-dark/20 rounded-md overflow-hidden">
<button <button
onClick={() => setViewMode('grid')} onClick={() => setViewMode('grid')}
className={`p-1.5 cursor-pointer transition-colors ${viewMode === 'grid' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-dark/50 hover:bg-duck-dark/5'}`} className={`p-1.5 cursor-pointer transition-colors ${viewMode === 'grid' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-teal hover:bg-duck-dark/5'}`}
> >
<LayoutGrid className="h-4 w-4" /> <LayoutGrid className="h-4 w-4" />
</button> </button>
<button <button
onClick={() => setViewMode('list')} onClick={() => setViewMode('list')}
className={`p-1.5 cursor-pointer transition-colors ${viewMode === 'list' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-dark/50 hover:bg-duck-dark/5'}`} className={`p-1.5 cursor-pointer transition-colors ${viewMode === 'list' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-teal hover:bg-duck-dark/5'}`}
> >
<List className="h-4 w-4" /> <List className="h-4 w-4" />
</button> </button>