jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-02-19 04:00:51 -05:00
Code Issues Projects Releases Wiki Activity

fix(client): profile image size and alignment (#52263)

Browse Source
This commit is contained in:
Huyen Nguyen
2023-11-09 05:52:53 +07:00
committed by GitHub
parent 301a77010f
commit 4fff48a087
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/helpers/avatar-renderer.tsx
View File

@@ -46,7 +46,7 @@ function AvatarRenderer({
{isPlaceHolderImage ? (
<DefaultAvatar className='avatar default-avatar' />
) : (
<Image alt='' className='avatar' src={picture} />
<Image alt='' className='avatar' src={picture} responsive />
)}
</div>
);

12
tools/ui-components/src/image/image.tsx
View File

@@ -2,16 +2,16 @@ import React from 'react';
import { ImageProps } from './image.types';
export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
({ alt, src, responsive, ...props }, ref): JSX.Element => {
({ alt, src, responsive, className, ...props }, ref): JSX.Element => {
// If `responsive` is `true`:
// - Set `display` to `block`
// - Set a maximum relative to the parent
// - Set a maximum width relative to the parent
// - Scale the height according to the width, otherwise the image is stretched
const className = responsive ? 'block max-w-full h-auto' : '';
const classes = responsive
? [className, 'block max-w-full h-auto'].join(' ')
: className;
return (
<img ref={ref} alt={alt} src={src} className={className} {...props} />
);
return <img ref={ref} alt={alt} src={src} className={classes} {...props} />;
}
);