From 2d0d30ce01d8123b019a037e2df83336ea0c3b12 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 22 Aug 2024 22:58:08 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20allow=20responsi?=
 =?UTF-8?q?ve=20avatar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Until this commit, avatar got a fixed size. Make them
responsive, to fit their parent container.

It's necessary in a placeholder context.
---
 src/frontend/src/components/Avatar.tsx        | 67 +++++++++++--------
 .../components/ParticipantPlaceholder.tsx     | 11 ++-
 2 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/components/Avatar.tsx b/src/frontend/src/components/Avatar.tsx
index 6f0af42f..70308b59 100644
--- a/src/frontend/src/components/Avatar.tsx
+++ b/src/frontend/src/components/Avatar.tsx
@@ -1,40 +1,51 @@
-import { css } from '@/styled-system/css'
+import { cva, RecipeVariantProps } from '@/styled-system/css'
 import React from 'react'
 
-export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
-  name?: string
-  size?: number
-  bgColor?: string
-  textColor?: string
-}
+const avatar = cva({
+  base: {
+    backgroundColor: 'transparent',
+    color: 'white',
+    display: 'flex',
+    borderRadius: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    userSelect: 'none',
+    cursor: 'default',
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+  variants: {
+    context: {
+      list: {
+        width: '32px',
+        height: '32px',
+        fontSize: '0.8rem',
+      },
+      placeholder: {
+        width: '100%',
+        height: '100%',
+      },
+    },
+  },
+  defaultVariants: {
+    context: 'list',
+  },
+})
 
-export const Avatar = ({
-  name,
-  size = 32,
-  bgColor,
-  textColor = 'white',
-}: AvatarProps) => {
+export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
+  name?: string
+  bgColor?: string
+} & RecipeVariantProps<typeof avatar>
+
+export const Avatar = ({ name, bgColor, context, ...props }: AvatarProps) => {
   const initial = name?.trim()?.charAt(0).toUpperCase() || ''
   return (
     <div
-      className={css({
-        backgroundColor: 'transparent',
-        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`,
         backgroundColor: bgColor,
       }}
+      className={avatar({ context })}
+      {...props}
     >
       {initial}
     </div>
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
index 07f51301..b37bb15a 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
@@ -30,9 +30,18 @@ export const ParticipantPlaceholder = ({
         style={{
           borderRadius: '50%',
           animation: isSpeaking ? 'pulse 1s infinite' : undefined,
+          width: '80%',
+          maxWidth: '150px',
+          height: 'auto',
+          aspectRatio: '1/1',
+          fontSize: '50px',
         }}
       >
-        <Avatar name={participant.name} bgColor={participantColor} />
+        <Avatar
+          name={participant.name}
+          bgColor={participantColor}
+          context="placeholder"
+        />
       </div>
     </StyledParticipantPlaceHolder>
   )