Improve group call participants background, padding, margin

ts/components/CallBackgroundBlur.tsx

@@ -3,28 +3,23 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import type { AvatarColorType } from '../types/Colors';
 
 export type PropsType = {
   avatarPath?: string;
   children?: React.ReactNode;
   className?: string;
-  color?: AvatarColorType;
 };
 
 export function CallBackgroundBlur({
   avatarPath,
   children,
   className,
-  color,
 }: PropsType): JSX.Element {
   return (
     <div
       className={classNames(
         'module-calling__background',
-        {
-          [`module-background-color__${color || 'default'}`]: !avatarPath,
-        },
+        !avatarPath && 'module-calling__background--no-avatar',
         className
       )}
     >

ts/components/CallScreen.tsx

@@ -391,7 +391,7 @@ export function CallScreen({
         {isSendingVideo ? (
           <video ref={localVideoRef} autoPlay />
         ) : (
-          <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
+          <CallBackgroundBlur avatarPath={me.avatarPath}>
             <div className="module-calling__spacer module-calling__camera-is-off-spacer" />
             <div className="module-calling__camera-is-off">
               {i18n('icu:calling__your-video-is-off')}
@@ -412,7 +412,7 @@ export function CallScreen({
         autoPlay
       />
     ) : (
-      <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
+      <CallBackgroundBlur avatarPath={me.avatarPath}>
         <Avatar
           acceptedMessageRequest
           avatarPath={me.avatarPath}

ts/components/CallingLobby.tsx

@@ -240,7 +240,6 @@ export function CallingLobby({
           <CallBackgroundBlur
             className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-off"
             avatarPath={me.avatarPath}
-            color={me.color}
           />
         )}
 

ts/components/CallingPipRemoteVideo.tsx

@@ -48,7 +48,7 @@ function NoVideo({
 
   return (
     <div className="module-calling-pip__video--remote">
-      <CallBackgroundBlur avatarPath={avatarPath} color={color}>
+      <CallBackgroundBlur avatarPath={avatarPath}>
         <div className="module-calling-pip__video--avatar">
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}

ts/components/DirectCallRemoteParticipant.tsx

@@ -73,7 +73,7 @@ function renderAvatar(
 ): JSX.Element {
   return (
     <div className="module-ongoing-call__remote-video-disabled">
-      <CallBackgroundBlur avatarPath={avatarPath} color={color}>
+      <CallBackgroundBlur avatarPath={avatarPath}>
         <Avatar
           acceptedMessageRequest={acceptedMessageRequest}
           avatarPath={avatarPath}

ts/components/GroupCallRemoteParticipant.tsx

@@ -250,7 +250,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
       const shorterDimension = Math.min(width, height);
 
       if (shorterDimension >= 180) {
-        avatarSize = AvatarSize.EIGHTY;
+        avatarSize = AvatarSize.NINETY_SIX;
       } else {
         avatarSize = AvatarSize.FORTY_EIGHT;
       }
@@ -373,7 +373,10 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
             />
           )}
           {!hasVideoToShow && (
-            <CallBackgroundBlur avatarPath={avatarPath} color={color}>
+            <CallBackgroundBlur
+              avatarPath={avatarPath}
+              className="module-ongoing-call__group-call-remote-participant-background"
+            >
               {isBlocked ? (
                 <>
                   <i className="module-ongoing-call__group-call-remote-participant__blocked" />