From 6870390b9f4979647dcf66b295a1974507f3dab6 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 18 Mar 2025 13:11:40 +0800
Subject: [PATCH] refactor: update styles and theme handling in Sidebar and
 MessageHeader components

- Removed box-shadow from container styles for a cleaner look.
- Adjusted color variables for better contrast and consistency across themes.
- Enhanced Sidebar component to utilize theme context for icon styling.
- Modified MessageHeader to change font size and apply a specific font family for better readability.
---
 src/renderer/src/assets/styles/container.scss |  1 -
 src/renderer/src/assets/styles/index.scss     | 25 ++++++++++---------
 src/renderer/src/components/app/Sidebar.tsx   | 20 +++++++++------
 .../src/pages/home/Messages/MessageHeader.tsx |  3 ++-
 4 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/renderer/src/assets/styles/container.scss b/src/renderer/src/assets/styles/container.scss
index 87823dcc..8be40279 100644
--- a/src/renderer/src/assets/styles/container.scss
+++ b/src/renderer/src/assets/styles/container.scss
@@ -3,5 +3,4 @@
   border-top: 0.5px solid var(--color-border);
   border-top-left-radius: 10px;
   border-left: 0.5px solid var(--color-border);
-  box-shadow: -2px 0px 20px -4px rgba(0, 0, 0, 0.06);
 }
diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index eeacb10d..1135cee1 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -10,7 +10,7 @@
   --color-white-soft: rgba(255, 255, 255, 0.8);
   --color-white-mute: rgba(255, 255, 255, 0.94);
 
-  --color-black: #151515;
+  --color-black: #181818;
   --color-black-soft: #222222;
   --color-black-mute: #333333;
 
@@ -35,9 +35,9 @@
   --color-text: var(--color-text-1);
   --color-icon: #ffffff99;
   --color-icon-white: #ffffff;
-  --color-border: #ffffff22;
-  --color-border-soft: #ffffff11;
-  --color-border-mute: #ffffff11;
+  --color-border: #ffffff15;
+  --color-border-soft: #ffffff10;
+  --color-border-mute: #ffffff05;
   --color-error: #f44336;
   --color-link: #1677ff;
   --color-code-background: #323232;
@@ -50,8 +50,8 @@
   --color-reference-text: #ffffff;
   --color-reference-background: #0b0e12;
 
-  --navbar-background-mac: rgba(30, 30, 30, 0.6);
-  --navbar-background: rgba(30, 30, 30);
+  --navbar-background-mac: rgba(20, 20, 20, 0.6);
+  --navbar-background: rgba(40, 40, 40);
 
   --navbar-height: 40px;
   --sidebar-width: 50px;
@@ -100,9 +100,9 @@ body[theme-mode='light'] {
   --color-text: var(--color-text-1);
   --color-icon: #00000099;
   --color-icon-white: #000000;
-  --color-border: #00000028;
-  --color-border-soft: #00000020;
-  --color-border-mute: #00000010;
+  --color-border: #00000015;
+  --color-border-soft: #00000010;
+  --color-border-mute: #00000005;
   --color-error: #f44336;
   --color-link: #1677ff;
   --color-code-background: #e3e3e3;
@@ -116,7 +116,7 @@ body[theme-mode='light'] {
   --color-reference-background: #f1f7ff;
 
   --navbar-background-mac: rgba(255, 255, 255, 0.6);
-  --navbar-background: rgba(255, 255, 255);
+  --navbar-background: rgba(244, 244, 244);
 
   --chat-background: #f3f3f3;
   --chat-background-user: #95ec69;
@@ -151,8 +151,9 @@ body {
   font-size: 14px;
   line-height: 1.6;
   overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-    'Helvetica Neue', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+    sans-serif;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index c9fb0298..e5650cc8 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -86,13 +86,14 @@ const Sidebar: FC = () => {
       <Menus>
         <Tooltip title={t('docs.title')} mouseEnterDelay={0.8} placement="right">
           <Icon
+            theme={theme}
             onClick={onOpenDocs}
             className={minappShow && MinApp.app?.url === 'https://docs.cherry-ai.com/' ? 'active' : ''}>
             <QuestionCircleOutlined />
           </Icon>
         </Tooltip>
         <Tooltip title={t('settings.theme.title')} mouseEnterDelay={0.8} placement="right">
-          <Icon onClick={() => toggleTheme()}>
+          <Icon theme={theme} onClick={() => toggleTheme()}>
             {theme === 'dark' ? (
               <i className="iconfont icon-theme icon-dark1" />
             ) : (
@@ -107,7 +108,7 @@ const Sidebar: FC = () => {
               await modelGenerating()
               await to('/settings/provider')
             }}>
-            <Icon className={pathname.startsWith('/settings') && !minappShow ? 'active' : ''}>
+            <Icon theme={theme} className={pathname.startsWith('/settings') && !minappShow ? 'active' : ''}>
               <i className="iconfont icon-setting" />
             </Icon>
           </StyledLink>
@@ -123,6 +124,7 @@ const MainMenus: FC = () => {
   const { sidebarIcons } = useSettings()
   const { minappShow } = useRuntime()
   const navigate = useNavigate()
+  const { theme } = useTheme()
 
   const isRoute = (path: string): string => (pathname === path && !minappShow ? 'active' : '')
   const isRoutes = (path: string): string => (pathname.startsWith(path) && !minappShow ? 'active' : '')
@@ -159,7 +161,9 @@ const MainMenus: FC = () => {
             await modelGenerating()
             navigate(path)
           }}>
-          <Icon className={isActive}>{iconMap[icon]}</Icon>
+          <Icon theme={theme} className={isActive}>
+            {iconMap[icon]}
+          </Icon>
         </StyledLink>
       </Tooltip>
     )
@@ -170,6 +174,7 @@ const PinnedApps: FC = () => {
   const { pinned, updatePinnedMinapps } = useMinapps()
   const { t } = useTranslation()
   const { minappShow } = useRuntime()
+  const { theme } = useTheme()
 
   return (
     <DragableList list={pinned} onUpdate={updatePinnedMinapps} listStyle={{ marginBottom: 5 }}>
@@ -189,7 +194,7 @@ const PinnedApps: FC = () => {
           <Tooltip key={app.id} title={app.name} mouseEnterDelay={0.8} placement="right">
             <StyledLink>
               <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
-                <Icon onClick={() => MinApp.start(app)} className={isActive ? 'active' : ''}>
+                <Icon theme={theme} onClick={() => MinApp.start(app)} className={isActive ? 'active' : ''}>
                   <MinAppIcon size={20} app={app} style={{ borderRadius: 6 }} />
                 </Icon>
               </Dropdown>
@@ -255,7 +260,7 @@ const Menus = styled.div`
   gap: 5px;
 `
 
-const Icon = styled.div`
+const Icon = styled.div<{ theme: string }>`
   width: 35px;
   height: 35px;
   display: flex;
@@ -274,7 +279,8 @@ const Icon = styled.div`
     font-size: 17px;
   }
   &:hover {
-    background-color: var(--color-hover);
+    background-color: ${({ theme }) => (theme === 'dark' ? 'var(--color-black)' : 'var(--color-white)')};
+    opacity: 0.8;
     cursor: pointer;
     .iconfont,
     .anticon {
@@ -282,7 +288,7 @@ const Icon = styled.div`
     }
   }
   &.active {
-    background-color: var(--color-active);
+    background-color: ${({ theme }) => (theme === 'dark' ? 'var(--color-black)' : 'var(--color-white)')};
     border: 0.5px solid var(--color-border);
     .iconfont,
     .anticon {
diff --git a/src/renderer/src/pages/home/Messages/MessageHeader.tsx b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
index dc28795e..c309a690 100644
--- a/src/renderer/src/pages/home/Messages/MessageHeader.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
@@ -148,8 +148,9 @@ const UserName = styled.div<{ isBubbleStyle?: boolean; theme?: string }>`
 `
 
 const MessageTime = styled.div`
-  font-size: 12px;
+  font-size: 10px;
   color: var(--color-text-3);
+  font-family: 'Ubuntu';
 `
 
 export default MessageHeader