fix(client): navigation profile image (#52087)

client/src/components/helpers/avatar-renderer.tsx

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

tools/ui-components/src/image/image.stories.tsx

@@ -2,26 +2,37 @@ import { Story } from '@storybook/react';
 import React from 'react';
 import { Image } from './image';
 import { ImageProps } from './image.types';
+
 const story = {
   title: 'Example/Image',
-  component: Image
+  component: Image,
+  argTypes: {
+    responsive: {
+      control: { type: 'boolean' }
+    }
+  }
 };
 
 const Template: Story<ImageProps> = args => {
-  return <Image {...args} />;
+  return (
+    <div style={{ width: '100px', height: '100px' }}>
+      <Image {...args} />
+    </div>
+  );
 };
 
 export const Default = Template.bind({});
 Default.args = {
-  alt: "Quincy Larson's signature",
-  src: 'https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
-};
-
-export const Avatar = Template.bind({});
-Avatar.args = {
   alt: "camper's avatar",
   src: 'https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png',
-  className: 'object-cover img-fluid max-w-full h-auto'
+  responsive: false
+};
+
+export const Responsive = Template.bind({});
+Responsive.args = {
+  alt: "camper's avatar",
+  src: 'https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png',
+  responsive: true
 };
 
 export default story;

tools/ui-components/src/image/image.tsx

@@ -2,8 +2,16 @@ import React from 'react';
 import { ImageProps } from './image.types';
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
-  ({ alt, src, ...props }, ref): JSX.Element => {
-    return <img ref={ref} alt={alt} src={src} {...props} />;
+  ({ alt, src, responsive, ...props }, ref): JSX.Element => {
+    // If `responsive` is `true`:
+    // - Set `display` to `block`
+    // - Set a maximum 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' : '';
+
+    return (
+      <img ref={ref} alt={alt} src={src} className={className} {...props} />
+    );
   }
 );
 

tools/ui-components/src/image/image.types.ts

@@ -2,4 +2,8 @@ import React from 'react';
 export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   alt: string;
   src: string;
+  /**
+   * Whether the image should be resized and contained within its parent.
+   */
+  responsive?: boolean;
 }