From 697c3b1838fc67b25a42e179fbfe3d24ca5fbb48 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Wed, 20 Nov 2024 17:49:39 +0800
Subject: [PATCH] feat: implement new ui features and styles

---
 src/renderer/src/assets/styles/index.scss                   | 2 ++
 src/renderer/src/pages/history/HistoryPage.tsx              | 1 +
 .../pages/home/Tabs/{Assistants.tsx => AssistantsTab.tsx}   | 0
 .../src/pages/home/Tabs/{Settings.tsx => SettingsTab.tsx}   | 4 ++--
 .../src/pages/home/Tabs/{Topics.tsx => TopicsTab.tsx}       | 0
 src/renderer/src/pages/home/Tabs/index.tsx                  | 6 +++---
 6 files changed, 8 insertions(+), 5 deletions(-)
 rename src/renderer/src/pages/home/Tabs/{Assistants.tsx => AssistantsTab.tsx} (100%)
 rename src/renderer/src/pages/home/Tabs/{Settings.tsx => SettingsTab.tsx} (99%)
 rename src/renderer/src/pages/home/Tabs/{Topics.tsx => TopicsTab.tsx} (100%)

diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index 3313648c..244f66be 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -41,6 +41,7 @@
   --color-hover: rgba(40, 40, 40, 1);
   --color-active: rgba(55, 55, 55, 1);
   --color-frame-border: #333;
+  --color-group-background: var(--color-background-soft);
 
   --navbar-background-mac: rgba(30, 30, 30, 0.6);
   --navbar-background: rgba(30, 30, 30);
@@ -97,6 +98,7 @@ body[theme-mode='light'] {
   --color-hover: var(--color-white-mute);
   --color-active: var(--color-white-soft);
   --color-frame-border: #ddd;
+  --color-group-background: var(--color-white);
 
   --navbar-background-mac: rgba(255, 255, 255, 0.6);
   --navbar-background: rgba(255, 255, 255);
diff --git a/src/renderer/src/pages/history/HistoryPage.tsx b/src/renderer/src/pages/history/HistoryPage.tsx
index b2c34bc7..5b28ab1b 100644
--- a/src/renderer/src/pages/history/HistoryPage.tsx
+++ b/src/renderer/src/pages/history/HistoryPage.tsx
@@ -112,6 +112,7 @@ const Header = styled.div`
   background-color: var(--color-background-mute);
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
+  border-bottom: 0.5px solid var(--color-frame-border);
 `
 
 const HeaderLeft = styled.div`
diff --git a/src/renderer/src/pages/home/Tabs/Assistants.tsx b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
similarity index 100%
rename from src/renderer/src/pages/home/Tabs/Assistants.tsx
rename to src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
diff --git a/src/renderer/src/pages/home/Tabs/Settings.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
similarity index 99%
rename from src/renderer/src/pages/home/Tabs/Settings.tsx
rename to src/renderer/src/pages/home/Tabs/SettingsTab.tsx
index ec953b6f..db646761 100644
--- a/src/renderer/src/pages/home/Tabs/Settings.tsx
+++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
@@ -391,7 +391,6 @@ const SettingsTab: FC<Props> = (props) => {
           <SettingRowTitle>{t('settings.topic.show.time')}</SettingRowTitle>
           <Switch size="small" checked={showTopicTime} onChange={(checked) => dispatch(setShowTopicTime(checked))} />
         </SettingRow>
-        <SettingDivider />
       </SettingGroup>
     </Container>
   )
@@ -427,7 +426,8 @@ export const SettingGroup = styled.div<{ theme?: ThemeMode }>`
   margin-top: 0;
   border-radius: 8px;
   margin-bottom: 10px;
-  background: var(--color-background-soft);
+  border: 0.5px solid var(--color-border);
+  background: var(--color-group-background);
 `
 
 export default SettingsTab
diff --git a/src/renderer/src/pages/home/Tabs/Topics.tsx b/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
similarity index 100%
rename from src/renderer/src/pages/home/Tabs/Topics.tsx
rename to src/renderer/src/pages/home/Tabs/TopicsTab.tsx
diff --git a/src/renderer/src/pages/home/Tabs/index.tsx b/src/renderer/src/pages/home/Tabs/index.tsx
index a83b1b31..08a3468d 100644
--- a/src/renderer/src/pages/home/Tabs/index.tsx
+++ b/src/renderer/src/pages/home/Tabs/index.tsx
@@ -11,9 +11,9 @@ import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import Assistants from './Assistants'
-import Settings from './Settings'
-import Topics from './Topics'
+import Assistants from './AssistantsTab'
+import Settings from './SettingsTab'
+import Topics from './TopicsTab'
 
 interface Props {
   activeAssistant: Assistant