make message box and popover menu occupy full width

RocketChat · Dec 19, 2024 · 1e07b9b · 1e07b9b
1 parent 00baef5
commit 1e07b9b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 58 deletions.
diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -4,9 +4,10 @@ import { darken, lighten } from '@embeddedchat/ui-elements';
 export const getChatInputStyles = (theme) => {
   const styles = {
     inputWithFormattingBox: css`
+      width: 100%;
+      margin-bottom: 5px;
       border: 1px solid ${theme.colors.border};
       border-radius: ${theme.radius};
-      margin: 0.5rem 2rem 1rem 2rem;
       &.focused {
         border: ${`1.5px solid ${theme.colors.ring}`};
       }
@@ -39,7 +40,6 @@ export const getChatInputStyles = (theme) => {
       border: none;
       outline: none;
       font-size: 14px;
-
       &:focus {
         border: none;
         outline: none;
@@ -81,13 +81,24 @@ export const getChatInputFormattingToolbarStyles = ({ theme, mode }) => {
     `,
     popOverStyles: css`
       position: absolute;
-      bottom: 4rem;
+      bottom: 3rem;
       left: 0;
-      border: 1px solid ${theme.colors.border};
-      z-index: 1000;
-      background-color: ${theme.colors.background};
-      border-radius: 4px;
+      width: 100%;
+      background: ${theme.colors.background};
+      box-shadow: 0 -8px 10px ${mode === 'light' ? darken(theme.colors.background, 0.1) : lighten(theme.colors.background, 1)};
+      border-radius: 8px;
       padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      z-index: 100;
+    `,
+    popOverItemStyles: css`
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      cursor: pointer;
+      padding: 0.5rem;
     `,
   };
   return styles;

diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -42,6 +42,7 @@ const ChatInputFormattingToolbar = ({
   const [isEmojiOpen, setEmojiOpen] = useState(false);
   const [isPopoverOpen, setPopoverOpen] = useState(false);
   const popoverRef = useRef(null);
+
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (popoverRef.current && !popoverRef.current.contains(event.target)) {
@@ -68,39 +69,36 @@ const ChatInputFormattingToolbar = ({
     triggerButton?.(null, message);
   };
 
-  const handleFormatterClick = (item) => {
-    formatSelection(messageRef, item.pattern);
-    setPopoverOpen(false);
-  };
-
   const chatToolMap = {
     audio: (
       <Tooltip text="Audio Message" position="top" key="audio">
         <AudioMessageRecorder />
       </Tooltip>
     ),
     video: (
-      <ActionButton
-        square
-        ghost
-        disabled={isRecordingMessage}
-        onClick={() => {}}
-      >
+      <Tooltip text="Video Message" position="top" key="video">
         <VideoMessageRecorder />
-      </ActionButton>
+      </Tooltip>
     ),
     file: (
-      <ActionButton
-        square
-        ghost
-        disabled={isRecordingMessage}
-        onClick={handleClickToOpenFiles}
-      >
-        <Icon name="attachment" size="1.25rem" />
-      </ActionButton>
+      <Tooltip text="Upload File" position="top" key="file">
+        <ActionButton
+          square
+          ghost
+          disabled={isRecordingMessage}
+          onClick={handleClickToOpenFiles}
+        >
+          <Icon name="attachment" size="1.25rem" />
+        </ActionButton>
+      </Tooltip>
     ),
   };
 
+  const handleFormatterClick = (item) => {
+    formatSelection(messageRef, item.pattern);
+    setPopoverOpen(false);
+  };
+
   return (
     <Box
       css={styles.chatFormat}
@@ -112,9 +110,7 @@ const ChatInputFormattingToolbar = ({
           square
           ghost
           disabled={isRecordingMessage}
-          onClick={() => {
-            setEmojiOpen(true);
-          }}
+          onClick={() => setEmojiOpen(true)}
         >
           <Icon name="emoji" size="1.25rem" />
         </ActionButton>
@@ -123,7 +119,7 @@ const ChatInputFormattingToolbar = ({
       <Box
         css={css`
           display: flex;
-          @media (max-width: 400px) {
+          @media (max-width: 399px) {
             display: none;
           }
         `}
@@ -140,9 +136,7 @@ const ChatInputFormattingToolbar = ({
                 square
                 disabled={isRecordingMessage}
                 ghost
-                onClick={() => {
-                  formatSelection(messageRef, item.pattern);
-                }}
+                onClick={() => formatSelection(messageRef, item.pattern)}
               >
                 <Icon
                   disabled={isRecordingMessage}
@@ -152,8 +146,6 @@ const ChatInputFormattingToolbar = ({
               </ActionButton>
             </Tooltip>
           ))}
-
-        {['audio', 'file', 'video'].map((key) => chatToolMap[key])}
       </Box>
 
       <Box
@@ -180,38 +172,24 @@ const ChatInputFormattingToolbar = ({
           {formatters
             .map((name) => formatter.find((item) => item.name === name))
             .map((item) => (
-              <ActionButton
+              <Box
                 key={item.name}
-                square
                 disabled={isRecordingMessage}
-                ghost
                 onClick={() => handleFormatterClick(item)}
-                css={css`
-                  padding: 8px;
-                  cursor: pointer;
-                `}
+                css={styles.popOverItemStyles}
               >
                 <Icon
                   disabled={isRecordingMessage}
                   name={item.name}
-                  size="1.25rem"
+                  size="1rem"
                 />
-              </ActionButton>
+                <span>{item.name}</span>
+              </Box>
             ))}
-          {['video', 'file'].map((key) => (
-            <Box
-              key={key}
-              css={css`
-                padding: 8px;
-              `}
-            >
-              {chatToolMap[key]}
-            </Box>
-          ))}
         </Box>
       )}
 
-      {surfaceItems.includes('audio') && chatToolMap.audio}
+      {surfaceItems.map((key) => chatToolMap[key])}
 
       {isEmojiOpen && (
         <EmojiPicker

diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 const getQuoteMessageStyles = (theme) => {
   const styles = {
     messageContainer: css`
-      margin: 0.2rem 2rem;
       position: relative;
       font-size: 0.85rem;
       background-color: ${theme.colors.background};
@@ -12,7 +11,7 @@ const getQuoteMessageStyles = (theme) => {
       z-index: 1200;
       border: 1px solid ${theme.colors.border};
       border-radius: ${theme.radius};
-      max-width: 100%;
+      width: 100%;
       box-sizing: border-box;
     `,