Avatar component; Indicators components.

client/src/components/popups/ParticipantsPopup.tsx

@@ -4,11 +4,12 @@ import MicrophoneFilledIcon from "../icons/MicrophoneFilledIcon";
 import VideoOffFilledIcon from "../icons/VideoOffFilledIcon";
 import HandRaisedFilledIcon from "../icons/HandRaisedFilledIcon";
 import XMarkFilledIcon from "../icons/XMarkFilledIcon";
+import Avatar from "../ui/Avatar";
 
 export default function ParticipantsPopup() {
   const participants = [1, 2, 3];
   return (
-    <PopupWrapper title="Чат" draggable className="h-max">
+    <PopupWrapper title="Участники" draggable className="h-max">
       <div className="flex flex-col w-[21.667vw] relative">
         <ul className="flex flex-col gap-[1.111vw]">
           {participants.map((participant, index) => (
@@ -29,13 +30,7 @@ function ParticipantItem({ id }: { id: string }) {
   return (
     <div className="flex items-center justify-between w-full h-[2.5vw]">
       <div className="flex items-center gap-[0.833vw]">
-        <div className="size-[2.5vw] rounded-full bg-[#F6F6F6]">
-          <img
-            src="/img/popups/MessageUserPfp.png"
-            className="size-full object-cover"
-            alt="user"
-          />
-        </div>
+        <Avatar size="medium" />
         <div className="flex flex-col gap-[0.278vw]">
           <span className="button-m">Иван Иванович {id}</span>
           <span className="caption-s text-[#CCCCCC]">Роль</span>