fix: Fixed users avatars being stretched

TiagoRibeiro25 · Aug 28, 2023 · 474a6b5 · 474a6b5
1 parent 7bb73fb
commit 474a6b5
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/src/components/Comments/components/Comment/index.tsx b/src/components/Comments/components/Comment/index.tsx
@@ -17,7 +17,7 @@ const Comment: React.FC<IComment> = ({ id, content, author, createdAt }) => {
 			<div className="flex flex-row">
 				<Link to={`/user/${author.id === loggedUser?.id ? 'me' : author.id}`}>
 					<LazyLoadImage
-						className="rounded-full"
+						className="object-cover object-center rounded-full"
 						src={author.userImage?.cloudinaryImage ?? UserPlaceholderPicture}
 						alt="User Profile Picture"
 						effect="blur"

diff --git a/src/components/FollowsDataModal/index.tsx b/src/components/FollowsDataModal/index.tsx
@@ -139,7 +139,7 @@ const FollowsDataModel: React.FC<FollowsDataModelProps> = ({
 											<div className="flex-shrink-0">
 												<Link to={`/user/${user.id}`}>
 													<LazyLoadImage
-														className="w-12 h-12 rounded-full sm:w-16 sm:h-16"
+														className="object-cover object-center w-12 h-12 rounded-full sm:w-16 sm:h-16"
 														src={user.userImage?.cloudinaryImage ?? UserNoPicture}
 														effect="blur"
 														placeholderSrc={UserNoPicture}

diff --git a/src/components/Thought/index.tsx b/src/components/Thought/index.tsx
@@ -87,7 +87,7 @@ const Thought: React.FC<ThoughtProps> = ({ thought, isAdmin, isBlocked }) => {
 			<div className="flex flex-row">
 				<Link to={`/user/${thought.isAuthor ? 'me' : thought.author.id}`}>
 					<LazyLoadImage
-						className="rounded-full"
+						className="object-cover object-center rounded-full"
 						src={thought.author.userImage?.cloudinaryImage ?? UserPlaceholderPicture}
 						alt="User Profile Picture"
 						effect="blur"

diff --git a/src/layouts/Navbar/index.tsx b/src/layouts/Navbar/index.tsx
@@ -159,7 +159,7 @@ const Navbar: React.FC = () => {
 								>
 									<span className="sr-only">Open user menu</span>
 									<LazyLoadImage
-										className="w-8 h-8 rounded-full"
+										className="object-cover object-center w-8 h-8 rounded-full"
 										src={loggedUser.picture ?? UserNoPicture}
 										alt="user photo"
 										effect="blur"

diff --git a/src/views/ProfileEdit/components/UserPicture/index.tsx b/src/views/ProfileEdit/components/UserPicture/index.tsx
@@ -72,7 +72,7 @@ const UserPicture: React.FC<UserPictureProps> = ({ userImage }) => {
 					<Reveal width="100%" animation="slide-left" delay={0.05}>
 						<div className="flex justify-center">
 							<LazyLoadImage
-								className="my-4 rounded-full w-60 h-60"
+								className="object-cover object-center my-4 rounded-full w-60 h-60"
 								src={updatedImage.length > 0 ? updatedImage[0] : userImage}
 								placeholderSrc={UserNoPicture}
 								effect="blur"

diff --git a/src/views/User/components/UserProfileHeader/index.tsx b/src/views/User/components/UserProfileHeader/index.tsx
@@ -101,7 +101,7 @@ const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({ user }) => {
 				<div className="flex flex-col items-center sm:items-start sm:flex-row">
 					<div className="sm:mr-10">
 						<LazyLoadImage
-							className="w-40 h-40 rounded-full sm:w-36 sm:h-36"
+							className="object-cover object-center w-40 h-40 rounded-full sm:w-36 sm:h-36"
 							src={user.userImage?.cloudinaryImage ?? UserNoPicture}
 							alt="User Profile Picture"
 							placeholderSrc={UserNoPicture}