profile menu: use avatar component

This commit is contained in:
mantikoros 2022-01-27 17:24:44 -06:00
parent bdb2cfd710
commit 63ca394d6e

View File

@ -1,6 +1,6 @@
import { firebaseLogout, User } from '../lib/firebase/users' import { firebaseLogout, User } from '../lib/firebase/users'
import { formatMoney } from '../lib/util/format' import { formatMoney } from '../lib/util/format'
import { AvatarPlaceholder } from './contract-feed' import { Avatar } from './avatar'
import { Col } from './layout/col' import { Col } from './layout/col'
import { MenuButton } from './menu' import { MenuButton } from './menu'
@ -77,15 +77,10 @@ function getNavigationOptions(
function ProfileSummary(props: { user: User | undefined }) { function ProfileSummary(props: { user: User | undefined }) {
const { user } = props const { user } = props
return ( return (
<Col className="avatar items-center sm:flex-row gap-2 sm:gap-0"> <Col className="avatar items-center sm:flex-row gap-2 sm:gap-4 sm:w-52">
<div className="rounded-full w-10 h-10 sm:mr-4"> <Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
{user?.avatarUrl ? (
<img src={user?.avatarUrl} width={40} height={40} /> <div className="truncate text-left">
) : (
<AvatarPlaceholder />
)}
</div>
<div className="truncate text-left" style={{ width: 170 }}>
<div className="hidden sm:flex">{user?.name}</div> <div className="hidden sm:flex">{user?.name}</div>
<div className="text-gray-700 text-sm"> <div className="text-gray-700 text-sm">
{user ? formatMoney(Math.floor(user.balance)) : ' '} {user ? formatMoney(Math.floor(user.balance)) : ' '}