Make avatars consistently circular

Summary: The avatar shown in merge conflict source commit was not circular, because it was missing that style. The only other user of this <AvatarImg> had its own styles, which should really belong in the AvatarImg itself.

Reviewed By: sggutier

Differential Revision: D57290584

fbshipit-source-id: c0db2195923c465c116b3f73efea3f3ed260f9ec

addons/isl/src/Avatar.tsx

@@ -10,6 +10,7 @@ import type {DetailedHTMLProps} from 'react';
 import serverAPI from './ClientToServerAPI';
 import {t} from './i18n';
 import {atomFamilyWeak, lazyAtom} from './jotaiUtils';
+import {colors, radius} from './tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
 import {useAtomValue} from 'jotai';
 
@@ -30,13 +31,15 @@ const avatarUrl = atomFamilyWeak((author: string) => {
 export function AvatarImg({
   url,
   username,
+  xstyle,
   ...rest
-}: {url?: string; username: string} & DetailedHTMLProps<
+}: {url?: string; username: string; xstyle?: stylex.StyleXStyles} & DetailedHTMLProps<
   React.ImgHTMLAttributes<HTMLImageElement>,
   HTMLImageElement
 >) {
   return url == null ? null : (
     <img
+      {...stylex.props(styles.circle, xstyle)}
       src={url}
       width={14}
       height={14}
@@ -47,18 +50,21 @@ export function AvatarImg({
 }
 
 const styles = stylex.create({
-  empty: {
-    content: '',
+  circle: {
     width: 14,
     height: 14,
+    border: '2px solid',
+    borderRadius: radius.full,
+    borderColor: colors.fg,
+  },
+  empty: {
+    content: '',
     backgroundColor: 'var(--foreground)',
-    borderRadius: '50%',
-    border: '1px solid var(--foreground)',
   },
 });
 
 export function BlankAvatar() {
-  return <div {...stylex.props(styles.empty)} />;
+  return <div {...stylex.props(styles.circle, styles.empty)} />;
 }
 
 export function Avatar({

addons/isl/src/codeReview/DiffComments.tsx

@@ -82,9 +82,6 @@ const styles = stylex.create({
     flexShrink: 0,
   },
   avatar: {
-    borderRadius: radius.full,
-    border: '2px solid',
-    borderColor: colors.fg,
     marginBlock: spacing.half,
   },
   byline: {
@@ -101,11 +98,7 @@ function Comment({comment, isTopLevel}: {comment: DiffComment; isTopLevel?: bool
   return (
     <Row xstyle={styles.comment}>
       <Column {...stylex.props(styles.left)}>
-        <AvatarImg
-          username={comment.author}
-          url={comment.authorAvatarUri}
-          {...stylex.props(styles.avatar)}
-        />
+        <AvatarImg username={comment.author} url={comment.authorAvatarUri} xstyle={styles.avatar} />
       </Column>
       <Column xstyle={styles.commentInfo}>
         <b {...stylex.props(styles.author)}>{comment.author}</b>