Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: improve message list UI with an active conversation indicator, refined avatar styling, and an updated header options icon.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-19 00:12:19 +05:30
parent c5ed8fb1aa
commit f7388642d1
3 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/assets/icons/three-dots-horizontal-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="12" r="2" fill="#00293d"/>
<circle cx="12" cy="12" r="2" fill="#00293d"/>
<circle cx="19" cy="12" r="2" fill="#00293d"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 249 B

6
src/app/(agent)/agent/message/component/ChatHeader.tsx
View File

@@ -40,7 +40,7 @@ export function ChatHeader({
<div className="flex items-center gap-2">
<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
<Image
src="/assets/icons/three-dots-icon.svg"
src="/assets/icons/three-dots-horizontal-icon.svg"
alt="More options"
width={24}
height={24}
@@ -61,13 +61,13 @@ export function ChatHeader({
<div className="flex items-start gap-3">
{/* Avatar */}
<div className="relative flex-shrink-0">
<div className="w-[50px] h-[50px] rounded-full overflow-hidden">
<div className="w-[50px] h-[50px] rounded-full overflow-hidden border border-[#00293D]/20">
<Image
src={avatar}
alt={name}
width={50}
height={50}
className="w-full h-full object-cover"
className="w-full h-full object-cover rounded-full"
/>
</div>
{isOnline && (

15
src/app/(agent)/agent/message/page.tsx
View File

@@ -249,10 +249,10 @@ export default function MessagePage() {
</div>
{/* Header actions */}
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 ml-auto">
<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
<Image
src="/assets/icons/three-dots-icon.svg"
src="/assets/icons/three-dots-horizontal-icon.svg"
alt="More options"
width={24}
height={24}
@@ -278,19 +278,24 @@ export default function MessagePage() {
<div
key={conversation.id}
onClick={() => setSelectedConversation(conversation.id)}
className={`flex items-start gap-3 p-4 border border-[#00293d]/10 rounded-[15px] cursor-pointer transition-colors ${
className={`relative flex items-start gap-3 p-4 rounded-[15px] cursor-pointer transition-colors ${
selectedConversation === conversation.id ? 'bg-[#00293d]/5' : 'hover:bg-[#00293d]/5'
}`}
style={{ border: '1px solid rgba(0, 41, 61, 0.1)' }}
>
{/* Active indicator line */}
{selectedConversation === conversation.id && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[4px] h-[70px] bg-[#E58625] rounded-r-[4px]" />
)}
{/* Avatar with online indicator */}
<div className="relative flex-shrink-0">
<div className="w-[70px] h-[70px] rounded-full overflow-hidden">
<div className="w-[70px] h-[70px] rounded-full overflow-hidden border border-[#00293D]/20">
<Image
src={conversation.avatar}
alt={conversation.name}
width={70}
height={70}
className="w-full h-full object-cover"
className="w-full h-full object-cover rounded-full"
/>
</div>
{conversation.isOnline && (