💄 style: Update LLM Settings Form styles (lobehub#2393)

* 💄 style: Update LLM Settings Form styles * 💄 style: Fix alert order
SilvaneiMartins · May 6, 2024 · 4f98e6c · 4f98e6c
1 parent aeb09f5
commit 4f98e6c
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 17 deletions.
diff --git a/src/app/(main)/settings/_layout/Mobile/Header.tsx b/src/app/(main)/settings/_layout/Mobile/Header.tsx
@@ -21,10 +21,12 @@ const Header = memo(() => {
       center={
         <MobileNavBarTitle
           title={
-            <Flexbox align={'center'} gap={4} horizontal>
+            <Flexbox align={'center'} gap={8} horizontal>
               <span style={{ lineHeight: 1.2 }}> {t(`tab.${activeSettingsKey}`)}</span>
               {activeSettingsKey === SettingsTabs.Sync && (
-                <Tag color={'gold'}>{t('tab.experiment')}</Tag>
+                <Tag bordered={false} color={'warning'}>
+                  {t('tab.experiment')}
+                </Tag>
               )}
             </Flexbox>
           }

diff --git a/src/app/(main)/settings/hooks/useCategory.tsx b/src/app/(main)/settings/hooks/useCategory.tsx
@@ -1,7 +1,9 @@
 import { Icon } from '@lobehub/ui';
-import { Bot, Cloudy, Info, Mic2, Settings2, Webhook } from 'lucide-react';
+import { Tag } from 'antd';
+import { Bot, Brain, Cloudy, Info, Mic2, Settings2 } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import type { MenuProps } from '@/components/Menu';
 import { SettingsTabs } from '@/store/global/initialState';
@@ -28,10 +30,17 @@ export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
         enableWebrtc && {
           icon: <Icon icon={Cloudy} size={iconSize} />,
           key: SettingsTabs.Sync,
-          label: t('tab.sync'),
+          label: (
+            <Flexbox align={'center'} gap={8} horizontal>
+              {t('tab.sync')}
+              <Tag bordered={false} color={'warning'}>
+                {t('tab.experiment')}
+              </Tag>
+            </Flexbox>
+          ),
         },
         showLLM && {
-          icon: <Icon icon={Webhook} size={iconSize} />,
+          icon: <Icon icon={Brain} size={iconSize} />,
           key: SettingsTabs.LLM,
           label: t('tab.llm'),
         },

diff --git a/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx b/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx
@@ -2,7 +2,7 @@
 
 import { Form, type FormItemProps, type ItemGroup } from '@lobehub/ui';
 import { Input, Switch } from 'antd';
-import { createStyles, css } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { debounce } from 'lodash-es';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,7 +23,21 @@ import { GlobalLLMProviderKey } from '@/types/settings';
 import Checker from '../Checker';
 import ProviderModelListSelect from '../ProviderModelList';
 
-const useStyles = createStyles(() => ({
+const useStyles = createStyles(({ css, prefixCls, responsive }) => ({
+  form: css`
+    .${prefixCls}-form-item-control:has(.${prefixCls}-input,.${prefixCls}-select) {
+      flex: none;
+      width: min(70%, 800px);
+      min-width: min(70%, 800px) !important;
+    }
+    ${responsive.mobile} {
+      width: 100%;
+      min-width: unset !important;
+    }
+    .${prefixCls}-select-selection-overflow-item {
+      font-size: 12px;
+    }
+  `,
   safariIconWidthFix: css`
     svg {
       width: unset !important;
@@ -173,11 +187,11 @@ const ProviderConfig = memo<ProviderConfigProps>(
 
     return (
       <Form
+        className={styles.form}
         form={form}
         items={[model]}
         onValuesChange={debounce(setSettings, 100)}
         {...FORM_STYLE}
-        itemMinWidth={'max(50%,400px)'}
       />
     );
   },

diff --git a/src/features/ChatInput/ActionBar/ModelSwitch.tsx b/src/features/ChatInput/ActionBar/ModelSwitch.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon } from '@lobehub/ui';
-import { BrainCog } from 'lucide-react';
+import { Brain } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,7 +10,7 @@ const ModelSwitch = memo(() => {
 
   return (
     <ModelSwitchPanel>
-      <ActionIcon icon={BrainCog} placement={'bottom'} title={t('ModelSwitch.title')} />
+      <ActionIcon icon={Brain} placement={'bottom'} title={t('ModelSwitch.title')} />
     </ModelSwitchPanel>
   );
 });

diff --git a/src/features/User/UserPanel/useMenu.tsx b/src/features/User/UserPanel/useMenu.tsx
@@ -31,11 +31,20 @@ import { authSelectors } from '@/store/user/selectors';
 import { useNewVersion } from './useNewVersion';
 
 const NewVersionBadge = memo(
-  ({ children, showBadge }: PropsWithChildren & { showBadge?: boolean }) => {
+  ({
+    children,
+    showBadge,
+    onClick,
+  }: PropsWithChildren & { onClick: () => void; showBadge?: boolean }) => {
     const { t } = useTranslation('common');
-    if (!showBadge) return children;
+    if (!showBadge)
+      return (
+        <Flexbox flex={1} onClick={onClick}>
+          {children}
+        </Flexbox>
+      );
     return (
-      <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal width={'100%'}>
+      <Flexbox align={'center'} flex={1} gap={8} horizontal onClick={onClick} width={'100%'}>
         <span>{children}</span>
         <Badge count={t('upgradeVersion.hasNew')} />
       </Flexbox>
@@ -55,10 +64,10 @@ export const useMenu = () => {
       icon: <Icon icon={Settings2} />,
       key: 'setting',
       label: (
-        <Flexbox align={'center'} horizontal>
-          <Flexbox flex={1} horizontal onClick={openSettings}>
-            <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>
-          </Flexbox>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <NewVersionBadge onClick={openSettings} showBadge={hasNewVersion}>
+            {t('userPanel.setting')}
+          </NewVersionBadge>
           <ActionIcon
             icon={Maximize}
             onClick={() => router.push(urlJoin('/settings', SettingsTabs.Common))}