imporoved pop ups responsivity

mohamedmaghzaoui · Jan 22, 2025 · da5eede · da5eede
1 parent 17b80c0
commit da5eede
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">