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

@@ -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`

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;
 `

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;
 `

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>
   )

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':

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>