From e49a1ba3336078fc470c82e620ca4cfbb1d88d1d Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Mon, 13 Feb 2023 07:35:07 +0800
Subject: [PATCH] refactor: avatar size

---
 src/common/component/Avatar.tsx                 | 2 +-
 src/common/component/Message/FavoredMessage.tsx | 4 ++--
 src/common/component/Message/PreviewMessage.tsx | 4 +---
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/common/component/Avatar.tsx b/src/common/component/Avatar.tsx
index 4fef6e89..c25bc7fb 100644
--- a/src/common/component/Avatar.tsx
+++ b/src/common/component/Avatar.tsx
@@ -39,7 +39,7 @@ const Avatar: FC<Props> = ({
     setAvatarSrc("");
   };
   if (avatarSrc) {
-    return <img src={avatarSrc} onError={handleError} {...rest} />;
+    return <img width={width} height={height} src={avatarSrc} onError={handleError} {...rest} />;
   }
   return (
     <div
diff --git a/src/common/component/Message/FavoredMessage.tsx b/src/common/component/Message/FavoredMessage.tsx
index 32834de4..b6d051b0 100644
--- a/src/common/component/Message/FavoredMessage.tsx
+++ b/src/common/component/Message/FavoredMessage.tsx
@@ -24,8 +24,8 @@ const FavoredMessage: FC<Props> = ({ id = "" }) => {
             return (
               <div className="w-full relative flex items-start gap-3 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800" key={idx}>
                 {user && (
-                  <div className="">
-                    <Avatar width={40} height={40} src={user.avatar} name={user.name} />
+                  <div className="shrink-0">
+                    <Avatar width={40} height={40} className="rounded-full object-cover" src={user.avatar} name={user.name} />
                   </div>
                 )}
                 <div className="w-full flex flex-col gap-2 text-sm">
diff --git a/src/common/component/Message/PreviewMessage.tsx b/src/common/component/Message/PreviewMessage.tsx
index 6d1c461b..c86515ae 100644
--- a/src/common/component/Message/PreviewMessage.tsx
+++ b/src/common/component/Message/PreviewMessage.tsx
@@ -19,9 +19,7 @@ const PreviewMessage: FC<Props> = ({ mid = 0, context }) => {
   const pinMsg = context == "pin";
   return (
     <div className={clsx(`w-full relative flex items-start gap-3 p-2 my-2 rounded-lg`, pinMsg && "max-h-64 overflow-auto overflow-x-hidden border border-solid border-gray-200 dark:border-gray-400")}>
-      <div>
-        <Avatar width={40} height={40} src={avatar} name={name} />
-      </div>
+      <Avatar width={40} height={40} className="rounded-full object-cover" src={avatar} name={name} />
       <div className="w-full flex flex-col items-start">
         <div className="flex items-center gap-2 font-semibold">
           <span className="text-gray-500 text-sm">{name}</span>