Add 60% opacity black over the avatars when on hold

res/css/views/voip/_CallView.scss

@@ -59,18 +59,19 @@ limitations under the License.
         &::after {
             position: absolute;
             content: '';
-            width: 40px;
-            height: 40px;
+            width: 100%;
+            height: 100%;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            background-color: rgba(0, 0, 0, 0.6);
             background-image: url('$(res)/img/voip/paused.svg');
             background-position: center;
-            background-size: cover;
+            background-size: 40px;
+            background-repeat: no-repeat;
         }
         .mx_CallView_pip &::after {
-            width: 30px;
-            height: 30px;
+            background-size: 30px;
         }
     }
     .mx_BaseAvatar {
@@ -117,6 +118,16 @@ limitations under the License.
     background-size: cover;
     background-position: center;
     filter: blur(20px);
+    &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        right: 0;
+        background-color: rgba(0, 0, 0, 0.6);
+    }
 }
 
 .mx_CallView_video_holdContent {

src/components/views/voip/CallView.tsx

@@ -489,7 +489,7 @@ export default class CallView extends React.Component<IProps, IState> {
                 {callControls}
             </div>;
         } else {
-            const avatarSize = this.props.room ? 160 : 75;
+            const avatarSize = this.props.room ? 160 : 76;
             const classes = classNames({
                 mx_CallView_voice: true,
                 mx_CallView_voice_hold: isOnHold,