From f4830d064e6569babfbce088e471388f4315c4a4 Mon Sep 17 00:00:00 2001
From: Dhiren-Mhatre <130587526+Dhiren-Mhatre@users.noreply.github.com>
Date: Sun, 29 Dec 2024 16:53:38 +0530
Subject: [PATCH] Refactor/create direct chat css (#3021)

* refactor CreateDirectChat inline css to app.module.css

* deleted CreateDirectChat.module.css
---
 .../CreateDirectChat.module.css               |  9 -----
 .../CreateDirectChat/CreateDirectChat.tsx     | 11 ++++---
 src/style/app.module.css                      | 33 +++++++++++++++++++
 3 files changed, 40 insertions(+), 13 deletions(-)
 delete mode 100644 src/components/UserPortal/CreateDirectChat/CreateDirectChat.module.css

diff --git a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.module.css b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.module.css
deleted file mode 100644
index 3795e402fa..0000000000
--- a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.userData {
-  height: 400px;
-  overflow-y: scroll;
-  overflow-x: hidden !important;
-}
-
-.modalContent {
-  width: 530px;
-}
diff --git a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx
index 8125b6a463..4b1c2cda02 100644
--- a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx
+++ b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx
@@ -1,7 +1,6 @@
 import { Paper, TableBody } from '@mui/material';
 import React, { useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
-import styles from './CreateDirectChat.module.css';
 import type { ApolloQueryResult } from '@apollo/client';
 import { useMutation, useQuery } from '@apollo/client';
 import useLocalStorage from 'utils/useLocalstorage';
@@ -18,6 +17,7 @@ import Loader from 'components/Loader/Loader';
 import { Search } from '@mui/icons-material';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import styles from '../../../style/app.module.css';
 
 interface InterfaceCreateDirectChatProps {
   toggleCreateDirectChatModal: () => void;
@@ -129,7 +129,7 @@ export default function createDirectChatModal({
             </>
           ) : (
             <>
-              <div className={styles.input}>
+              <div className={styles.inputContainer}>
                 <Form onSubmit={handleUserModalSearchChange}>
                   <Form.Control
                     type="name"
@@ -147,13 +147,16 @@ export default function createDirectChatModal({
                   <Button
                     type="submit"
                     data-testid="submitBtn"
-                    className={`position-absolute z-10 bottom-10 end-0  d-flex justify-content-center align-items-center `}
+                    className={styles.submitBtn}
                   >
                     <Search />
                   </Button>
                 </Form>
               </div>
-              <TableContainer className={styles.userData} component={Paper}>
+              <TableContainer
+                className={styles.tableContainer}
+                component={Paper}
+              >
                 <Table aria-label="customized table">
                   <TableHead>
                     <TableRow>
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 43e1e5a08c..137ff0bd01 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -4019,3 +4019,36 @@ button[data-testid='createPostBtn'] {
     box-shadow: 0 4px 6px var(--grey-border-box-color);
   }
 }
+
+/* CreateDirectChat.tsx */
+
+.modalContent {
+  width: 530px;
+}
+
+.inputContainer {
+  position: relative;
+  margin-bottom: 16px;
+}
+
+.inputFieldModal {
+  padding-right: 40px;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #ced4da;
+}
+
+.submitBtn {
+  position: absolute;
+  z-index: 10;
+  bottom: 10px;
+  right: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tableContainer {
+  height: 400px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}