Cleanup avatar component rendering (#130)

* Remove unnecessary classes on avatar img

I don't believe these have any visible effect.

* Don't apply Tailwind 'avatar' class in menu

We don't use this class elsewhere when displaying avatars (instead our
avatar has manual styles that do the stuff Tailwind is trying to do)
and it just assigns a weird size that we don't want.

If we want to use the Tailwind avatar styles we should refactor further.

* Remove unnecessary avatar wrapper div

* Remove old prop from avatar

web/components/avatar.tsx

@@ -8,10 +8,8 @@ export function Avatar(props: {
   noLink?: boolean
   size?: number | 'xs' | 'sm'
   className?: string
-  containerClassName?: string
 }) {
-  const { username, avatarUrl, noLink, size, className, containerClassName } =
+  const { username, avatarUrl, noLink, size, className } = props
-    props
   const s = size == 'xs' ? 6 : size === 'sm' ? 8 : size || 10
 
   const onClick =
@@ -21,32 +19,28 @@ export function Avatar(props: {
           e.stopPropagation()
           Router.push(`/${username}`)
         }
-  return (
+
-    <div
+  // there can be no avatar URL or username in the feed, we show a "submit comment"
+  // item with a fake grey user circle guy even if you aren't signed in
+  return avatarUrl ? (
+    <img
       className={clsx(
-        `flex-shrink-0 rounded-full bg-white w-${s} h-${s}`,
+        'flex-shrink-0 rounded-full rounded-full bg-white object-cover',
-        containerClassName
+        `w-${s} h-${s}`,
+        !noLink && 'cursor-pointer',
+        className
       )}
-    >
+      src={avatarUrl}
-      {avatarUrl ? (
+      onClick={onClick}
-        <img
+      alt={username}
-          className={clsx(
+    />
-            'flex items-center justify-center rounded-full object-cover',
+  ) : (
-            `w-${s} h-${s}`,
+    <UserCircleIcon
-            !noLink && 'cursor-pointer',
+      className={clsx(
-            className
+        `flex-shrink-0 rounded-full bg-white w-${s} h-${s} text-gray-500`,
-          )}
+        className
-          src={avatarUrl}
-          onClick={onClick}
-          alt={username}
-        />
-      ) : (
-        // TODO: After 2022-03-01, can just assume that all contracts have an avatarUrl
-        <UserCircleIcon
-          className={`w-${s} h-${s} text-gray-500`}
-          aria-hidden="true"
-        />
       )}
-    </div>
+      aria-hidden="true"
+    />
   )
 }

web/components/nav/nav-bar.tsx

@@ -60,7 +60,7 @@ export function BottomNavBar() {
         ) : user ? (
           <>
             <Avatar
-              containerClassName="mx-auto my-1"
+              className="mx-auto my-1"
               size="xs"
               username={user.username}
               avatarUrl={user.avatarUrl}

web/components/nav/profile-menu.tsx

@@ -28,7 +28,7 @@ export function getNavigationOptions(user?: User | null) {
 export function ProfileSummary(props: { user: User | undefined }) {
   const { user } = props
   return (
-    <Row className="group avatar items-center gap-4 rounded-md py-3 text-gray-500 group-hover:bg-gray-100 group-hover:text-gray-700">
+    <Row className="group items-center gap-4 rounded-md py-3 text-gray-500 group-hover:bg-gray-100 group-hover:text-gray-700">
       <Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
 
       <div className="truncate text-left">