style: update styles for improved visual consistency and layout

2024-11-20 16:37:52 +08:00 · 2024-11-20 16:37:52 +08:00 · 6ba6108f43
commit 6ba6108f43
parent c3d007b52c
11 changed files with 34 additions and 26 deletions
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@ -9,7 +9,7 @@
  --color-white-soft: rgba(255, 255, 255, 0.8);
  --color-white-mute: rgba(255, 255, 255, 0.94);

-  --color-black: #0f0f0f;
+  --color-black: #121212;
  --color-black-soft: #191919;
  --color-black-mute: #242424;

@ -40,6 +40,7 @@
  --color-code-background: #323232;
  --color-hover: rgba(40, 40, 40, 1);
  --color-active: rgba(55, 55, 55, 1);
+  --color-frame-border: #333;

  --navbar-background-mac: rgba(30, 30, 30, 0.6);
  --navbar-background: rgba(30, 30, 30);
@ -95,6 +96,7 @@ body[theme-mode='light'] {
  --color-code-background: #e3e3e3;
  --color-hover: var(--color-white-mute);
  --color-active: var(--color-white-soft);
+  --color-frame-border: #ddd;

  --navbar-background-mac: rgba(255, 255, 255, 0.6);
  --navbar-background: rgba(255, 255, 255);
--- a/src/renderer/src/components/AssistantSettings/index.tsx
+++ b/src/renderer/src/components/AssistantSettings/index.tsx
@ -74,7 +74,8 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, ...props })
        content: {
          padding: 0,
          overflow: 'hidden',
-          background: 'var(--color-background)'
+          background: 'var(--color-background)',
+          border: `1px solid var(--color-frame-border)`
        },
        header: { padding: '10px 15px', borderBottom: '0.5px solid var(--color-border)', margin: 0 }
      }}
--- a/src/renderer/src/components/Popups/SearchPopup.tsx
+++ b/src/renderer/src/components/Popups/SearchPopup.tsx
@ -35,7 +35,10 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
      width="920px"
      transitionName="ant-move-down"
      styles={{
-        content: { padding: 0, border: '1px solid var(--color-border)' },
+        content: {
+          padding: 0,
+          border: `1px solid var(--color-frame-border)`
+        },
        body: { height: '85vh' }
      }}
      centered
--- a/src/renderer/src/context/AntdProvider.tsx
+++ b/src/renderer/src/context/AntdProvider.tsx
@ -22,11 +22,11 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
        components: {
          Segmented: {
            trackBg: 'transparent',
-            itemSelectedBg: isDarkTheme ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
+            itemSelectedBg: isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
            boxShadowTertiary: undefined,
-            borderRadiusLG: 12,
-            borderRadiusSM: 12,
-            borderRadiusXS: 12
+            borderRadiusLG: 6,
+            borderRadiusSM: 6,
+            borderRadiusXS: 6
          },
          Menu: {
            activeBarBorderWidth: 0,
@ -37,7 +37,8 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
          }
        },
        token: {
-          colorPrimary: '#00b96b'
+          colorPrimary: '#00b96b',
+          borderRadius: 6
        }
      }}>
      {children}
--- a/src/renderer/src/pages/agents/AgentsPage.tsx
+++ b/src/renderer/src/pages/agents/AgentsPage.tsx
@ -253,7 +253,7 @@ const Tabs = styled(TabsAntd)`
  }
  .ant-tabs-tab {
    margin: 0 !important;
-    border-radius: 20px;
+    border-radius: 7px;
    margin-bottom: 5px !important;
    font-size: 13px;
    justify-content: left;
--- a/src/renderer/src/pages/agents/components/AgentCard.tsx
+++ b/src/renderer/src/pages/agents/components/AgentCard.tsx
@ -81,7 +81,7 @@ const Container = styled.div`
  text-align: center;
  gap: 10px;
  background-color: var(--color-background);
-  border-radius: 15px;
+  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
@ -94,8 +94,8 @@ const Container = styled.div`
    position: absolute;
    top: 0;
    left: 0;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
    background: var(--color-background-soft);
    transition: all 0.5s ease;
    border-bottom: none;
@ -133,7 +133,7 @@ const CardInfo = styled.div`
  align-items: center;
  gap: 5px;
  transition: all 0.5s ease;
-  padding: 0 15px;
+  padding: 0 8px;
  width: 100%;
 `

--- a/src/renderer/src/pages/home/Tabs/Assistants.tsx
+++ b/src/renderer/src/pages/home/Tabs/Assistants.tsx
@ -187,7 +187,7 @@ const Assistants: FC<Props> = ({
            suffix={<CommandKey>⌘+K</CommandKey>}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
-            style={{ borderRadius: 16, borderWidth: 0.5 }}
+            style={{ borderWidth: 0.5 }}
            onKeyDown={onSearch}
            ref={searchRef}
            onFocus={() => dispatch(setSearching(true))}
@ -248,10 +248,10 @@ const AssistantItem = styled.div`
  justify-content: space-between;
  padding: 7px 12px;
  position: relative;
-  border-radius: 17px;
  margin: 0 10px;
  padding-right: 35px;
  font-family: Ubuntu;
+  border-radius: 6px;
  cursor: pointer;
  .iconfont {
    opacity: 0;
@ -318,8 +318,8 @@ const TopicCount = styled.div`
 `

 const SearchContainer = styled.div`
-  margin: 0 10px;
-  margin-bottom: 10px;
+  margin: 12px 10px;
+  margin-top: 2px;
 `

 const CommandKey = styled.div`
--- a/src/renderer/src/pages/home/Tabs/Topics.tsx
+++ b/src/renderer/src/pages/home/Tabs/Topics.tsx
@ -38,8 +38,6 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
  const generating = useAppSelector((state) => state.runtime.generating)
  const { showTopicTime, topicPosition } = useSettings()

-  const borderRadius = showTopicTime ? 12 : 17
-
  const onDeleteTopic = useCallback(
    (topic: Topic) => {
      if (generating) {
@ -192,10 +190,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
          const isActive = topic.id === activeTopic?.id
          return (
            <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
-              <TopicListItem
-                className={isActive ? 'active' : ''}
-                style={{ borderRadius }}
-                onClick={() => onSwitchTopic(topic)}>
+              <TopicListItem className={isActive ? 'active' : ''} onClick={() => onSwitchTopic(topic)}>
                <TopicName className="name">{topic.name.replace('`', '')}</TopicName>
                {showTopicTime && <TopicTime>{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>}
                {isActive && (
@ -230,7 +225,7 @@ const Container = styled(Scrollbar)`
 const TopicListItem = styled.div`
  padding: 7px 12px;
  margin: 0 10px;
-  border-radius: 17px;
+  border-radius: 6px;
  font-family: Ubuntu;
  font-size: 13px;
  display: flex;
--- a/src/renderer/src/store/index.ts
+++ b/src/renderer/src/store/index.ts
@ -24,7 +24,7 @@ const persistedReducer = persistReducer(
  {
    key: 'cherry-studio',
    storage,
-    version: 42,
+    version: 43,
    blacklist: ['runtime'],
    migrate
  },
--- a/src/renderer/src/store/migrate.ts
+++ b/src/renderer/src/store/migrate.ts
@ -693,6 +693,12 @@ const migrateConfig = {
  '42': (state: RootState) => {
    state.settings.proxyMode = state.settings.proxyUrl ? 'custom' : 'none'
    return state
+  },
+  '43': (state: RootState) => {
+    if (state.settings.proxyMode === 'none') {
+      state.settings.proxyMode = 'system'
+    }
+    return state
  }
 }

--- a/src/renderer/src/store/settings.ts
+++ b/src/renderer/src/store/settings.ts
@ -41,7 +41,7 @@ const initialState: SettingsState = {
  showTopics: true,
  sendMessageShortcut: 'Enter',
  language: navigator.language as LanguageVarious,
-  proxyMode: 'none',
+  proxyMode: 'system',
  proxyUrl: undefined,
  userName: '',
  showMessageDivider: false,