feat(ui): optimize messages ui styles

CherryHQ · Jul 24, 2024 · d21a4dc · d21a4dc
1 parent 74df296
commit d21a4dc
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "@electron-toolkit/eslint-config-prettier": "^2.0.0",
     "@electron-toolkit/eslint-config-ts": "^1.0.1",
     "@electron-toolkit/tsconfig": "^1.0.1",
-    "@fontsource/inter": "^5.0.18",
     "@hello-pangea/dnd": "^16.6.0",
     "@kangfenmao/keyv-storage": "^0.1.0",
     "@reduxjs/toolkit": "^2.2.5",

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
@@ -1,4 +1,3 @@
-import '@fontsource/inter'
 import store, { persistor } from '@renderer/store'
 import { ConfigProvider } from 'antd'
 import { Provider } from 'react-redux'

diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
@@ -1,5 +1,6 @@
 @import 'https://at.alicdn.com/t/c/font_4563475_hrx8c92awui.css';
 @import './markdown.scss';
+@import './scrollbar.scss';
 
 // @font-face {
 //   font-family: 'Playwrite';
@@ -67,19 +68,8 @@ body {
   line-height: 1.6;
   overflow: hidden;
   background-size: cover;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/src/renderer/src/assets/styles/markdown.scss b/src/renderer/src/assets/styles/markdown.scss
@@ -1,6 +1,6 @@
 .markdown {
   color: #f1f1f1;
-  font-size: 16px;
+  font-size: 15px;
   line-height: 1.6;
   user-select: text;
 

diff --git a/src/renderer/src/assets/styles/scrollbar.scss b/src/renderer/src/assets/styles/scrollbar.scss
@@ -8,8 +8,8 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.15);
   &:hover {
-    background: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.3);
   }
 }
diff --git a/src/renderer/src/hooks/useAppInit.ts b/src/renderer/src/hooks/useAppInit.ts
@@ -5,7 +5,6 @@ import { setAvatar } from '@renderer/store/runtime'
 import { runAsyncFunction } from '@renderer/utils'
 import { useEffect } from 'react'
 import { useSettings } from './useSettings'
-import { isWindows } from '@renderer/config/constant'
 
 export function useAppInit() {
   const dispatch = useAppDispatch()
@@ -29,8 +28,4 @@ export function useAppInit() {
   useEffect(() => {
     proxyUrl && window.api.setProxy(proxyUrl)
   }, [proxyUrl])
-
-  useEffect(() => {
-    isWindows && import('@renderer/assets/styles/scrollbar.scss')
-  }, [])
 }
diff --git a/src/renderer/src/pages/home/components/Message.tsx b/src/renderer/src/pages/home/components/Message.tsx
@@ -97,11 +97,6 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
             <MessageTime>{dayjs(message.createdAt).format('MM/DD HH:mm')}</MessageTime>
           </UserWrap>
         </AvatarWrapper>
-        {message.usage && (
-          <MessageMetadata>
-            Tokens: {message.usage.total_tokens} | ↑{message.usage.prompt_tokens}↓{message.usage.completion_tokens}
-          </MessageMetadata>
-        )}
       </MessageHeader>
       <MessageContent style={{ fontFamily }}>
         {message.status === 'sending' && (
@@ -114,8 +109,13 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
             {getMessageContent(message)}
           </Markdown>
         )}
+        {message.usage && (
+          <MessageMetadata>
+            Tokens: {message.usage.total_tokens} | ↑{message.usage.prompt_tokens}↓{message.usage.completion_tokens}
+          </MessageMetadata>
+        )}
         {showMenu && (
-          <MenusBar className={`menubar ${isLastMessage && 'show'} ${isUserMessage && 'user'}`}>
+          <MenusBar className={`menubar ${isLastMessage && 'show'} ${(!isLastMessage || isUserMessage) && 'user'}`}>
             {message.role === 'user' && (
               <Tooltip title="Edit" mouseEnterDelay={0.8}>
                 <ActionButton>

diff --git a/src/renderer/src/pages/home/components/RightSidebar.tsx b/src/renderer/src/pages/home/components/RightSidebar.tsx
@@ -77,7 +77,7 @@ const Container = styled.div`
 const Tabs = styled.div`
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 0.5px solid var(--color-border);
   padding: 0 10px;
 `
 
@@ -93,7 +93,7 @@ const Tab = styled.div`
   color: #8a8a8a;
   border-bottom: 1px solid transparent;
   &.active {
-    color: white;
+    color: #a8a8a8;
     font-weight: 600;
   }
 `

diff --git a/src/renderer/src/pages/home/components/SettingsTab.tsx b/src/renderer/src/pages/home/components/SettingsTab.tsx
@@ -119,7 +119,7 @@ const SettingsTab: FC<Props> = (props) => {
           <Slider
             min={0}
             max={20}
-            marks={{ 0: '0', 5: '5', 10: '10', 15: '15', 20: t('assistant.settings.max') }}
+            marks={{ 0: '0', 10: '10', 20: t('assistant.settings.max') }}
             onChange={onConextCountChange}
             value={typeof contextCount === 'number' ? contextCount : 0}
             step={1}
@@ -142,12 +142,12 @@ const SettingsTab: FC<Props> = (props) => {
       <SettingSubtitle>{t('settings.messages.title')}</SettingSubtitle>
       <SettingDivider />
       <SettingRow>
-        <SettingRowTitle>{t('settings.messages.divider')}</SettingRowTitle>
+        <SettingRowTitleSmall>{t('settings.messages.divider')}</SettingRowTitleSmall>
         <Switch checked={showMessageDivider} onChange={(checked) => dispatch(setShowMessageDivider(checked))} />
       </SettingRow>
       <SettingDivider />
       <SettingRow>
-        <SettingRowTitle>{t('settings.messages.use_serif_font')}</SettingRowTitle>
+        <SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
         <Switch
           checked={messageFont === 'serif'}
           onChange={(checked) => dispatch(setMessageFont(checked ? 'serif' : 'system'))}
@@ -157,7 +157,7 @@ const SettingsTab: FC<Props> = (props) => {
       <SettingSubtitle style={{ marginTop: 20 }}>{t('settings.messages.input.title')}</SettingSubtitle>
       <SettingDivider />
       <SettingRow>
-        <SettingRowTitle>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitle>
+        <SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
         <Switch
           checked={showInputEstimatedTokens}
           onChange={(checked) => dispatch(setShowInputEstimatedTokens(checked))}
@@ -169,7 +169,7 @@ const SettingsTab: FC<Props> = (props) => {
 }
 
 const Container = styled.div`
-  padding: 0 10px;
+  padding: 0 15px;
 `
 
 const InputNumberic = styled(InputNumber)`
@@ -195,4 +195,8 @@ const QuestionIcon = styled(QuestionCircleOutlined)`
   color: var(--color-text-3);
 `
 
+const SettingRowTitleSmall = styled(SettingRowTitle)`
+  font-size: 13px;
+`
+
 export default SettingsTab
diff --git a/yarn.lock b/yarn.lock
@@ -961,13 +961,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fontsource/inter@npm:^5.0.18":
-  version: 5.0.18
-  resolution: "@fontsource/inter@npm:5.0.18"
-  checksum: 10c0/87863160b18a3a2b2cc0b2949b41b4072f422efb672f183a8fa2ae19bd803da18ec24a65344c42c1686c73e1b65bb4a7cd64ce5c0f015872c5f5dcba4e64bf92
-  languageName: node
-  linkType: hard
-
 "@hello-pangea/dnd@npm:^16.6.0":
   version: 16.6.0
   resolution: "@hello-pangea/dnd@npm:16.6.0"
@@ -3413,7 +3406,6 @@ __metadata:
     "@electron-toolkit/preload": "npm:^3.0.0"
     "@electron-toolkit/tsconfig": "npm:^1.0.1"
     "@electron-toolkit/utils": "npm:^3.0.0"
-    "@fontsource/inter": "npm:^5.0.18"
     "@hello-pangea/dnd": "npm:^16.6.0"
     "@kangfenmao/keyv-storage": "npm:^0.1.0"
     "@reduxjs/toolkit": "npm:^2.2.5"