From ca6c14de50d7312e55c736ec5f1149a9852446ee Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Tue, 3 May 2022 22:37:29 -0700
Subject: [PATCH] Remove unnecessary avatar wrapper div

---
 web/components/avatar.tsx      | 47 +++++++++++++++-------------------
 web/components/nav/nav-bar.tsx |  2 +-
 2 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/web/components/avatar.tsx b/web/components/avatar.tsx
index 12bcfd1b..d96e798c 100644
--- a/web/components/avatar.tsx
+++ b/web/components/avatar.tsx
@@ -10,8 +10,7 @@ export function Avatar(props: {
   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 +20,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(
-            '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}