Fix calling participant appearance

This commit is contained in:
ayumi-signal 2023-10-30 13:31:54 -07:00 committed by GitHub
parent f1e8ffe720
commit 953a1dd2a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 16 deletions

View file

@ -3603,6 +3603,8 @@ button.module-image__border-overlay:focus {
} }
&__header { &__header {
position: fixed;
top: 0;
color: #ffffff; color: #ffffff;
font-style: normal; font-style: normal;
padding-bottom: 19px; padding-bottom: 19px;
@ -3640,6 +3642,8 @@ button.module-image__border-overlay:focus {
height: 100%; height: 100%;
position: absolute; position: absolute;
width: 100%; 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; display: flex;
flex: 1 1 0; flex: 1 1 0;
width: 100%; width: 100%;
margin-block-start: 24px;
z-index: $z-index-above-base; z-index: $z-index-above-base;
&__grid { &__grid {
@ -3978,7 +3983,6 @@ button.module-image__border-overlay:focus {
} }
&__footer { &__footer {
background: linear-gradient(transparent, $color-black-alpha-40);
bottom: 0; bottom: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -4010,6 +4014,7 @@ button.module-image__border-overlay:focus {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: $local-preview-width; width: $local-preview-width;
box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
&__video { &__video {
// The background-color is seen while the video loads. // The background-color is seen while the video loads.

View file

@ -13,6 +13,7 @@
min-width: 480px; min-width: 480px;
height: 80px; height: 80px;
background-color: $color-gray-78; background-color: $color-gray-78;
box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
border-radius: 18px; border-radius: 18px;
margin-block-end: 16px; margin-block-end: 16px;
padding-block: 22px; padding-block: 22px;

View file

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

View file

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