fix: add limit for emotion style to fix transparent panel

msgbyte · Nov 6, 2023 · 766477a · 766477a
1 parent ed5ff61
commit 766477a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/client/web/src/components/ChatBox/ChatInputBox/BaseChatInputButton.tsx b/client/web/src/components/ChatBox/ChatInputBox/BaseChatInputButton.tsx
@@ -1,8 +1,10 @@
 import { Popover } from 'antd';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { Icon } from 'tailchat-design';
 
 interface BaseChatInputButtonProps {
+  overlayClassName?: string;
   icon: string;
   popoverContent: (ctx: { hidePopover: () => void }) => React.ReactElement;
 }
@@ -21,7 +23,10 @@ export const BaseChatInputButton: React.FC<BaseChatInputButtonProps> =
             },
           })
         }
-        overlayClassName="chat-message-input_action-popover"
+        overlayClassName={clsx(
+          'chat-message-input_action-popover',
+          props.overlayClassName
+        )}
         showArrow={false}
         placement="topRight"
         trigger={['click']}

diff --git a/client/web/src/components/ChatBox/ChatInputBox/Emotion.less b/client/web/src/components/ChatBox/ChatInputBox/Emotion.less
@@ -1,4 +1,4 @@
-.chat-message-input_action-popover {
+.chat-message-input_action-popover.emotion-popover {
   > .ant-popover-content > .ant-popover-inner {
     background-color: transparent;
     border-radius: 10px;

diff --git a/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx b/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
@@ -10,6 +10,7 @@ export const ChatInputEmotion: React.FC = React.memo(() => {
 
   return (
     <BaseChatInputButton
+      overlayClassName="emotion-popover"
       icon="mdi:emoticon-happy-outline"
       popoverContent={({ hidePopover }) => (
         <EmojiPanel