From adefd3259c9d4880cac8cc1161c988c9c0554852 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Thu, 5 May 2022 09:50:58 -0700
Subject: [PATCH] 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           | 48 +++++++++++++----------------
 web/components/nav/nav-bar.tsx      |  2 +-
 web/components/nav/profile-menu.tsx |  2 +-
 3 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/web/components/avatar.tsx b/web/components/avatar.tsx
index 318c5498..706b61f3 100644
--- a/web/components/avatar.tsx
+++ b/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 } =
-    props
+  const { username, avatarUrl, noLink, size, className } = 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}`,
-        containerClassName
+        'flex-shrink-0 rounded-full rounded-full bg-white object-cover',
+        `w-${s} h-${s}`,
+        !noLink && 'cursor-pointer',
+        className
       )}
-    >
-      {avatarUrl ? (
-        <img
-          className={clsx(
-            'flex items-center justify-center rounded-full object-cover',
-            `w-${s} h-${s}`,
-            !noLink && 'cursor-pointer',
-            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"
-        />
+      src={avatarUrl}
+      onClick={onClick}
+      alt={username}
+    />
+  ) : (
+    <UserCircleIcon
+      className={clsx(
+        `flex-shrink-0 rounded-full bg-white w-${s} h-${s} text-gray-500`,
+        className
       )}
-    </div>
+      aria-hidden="true"
+    />
   )
 }
diff --git a/web/components/nav/nav-bar.tsx b/web/components/nav/nav-bar.tsx
index a9cb49f0..0aded804 100644
--- a/web/components/nav/nav-bar.tsx
+++ b/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}
diff --git a/web/components/nav/profile-menu.tsx b/web/components/nav/profile-menu.tsx
index c88e67b9..71c9fc47 100644
--- a/web/components/nav/profile-menu.tsx
+++ b/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">