refactor(styles): adjust border-radius and padding in various components for improved UI consistency; update layout in settings pages

src/renderer/src/assets/styles/ant.scss

@@ -207,7 +207,7 @@
   max-height: 40vh;
   overflow-y: auto;
   border: 0.5px solid var(--color-border);
-  border-radius: 16px;
+  border-radius: 12px;
 
   .ant-dropdown-menu-item {
     padding: 5px;
@@ -218,7 +218,7 @@
 }
 .ant-popover-inner {
   border: 0.5px solid var(--color-border);
-  border-radius: 16px;
+  border-radius: 12px;
   .ant-popover-inner-content {
     max-height: 70vh;
     overflow-y: auto;
@@ -229,6 +229,25 @@
     border: none;
   }
 }
+.ant-modal {
+  .ant-modal-content {
+    border-radius: 12px !important;
+    border: 0.5px solid var(--color-border) !important;
+    padding: 0 0 8px 0 !important;
+    .ant-modal-header {
+      padding: 16px 16px 0 16px !important;
+      border-radius: 12px;
+    }
+    .ant-modal-body {
+      max-height: 80vh;
+      overflow-y: auto;
+      padding: 0 16px 0 16px;
+    }
+    .ant-modal-footer {
+      padding: 0 16px 8px 16px;
+    }
+  }
+}
 
 .ant-collapse {
   border: 1px solid var(--color-border);
@@ -238,7 +257,7 @@
 }
 
 .ant-collapse-content {
-  border-top: 1px solid var(--color-border) !important;
+  border-top: 0.5px solid var(--color-border) !important;
   .ant-color-picker & {
     border-top: none !important;
   }

src/renderer/src/context/AntdProvider.tsx

@@ -43,10 +43,15 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
             paddingInline: 10
           },
           Input: {
-            controlHeight: 30
+            controlHeight: 30,
+            colorBorder: 'var(--color-border)'
+          },
+          InputNumber: {
+            colorBorder: 'var(--color-border)'
           },
           Select: {
-            controlHeight: 30
+            controlHeight: 30,
+            colorBorder: 'var(--color-border)'
           },
           Collapse: {
             headerBg: 'transparent'

src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx

@@ -7,7 +7,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
 import { useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { AssistantSettings as AssistantSettingsType } from '@renderer/types'
 import { getLeadingEmoji, modalConfirm } from '@renderer/utils'
-import { Button, Col, Input, InputNumber, Modal, Popover, Row, Slider, Switch, Tooltip } from 'antd'
+import { Button, Col, Flex, Input, InputNumber, Modal, Popover, Row, Slider, Switch, Tooltip } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { Dispatch, FC, SetStateAction, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -145,7 +145,7 @@ const AssistantSettings: FC = () => {
           justifyContent: 'space-between'
         }}>
         {t('settings.assistant.model_params')}
-        <Button onClick={onReset} style={{ width: 90 }}>
+        <Button onClick={onReset} style={{ width: 60 }}>
           {t('chat.settings.reset')}
         </Button>
       </SettingSubtitle>
@@ -156,7 +156,7 @@ const AssistantSettings: FC = () => {
         </Tooltip>
       </Row>
       <Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
-        <Col span={21}>
+        <Col span={20}>
           <Slider
             min={0}
             max={2}
@@ -167,7 +167,7 @@ const AssistantSettings: FC = () => {
             step={0.01}
           />
         </Col>
-        <Col span={3}>
+        <Col span={4}>
           <InputNumber
             min={0}
             max={2}
@@ -185,7 +185,7 @@ const AssistantSettings: FC = () => {
         </Tooltip>
       </Row>
       <Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
-        <Col span={21}>
+        <Col span={20}>
           <Slider
             min={0}
             max={1}
@@ -196,7 +196,7 @@ const AssistantSettings: FC = () => {
             step={0.01}
           />
         </Col>
-        <Col span={3}>
+        <Col span={4}>
           <InputNumber min={0} max={1} step={0.01} value={topP} onChange={onTopPChange} style={{ width: '100%' }} />
         </Col>
       </Row>
@@ -207,7 +207,7 @@ const AssistantSettings: FC = () => {
         </Tooltip>
       </Row>
       <Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
-        <Col span={21}>
+        <Col span={20}>
           <Slider
             min={0}
             max={20}
@@ -218,7 +218,7 @@ const AssistantSettings: FC = () => {
             step={1}
           />
         </Col>
-        <Col span={3}>
+        <Col span={4}>
           <InputNumber
             min={0}
             max={20}
@@ -229,7 +229,7 @@ const AssistantSettings: FC = () => {
           />
         </Col>
       </Row>
-      <Row align="middle" style={{ marginBottom: 10 }}>
+      <Flex justify="space-between" align="center" style={{ marginBottom: 10 }}>
         <HStack alignItems="center">
           <Label>{t('chat.settings.max_tokens')}</Label>
           <Tooltip title={t('chat.settings.max_tokens.tip')}>
@@ -255,7 +255,7 @@ const AssistantSettings: FC = () => {
             onUpdateAssistantSettings({ enableMaxTokens: enabled })
           }}
         />
-      </Row>
+      </Flex>
       {enableMaxTokens && (
         <Row align="middle" gutter={20}>
           <Col span={24}>
@@ -307,7 +307,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       afterClose={onClose}
       transitionName="animation-move-down"
       centered
-      width={800}
+      width={500}
       footer={null}>
       <AssistantSettings />
     </Modal>

src/renderer/src/pages/settings/ModelSettings/TopicNamingModalPopup.tsx

@@ -2,7 +2,7 @@ import { HStack } from '@renderer/components/Layout'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useAppDispatch } from '@renderer/store'
 import { setEnableTopicNaming, setTopicNamingPrompt } from '@renderer/store/settings'
-import { Button, Divider, Input, Modal, Switch } from 'antd'
+import { Button, Input, Modal, Switch } from 'antd'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -45,14 +45,13 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       afterClose={onClose}
       transitionName="animation-move-down"
       footer={null}
+      width={500}
       centered>
-      <Divider style={{ margin: '10px 0' }} />
       <HStack style={{ gap: 10, marginBottom: 20, marginTop: 20 }} alignItems="center">
         <div>{t('settings.models.enable_topic_naming')}</div>
         <Switch checked={enableTopicNaming} onChange={(v) => dispatch(setEnableTopicNaming(v))} />
       </HStack>
-      <Divider style={{ margin: '10px 0' }} />
+      <div style={{ marginBottom: 8 }}>
-      <div style={{ marginBottom: 20 }}>
         <div style={{ marginBottom: 10 }}>{t('settings.models.topic_naming_prompt')}</div>
         <Input.TextArea
           rows={4}

src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx

@@ -121,7 +121,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve }) => {
           tooltip={t('settings.models.add.group_name.tooltip')}>
           <Input placeholder={t('settings.models.add.group_name.placeholder')} spellCheck={false} />
         </Form.Item>
-        <Form.Item style={{ marginBottom: 0, textAlign: 'center' }}>
+        <Form.Item style={{ marginBottom: 8, textAlign: 'center' }}>
           <Flex justify="end" align="center" style={{ position: 'relative' }}>
             <Button type="primary" htmlType="submit" size="middle">
               {t('settings.models.add.add_model')}

src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx

@@ -253,10 +253,6 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
       afterClose={onClose}
       footer={null}
       width="800px"
-      styles={{
-        content: { padding: 0 },
-        header: { padding: '16px 22px 30px 22px' }
-      }}
       transitionName="animation-move-down"
       centered>
       <SearchContainer>
@@ -378,8 +374,6 @@ const SearchContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 15px;
-  padding: 0 22px;
-  margin-top: -10px;
 
   .ant-radio-group {
     display: flex;
@@ -396,12 +390,10 @@ const TopToolsWrapper = styled.div`
 const ListContainer = styled.div`
   height: calc(100vh - 300px);
   overflow-y: scroll;
-  padding: 0 6px 16px 6px;
-  margin-left: 16px;
-  margin-right: 10px;
   display: flex;
   flex-direction: column;
   gap: 16px;
+  padding-right: 2px;
 `
 
 const FlexColumn = styled.div`

src/renderer/src/pages/settings/ProviderSettings/ModelEditContent.tsx

@@ -1,4 +1,3 @@
-import { DownOutlined, UpOutlined } from '@ant-design/icons'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import {
   isEmbeddingModel,
@@ -10,6 +9,7 @@ import {
 import { Model, ModelType } from '@renderer/types'
 import { getDefaultGroupName } from '@renderer/utils'
 import { Button, Checkbox, Divider, Flex, Form, Input, message, Modal } from 'antd'
+import { ChevronDown, ChevronUp } from 'lucide-react'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -108,20 +108,25 @@ const ModelEditContent: FC<ModelEditContentProps> = ({ model, onUpdateModel, ope
           tooltip={t('settings.models.add.group_name.tooltip')}>
           <Input placeholder={t('settings.models.add.group_name.placeholder')} spellCheck={false} />
         </Form.Item>
-        <Form.Item style={{ marginBottom: 15, textAlign: 'center' }}>
+        <Form.Item style={{ marginBottom: 8, textAlign: 'center' }}>
           <Flex justify="space-between" align="center" style={{ position: 'relative' }}>
-            <MoreSettingsRow onClick={() => setShowModelTypes(!showModelTypes)}>
+            <Button
+              color="default"
+              variant="filled"
+              icon={showModelTypes ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+              iconPosition="end"
+              onClick={() => setShowModelTypes(!showModelTypes)}
+              style={{ color: 'var(--color-text-3)' }}>
               {t('settings.moresetting')}
-              <ExpandIcon>{showModelTypes ? <UpOutlined /> : <DownOutlined />}</ExpandIcon>
+            </Button>
-            </MoreSettingsRow>
             <Button type="primary" htmlType="submit" size="middle">
               {t('common.save')}
             </Button>
           </Flex>
         </Form.Item>
         {showModelTypes && (
-          <div>
+          <div style={{ marginBottom: 8 }}>
-            <Divider style={{ margin: '0 0 15px 0' }} />
+            <Divider style={{ margin: '16px 0 16px 0' }} />
             <TypeTitle>{t('models.type.select')}:</TypeTitle>
             {(() => {
               const defaultTypes = [
@@ -206,26 +211,4 @@ const TypeTitle = styled.div`
   font-weight: 600;
 `
 
-const ExpandIcon = styled.div`
-  font-size: 12px;
-  color: var(--color-text-3);
-`
-
-const MoreSettingsRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--color-text-3);
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-  max-width: 150px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &:hover {
-    background-color: var(--color-background-soft);
-  }
-`
-
 export default ModelEditContent

src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx

@@ -1,5 +1,5 @@
 import { TopView } from '@renderer/components/TopView'
-import { Button, Form, FormProps, Input, Modal } from 'antd'
+import { Button, Flex, Form, FormProps, Input, Modal } from 'antd'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -66,7 +66,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
       centered>
       <Form
         form={form}
-        labelCol={{ flex: '150px' }}
+        labelCol={{ flex: '110px' }}
         labelAlign="right"
         colon={false}
         style={{ marginTop: 25 }}
@@ -89,11 +89,11 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
         <Form.Item name="name" label={t('settings.websearch.subscribe_name')}>
           <Input placeholder={t('settings.websearch.subscribe_name.placeholder')} spellCheck={false} />
         </Form.Item>
-        <Form.Item label=" ">
+        <Flex justify="end" style={{ marginBottom: 8 }}>
           <Button type="primary" htmlType="submit">
             {t('settings.websearch.subscribe_add')}
           </Button>
-        </Form.Item>
+        </Flex>
       </Form>
     </Modal>
   )