From 72f858b5bbd00d9864c43b6625e8f89a17df133b Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 3 Dec 2020 19:28:37 +0000
Subject: [PATCH 1/4] Empty commit

as I don't see any other way to make netlify retry

From c7f1d97b1afe9b5c72a9d84e3a40b1d078ee892e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 7 Dec 2020 15:38:55 +0000
Subject: [PATCH 2/4] Round off the sharp corners

Before you have someone's eye out
---
 res/css/views/voip/_CallView.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 72c25ef4b3..37f583c437 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 .mx_CallView {
-    border-radius: 10px;
+    border-radius: 8px;
     background-color: $voipcall-plinth-color;
     padding-left: 8px;
     padding-right: 8px;
@@ -47,6 +47,7 @@ limitations under the License.
     align-items: center;
     justify-content: center;
     background-color: $inverted-bg-color;
+    border-radius: 8px;
 }
 
 .mx_CallView_voice_hold {
@@ -92,6 +93,8 @@ limitations under the License.
     width: 100%;
     position: relative;
     z-index: 30;
+    border-radius: 8px;
+    overflow: hidden;
 }
 
 .mx_CallView_video_hold {

From 3b25a3be98c7ecb73d481b34573b235ff35e6b7b Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 7 Dec 2020 15:42:35 +0000
Subject: [PATCH 3/4] Smaller avatar, more padding on text

---
 res/css/views/voip/_CallView.scss      | 2 +-
 src/components/views/voip/CallView.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 37f583c437..d3fc11b63c 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -81,7 +81,7 @@ limitations under the License.
 
 .mx_CallView_voice_holdText {
     height: 20px;
-    padding-top: 10px;
+    padding-top: 20px;
     color: $accent-fg-color;
     font-weight: bold;
     .mx_AccessibleButton_hasKind {
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index c9f5db77e6..cfc4a2a16c 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/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 ? 200 : 75;
+            const avatarSize = this.props.room ? 160 : 75;
             const classes = classNames({
                 mx_CallView_voice: true,
                 mx_CallView_voice_hold: isOnHold,

From 747d743bd0cf61ca0b36c2ad2e8fa415692f6154 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 7 Dec 2020 16:22:57 +0000
Subject: [PATCH 4/4] Add 60% opacity black over the avatars when on hold

---
 res/css/views/voip/_CallView.scss      | 21 ++++++++++++++++-----
 src/components/views/voip/CallView.tsx |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index d3fc11b63c..898318f71d 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/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 {
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index cfc4a2a16c..078ba18d02 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/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,