From ce34d473d3285648bc2c1661053809032e18bbcb Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 16 Sep 2026 19:33:47 +0530
Subject: [PATCH] fix(frontend): use icons that match their actions and read in
 dark mode

---
 .../src/agents/workflow/WorkflowBuilder.tsx   |  2 +-
 frontend/src/components/ActionButtons.tsx     |  8 ++-----
 .../message-input/AttachFileButton.tsx        |  2 +-
 .../message-input/SourcesTrigger.tsx          |  2 +-
 .../components/message-input/ToolsTrigger.tsx |  2 +-
 .../src/conversation/ConversationTile.tsx     | 23 +++++++++++--------
 frontend/src/locale/de.json                   |  1 +
 frontend/src/locale/en.json                   |  1 +
 frontend/src/locale/es.json                   |  1 +
 frontend/src/locale/jp.json                   |  1 +
 frontend/src/locale/ru.json                   |  1 +
 frontend/src/locale/zh-TW.json                |  1 +
 frontend/src/locale/zh.json                   |  1 +
 frontend/src/modals/MoveToFolderModal.tsx     |  2 +-
 frontend/src/settings/Logs.tsx                |  2 +-
 frontend/src/settings/ToolConfig.tsx          |  4 ++--
 .../settings/components/RetrievalOptions.tsx  |  2 +-
 frontend/src/teams/TeamSwitcher.tsx           |  6 ++---
 frontend/src/upload/Upload.tsx                |  2 +-
 19 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index 6d58d662..d71867f6 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -1587,7 +1587,7 @@ function WorkflowBuilderInner() {
                 size="icon-sm"
                 onClick={() => setShowWorkflowSettings(!showWorkflowSettings)}
                 className="text-muted-foreground hover:bg-accent hover:text-foreground size-auto p-1"
-                aria-label="Workflow settings"
+                aria-label="Edit workflow details"
                 title={
                   workflowDescription
                     ? `${workflowName || 'New Workflow'} — ${workflowDescription}`
diff --git a/frontend/src/components/ActionButtons.tsx b/frontend/src/components/ActionButtons.tsx
index 8520315f..cc161017 100644
--- a/frontend/src/components/ActionButtons.tsx
+++ b/frontend/src/components/ActionButtons.tsx
@@ -1,4 +1,4 @@
-import { ExternalLink, Plus } from 'lucide-react';
+import { Plus, Share } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
@@ -73,11 +73,7 @@ export default function ActionButtons({
               onClick={() => setShareModalState(true)}
               className="text-muted-foreground hover:text-foreground rounded-full"
             >
-              <ExternalLink
-                className="size-5"
-                strokeWidth={1.75}
-                aria-label="share"
-              />
+              <Share className="size-5" strokeWidth={1.75} aria-label="share" />
             </Button>
             {isShareModalOpen && (
               <ShareConversationModal
diff --git a/frontend/src/components/message-input/AttachFileButton.tsx b/frontend/src/components/message-input/AttachFileButton.tsx
index 621e7f2d..a0b95403 100644
--- a/frontend/src/components/message-input/AttachFileButton.tsx
+++ b/frontend/src/components/message-input/AttachFileButton.tsx
@@ -22,7 +22,7 @@ export default function AttachFileButton({ onChange }: AttachFileButtonProps) {
       <img
         src={ClipIcon}
         alt="Attach"
-        className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4"
+        className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4 dark:invert"
       />
       <span className="xs:text-xs dark:text-foreground text-muted-foreground text-xs font-medium sm:text-sm">
         {t('conversation.attachments.attach')}
diff --git a/frontend/src/components/message-input/SourcesTrigger.tsx b/frontend/src/components/message-input/SourcesTrigger.tsx
index 7feee685..f8edb1fc 100644
--- a/frontend/src/components/message-input/SourcesTrigger.tsx
+++ b/frontend/src/components/message-input/SourcesTrigger.tsx
@@ -61,7 +61,7 @@ export default function SourcesTrigger({
           <img
             src={SourceIcon}
             alt="Sources"
-            className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4"
+            className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4 sm:w-4 dark:invert"
           />
           <span className="xs:text-xs dark:text-foreground text-muted-foreground truncate overflow-hidden text-xs font-medium sm:text-sm">
             {selectedDocs && selectedDocs.length > 0
diff --git a/frontend/src/components/message-input/ToolsTrigger.tsx b/frontend/src/components/message-input/ToolsTrigger.tsx
index e9f16c69..6fb2a49a 100644
--- a/frontend/src/components/message-input/ToolsTrigger.tsx
+++ b/frontend/src/components/message-input/ToolsTrigger.tsx
@@ -62,7 +62,7 @@ export default function ToolsTrigger({
           <img
             src={ToolIcon}
             alt="Tools"
-            className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4 sm:w-4"
+            className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4 sm:w-4 dark:invert"
           />
           <span className="xs:text-xs dark:text-foreground text-muted-foreground truncate overflow-hidden text-xs font-medium sm:text-sm">
             {t('settings.tools.label')}
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index f5ead293..cfc5d87d 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -1,4 +1,4 @@
-import { ExternalLink, X } from 'lucide-react';
+import { Share, X } from 'lucide-react';
 import {
   SyntheticEvent,
   useCallback,
@@ -135,7 +135,7 @@ export default function ConversationTile({
 
   const menuOptions: ConversationMenuOption[] = [
     {
-      icon: <ExternalLink className="size-3.5" strokeWidth={1.75} />,
+      icon: <Share className="size-4" strokeWidth={1.75} />,
       label: t('convTile.share'),
       onClick: (event: SyntheticEvent) => {
         event.stopPropagation();
@@ -216,11 +216,13 @@ export default function ConversationTile({
           <div className="dark:text-muted-foreground flex text-white">
             {isEdit ? (
               <div className="flex gap-1">
-                <img
-                  src={CheckMark2}
-                  alt="Edit"
-                  className="mr-2 h-4 w-4 cursor-pointer text-white hover:opacity-50"
-                  id={`img-${conversation.id}`}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={t('convTile.save')}
+                  title={t('convTile.save')}
+                  className="mr-2 h-auto w-auto bg-transparent p-0 hover:bg-transparent hover:opacity-50"
                   onClick={(event: SyntheticEvent) => {
                     event.stopPropagation();
                     handleSaveConversation({
@@ -228,12 +230,15 @@ export default function ConversationTile({
                       name: conversationName,
                     });
                   }}
-                />
+                >
+                  <img src={CheckMark2} alt="" className="h-4 w-4" />
+                </Button>
                 <Button
                   type="button"
                   variant="ghost"
                   size="icon-sm"
-                  aria-label="Exit"
+                  aria-label={t('cancel')}
+                  title={t('cancel')}
                   id={`img-${conversation.id}`}
                   className="mt-px mr-4 h-auto w-auto bg-transparent p-0 hover:bg-transparent hover:opacity-50"
                   onClick={(event: SyntheticEvent) => {
diff --git a/frontend/src/locale/de.json b/frontend/src/locale/de.json
index 74848817..e64ed52f 100644
--- a/frontend/src/locale/de.json
+++ b/frontend/src/locale/de.json
@@ -1063,6 +1063,7 @@
     "share": "Teilen",
     "delete": "Löschen",
     "rename": "Umbenennen",
+    "save": "Speichern",
     "deleteWarning": "Bist du sicher, dass du diese Konversation löschen möchtest?"
   },
   "pagination": {
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index d433f191..03f0f0dd 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -1068,6 +1068,7 @@
     "share": "Share",
     "delete": "Delete",
     "rename": "Rename",
+    "save": "Save",
     "deleteWarning": "Are you sure you want to delete this conversation?"
   },
   "pagination": {
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index 575e127c..c7b4f794 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -1063,6 +1063,7 @@
     "share": "Compartir",
     "delete": "Eliminar",
     "rename": "Renombrar",
+    "save": "Guardar",
     "deleteWarning": "¿Está seguro de que desea eliminar esta conversación?"
   },
   "pagination": {
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 70dd85d1..dc022fe8 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -1063,6 +1063,7 @@
     "share": "共有",
     "delete": "削除",
     "rename": "名前変更",
+    "save": "保存",
     "deleteWarning": "この会話を削除してもよろしいですか？"
   },
   "pagination": {
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index 92b6f533..dd7aef1e 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -1063,6 +1063,7 @@
     "share": "Поделиться",
     "delete": "Удалить",
     "rename": "Переименовать",
+    "save": "Сохранить",
     "deleteWarning": "Вы уверены, что хотите удалить этот разговор?"
   },
   "pagination": {
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index 54de2c92..16236cec 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -1063,6 +1063,7 @@
     "share": "分享",
     "delete": "刪除",
     "rename": "重新命名",
+    "save": "儲存",
     "deleteWarning": "您確定要刪除這個對話嗎？"
   },
   "pagination": {
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index ccf4556f..5b4cf5a6 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -1063,6 +1063,7 @@
     "share": "分享",
     "delete": "删除",
     "rename": "重命名",
+    "save": "保存",
     "deleteWarning": "您确定要删除此对话吗？"
   },
   "pagination": {
diff --git a/frontend/src/modals/MoveToFolderModal.tsx b/frontend/src/modals/MoveToFolderModal.tsx
index 8e2420d0..cc7e3859 100644
--- a/frontend/src/modals/MoveToFolderModal.tsx
+++ b/frontend/src/modals/MoveToFolderModal.tsx
@@ -269,7 +269,7 @@ export default function MoveToFolderModal({
                       <img
                         src={ChevronRight}
                         alt="expand"
-                        className={`h-3 w-3 ${selectedFolderId === folder.id ? 'brightness-0 invert' : ''}`}
+                        className={`h-3 w-3 ${selectedFolderId === folder.id ? 'brightness-0 invert' : 'dark:invert'}`}
                       />
                     </span>
                   )}
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index d308acd9..b5b80a9b 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -402,7 +402,7 @@ function Log({
         <img
           src={ChevronRight}
           alt="Expand log entry"
-          className={`mt-[3px] h-3 w-3 transition duration-300 ${isOpen ? 'rotate-90' : ''}`}
+          className={`mt-[3px] h-3 w-3 transition duration-300 dark:invert ${isOpen ? 'rotate-90' : ''}`}
         />
         <span className="flex flex-row flex-wrap gap-2">
           <h2 className="dark:text-foreground text-xs text-black/60">{`${log.timestamp}`}</h2>
diff --git a/frontend/src/settings/ToolConfig.tsx b/frontend/src/settings/ToolConfig.tsx
index c6fc4947..788b1373 100644
--- a/frontend/src/settings/ToolConfig.tsx
+++ b/frontend/src/settings/ToolConfig.tsx
@@ -484,7 +484,7 @@ export default function ToolConfig({
                           <img
                             src={ChevronRight}
                             alt="expand"
-                            className={`h-4 w-4 opacity-60 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
+                            className={`h-4 w-4 opacity-60 transition-transform duration-200 dark:invert ${isExpanded ? 'rotate-90' : ''}`}
                           />
                           <p className="text-foreground dark:text-foreground font-semibold">
                             {action.name}
@@ -919,7 +919,7 @@ function APIToolConfig({
                   <img
                     src={ChevronRight}
                     alt="expand"
-                    className={`h-4 w-4 opacity-60 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
+                    className={`h-4 w-4 opacity-60 transition-transform duration-200 dark:invert ${isExpanded ? 'rotate-90' : ''}`}
                   />
                   <span
                     className={`rounded px-2 py-0.5 text-xs font-medium ${getMethodColorClass(action.method)}`}
diff --git a/frontend/src/settings/components/RetrievalOptions.tsx b/frontend/src/settings/components/RetrievalOptions.tsx
index 2d05dd14..e2723358 100644
--- a/frontend/src/settings/components/RetrievalOptions.tsx
+++ b/frontend/src/settings/components/RetrievalOptions.tsx
@@ -792,7 +792,7 @@ export default function RetrievalOptions({
         <img
           src={ChevronRight}
           alt=""
-          className={`h-3 w-3 transform transition-transform ${
+          className={`h-3 w-3 transform transition-transform dark:invert ${
             expanded ? 'rotate-90' : ''
           }`}
         />
diff --git a/frontend/src/teams/TeamSwitcher.tsx b/frontend/src/teams/TeamSwitcher.tsx
index 8da43be2..7b96c150 100644
--- a/frontend/src/teams/TeamSwitcher.tsx
+++ b/frontend/src/teams/TeamSwitcher.tsx
@@ -3,11 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import {
-  Building2,
   Check,
   ChevronsUpDown,
   Plus,
   Settings as SettingsIcon,
+  User,
   Users,
 } from 'lucide-react';
 
@@ -149,7 +149,7 @@ export default function TeamSwitcher({
             {currentTeam ? (
               <Users className="size-4" strokeWidth={1.75} />
             ) : (
-              <Building2 className="size-4" strokeWidth={1.75} />
+              <User className="size-4" strokeWidth={1.75} />
             )}
           </span>
           <span className="min-w-0 flex-1">
@@ -174,7 +174,7 @@ export default function TeamSwitcher({
         {/* Personal account entry */}
         {currentTeam && (
           <DropdownMenuItem onSelect={() => selectTeam(null)}>
-            <Building2 className="size-4" strokeWidth={1.75} />
+            <User className="size-4" strokeWidth={1.75} />
             <span className="min-w-0 flex-1 truncate">
               {t('teams.switcher.personal')}
             </span>
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 2c0858a5..dc4989a9 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -1086,7 +1086,7 @@ function Upload({
                   <img
                     src={ChevronRight}
                     alt="back"
-                    className="h-3 w-3 rotate-180 transform"
+                    className="h-3 w-3 rotate-180 transform dark:invert"
                   />
                   <span>{t('modals.uploadDoc.back')}</span>
                 </Button>