♻️(frontend) extract Avatar in dedicated component

Refactored it in a proper component. Initially planned to
use it in the Account Tab, but I changed my mind.

This refactoring is an enhancement, the Avatar props are better
encapsulated.

src/frontend/src/components/Avatar.tsx

@@ -0,0 +1,41 @@
+import { css } from '@/styled-system/css'
+import React from 'react'
+
+export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+  name: string
+  size?: number
+  bgColor?: string
+  textColor?: string
+}
+
+export const Avatar = ({
+  name,
+  size = 32,
+  bgColor = '#3498db',
+  textColor = 'white',
+}: AvatarProps) => {
+  const initial = name?.trim()?.charAt(0).toUpperCase() || '*' // fixme use a proper fallback
+  return (
+    <div
+      className={css({
+        backgroundColor: bgColor,
+        color: textColor,
+        display: 'flex',
+        borderRadius: '50%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        userSelect: 'none',
+        cursor: 'default',
+        flexGrow: 0,
+        flexShrink: 0,
+      })}
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        fontSize: `${size * 0.4}px`,
+      }}
+    >
+      {initial}
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -1,5 +1,4 @@
 import { css } from '@/styled-system/css'
-import * as React from 'react'
 import { useParticipants } from '@livekit/components-react'
 
 import { Heading } from 'react-aria-components'
@@ -11,32 +10,7 @@ import { capitalize } from '@/utils/capitalize'
 import { participantsStore } from '@/stores/participants'
 import { useTranslation } from 'react-i18next'
 import { allParticipantRoomEvents } from '@/features/rooms/livekit/constants/events'
-
+import { Avatar } from '@/components/Avatar'
-export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
-  name: string
-  size?: number
-}
-
-// TODO - extract inline styling in a centralized styling file, and avoid magic numbers
-export const Avatar = ({ name, size = 32 }: AvatarProps) => (
-  <div
-    className={css({
-      minWidth: `${size}px`,
-      minHeight: `${size}px`,
-      backgroundColor: '#3498db',
-      borderRadius: '50%',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      fontSize: '1.25rem',
-      userSelect: 'none',
-      cursor: 'default',
-      color: 'white',
-    })}
-  >
-    {name?.trim()?.charAt(0).toUpperCase()}
-  </div>
-)
 
 // TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
 export const ParticipantsList = () => {