From f33415b751a505245922c26b820e7ead994e59fa Mon Sep 17 00:00:00 2001
From: Duy Huynh <vndee.huynh@gmail.com>
Date: Sun, 26 Jan 2025 09:36:03 +0700
Subject: [PATCH] refactor: better vertical alignment for icon and text in some
 setting buttons (#4615)

### What problem does this PR solve?

Fixed vertical alignment issues between icons and text in API-Key and
System Model Settings buttons. This improves visual consistency across
the settings interface.

### Type of change

- [x] Refactoring

Before: Icons and text were slightly misaligned vertically
<img width="635" alt="Screenshot 2025-01-23 at 20 22 46"
src="https://github.com/user-attachments/assets/28f15637-d3fd-45a2-aae8-ca72fb12a88e"
/>

After: Icons and text are now properly centered with consistent spacing
<img width="540" alt="Screenshot 2025-01-23 at 20 23 02"
src="https://github.com/user-attachments/assets/98bb0ca5-6995-42d8-bd23-8a8f44ec0209"
/>
---
 .../components/setting-title/index.tsx        |  5 ++-
 .../user-setting/setting-model/index.tsx      | 32 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/web/src/pages/user-setting/components/setting-title/index.tsx b/web/src/pages/user-setting/components/setting-title/index.tsx
index c3066d024..3fd4f424a 100644
--- a/web/src/pages/user-setting/components/setting-title/index.tsx
+++ b/web/src/pages/user-setting/components/setting-title/index.tsx
@@ -27,7 +27,10 @@ const SettingTitle = ({
       </div>
       {showRightButton && (
         <Button type={'primary'} onClick={clickButton}>
-          <SettingOutlined></SettingOutlined> {t('systemModelSettings')}
+          <Flex align="center" gap={4}>
+            <SettingOutlined />
+            {t('systemModelSettings')}
+          </Flex>
         </Button>
       )}
     </Flex>
diff --git a/web/src/pages/user-setting/setting-model/index.tsx b/web/src/pages/user-setting/setting-model/index.tsx
index 66b8f9b78..017704566 100644
--- a/web/src/pages/user-setting/setting-model/index.tsx
+++ b/web/src/pages/user-setting/setting-model/index.tsx
@@ -92,27 +92,31 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
           <Col span={12} className={styles.factoryOperationWrapper}>
             <Space size={'middle'}>
               <Button onClick={handleApiKeyClick}>
-                {isLocalLlmFactory(item.name) ||
-                item.name === 'VolcEngine' ||
-                item.name === 'Tencent Hunyuan' ||
-                item.name === 'XunFei Spark' ||
-                item.name === 'BaiduYiyan' ||
-                item.name === 'Fish Audio' ||
-                item.name === 'Tencent Cloud' ||
-                item.name === 'Google Cloud' ||
-                item.name === 'Azure OpenAI'
-                  ? t('addTheModel')
-                  : 'API-Key'}
-                <SettingOutlined />
+                <Flex align="center" gap={4}>
+                  {isLocalLlmFactory(item.name) ||
+                  item.name === 'VolcEngine' ||
+                  item.name === 'Tencent Hunyuan' ||
+                  item.name === 'XunFei Spark' ||
+                  item.name === 'BaiduYiyan' ||
+                  item.name === 'Fish Audio' ||
+                  item.name === 'Tencent Cloud' ||
+                  item.name === 'Google Cloud' ||
+                  item.name === 'Azure OpenAI'
+                    ? t('addTheModel')
+                    : 'API-Key'}
+                  <SettingOutlined />
+                </Flex>
               </Button>
               <Button onClick={handleShowMoreClick}>
-                <Flex gap={'small'}>
+                <Flex align="center" gap={4}>
                   {t('showMoreModels')}
                   <MoreModelIcon />
                 </Flex>
               </Button>
               <Button type={'text'} onClick={handleDeleteFactory}>
-                <CloseCircleOutlined style={{ color: '#D92D20' }} />
+                <Flex align="center">
+                  <CloseCircleOutlined style={{ color: '#D92D20' }} />
+                </Flex>
               </Button>
             </Space>
           </Col>