Convert legacy Avatar component to TSX

app/soapbox/components/avatar.js

@@ -1,39 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import StillImage from 'soapbox/components/still_image';
-
-export default class Avatar extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record,
-    size: PropTypes.number,
-    style: PropTypes.object,
-    className: PropTypes.string,
-  };
-
-  render() {
-    const { account, size, className } = this.props;
-    if (!account) return null;
-
-    // : TODO : remove inline and change all avatars to be sized using css
-    const style = !size ? {} : {
-      width: `${size}px`,
-      height: `${size}px`,
-    };
-
-    return (
-      <StillImage
-        className={classNames('rounded-full', {
-          [className]: typeof className !== 'undefined',
-        })}
-        style={style}
-        src={account.get('avatar')}
-        alt=''
-      />
-    );
-  }
-
-}

app/soapbox/components/avatar.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import StillImage from 'soapbox/components/still_image';
+
+import type { Account } from 'soapbox/types/entities';
+
+interface IAvatar {
+  account?: Account | null,
+  size?: number,
+  className?: string,
+}
+
+/**
+ * Legacy avatar component.
+ * @see soapbox/components/ui/avatar/avatar.tsx
+ * @deprecated
+ */
+const Avatar: React.FC<IAvatar> = ({ account, size, className }) => {
+  if (!account) return null;
+
+  // : TODO : remove inline and change all avatars to be sized using css
+  const style: React.CSSProperties = !size ? {} : {
+    width: `${size}px`,
+    height: `${size}px`,
+  };
+
+  return (
+    <StillImage
+      className={classNames('rounded-full overflow-hidden', className)}
+      style={style}
+      src={account.avatar}
+      alt=''
+    />
+  );
+};
+
+export default Avatar;