From 6fe859ff8529c0c1f6fc1149e8b0f8e246037eb9 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 5 Sep 2022 16:04:45 +0300
Subject: [PATCH] fix: avatar image cover

---
 src/features/Auth/pages/LoginPage/LoginPage.tsx    | 6 +++---
 src/features/Profiles/Components/Avatar/Avatar.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/features/Auth/pages/LoginPage/LoginPage.tsx b/src/features/Auth/pages/LoginPage/LoginPage.tsx
index 6fb0d75..d874171 100644
--- a/src/features/Auth/pages/LoginPage/LoginPage.tsx
+++ b/src/features/Auth/pages/LoginPage/LoginPage.tsx
@@ -9,7 +9,7 @@ import { IoRocketOutline } from "react-icons/io5";
 import Button from "src/Components/Button/Button";
 import { FiCopy } from "react-icons/fi";
 import useCopyToClipboard from "src/utils/hooks/useCopyToClipboard";
-import { getPropertyFromUnknown, } from "src/utils/helperFunctions";
+import { getPropertyFromUnknown, trimText, } from "src/utils/helperFunctions";
 
 
 
@@ -147,9 +147,9 @@ export default function LoginPage() {
     else if (isLoggedIn)
         content = <div className="flex flex-col justify-center items-center">
             <h3 className="text-body4">
-                Hello: <span className="font-bold">@{meQuery.data?.me?.name.slice(0, 10)}...</span>
+                Hello: <span className="font-bold">@{trimText(meQuery.data?.me?.name, 10)}</span>
             </h3>
-            <img src={meQuery.data?.me?.avatar} className='w-80 h-80 object-cover' alt="" />
+            <img src={meQuery.data?.me?.avatar} className='w-80 h-80 object-cover rounded-full outline outline-2 outline-gray-200' alt="" />
         </div>
 
     else
diff --git a/src/features/Profiles/Components/Avatar/Avatar.tsx b/src/features/Profiles/Components/Avatar/Avatar.tsx
index 48d6995..a30aa4d 100644
--- a/src/features/Profiles/Components/Avatar/Avatar.tsx
+++ b/src/features/Profiles/Components/Avatar/Avatar.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 export default function Avatar({ src, alt, width = 40 }: Props) {
     return (
-        <img src={src} className='shrink-0 rounded-full object-contain border-2 bg-white border-gray-100' style={{
+        <img src={src} className='shrink-0 rounded-full object-cover border-2 bg-white border-gray-100' style={{
             width: width,
             height: width,
         }} alt={alt ?? "avatar"} />