From 0a7e591f0ebb66fb0332e10a9ed3e6957672349f Mon Sep 17 00:00:00 2001
From: suyao <sy20010504@gmail.com>
Date: Tue, 17 Jun 2025 12:55:32 +0800
Subject: [PATCH] refactor: update icon colors to use primary color scheme

- Changed icon colors from var(--color-link) to var(--color-primary) in multiple components for consistency.
- Updated styles in ContentSearch, ReasoningIcon, WebSearchIcon, GenerateImageButton, ThinkingButton, and WebSearchButton to enhance visual coherence.
---
 src/renderer/src/components/ContentSearch.tsx         | 11 +++++++----
 src/renderer/src/components/Icons/ReasoningIcon.tsx   |  2 +-
 src/renderer/src/components/Icons/WebSearchIcon.tsx   |  2 +-
 .../src/pages/home/Inputbar/GenerateImageButton.tsx   |  2 +-
 .../src/pages/home/Inputbar/ThinkingButton.tsx        |  2 +-
 .../src/pages/home/Inputbar/WebSearchButton.tsx       |  2 +-
 6 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/components/ContentSearch.tsx b/src/renderer/src/components/ContentSearch.tsx
index 08a1fd415a..144f9d468c 100644
--- a/src/renderer/src/components/ContentSearch.tsx
+++ b/src/renderer/src/components/ContentSearch.tsx
@@ -568,20 +568,23 @@ export const ContentSearch = React.forwardRef<ContentSearchRef, Props>(
               <ToolBar>
                 <Tooltip title={t('button.includes_user_questions')} mouseEnterDelay={0.8} placement="bottom">
                   <ToolbarButton type="text" onClick={userOutlinedButtonOnClick}>
-                    <User size={18} style={{ color: includeUser ? 'var(--color-link)' : 'var(--color-icon)' }} />
+                    <User size={18} style={{ color: includeUser ? 'var(--color-primary)' : 'var(--color-icon)' }} />
                   </ToolbarButton>
                 </Tooltip>
                 <Tooltip title={t('button.case_sensitive')} mouseEnterDelay={0.8} placement="bottom">
                   <ToolbarButton type="text" onClick={caseSensitiveButtonOnClick}>
                     <CaseSensitive
                       size={18}
-                      style={{ color: isCaseSensitive ? 'var(--color-link)' : 'var(--color-icon)' }}
+                      style={{ color: isCaseSensitive ? 'var(--color-primary)' : 'var(--color-icon)' }}
                     />
                   </ToolbarButton>
                 </Tooltip>
                 <Tooltip title={t('button.whole_word')} mouseEnterDelay={0.8} placement="bottom">
                   <ToolbarButton type="text" onClick={wholeWordButtonOnClick}>
-                    <WholeWord size={18} style={{ color: isWholeWord ? 'var(--color-link)' : 'var(--color-icon)' }} />
+                    <WholeWord
+                      size={18}
+                      style={{ color: isWholeWord ? 'var(--color-primary)' : 'var(--color-icon)' }}
+                    />
                   </ToolbarButton>
                 </Tooltip>
               </ToolBar>
@@ -630,7 +633,6 @@ const Container = styled.div`
 `
 
 const SearchBarContainer = styled.div`
-  border: 1px solid var(--color-primary);
   border-radius: 10px;
   transition: all 0.2s ease;
   position: fixed;
@@ -644,6 +646,7 @@ const SearchBarContainer = styled.div`
   justify-content: center;
   background-color: var(--color-background);
   flex: 1 1 auto; /* Take up input's previous space */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 `
 
 const Placeholder = styled.div`
diff --git a/src/renderer/src/components/Icons/ReasoningIcon.tsx b/src/renderer/src/components/Icons/ReasoningIcon.tsx
index 4f98f5735c..38781a4fba 100644
--- a/src/renderer/src/components/Icons/ReasoningIcon.tsx
+++ b/src/renderer/src/components/Icons/ReasoningIcon.tsx
@@ -22,7 +22,7 @@ const Container = styled.div`
 `
 
 const Icon = styled.i`
-  color: var(--color-link);
+  color: var(--color-primary);
   font-size: 16px;
   margin-right: 6px;
 `
diff --git a/src/renderer/src/components/Icons/WebSearchIcon.tsx b/src/renderer/src/components/Icons/WebSearchIcon.tsx
index 6dc99000ae..b44327c455 100644
--- a/src/renderer/src/components/Icons/WebSearchIcon.tsx
+++ b/src/renderer/src/components/Icons/WebSearchIcon.tsx
@@ -23,7 +23,7 @@ const Container = styled.div`
 `
 
 const Icon = styled(GlobalOutlined)`
-  color: var(--color-link);
+  color: var(--color-primary);
   font-size: 15px;
   margin-right: 6px;
 `
diff --git a/src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx b/src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx
index 889919b7f5..c3c1c63b41 100644
--- a/src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx
@@ -23,7 +23,7 @@ const GenerateImageButton: FC<Props> = ({ model, ToolbarButton, assistant, onEna
       }
       arrow>
       <ToolbarButton type="text" disabled={!isGenerateImageModel(model)} onClick={onEnableGenerateImage}>
-        <Image size={18} color={assistant.enableGenerateImage ? 'var(--color-link)' : 'var(--color-icon)'} />
+        <Image size={18} color={assistant.enableGenerateImage ? 'var(--color-primary)' : 'var(--color-icon)'} />
       </ToolbarButton>
     </Tooltip>
   )
diff --git a/src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx b/src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx
index 21db131cef..ebdde53a45 100644
--- a/src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx
@@ -98,7 +98,7 @@ const ThinkingButton: FC<Props> = ({ ref, model, assistant, ToolbarButton }): Re
   }, [currentReasoningEffort, supportedOptions, updateAssistantSettings, model.id])
 
   const createThinkingIcon = useCallback((option?: ThinkingOption, isActive: boolean = false) => {
-    const iconColor = isActive ? 'var(--color-link)' : 'var(--color-icon)'
+    const iconColor = isActive ? 'var(--color-primary)' : 'var(--color-icon)'
 
     switch (true) {
       case option === 'low':
diff --git a/src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx b/src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx
index 906c7aa5aa..d4fe6844f5 100644
--- a/src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx
@@ -134,7 +134,7 @@ const WebSearchButton: FC<Props> = ({ ref, assistant, ToolbarButton }) => {
           size={18}
           style={{
             color:
-              assistant?.webSearchProviderId || assistant.enableWebSearch ? 'var(--color-link)' : 'var(--color-icon)'
+              assistant?.webSearchProviderId || assistant.enableWebSearch ? 'var(--color-primary)' : 'var(--color-icon)'
           }}
         />
       </ToolbarButton>