Fix Chat CSS

feliciahmq · Jun 30, 2024 · 6f08ec1 · 6f08ec1
1 parent f3da96f
commit 6f08ec1
Show file tree

Hide file tree

Showing 8 changed files with 337 additions and 559 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/chat-icons/cross.png b/public/chat-icons/cross.png
diff --git a/src/components/chatComp/chatApp_chat/Chat.css b/src/components/chatComp/chatApp_chat/Chat.css
@@ -140,7 +140,7 @@
 
         input {
             flex: 1;
-            background-color: #aeadad74;
+            background-color: #B09C9C;
             border: none;
             outline: none;
             color: white;

diff --git a/src/components/chatComp/chatApp_list/addUser/addUser.css b/src/components/chatComp/chatApp_list/addUser/addUser.css
@@ -11,6 +11,21 @@
     right: 0;
     margin: auto;
 
+    .closeButton {
+        display: flex;
+        justify-content: flex-end;  
+        padding-bottom: 30px;
+
+        img {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            object-fit: cover;
+            cursor: pointer;
+
+        }
+    }
+
     form {
         display: flex;
         gap: 20px;

diff --git a/src/components/chatComp/chatApp_list/addUser/addUser.jsx b/src/components/chatComp/chatApp_list/addUser/addUser.jsx
@@ -4,7 +4,7 @@ import { db } from "../../../../lib/firebaseConfig";
 import { useState } from "react";
 import { useUserStore } from "../../../../lib/userStore";
 
-const addUser = () => {
+const addUser = ({ closePopup }) => {
 	const [user, setUser] = useState(null);
 	const [error, setError] = useState("");
 	const { currentUser } = useUserStore();
@@ -64,16 +64,20 @@ const addUser = () => {
 			}),
 		});
 
+    closePopup();
 		} catch (err) {
 		console.log(err);
 		}
 	}
 
 	return (
 		<div className="addUser">
+      <div className="closeButton" onClick={closePopup}> 
+          <img src="/chat-icons/cross.png" alt="" />
+      </div>
 			<form onSubmit={handleSearch}>
 				<input type="text" placeholder="Username" name="username" />
-				<button>Search</button>
+				<button type="submit">Search</button>
 			</form>
 			{user ? (
 			<div className="user">

diff --git a/src/components/chatComp/chatApp_list/chatList/ChatList.css b/src/components/chatComp/chatApp_list/chatList/ChatList.css
@@ -10,7 +10,7 @@
 
         .searchBar {
             flex: 1;
-            background-color: #aeadad74;
+            background-color: #B09C9C;
             display: flex;
             align-items: center;
             gap: 20px;
@@ -34,7 +34,7 @@
         .add {
             width: 36px;
             height: 36px;
-            background-color: #aeadad74;
+            background-color: #B09C9C;
             padding: 10px;
             border-radius: 10px;
             cursor: pointer;

diff --git a/src/components/chatComp/chatApp_list/chatList/ChatList.jsx b/src/components/chatComp/chatApp_list/chatList/ChatList.jsx
@@ -82,8 +82,10 @@ const ChatList = () => {
                         placeholder="Search" 
                         onChange={(e) => setInput(e.target.value)}/>
                 </div>
-                <img src={addMode ? "/chat-icons/minus.png" : "/chat-icons/plus.png"} alt="" className="add"
-                    onClick={() => setAddMode((prev) => !prev)} />
+                {!addMode && (
+                    <img src="/chat-icons/plus.png" alt="" className="add"
+                        onClick={() => setAddMode(true)} />
+                )}
             </div>
             {filteredChats.map((chat) => (
                 <div className="item" key={chat.chatId} 
@@ -106,7 +108,7 @@ const ChatList = () => {
                 </div>
             ))}
 
-            {addMode && <AddUser />}
+            {addMode && <AddUser closePopup={() => setAddMode(false)} />}
         </div>
     );
 };

diff --git a/src/pages/chatapp/ChatApp.css b/src/pages/chatapp/ChatApp.css
@@ -35,7 +35,7 @@
 .inner-container {
     width: 80vw;
     height: 90vh;
-    background-color: #aeadad74;
+    background-color: #dbc5bf;
     backdrop-filter: blur(19px) saturate(180%);
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.076);