fix(ui): rectangular avatars getting stretched (#2782)

pull/2784/head
Samuel Bartík 3 years ago committed by GitHub
parent 90095bb185
commit db05172d8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -90,7 +90,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
<img
src={comment.user.avatar}
alt=""
className="h-10 w-10 scale-100 transform-gpu rounded-full ring-1 ring-gray-500 transition duration-300 hover:scale-105"
className="h-10 w-10 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</a>
</Link>

@ -264,7 +264,7 @@ const IssueDetails: React.FC = () => {
>
<a className="group ml-1 inline-flex h-full items-center xl:ml-1.5">
<img
className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
src={issueData.createdBy.avatar}
alt=""
/>

@ -228,7 +228,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
<img
src={issue.createdBy.avatar}
alt=""
className="avatar-sm ml-1.5"
className="avatar-sm ml-1.5 object-cover"
/>
<span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{issue.createdBy.displayName}

@ -40,7 +40,7 @@ const UserDropdown: React.FC = () => {
onClick={() => setDropdownOpen(true)}
>
<img
className="h-8 w-8 rounded-full sm:h-10 sm:w-10"
className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
src={user?.avatar}
alt=""
/>

@ -272,7 +272,7 @@ const ManageSlideOver: React.FC<
<img
src={user.avatar}
alt={user.displayName}
className="h-8 w-8 scale-100 transform-gpu rounded-full ring-1 ring-gray-500 transition duration-300 hover:scale-105"
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</a>
</Link>
@ -387,7 +387,7 @@ const ManageSlideOver: React.FC<
<img
src={user.avatar}
alt={user.displayName}
className="h-8 w-8 scale-100 transform-gpu rounded-full ring-1 ring-gray-500 transition duration-300 hover:scale-105"
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
/>
</a>
</Link>

@ -231,7 +231,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
<img
src={requestData.requestedBy.avatar}
alt=""
className="avatar-sm"
className="avatar-sm object-cover"
/>
<span className="truncate font-semibold group-hover:text-white group-hover:underline">
{requestData.requestedBy.displayName}

@ -336,7 +336,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
<img
src={requestData.requestedBy.avatar}
alt=""
className="avatar-sm ml-1.5"
className="avatar-sm ml-1.5 object-cover"
/>
<span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{requestData.requestedBy.displayName}
@ -390,7 +390,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
<img
src={requestData.modifiedBy.avatar}
alt=""
className="avatar-sm ml-1.5"
className="avatar-sm ml-1.5 object-cover"
/>
<span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{requestData.modifiedBy.displayName}

@ -534,7 +534,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
<img
src={selectedUser.avatar}
alt=""
className="h-6 w-6 flex-shrink-0 rounded-full"
className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
/>
<span className="ml-3 block">
{selectedUser.displayName}
@ -584,7 +584,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
<img
src={user.avatar}
alt=""
className="h-6 w-6 flex-shrink-0 rounded-full"
className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
/>
<span className="ml-3 block flex-shrink-0">
{user.displayName}

@ -575,7 +575,7 @@ const UserList: React.FC = () => {
<Link href={`/users/${user.id}`}>
<a className="h-10 w-10 flex-shrink-0">
<img
className="h-10 w-10 rounded-full"
className="h-10 w-10 rounded-full object-cover"
src={user.avatar}
alt=""
/>

@ -44,7 +44,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
<div className="flex-shrink-0">
<div className="relative">
<img
className="h-24 w-24 rounded-full bg-gray-600 ring-1 ring-gray-700"
className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
src={user.avatar}
alt=""
/>

Loading…
Cancel
Save