From 7b97687e784081118dd1bac2b9cee6fb445db544 Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Fri, 4 Nov 2022 14:40:50 +0100
Subject: [PATCH] fix style for like

---
 client/src/components/Like.tsx    | 2 +-
 client/src/components/Message.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Like.tsx b/client/src/components/Like.tsx
index 018079a..24414a4 100644
--- a/client/src/components/Like.tsx
+++ b/client/src/components/Like.tsx
@@ -46,7 +46,7 @@ const Like = ({ message }: { message: any }) => {
 
   return (
     <button
-      className="absolute -bottom-10 right-0 mb-2 rounded-full bg-grey-dark shadow-lg shadow-slate-900 cursor-pointer"
+      className="absolute -bottom-10 -right-2 mb-2 rounded-full bg-grey-dark shadow-lg shadow-slate-900 cursor-pointer"
       onClick={like}
       name="like"
     >
diff --git a/client/src/components/Message.tsx b/client/src/components/Message.tsx
index 5f17e68..859a2be 100644
--- a/client/src/components/Message.tsx
+++ b/client/src/components/Message.tsx
@@ -41,7 +41,7 @@ const Message = ({ message }: any) => {
           </div>
           <Text text={message.content} />
           {message.image && <Image src={message.image} alt="image" className="w-fit rounded-lg cursor-pointer" />}
-          <div className="flex justify-between">
+          <div className="flex justify-between gap-3">
             <div className="text-grey-light date">
               {new Date(message.createdAt).toLocaleDateString(undefined, {
                 year: 'numeric',
@@ -51,9 +51,10 @@ const Message = ({ message }: any) => {
                 minute: 'numeric',
               })}
             </div>
-            {message.edited && <div className="text-grey-light italic">Modifié</div>}
+            {message.edited && <div className="text-grey-light italic flex-grow">Modifié</div>}
+            {me.data?.id === message.author.id && message.likes > 0 && <div className="text-white">{message.likes} likes</div>}
           </div>
-          {me.data?.id === message.author.id ? null : <Like message={message} />}
+          {me.data?.id !== message.author.id && <Like message={message} />}
         </div>
       </div>
     </>