From 2beaa007a14f7dbe8c4bcea2de01d1377c0b9899 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 14 Jan 2025 23:32:16 +0530
Subject: [PATCH 1/3] initial commit

---
 .../AttachmentPreview/AttachmentPreview.js    | 64 ++++++++++++++-----
 1 file changed, 47 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
index 2c007f1a7..f2d29beed 100644
--- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
+++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
@@ -1,6 +1,6 @@
 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';
@@ -8,12 +8,12 @@ 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 +86,67 @@ const AttachmentPreview = () => {
             css={css`
               text-align: center;
               margin-top: 1rem;
+              padding: 0 100px 0 100px;
             `}
           >
             <CheckPreviewType data={data} />
           </Box>
           <Box
             css={css`
-              margin: 30px;
+              margin: 10px;
             `}
           >
             <Box css={styles.inputContainer}>
-              <Box
-                is="span"
+              <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"
+              <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 +168,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 +186,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'}

From d999049d597782111203fc93d55172b7a6f36771 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Wed, 15 Jan 2025 00:26:18 +0530
Subject: [PATCH 2/3] addingLabel

---
 .../views/AttachmentPreview/AttachmentPreview.js  | 15 +++++++++++++--
 .../AttachmentPreview/AttachmentPreview.styles.js |  5 +++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
index f2d29beed..08bcd4b14 100644
--- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
+++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
@@ -1,6 +1,13 @@
 import React, { useContext, useState, useRef } from 'react';
 import { css } from '@emotion/react';
-import { Box, Icon, Button, Input, Modal, useTheme } 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';
@@ -86,7 +93,9 @@ const AttachmentPreview = () => {
             css={css`
               text-align: center;
               margin-top: 1rem;
-              padding: 0 100px 0 100px;
+              display: flex;
+              justify-content: center;
+              padding: 0 50px 0 50px;
             `}
           >
             <CheckPreviewType data={data} />
@@ -97,6 +106,7 @@ const AttachmentPreview = () => {
             `}
           >
             <Box css={styles.inputContainer}>
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
               <label
                 htmlFor="file-name"
                 css={css`
@@ -137,6 +147,7 @@ const AttachmentPreview = () => {
             </Box>
 
             <Box css={styles.inputContainer}>
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
               <label
                 htmlFor="file-description"
                 css={css`
diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
index 45f8cf455..ecaf288af 100644
--- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
+++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
@@ -15,9 +15,9 @@ const getAttachmentPreviewStyles = () => {
     `,
 
     modalContent: css`
-      overflow-y: auto;
       overflow-x: hidden;
-      max-height: 350px;
+      overflow-y: auto;
+      height: auto;
     `,
 
     fileDescription: css`
@@ -34,6 +34,7 @@ const getAttachmentPreviewStyles = () => {
       overflow-y: auto;
       background: white;
       z-index: 1400;
+      scroll-behavior: smooth;
     `,
   };
 

From 7f29b9d634a5d2f6596349564f5031017ce42fe4 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Mon, 27 Jan 2025 22:40:11 +0530
Subject: [PATCH 3/3] remove auto height

---
 .../src/views/AttachmentPreview/AttachmentPreview.styles.js     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
index ecaf288af..0afeee1ad 100644
--- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
+++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
@@ -16,8 +16,6 @@ const getAttachmentPreviewStyles = () => {
 
     modalContent: css`
       overflow-x: hidden;
-      overflow-y: auto;
-      height: auto;
     `,
 
     fileDescription: css`