From da5eede19e9ebfeb1f45bb1abf6649c54e583911 Mon Sep 17 00:00:00 2001
From: mohamedmaghzaoui <mohamedmaghzaoui53@gmail.com>
Date: Thu, 23 Jan 2025 00:15:35 +0100
Subject: [PATCH] imporoved pop ups responsivity

---
 frontend/src/pages/chat/chat.js               | 22 ++++++++++---------
 .../pages/chat/conversation/conversation.css  |  4 ++--
 .../pages/chat/conversation/conversation.js   |  2 +-
 frontend/src/pages/chat/profile.js            |  2 +-
 frontend/src/pages/chat/setting.js            |  2 +-
 frontend/src/pages/chat/userList.js           |  2 +-
 .../src/pages/navbar/unauthenticatedNavbar.js |  4 ++--
 frontend/src/pages/signUp/signUp.js           |  4 ++--
 8 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/chat/chat.js b/frontend/src/pages/chat/chat.js
index 00aff97..ebf39b5 100644
--- a/frontend/src/pages/chat/chat.js
+++ b/frontend/src/pages/chat/chat.js
@@ -41,8 +41,8 @@ export const Chat = () => {
   }
 
   return (
-    <div className="container-fluid chat-content ">
-      <div className="vertical-icons mt-5 me-4 ms-2">
+    <div className="container-fluid chat-content row my-2 ">
+      <div className="vertical-icons mt-5 me-4 ms-2 col-1">
         <AiOutlineUser
           onClick={() => {
             setCurrentSideElement('profile');
@@ -72,21 +72,23 @@ export const Chat = () => {
           className="mt-5 icon"
           size={30}
         />
-        <HiOutlineUsers
+        {/* <HiOutlineUsers
           data-tooltip-id="my-tooltip"
           data-tooltip-content="Groups"
           className="mt-5 icon"
           size={30}
-        />
+        /> */}
       </div>
 
-      {sideElement}
+      <div className="col-xl-3">{sideElement}</div>
 
-      <Conversation
-        conversationId={conversationId}
-        currentUser={userData}
-        chatUser={chatUser}
-      />
+      <div className="col">
+        <Conversation
+          conversationId={conversationId}
+          currentUser={userData}
+          chatUser={chatUser}
+        />
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/pages/chat/conversation/conversation.css b/frontend/src/pages/chat/conversation/conversation.css
index d88e811..57818a9 100644
--- a/frontend/src/pages/chat/conversation/conversation.css
+++ b/frontend/src/pages/chat/conversation/conversation.css
@@ -6,8 +6,8 @@
   background-color: white;
   position: absolute;
   bottom: 0;
-  padding: 15px;
-  width: 68%;
+  padding: 5px;
+  width: 60%;
 }
 /* Container for messages, stacked vertically */
 .messages {
diff --git a/frontend/src/pages/chat/conversation/conversation.js b/frontend/src/pages/chat/conversation/conversation.js
index a4abbd2..5321f68 100644
--- a/frontend/src/pages/chat/conversation/conversation.js
+++ b/frontend/src/pages/chat/conversation/conversation.js
@@ -108,7 +108,7 @@ export const Conversation = ({ chatUser, currentUser, conversationId }) => {
   }
 
   return (
-    <div className="container-fluid my-3">
+    <div className=" ">
       {/* Header */}
       <div className="d-flex align-items-center" style={{ gap: '10px' }}>
         <div
diff --git a/frontend/src/pages/chat/profile.js b/frontend/src/pages/chat/profile.js
index c381dad..2195f2f 100644
--- a/frontend/src/pages/chat/profile.js
+++ b/frontend/src/pages/chat/profile.js
@@ -7,7 +7,7 @@ export const Profile = ({ user }) => {
   console.log(user); // Optionally log the user object for debugging
 
   return (
-    <div className="side-element col-xl-3 col-3 ">
+    <div className="side-element ">
       <h2>My Profile</h2>
       <div className="d-flex justify-content-center">
         <div
diff --git a/frontend/src/pages/chat/setting.js b/frontend/src/pages/chat/setting.js
index 0ead00f..b75a420 100644
--- a/frontend/src/pages/chat/setting.js
+++ b/frontend/src/pages/chat/setting.js
@@ -51,7 +51,7 @@ export const Setting = ({ user }) => {
     return <div>loading...</div>;
   }
   return (
-    <div className="side-element col-xl-3 col-3 ">
+    <div className="side-element  ">
       <h2>Settings</h2>
       <div className="d-flex justify-content-center">
         <div
diff --git a/frontend/src/pages/chat/userList.js b/frontend/src/pages/chat/userList.js
index b3231d0..bb63353 100644
--- a/frontend/src/pages/chat/userList.js
+++ b/frontend/src/pages/chat/userList.js
@@ -35,7 +35,7 @@ export const UsersList = ({ getChatUser, currentUser, getConversationId }) => {
   console.log(filteredUsers);
 
   return (
-    <div className="side-element col-xl-3 col-3 ">
+    <div className="side-element  ">
       <h2 className="mt-4 mx-3">Users</h2>
       <ul>
         <input
diff --git a/frontend/src/pages/navbar/unauthenticatedNavbar.js b/frontend/src/pages/navbar/unauthenticatedNavbar.js
index aad1c38..162b671 100644
--- a/frontend/src/pages/navbar/unauthenticatedNavbar.js
+++ b/frontend/src/pages/navbar/unauthenticatedNavbar.js
@@ -49,9 +49,9 @@ export const UnauthenticatedNavbar = () => {
                 </Link>
               </li>
             </ul>
-            <div className="nav-item offset-6  ">
+            <div className="nav-item offset-xl-6  ">
               <button
-                className="btn btn-success mx-4 fw-bold "
+                className="btn btn-success mx-xl-4 mx-2 fw-bold "
                 onClick={() => showSignUp()}
               >
                 SignUp
diff --git a/frontend/src/pages/signUp/signUp.js b/frontend/src/pages/signUp/signUp.js
index 5655b51..be27909 100644
--- a/frontend/src/pages/signUp/signUp.js
+++ b/frontend/src/pages/signUp/signUp.js
@@ -56,8 +56,8 @@ export const SignUp = ({ hideSignUp }) => {
   };
 
   return (
-    <div className="overlay">
-      <div className="content">
+    <div className="overlay ">
+      <div className="content   col-xl-4 col-lg-4 col-md-6 col-sm-8 col-9">
         <div className="row">
           <form onSubmit={handleSubmit(submitData)}>
             <div className="row">