Skip to content

Commit

Permalink
update UX/UI message page
Browse files Browse the repository at this point in the history
  • Loading branch information
@satanakorn
satanakorn committed Nov 27, 2024
1 parent 98dca50 commit a2dd707
Show file tree
Hide file tree
Showing 5 changed files with 197 additions and 60 deletions.
2 changes: 1 addition & 1 deletion frontend/src/Swipe.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ const Swipe = () => {
const rotation = dragDelta.x / 20;

return (
<div className="min-h-screen bg-gray-100">
<div className="min-h-screen bg-blue-200 bg-opacity-75">
{/* Header */}
<div className="bg-blue-900 text-white p-4">
<div className="max-w-4xl mx-auto flex justify-between items-center">
Expand Down
101 changes: 57 additions & 44 deletions frontend/src/components/ChatBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useState, useEffect } from 'react';
import axios from 'axios';

const ChatBox = ({ activeUser, messages, handleSendMessage }) => {

const UserID = localStorage.getItem('UserID');
const [senderImage, setSenderImage] = useState(null);
const [newMessage, setNewMessage] = useState('');
Expand Down Expand Up @@ -34,69 +33,84 @@ const ChatBox = ({ activeUser, messages, handleSendMessage }) => {

if (!activeUser) {
return (
<div className="flex-1 flex items-center justify-center bg-gray-50">
<p className="text-gray-500">Select a chat to start messaging</p>
<div className="flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
<div className="bg-white p-8 rounded-xl shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out">
<p className="text-gray-500 text-lg font-medium text-center">
Select a chat to start messaging
</p>
</div>
</div>
);
}

return (
<div className="flex-1 flex flex-col bg-gray-50 pt-16">
<div className="flex-1 flex flex-col bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen mt-16">
{/* Chat Header */}
<div className="p-4 border-b bg-white">
<h2 className="text-lg font-bold text-black">{activeUser.UserName}</h2>
<div className="p-4 border-b bg-white shadow-sm sticky top-0 z-10 transform transition-all duration-300 hover:shadow-md">
<div className="flex items-center">
<img
src={activeUser.ProfileImage}
alt={activeUser.UserName}
className="w-10 h-10 rounded-full mr-4 border-2 border-blue-500 transform transition-transform duration-300 hover:scale-110"
/>
<h2 className="text-lg font-bold text-black hover:text-blue-600 transition-colors duration-300">
{activeUser.UserName}
</h2>
</div>
</div>

{/* Chat Messages */}
<div className="flex-1 p-4 overflow-y-auto">
<div className="flex flex-col">
{messages.map((msg) => (
<div key={msg.MessageID} className="flex items-start mb-2">
{msg.SenderID === activeUser.UserID ? (
<>
<div className="flex-1 flex justify-start">
<img
src={activeUser.ProfileImage}
alt={activeUser.UserName}
className="w-8 h-8 rounded-full mr-2"
/>
<div className="p-2 rounded-md bg-gray-200 text-black max-w-xs">
{msg.MessageContent}
<div className="flex-1 p-4 overflow-y-auto">
<div className="flex flex-col space-y-4">
{messages.map((msg) => (
<div
key={msg.MessageID}
className="flex items-start transition-all duration-300 hover:bg-gray-100 p-2 rounded-lg"
>
{msg.SenderID === activeUser.UserID ? (
<div className="flex-1 flex justify-start items-center">
<img
src={activeUser.ProfileImage}
alt={activeUser.UserName}
className="w-10 h-10 rounded-full mr-3 transform transition-transform duration-300 hover:scale-110"
/>
<div className="p-3 rounded-xl bg-gray-200 text-black max-w-xs shadow-sm transition-all duration-300 hover:shadow-md">
{msg.MessageContent}
</div>
</div>
</div>
</>
) : (
<>
<div className="flex-1 flex justify-end">
<div className="p-2 rounded-md bg-blue-100 text-black max-w-xs">
{msg.MessageContent}
) : (
<div className="flex-1 flex justify-end items-center">
<div className="p-3 rounded-xl bg-blue-100 text-black max-w-xs mr-3 shadow-sm transition-all duration-300 hover:shadow-md">
{msg.MessageContent}
</div>
<img
src={senderImage}
alt="Sender"
className="w-10 h-10 rounded-full transform transition-transform duration-300 hover:scale-110"
/>
</div>
<img
src={senderImage}
alt={senderImage}
className="w-8 h-8 rounded-full ml-2"
/>
</div>
</>
)}
</div>
))}
</div>
)}
</div>
))}
</div>
</div>

{/* Message Input */}
<div className="p-4 bg-white border-t">
<form onSubmit={handleSubmit} className="p-4 bg-white border-t flex gap-2">
{/* Message Input */}
<div className="p-4 bg-white border-t shadow-inner">
<form
onSubmit={handleSubmit}
className="flex items-center space-x-2"
>
<input
type="text"
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}
placeholder="Type a message..."
className="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full border rounded-full p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 hover:shadow-md"
/>
<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
className="bg-blue-500 text-white px-6 py-3 rounded-full hover:bg-blue-600 transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
>
Send
</button>
Expand All @@ -111,7 +125,6 @@ ChatBox.propTypes = {
UserID: PropTypes.string.isRequired,
UserName: PropTypes.string.isRequired,
ProfileImage: PropTypes.string.isRequired,
MessageContent: PropTypes.string.isRequired,
}),
messages: PropTypes.arrayOf(
PropTypes.shape({
Expand Down
150 changes: 137 additions & 13 deletions frontend/src/components/ChatList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,156 @@ import PropTypes from 'prop-types';

const ChatList = ({ chats, onSelectChat }) => {
return (
<div className="w-1/3 bg-white border-r overflow-y-auto">
<h2 className="text-lg font-bold p-4 border-b">Chats</h2>
<ul>
<div className="min-h-screen w-1/3 bg-gradient-to-br from-gray-50 to-gray-100 border-r shadow-lg mt-16">
{/* Header with Gradient and Animated Title */}
<h2 className="text-lg font-bold p-4 border-b bg-gradient-to-r from-purple-700 to-blue-700 text-white
flex items-center justify-between
transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
<span className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-3 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
Chats
</span>
<span className="text-sm opacity-75">({chats.length})</span>
</h2>

{/* Chat List with Enhanced Interactions */}
<ul className="divide-y divide-gray-200">
{chats.map((chat) => (
<li
key={chat.UserID}
onClick={() => onSelectChat(chat)}
className="p-4 border-b hover:bg-gray-200 cursor-pointer flex items-center"
className="
p-4
flex items-center
cursor-pointer
group
transition-all
duration-300
ease-in-out
hover:bg-gradient-to-r
hover:from-blue-50
hover:to-purple-50
transform
hover:-translate-y-1
hover:shadow-lg
relative
overflow-hidden
"
>
<img
src={chat.ProfileImage}
alt={`${chat.UserName}'s profile`}
className="w-10 h-10 rounded-full mr-4"
/>
<div className="flex-grow">
<p className="font-semibold">{chat.UserName}</p>
<p className="text-sm text-gray-500 truncate">{chat.MessageContent}</p>
{/* Subtle Background Hover Effect */}
<div className="absolute inset-0 bg-gradient-to-r from-blue-100 to-purple-100 opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div>

{/* Profile Image with Hover Effect */}
<div className="relative mr-4">
<img
src={chat.ProfileImage}
alt={`${chat.UserName}'s profile`}
className="
w-12 h-12
rounded-full
border-2
border-transparent
group-hover:border-blue-300
transition-all
duration-300
transform
group-hover:scale-110
shadow-sm
group-hover:shadow-md
"
/>
{/* Online Status Indicator */}
<span className="
absolute
bottom-0
right-0
block
w-3 h-3
bg-green-500
rounded-full
ring-2
ring-white
animate-pulse
"></span>
</div>

{/* Chat Info */}
<div className="flex-grow overflow-hidden">
<div className="flex justify-between items-center">
<p className="
font-semibold
text-gray-800
group-hover:text-blue-600
transition-colors
duration-300
">
{chat.UserName}
</p>
<p className="
text-xs
text-gray-500
group-hover:text-purple-600
transition-colors
duration-300
">
{/* You could add timestamp here */}
Just now
</p>
</div>
<p className="
text-sm
text-gray-500
truncate
group-hover:text-gray-700
transition-colors
duration-300
">
{chat.MessageContent}
</p>
</div>

{/* Unread Messages Badge with Animated Pulse */}
{chat.UnreadMessages > 0 && (
<span className="bg-blue-500 text-white rounded-full px-2 py-1 text-xs">
<span className="
bg-blue-500
text-white
rounded-full
px-2
py-1
text-xs
ml-2
animate-bounce
hover:animate-none
transition-all
duration-300
">
{chat.UnreadMessages}
</span>
)}
</li>
))}
</ul>

{/* Empty State */}
{chats.length === 0 && (
<div className="
text-center
p-8
text-gray-500
opacity-70
transform
transition-all
duration-300
hover:scale-105
">
<svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 mx-auto mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
No chats yet
</div>
)}
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/profile.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { MdEmail } from "react-icons/md";
import Axios from 'axios';
import PropTypes from 'prop-types';
import Swal from 'sweetalert2'
import image from '../../public/uploads/profiles/5psgeommk-b1715b66-2c24-49ee-b16e-37ab0ba43ea0.jpeg'
// import image from '../../public/uploads/profiles/5psgeommk-b1715b66-2c24-49ee-b16e-37ab0ba43ea0.jpeg'

// EditProfileModal component
const EditProfileModal = ({ isOpen, onClose, onSave, user }) => {
Expand Down Expand Up @@ -566,7 +566,7 @@ const Profile = () => {
flex items-center justify-center overflow-hidden">
{user.ProfileImage ? (
<img
src={image}
src={user.ProfileImage}
alt="Profile"
className="w-full h-full object-cover rounded-lg
transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-3"
Expand Down
Binary file added public/uploads/profiles/vxsm1sh01-eac79345-b4ab-4232-b7eb-bcd8829be22f.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a2dd707

Please sign in to comment.