feat: Enhance fileUpload modal.

packages/react/src/views/AttachmentPreview/AttachmentPreview.js

@@ -1,19 +1,26 @@
 import React, { useContext, useState, useRef } from 'react';
 import { css } from '@emotion/react';
-import { Box, Icon, Button, Input, Modal } from '@embeddedchat/ui-elements';
+import {
+  Box,
+  Icon,
+  Button,
+  Input,
+  Modal,
+  useTheme,
+} from '@embeddedchat/ui-elements';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 import CheckPreviewType from './CheckPreviewType';
 import RCContext from '../../context/RCInstance';
 import { useMessageStore, useMemberStore } from '../../store';
 import getAttachmentPreviewStyles from './AttachmentPreview.styles';
 import { parseEmoji } from '../../lib/emoji';
 import MembersList from '../Mentions/MembersList';
-import TypingUsers from '../TypingUsers/TypingUsers';
 import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 
 const AttachmentPreview = () => {
   const { RCInstance, ECOptions } = useContext(RCContext);
   const styles = getAttachmentPreviewStyles();
+  const { theme } = useTheme();
 
   const toggle = useAttachmentWindowStore((state) => state.toggle);
   const data = useAttachmentWindowStore((state) => state.data);
@@ -86,46 +93,71 @@ const AttachmentPreview = () => {
             css={css`
               text-align: center;
               margin-top: 1rem;
+              display: flex;
+              justify-content: center;
+              padding: 0 50px 0 50px;
             `}
           >
             <CheckPreviewType data={data} />
           </Box>
           <Box
             css={css`
-              margin: 30px;
+              margin: 10px;
             `}
           >
             <Box css={styles.inputContainer}>
-              <Box
-                is="span"
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+              <label
+                htmlFor="file-name"
                 css={css`
                   font-weight: 550;
                   margin-bottom: 0.5rem;
+                  font-size: 0.8rem;
                 `}
               >
                 File name
-              </Box>
+              </label>
               <Input
                 onChange={(e) => {
                   handleFileName(e);
                 }}
                 value={fileName}
-                css={styles.input}
-                placeholder="name"
+                id="file-name"
+                css={css`
+                  ${styles.input}
+                  &: focus {
+                    ${fileName === ''
+                      ? `border: 1px solid red;`
+                      : `border: 1px solid #000;`}
+                    transition: border 0.1s ease-in;
+                  }
+                `}
               />
-              <TypingUsers />
+              {fileName === '' && (
+                <Box
+                  css={css`
+                    color: red;
+                    margin-top: 0.5rem;
+                    font-size: 0.65rem;
+                  `}
+                >
+                  The field File name is required.
+                </Box>
+              )}
             </Box>
 
             <Box css={styles.inputContainer}>
-              <Box
-                is="span"
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+              <label
+                htmlFor="file-description"
                 css={css`
                   font-weight: 550;
                   margin-bottom: 0.5rem;
+                  font-size: 0.8rem;
                 `}
               >
                 File description
-              </Box>
+              </label>
               <Box css={styles.fileDescription}>
                 <Box css={styles.mentionListContainer}>
                   {showMembersList && (
@@ -147,8 +179,14 @@ const AttachmentPreview = () => {
                   onChange={(e) => {
                     handleFileDescription(e);
                   }}
-                  css={styles.input}
-                  placeholder="Description"
+                  css={css`
+                    ${styles.input}
+                    &:focus {
+                      border: 1.2px solid ${theme.colors.ring};
+                      transition: border 0.9s ease-in, border 0.9s ease-out;
+                    }
+                  `}
+                  id="file-description"
                   ref={messageRef}
                 />
               </Box>
@@ -159,16 +197,19 @@ const AttachmentPreview = () => {
 
       <Modal.Footer
         css={css`
-          margin-top: 1.5rem;
+          margin-bottom: 1rem;
+          padding-right: 1rem;
         `}
       >
         <Button type="secondary" onClick={toggle}>
           Cancel
         </Button>
         <Button
-          disabled={isPending}
+          disabled={isPending || fileName === ''}
           onClick={() => {
-            submit();
+            if (fileName !== '') {
+              submit();
+            }
           }}
         >
           {isPending ? 'Sending...' : 'Send'}

packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js

@@ -15,9 +15,7 @@ const getAttachmentPreviewStyles = () => {
     `,
 
     modalContent: css`
-      overflow-y: auto;
       overflow-x: hidden;
-      max-height: 350px;
     `,
 
     fileDescription: css`
@@ -34,6 +32,7 @@ const getAttachmentPreviewStyles = () => {
       overflow-y: auto;
       background: white;
       z-index: 1400;
+      scroll-behavior: smooth;
     `,
   };