Show avatar on contract cards

web/components/avatar.tsx

@@ -1,12 +1,15 @@
 import Router from 'next/router'
 import clsx from 'clsx'
+import { UserCircleIcon } from '@heroicons/react/solid'
 
 export function Avatar(props: {
   username?: string
   avatarUrl?: string
   noLink?: boolean
+  size?: number
 }) {
-  const { username, avatarUrl, noLink } = props
+  const { username, avatarUrl, noLink, size } = props
+  const s = size || 10
 
   const onClick =
     noLink && username
@@ -16,19 +19,26 @@ export function Avatar(props: {
           Router.push(`/${username}`)
         }
   return (
-    <div className="rounded-full bg-gray-400 w-10 h-10">
+    <div className={`rounded-full bg-white w-${s} h-${s}`}>
-      <img
+      {avatarUrl ? (
-        className={clsx(
+        <img
-          'rounded-full bg-gray-400 flex items-center justify-center',
+          className={clsx(
-          !noLink && 'cursor-pointer',
+            'rounded-full bg-gray-400 flex items-center justify-center',
-          !avatarUrl && 'hidden'
+            !noLink && 'cursor-pointer'
-        )}
+          )}
-        src={avatarUrl}
+          src={avatarUrl}
-        width={40}
+          width={40}
-        height={40}
+          height={40}
-        onClick={onClick}
+          onClick={onClick}
-        alt={username}
+          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>
   )
 }

web/components/contract-card.tsx

@@ -9,12 +9,13 @@ import {
   contractPath,
 } from '../lib/firebase/contracts'
 import { Col } from './layout/col'
-import { parseTags } from '../../common/util/parse'
 import dayjs from 'dayjs'
 import { TrendingUpIcon } from '@heroicons/react/solid'
 import { DateTimeTooltip } from './datetime-tooltip'
 import { ClockIcon } from '@heroicons/react/outline'
 import { fromNow } from '../lib/util/time'
+import { Avatar } from './avatar'
+import { Spacer } from './layout/spacer'
 
 export function ContractCard(props: {
   contract: Contract
@@ -37,7 +38,15 @@ export function ContractCard(props: {
         <Link href={contractPath(contract)}>
           <a className="absolute left-0 right-0 top-0 bottom-0" />
         </Link>
-        <Row className="justify-between gap-4 mb-2">
+
+        <AbbrContractDetails
+          contract={contract}
+          showHotVolume={showHotVolume}
+          showCloseTime={showCloseTime}
+        />
+        <Spacer h={3} />
+
+        <Row className="justify-between gap-4">
           <p className="font-medium text-indigo-700">{question}</p>
           <ResolutionOrChance
             className="items-center"
@@ -45,11 +54,6 @@ export function ContractCard(props: {
             probPercent={probPercent}
           />
         </Row>
-        <AbbrContractDetails
-          contract={contract}
-          showHotVolume={showHotVolume}
-          showCloseTime={showCloseTime}
-        />
       </div>
     </div>
   )
@@ -104,7 +108,7 @@ export function ResolutionOrChance(props: {
   )
 }
 
-export function AbbrContractDetails(props: {
+function AbbrContractDetails(props: {
   contract: Contract
   showHotVolume?: boolean
   showCloseTime?: boolean
@@ -115,13 +119,20 @@ export function AbbrContractDetails(props: {
 
   return (
     <Col className={clsx('text-sm text-gray-500 gap-2')}>
-      <Row className="gap-2 flex-wrap">
+      <Row className="justify-between items-center">
-        <UserLink
+        <Row className="gap-2 items-center">
-          className="whitespace-nowrap"
+          <Avatar
-          name={creatorName}
+            username={creatorUsername}
-          username={creatorUsername}
+            avatarUrl={contract.creatorAvatarUrl}
-        />
+            size={6}
-        <div>•</div>
+          />
+          <UserLink
+            className="whitespace-nowrap"
+            name={creatorName}
+            username={creatorUsername}
+          />
+        </Row>
+
         {showHotVolume ? (
           <div className="whitespace-nowrap">
             <TrendingUpIcon className="h-5 w-5 text-gray-500 inline" />{' '}

web/components/contract-feed.tsx

@@ -283,19 +283,10 @@ function FeedQuestion(props: { contract: Contract }) {
 
   return (
     <>
-      {contract.creatorAvatarUrl ? (
+      <Avatar
-        <Avatar
+        username={contract.creatorUsername}
-          username={contract.creatorUsername}
+        avatarUrl={contract.creatorAvatarUrl}
-          avatarUrl={contract.creatorAvatarUrl}
+      />
-        />
-      ) : (
-        // TODO: After 2022-03-01, can just assume that all contracts have an avatarUrl
-        <div className="relative px-1">
-          <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
-            <StarIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
-          </div>
-        </div>
-      )}
       <div className="min-w-0 flex-1 py-1.5">
         <div className="text-sm text-gray-500 mb-2">
           <UserLink
@@ -337,19 +328,10 @@ function FeedDescription(props: { contract: Contract }) {
 
   return (
     <>
-      {contract.creatorAvatarUrl ? (
+      <Avatar
-        <Avatar
+        username={contract.creatorUsername}
-          username={contract.creatorUsername}
+        avatarUrl={contract.creatorAvatarUrl}
-          avatarUrl={contract.creatorAvatarUrl}
+      />
-        />
-      ) : (
-        // TODO: After 2022-03-01, can just assume that all contracts have an avatarUrl
-        <div className="relative px-1">
-          <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
-            <StarIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
-          </div>
-        </div>
-      )}
       <div className="min-w-0 flex-1 py-1.5">
         <div className="text-sm text-gray-500">
           <UserLink