Skip to content

Commit 4fb48f6

Browse files
authored
enhance: dark mode icon (#1122)
1 parent dd98dc4 commit 4fb48f6

7 files changed

Lines changed: 209 additions & 93 deletions

File tree

backend/uv.lock

Lines changed: 69 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/components/Folder/FolderComponent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export default function FolderComponent({ selectedFile }: Props) {
133133

134134
return (
135135
<div
136-
className="w-full overflow-auto"
136+
className="folder-component-content w-full overflow-auto text-text-primary"
137137
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
138138
/>
139139
);

src/components/Folder/ZoomControls.tsx

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
// limitations under the License.
1313
// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
1414

15-
import { ZoomOut, ZoomIn, RotateCcw } from "lucide-react";
16-
import { Button } from "../ui/button";
15+
import { RotateCcw, ZoomIn, ZoomOut } from 'lucide-react';
16+
import { Button } from '../ui/button';
1717

1818
// Zoom Controls Component
1919
interface ZoomControlsProps {
@@ -23,40 +23,47 @@ interface ZoomControlsProps {
2323
onZoomReset: () => void;
2424
}
2525

26-
export const ZoomControls = ({ zoom, onZoomIn, onZoomOut, onZoomReset }: ZoomControlsProps) => {
26+
export const ZoomControls = ({
27+
zoom,
28+
onZoomIn,
29+
onZoomOut,
30+
onZoomReset,
31+
}: ZoomControlsProps) => {
2732
return (
28-
<div className="absolute top-0 left-1/2 -translate-x-1/2 z-10 group">
29-
<div className="flex items-center gap-1 px-3 py-1.5 bg-surface-hover-subtle/90 backdrop-blur-xl rounded-full shadow-lg border border-border-subtle-strong/50 translate-y-[calc(-100%-8px)] group-hover:translate-y-[20px] transition-transform duration-300 ease-out">
33+
<div className="group absolute left-1/2 top-0 z-10 -translate-x-1/2">
34+
<div className="bg-surface-hover-subtle/90 border-border-subtle-strong/50 flex translate-y-[calc(-100%-8px)] items-center gap-1 rounded-full border px-3 py-1.5 shadow-lg backdrop-blur-xl transition-transform duration-300 ease-out group-hover:translate-y-[20px]">
3035
<Button
3136
size="icon"
3237
variant="ghost"
3338
onClick={onZoomOut}
3439
title="Zoom Out"
35-
className="h-7 w-7 hover:bg-gray-200/60 text-gray-700 hover:text-gray-900"
40+
className="h-7 w-7 text-text-secondary hover:bg-fill-fill-transparent-hover hover:text-text-primary"
3641
>
37-
<ZoomOut className="w-3.5 h-3.5" />
42+
<ZoomOut className="h-3.5 w-3.5" />
3843
</Button>
39-
<span className="text-xs text-gray-800 min-w-[2.5rem] text-center font-medium tabular-nums">{zoom}%</span>
44+
<span className="min-w-[2.5rem] text-center text-xs font-medium tabular-nums text-text-primary">
45+
{zoom}%
46+
</span>
4047
<Button
4148
size="icon"
4249
variant="ghost"
4350
onClick={onZoomIn}
4451
title="Zoom In"
45-
className="h-7 w-7 hover:bg-gray-200/60 text-gray-700 hover:text-gray-900"
52+
className="h-7 w-7 text-text-secondary hover:bg-fill-fill-transparent-hover hover:text-text-primary"
4653
>
47-
<ZoomIn className="w-3.5 h-3.5" />
54+
<ZoomIn className="h-3.5 w-3.5" />
4855
</Button>
49-
<div className="w-px h-4 bg-gray-300/60 mx-0.5" />
56+
<div className="mx-0.5 h-4 w-px bg-border-secondary" />
5057
<Button
5158
size="icon"
5259
variant="ghost"
5360
onClick={onZoomReset}
5461
title="Reset Zoom"
55-
className="h-7 w-7 hover:bg-gray-200/60 text-gray-700 hover:text-gray-900"
62+
className="h-7 w-7 text-text-secondary hover:bg-fill-fill-transparent-hover hover:text-text-primary"
5663
>
57-
<RotateCcw className="w-3.5 h-3.5" />
64+
<RotateCcw className="h-3.5 w-3.5" />
5865
</Button>
5966
</div>
6067
</div>
6168
);
62-
}
69+
};

src/components/Folder/index.tsx

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,9 @@ const FileTree: React.FC<FileTreeProps> = ({
129129
)}
130130

131131
<span
132-
className={`truncate text-[13px] leading-5 ${child.isFolder ? 'font-semibold' : 'font-medium'
133-
}`}
132+
className={`truncate text-[13px] leading-5 ${
133+
child.isFolder ? 'font-semibold' : 'font-medium'
134+
}`}
134135
>
135136
{child.name}
136137
</span>
@@ -421,7 +422,7 @@ export default function Folder({ data: _data }: { data?: Agent }) {
421422
<div
422423
className={`${
423424
isCollapsed ? 'w-16' : 'w-64'
424-
} flex flex-shrink-0 flex-col border-[0px] border-r !border-solid border-r-border-subtle border-border-subtle-strong transition-all duration-300 ease-in-out`}
425+
} flex flex-shrink-0 flex-col border-[0px] border-r !border-solid border-border-subtle-strong border-r-border-subtle transition-all duration-300 ease-in-out`}
425426
>
426427
{/* head */}
427428
<div
@@ -449,12 +450,13 @@ export default function Folder({ data: _data }: { data?: Agent }) {
449450
variant="ghost"
450451
size="icon"
451452
onClick={() => setIsCollapsed(!isCollapsed)}
452-
className={`${isCollapsed ? 'w-full' : ''
453-
} flex items-center justify-center`}
453+
className={`${
454+
isCollapsed ? 'w-full' : ''
455+
} flex items-center justify-center`}
454456
title={isCollapsed ? t('chat.open') : t('chat.close')}
455457
>
456458
<ChevronsLeft
457-
className={`h-6 w-6 text-zinc-500 ${
459+
className={`h-6 w-6 text-icon-secondary ${
458460
isCollapsed ? 'rotate-180' : ''
459461
} transition-transform ease-in-out`}
460462
/>
@@ -506,8 +508,8 @@ export default function Folder({ data: _data }: { data?: Agent }) {
506508
onClick={() => selectedFileChange(file, isShowSourceCode)}
507509
className={`flex w-full items-center justify-center rounded-md p-2 transition-colors hover:bg-fill-fill-primary-hover ${
508510
selectedFile?.name === file.name
509-
? 'bg-blue-50 text-blue-700'
510-
: 'text-zinc-600'
511+
? 'bg-surface-information text-text-information'
512+
: 'text-text-secondary'
511513
}`}
512514
title={file.name}
513515
>
@@ -548,7 +550,7 @@ export default function Folder({ data: _data }: { data?: Agent }) {
548550
{selectedFile.name}
549551
</span>
550552
<Button size="icon" variant="ghost">
551-
<Download className="h-4 w-4 text-zinc-500" />
553+
<Download className="h-4 w-4 text-icon-secondary" />
552554
</Button>
553555
</div>
554556
<Button
@@ -557,7 +559,7 @@ export default function Folder({ data: _data }: { data?: Agent }) {
557559
className="flex-shrink-0"
558560
onClick={() => isShowSourceCodeChange()}
559561
>
560-
<CodeXml className="h-4 w-4 text-zinc-500" />
562+
<CodeXml className="h-4 w-4 text-icon-secondary" />
561563
</Button>
562564
</div>
563565
</div>
@@ -591,8 +593,8 @@ export default function Folder({ data: _data }: { data?: Agent }) {
591593
title={selectedFile.name}
592594
/>
593595
) : ['csv', 'doc', 'docx', 'pptx', 'xlsx'].includes(
594-
selectedFile.type
595-
) ? (
596+
selectedFile.type
597+
) ? (
596598
<FolderComponent selectedFile={selectedFile} />
597599
) : selectedFile.type === 'html' ? (
598600
isShowSourceCode ? (
@@ -604,9 +606,9 @@ export default function Folder({ data: _data }: { data?: Agent }) {
604606
/>
605607
)
606608
) : selectedFile.type === 'zip' ? (
607-
<div className="flex h-full items-center justify-center text-zinc-500">
609+
<div className="flex h-full items-center justify-center text-text-secondary">
608610
<div className="text-center">
609-
<FileText className="mx-auto mb-4 h-12 w-12 text-zinc-300" />
611+
<FileText className="mx-auto mb-4 h-12 w-12 text-text-tertiary" />
610612
<p className="text-sm">
611613
{t('folder.zip-file-is-not-supported-yet')}
612614
</p>
@@ -625,22 +627,24 @@ export default function Folder({ data: _data }: { data?: Agent }) {
625627
<ImageLoader selectedFile={selectedFile} />
626628
</div>
627629
) : (
628-
<pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-sm text-zinc-700">
630+
<pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-sm text-text-primary">
629631
{selectedFile.content}
630632
</pre>
631633
)
632634
) : (
633635
<div className="flex h-full items-center justify-center">
634636
<div className="text-center">
635637
<div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
636-
<p className="text-sm text-zinc-500">{t('chat.loading')}</p>
638+
<p className="text-sm text-text-secondary">
639+
{t('chat.loading')}
640+
</p>
637641
</div>
638642
</div>
639643
)
640644
) : (
641-
<div className="flex h-full items-center justify-center text-zinc-500">
645+
<div className="flex h-full items-center justify-center text-text-secondary">
642646
<div className="text-center">
643-
<FileText className="mx-auto mb-4 h-12 w-12 text-zinc-300" />
647+
<FileText className="mx-auto mb-4 h-12 w-12 text-text-tertiary" />
644648
<p className="text-sm">
645649
{t('chat.select-a-file-to-view-its-contents')}
646650
</p>

src/components/TopBar/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@ import {
1818
proxyFetchDelete,
1919
proxyFetchGet,
2020
} from '@/api/http';
21-
import folderIconWhite from '@/assets/logo/icon_white.svg';
22-
import folderIconBlack from '@/assets/logo/icon_black.svg';
23-
import giftIcon from '@/assets/gift.svg';
2421
import giftWhiteIcon from '@/assets/gift-white.svg';
22+
import giftIcon from '@/assets/gift.svg';
23+
import folderIconBlack from '@/assets/logo/icon_black.svg';
24+
import folderIconWhite from '@/assets/logo/icon_white.svg';
2525
import EndNoticeDialog from '@/components/Dialog/EndNotice';
2626
import { Button } from '@/components/ui/button';
2727
import { TooltipSimple } from '@/components/ui/tooltip';
2828
import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
2929
import { share } from '@/lib/share';
30-
import { getAuthStore, useAuthStore } from '@/store/authStore';
30+
import { useAuthStore } from '@/store/authStore';
3131
import { useSidebarStore } from '@/store/sidebarStore';
3232
import {
3333
ChevronDown,
@@ -63,7 +63,7 @@ function HeaderWin() {
6363
const p = window.electronAPI.getPlatform();
6464
setPlatform(p);
6565
}, []);
66-
const logoSrc = appearance === 'light' ? folderIconBlack : folderIconWhite;
66+
const logoSrc = appearance === 'dark' ? folderIconWhite : folderIconBlack;
6767

6868
const exportLog = async () => {
6969
try {
@@ -399,7 +399,7 @@ function HeaderWin() {
399399
className="no-drag"
400400
>
401401
<img
402-
src={appearance === 'light' ? giftIcon : giftWhiteIcon}
402+
src={appearance === 'dark' ? giftWhiteIcon : giftIcon}
403403
alt="gift-icon"
404404
className="h-4 w-4"
405405
/>

0 commit comments

Comments
 (0)