From c5af9ef59a4b2d262d087223315c3d0ad2c69030 Mon Sep 17 00:00:00 2001
From: Alma <alma@MacBook-Air-de-Alma.local>
Date: Sat, 12 Apr 2025 23:57:11 +0200
Subject: [PATCH] widget parole

---
 components/parole.tsx | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/components/parole.tsx b/components/parole.tsx
index 90c66afd..9e9ccf0f 100644
--- a/components/parole.tsx
+++ b/components/parole.tsx
@@ -115,11 +115,11 @@ export function Parole() {
 
   return (
     <Card 
-      className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer bg-white/50 backdrop-blur-sm h-full" 
+      className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg" 
       onClick={() => router.push('/parole')}
     >
-      <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <CardTitle className="text-lg font-semibold">Talk mentions</CardTitle>
+      <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
+        <CardTitle className="text-lg font-semibold text-gray-800">Talk mentions</CardTitle>
         <Button 
           variant="ghost" 
           size="icon"
@@ -128,13 +128,13 @@ export function Parole() {
             fetchMessages(true);
           }}
           disabled={refreshing}
-          className={refreshing ? 'animate-spin' : ''}
+          className={`${refreshing ? 'animate-spin' : ''} text-gray-600 hover:text-gray-900`}
         >
           <RefreshCw className="h-4 w-4" />
         </Button>
       </CardHeader>
       <CardContent className="p-4">
-        {loading && <p className="text-center text-muted-foreground">Loading messages...</p>}
+        {loading && <p className="text-center text-gray-500">Loading messages...</p>}
         {error && (
           <div className="text-center">
             <p className="text-red-500">Error: {error}</p>
@@ -151,28 +151,30 @@ export function Parole() {
           </div>
         )}
         {!loading && !error && (
-          <div className="space-y-2 max-h-[300px] overflow-y-auto">
+          <div className="space-y-4 max-h-[300px] overflow-y-auto">
             {messages.length === 0 ? (
-              <p className="text-center text-muted-foreground">No messages found</p>
+              <p className="text-center text-gray-500">No messages found</p>
             ) : (
               messages.map((message) => (
-                <div key={message._id} className="flex items-start space-x-2 hover:bg-gray-50 p-2 rounded-lg transition-colors">
-                  <Avatar className="h-6 w-6">
+                <div key={message._id} className="flex items-start space-x-3 hover:bg-gray-50/50 p-3 rounded-lg transition-colors">
+                  <Avatar className="h-8 w-8">
                     <AvatarImage src={`https://ui-avatars.com/api/?name=${encodeURIComponent(message.u.name || message.u.username)}&background=random`} />
                     <AvatarFallback>{(message.u.name || message.u.username).substring(0, 2).toUpperCase()}</AvatarFallback>
                   </Avatar>
                   <div className="flex-1 min-w-0">
-                    <div className="flex items-baseline">
-                      <p className="text-sm font-medium truncate">{message.u.name || message.u.username}</p>
-                      <span className="ml-2 text-xs text-gray-500">
+                    <div className="flex items-baseline justify-between">
+                      <p className="text-sm font-semibold text-gray-800 truncate">{message.u.name || message.u.username}</p>
+                      <span className="text-xs font-medium text-gray-500">
                         {new Date(message.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                       </span>
                     </div>
-                    <p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2">{message.msg}</p>
+                    <p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2 mt-1">{message.msg}</p>
                     {message.roomName && (
-                      <p className="text-xs text-blue-500 mt-1">
-                        in {message.roomName}
-                      </p>
+                      <div className="flex items-center mt-2">
+                        <span className="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 text-xs font-medium text-blue-700">
+                          {message.roomName}
+                        </span>
+                      </div>
                     )}
                   </div>
                 </div>