use teal icon color for file browser toolbar buttons
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -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>
|
||||||
|
|||||||
+4
-4
@@ -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>
|
||||||
|
|||||||
+5
-5
@@ -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>
|
||||||
|
|||||||
+5
-5
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user