Fix calling participant appearance

signalapp · Oct 30, 2023 · 953a1dd · 953a1dd
1 parent f1e8ffe
commit 953a1dd
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 16 deletions.
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -3603,6 +3603,8 @@ button.module-image__border-overlay:focus {
   }
 
   &__header {
+    position: fixed;
+    top: 0;
     color: #ffffff;
     font-style: normal;
     padding-bottom: 19px;
@@ -3640,6 +3642,8 @@ button.module-image__border-overlay:focus {
       height: 100%;
       position: absolute;
       width: 100%;
+      // Improve appearance of blurred edges by reducing edge gradient effect
+      transform: scale(1.2, 1.2);
     }
   }
 
@@ -3743,6 +3747,7 @@ button.module-image__border-overlay:focus {
     display: flex;
     flex: 1 1 0;
     width: 100%;
+    margin-block-start: 24px;
     z-index: $z-index-above-base;
 
     &__grid {
@@ -3978,7 +3983,6 @@ button.module-image__border-overlay:focus {
   }
 
   &__footer {
-    background: linear-gradient(transparent, $color-black-alpha-40);
     bottom: 0;
     display: flex;
     justify-content: space-between;
@@ -4010,6 +4014,7 @@ button.module-image__border-overlay:focus {
       overflow: hidden;
       position: relative;
       width: $local-preview-width;
+      box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
 
       &__video {
         // The background-color is seen while the video loads.

diff --git a/stylesheets/components/CallControls.scss b/stylesheets/components/CallControls.scss
@@ -13,6 +13,7 @@
   min-width: 480px;
   height: 80px;
   background-color: $color-gray-78;
+  box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
   border-radius: 18px;
   margin-block-end: 16px;
   padding-block: 22px;

diff --git a/stylesheets/components/CallingPreCallInfo.scss b/stylesheets/components/CallingPreCallInfo.scss
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-CallingPreCallInfo {
+  margin-block-start: 43px;
   text-align: center;
   user-select: none;
 

diff --git a/ts/components/DirectCallRemoteParticipant.tsx b/ts/components/DirectCallRemoteParticipant.tsx
@@ -8,6 +8,7 @@ import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
 import { AvatarColors } from '../types/Colors';
 import { Avatar, AvatarSize } from './Avatar';
+import { CallBackgroundBlur } from './CallBackgroundBlur';
 
 type PropsType = {
   conversation: ConversationType;
@@ -72,21 +73,23 @@ function renderAvatar(
 ): JSX.Element {
   return (
     <div className="module-ongoing-call__remote-video-disabled">
-      <Avatar
-        acceptedMessageRequest={acceptedMessageRequest}
-        avatarPath={avatarPath}
-        badge={undefined}
-        color={color || AvatarColors[0]}
-        noteToSelf={false}
-        conversationType="direct"
-        i18n={i18n}
-        isMe={isMe}
-        phoneNumber={phoneNumber}
-        profileName={profileName}
-        title={title}
-        sharedGroupNames={sharedGroupNames}
-        size={AvatarSize.EIGHTY}
-      />
+      <CallBackgroundBlur avatarPath={avatarPath} color={color}>
+        <Avatar
+          acceptedMessageRequest={acceptedMessageRequest}
+          avatarPath={avatarPath}
+          badge={undefined}
+          color={color || AvatarColors[0]}
+          noteToSelf={false}
+          conversationType="direct"
+          i18n={i18n}
+          isMe={isMe}
+          phoneNumber={phoneNumber}
+          profileName={profileName}
+          title={title}
+          sharedGroupNames={sharedGroupNames}
+          size={AvatarSize.EIGHTY}
+        />
+      </CallBackgroundBlur>
     </div>
   );
 }