Fix build; add a white ring around users

web/components/avatar.tsx

@@ -7,8 +7,9 @@ export function Avatar(props: {
   avatarUrl?: string
   noLink?: boolean
   size?: number
+  className?: string
 }) {
-  const { username, avatarUrl, noLink, size } = props
+  const { username, avatarUrl, noLink, size, className } = props
   const s = size || 10
 
   const onClick =
@@ -25,7 +26,8 @@ export function Avatar(props: {
           className={clsx(
             'flex items-center justify-center rounded-full object-cover',
             `w-${s} h-${s}`,
-            !noLink && 'cursor-pointer'
+            !noLink && 'cursor-pointer',
+            className
           )}
           src={avatarUrl}
           onClick={onClick}

web/components/user-page.tsx

@@ -55,8 +55,12 @@ export function UserPage(props: { user: User; currentUser?: User }) {
         }}
       />
       <div className="relative -top-10 left-4">
-        {/* TODO: add a white ring to the avatar */}
+        <Avatar
-        <Avatar username={user.username} avatarUrl={user.avatarUrl} size={20} />
+          username={user.username}
+          avatarUrl={user.avatarUrl}
+          size={20}
+          className="bg-white ring-4 ring-white"
+        />
       </div>
 
       {/* Profile details: name, username, bio, and link to twitter/discord */}

web/pages/profile.tsx

@@ -17,7 +17,8 @@ import { uploadImage } from '../lib/firebase/storage'
 import { Col } from '../components/layout/col'
 import { Row } from '../components/layout/row'
 import { User } from '../../common/user'
-import { defaultBannerUrl, updateUser } from '../lib/firebase/users'
+import { updateUser } from '../lib/firebase/users'
+import { defaultBannerUrl } from '../components/user-page'
 
 function EditUserField(props: {
   user: User