From 297bb633a4e1063e7feab5e1d60655cd79517c37 Mon Sep 17 00:00:00 2001 From: lizzie <jones@MacBook-Air.local> Date: Fri, 15 Nov 2024 17:39:50 -0500 Subject: [PATCH] fixed styling --- client/src/components/main/chat/index.css | 48 ++++++++++++++--------- client/src/components/main/chat/index.tsx | 28 ++++++++----- 2 files changed, 48 insertions(+), 28 deletions(-) diff --git a/client/src/components/main/chat/index.css b/client/src/components/main/chat/index.css index 6ef268a..48eb3c9 100644 --- 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,24 +59,30 @@ 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 { @@ -78,14 +90,10 @@ 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; } \ No newline at end of file diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx index 4a03d1f..3883b82 100644 --- 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,6 +44,8 @@ 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) @@ -51,6 +53,7 @@ const ChatPage = () => { 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>