From 8a99f3772aafc035ee48e0126dfc21dea3908704 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Mon, 9 May 2022 14:32:59 -0700
Subject: [PATCH] Cleanup avatar again (#161)

* Reinstate avatar component cleanup

This was reverted due to a bug, fixed in the subsequent commit.

* Kill additional wrapper divs around avatars

This also fixes a bug where the `w-8` answer row wrapper div was
constraining the width of the `w-10` avatar, leading it to be `w-8`
and `h-10` and appear as an oval.
---
 web/components/avatar.tsx          | 48 ++++++++++++---------------
 web/components/feed/feed-items.tsx | 53 +++++++++++++-----------------
 web/components/nav/nav-bar.tsx     |  2 +-
 3 files changed, 44 insertions(+), 59 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/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index cb089dd7..37633643 100644
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@@ -262,9 +262,7 @@ export function CommentInput(props: {
   return (
     <>
       <Row className={'flex w-full gap-2'}>
-        <div>
-          <Avatar avatarUrl={user?.avatarUrl} username={user?.username} />
-        </div>
+        <Avatar avatarUrl={user?.avatarUrl} username={user?.username} />
         <div className={'min-w-0 flex-1'}>
           <div className="text-sm text-gray-500">
             {mostRecentCommentableBet && (
@@ -413,32 +411,27 @@ export function FeedBet(props: {
   return (
     <>
       <Row className={'flex w-full gap-2 pt-3'}>
-        <div>
-          {isSelf ? (
-            <Avatar
-              className={clsx(smallAvatar && 'ml-1')}
-              size={smallAvatar ? 'sm' : undefined}
-              avatarUrl={user.avatarUrl}
-              username={user.username}
-            />
-          ) : bettor ? (
-            <Avatar
-              className={clsx(smallAvatar && 'ml-1')}
-              size={smallAvatar ? 'sm' : undefined}
-              avatarUrl={bettor.avatarUrl}
-              username={bettor.username}
-            />
-          ) : (
-            <div className="relative px-1">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
-                <UserIcon
-                  className="h-5 w-5 text-gray-500"
-                  aria-hidden="true"
-                />
-              </div>
+        {isSelf ? (
+          <Avatar
+            className={clsx(smallAvatar && 'ml-1')}
+            size={smallAvatar ? 'sm' : undefined}
+            avatarUrl={user.avatarUrl}
+            username={user.username}
+          />
+        ) : bettor ? (
+          <Avatar
+            className={clsx(smallAvatar && 'ml-1')}
+            size={smallAvatar ? 'sm' : undefined}
+            avatarUrl={bettor.avatarUrl}
+            username={bettor.username}
+          />
+        ) : (
+          <div className="relative px-1">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
+              <UserIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
             </div>
-          )}
-        </div>
+          </div>
+        )}
         <div className={'min-w-0 flex-1 py-1.5'}>
           <BetStatusText
             bet={bet}
@@ -807,9 +800,7 @@ function FeedAnswerGroup(props: {
 
       <Row className="my-4 gap-3">
         <div className="px-1">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
-            <Avatar username={username} avatarUrl={avatarUrl} />
-          </div>
+          <Avatar username={username} avatarUrl={avatarUrl} />
         </div>
         <Col className="min-w-0 flex-1 gap-2">
           <div className="text-sm text-gray-500">
diff --git a/web/components/nav/nav-bar.tsx b/web/components/nav/nav-bar.tsx
index 8f7d7424..f92f6630 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}