fixed styling

neu-cs4530 · Nov 15, 2024 · 297bb63 · 297bb63
1 parent 758cadc
commit 297bb63
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 28 deletions.
diff --git a/client/src/components/main/chat/index.css b/client/src/components/main/chat/index.css
@@ -32,15 +32,21 @@
     padding: 20px;
   }
 
-  .chat-header {
-    width: 100%;
-    background-color: #466694;
+  .chat-title {
     padding: 20px;
-    color: #FFFFFF;
-    text-align: center;
     font-size: 24px;
     font-weight: bold;
-    position: inherit;
+
+  }
+
+  .chat-header {
+    background-color: #466694;
+    color: #FFFFFF;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
   }
 
   .chat-footer {
@@ -53,39 +59,41 @@
     width: 100%;
   }
 
-  .chat-text-user {
-    text-align: left;
+  .chat-text-user, .chat-text-me {
+    display: inline-block;
     font-size: 24px;
-    padding-bottom: 10px;
+    max-width: 100%; /* Ensure the width doesn’t stretch too far */
+    white-space: nowrap; /* Prevents text from wrapping within a single message */
+    margin-bottom: 5px; /* Adds space between messages */
+  }
 
+  .chat-text-user {
+    text-align: left !important;
+    padding: 3px 15px;
     background: #f1f1f1;
     color: #000 !important;
     border-radius: 20px 20px 20px 3px;
   }
 
   .chat-text-me {
-    text-align: left;
-    font-size: 24px;
-    padding: 3px 7px;
-
+    float: right;  /* Aligns the chat bubble to the right */
+    padding: 3px 15px;
     background: #DFAEA1;
     color: #fff !important;
     border-radius: 20px 20px 3px 20px;
+    margin-bottom: 10px;  /* Optional: Adds space below the bubble */
+    clear: both;  /* Ensures no other floated elements affect the layout */
   }
 
   .username {
     background: #6D89B0;
     color: white;
     font-size: 24px;
     font-weight: bold;
-    border: #6D89B0;
-    outline: #6D89B0;
   }
 
   .username::placeholder {
     color: white;
-    border: #6D89B0;
-    outline: #6D89B0;
   }
 
   .message {
@@ -94,11 +102,15 @@
   }
 
   .send {
-    background: #32CD32;
+    background: #BABDE2;
     border-radius: 10px;
     padding: 5px;
     color: white;
     margin-right: 20px;
     font-size: 24px;
     font-weight: bold;
+  }
+
+  .send:hover {
+    background-color: #9498B5;
   }
diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import './index.css';
 import { FaCaretUp, FaCaretDown } from 'react-icons/fa';
 import { useLocation } from 'react-router-dom';
-import { query, collection, orderBy, onSnapshot, addDoc } from 'firebase/firestore';
+import { query, collection, orderBy, onSnapshot, addDoc, getDoc, doc } from 'firebase/firestore';
 import { db } from '../../../firebaseConfig';
 import Message from './Message';
 import useUserContext from '../../../hooks/useUserContext';
@@ -44,13 +44,16 @@ const ChatPage = () => {
   };
 
   useEffect(() => {
+    console.log('Messages useEffect triggered');
+
     if (!user?.username) return;
 
     // Query to retrieve messages where the current user is either the sender (username) or receiver (sendTo)
     const q = query(collection(db, 'messages'), orderBy('timestamp', 'asc'));
 
     const unsubscribe = onSnapshot(q, querySnapshot => {
       const loadedMessages = querySnapshot.docs
+        // eslint-disable-next-line @typescript-eslint/no-shadow
         .map(doc => ({
           message: doc.data().message,
           username: doc.data().username,
@@ -80,20 +83,25 @@ const ChatPage = () => {
 
   return (
     <div className='chat-container'>
-      <div className='chat-header'>
-        chatting now:{' '}
-        <input
-          className='username'
-          id='searchBar'
-          placeholder={pathname.includes('community') ? 'community' : 'email'}
-          type='text'
-          onChange={handleSendTo}
-        />
+      <div className='chat-header d-flex'>
+        <span className='chat-title'>chatting now: </span>
+        {pathname.includes('community') ? (
+          <span>community</span>
+        ) : (
+          <input
+            className='username'
+            id='searchBar'
+            placeholder={'email'}
+            type='text'
+            onChange={handleSendTo}
+          />
+        )}
       </div>
       <div className='ruled-paper scrollable-container'>
         {messages.map((m, index) => (
           <>
             <Message key={index} message={m.message} username={m.username} />
+            <br />
           </>
         ))}
       </div>