added msgstyles in toolbox

RocketChat · May 10, 2024 · 8b7436d · 8b7436d
1 parent 947b971
commit 8b7436d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 29 deletions.
diff --git a/packages/react/src/components/Message/Message.styles.js b/packages/react/src/components/Message/Message.styles.js
@@ -279,7 +279,6 @@ export const MessageToolboxStyles = {
     padding: 0.25rem;
     border: 1px solid #dfdfdf;
     border-radius: 0.25rem;
-
     background: #fff;
   `,
 };
diff --git a/packages/react/src/components/Message/MessageToolbox.js b/packages/react/src/components/Message/MessageToolbox.js
@@ -11,32 +11,7 @@ import { Icon } from '../Icon';
 import { Button } from '../Button';
 import { parseEmoji } from '../../lib/emoji';
 import { Tooltip } from '../Tooltip';
-
-const MessageToolboxWrapperCss = css`
-  display: none;
-  .ec-message:hover & {
-    display: flex;
-    position: absolute;
-    bottom: 100%;
-    z-index: 90;
-    right: 2rem;
-  }
-`;
-
-const MessageToolboxCss = css`
-  display: flex;
-  margin-left: -0.25rem;
-  margin-right: -0.25rem;
-  margin-inline: -0.25rem;
-  margin-top: 0.125rem;
-  font-size: 1.25rem !important;
-  gap: 0.25rem;
-  padding: 0.25rem;
-  border: 1px solid #dfdfdf;
-  border-radius: 0.25rem;
-
-  background: #fff;
-`;
+import { MessageToolboxStyles as styles } from './Message.styles';
 
 const popupStyle = {
   margin: '0',
@@ -82,9 +57,9 @@ export const MessageToolbox = ({
 
   return (
     <>
-      <Box css={MessageToolboxWrapperCss}>
+      <Box css={styles.container}>
         <Box
-          css={MessageToolboxCss}
+          css={styles.toolbox}
           className={appendClassNames('ec-message-toolbox', classNames)}
           style={styleOverrides}
           {...props}