💄 style: Update EmojiPicker style

Author: canisminor1990

src/EmojiPicker/EmojiPicker.tsx

@@ -43,6 +43,7 @@ const EmojiPicker = memo<EmojiPickerProps>(
     open,
     defaultOpen = false,
     onOpenChange,
+    popupProps,
     ...rest
   }) => {
     const ref = useRef<HTMLDivElement>(null);
@@ -159,9 +160,10 @@ const EmojiPicker = memo<EmojiPickerProps>(
           setVisible(v);
         }}
         open={visible}
-        placement={'bottomRight'}
+        placement={'bottomLeft'}
         rootClassName={styles.popover}
         trigger={['click']}
+        {...popupProps}
       >
         {customRender ? (
           customRender(ava)

src/EmojiPicker/type.ts

@@ -1,3 +1,4 @@
+import { PopoverProps } from 'antd';
 import { CSSProperties, ReactNode } from 'react';
 
 import type { AvatarProps } from '@/Avatar/type';
@@ -41,6 +42,10 @@ export interface EmojiPickerProps extends Omit<AvatarProps, 'onChange' | 'avatar
   onUpload?: AvatarUploaderProps['onUpload'];
   open?: boolean;
   popupClassName?: string;
+  popupProps?: Omit<
+    PopoverProps,
+    'onOpenChange' | 'defaultOpen' | 'content' | 'open' | 'rootClassName' | 'trigger'
+  >;
   popupStyle?: CSSProperties;
   size?: number;
   texts?: AvatarUploaderProps['texts'] & {

src/ThemeProvider/ConfigProvider.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { ConfigProvider as AntdConfigProvider } from 'antd';
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+const ConfigProvider = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+  return (
+    <AntdConfigProvider
+      theme={{
+        components: {
+          Button: {
+            contentFontSizeSM: 12,
+          },
+          DatePicker: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+          Input: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+          InputNumber: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+          Mentions: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+          Select: {
+            activeBorderColor: theme.colorBorder,
+            hoverBorderColor: theme.colorBorder,
+          },
+        },
+      }}
+    >
+      {children}
+    </AntdConfigProvider>
+  );
+});
+
+export default ConfigProvider;

src/ThemeProvider/ThemeProvider.tsx

@@ -16,6 +16,7 @@ import { lobeCustomStylish, lobeCustomToken } from '@/styles';
 import { createLobeAntdTheme } from '@/styles/theme/antdTheme';
 import { LobeCustomToken } from '@/types/customToken';
 
+import ConfigProvider from './ConfigProvider';
 import GlobalStyle from './GlobalStyle';
 import type { ThemeProviderProps } from './type';
 
@@ -85,10 +86,12 @@ const ThemeProvider = memo<ThemeProviderProps>(
           theme={theme}
           {...rest}
         >
-          {enableGlobalStyle && <GlobalStyle />}
-          <App className={className} style={{ minHeight: 'inherit', width: 'inherit', ...style }}>
-            {children}
-          </App>
+          <ConfigProvider>
+            {enableGlobalStyle && <GlobalStyle />}
+            <App className={className} style={{ minHeight: 'inherit', width: 'inherit', ...style }}>
+              {children}
+            </App>
+          </ConfigProvider>
         </AntdThemeProvider>
       </>
     );