diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 83ef2a02e..93189ddd9 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -5856,18 +5856,19 @@ button.module-image__border-overlay:focus { } &__background { - background-repeat: no-repeat; - background-size: cover; - border-radius: 4px 4px 0 0; + align-items: center; + display: flex; + flex-direction: column; height: 100%; + justify-content: center; + overflow: hidden; position: absolute; width: 100%; &--blur { - backdrop-filter: blur(7px); - backface-visibility: hidden; - background-color: $color-black-alpha-40; - border-radius: 4px 4px 0 0; + background-repeat: no-repeat; + background-size: cover; + filter: blur(25px); height: 100%; position: absolute; width: 100%; @@ -6258,14 +6259,10 @@ button.module-image__border-overlay:focus { &__video { @include font-body-2; - align-items: center; background-color: $color-gray-80; border-radius: 8px; color: $color-white; - display: flex; - flex-direction: column; flex: 1 1 auto; - justify-content: center; margin-bottom: 24px; margin-top: 24px; max-width: 640px; diff --git a/ts/components/CallBackgroundBlur.tsx b/ts/components/CallBackgroundBlur.tsx index 5b983a9aa..d0c1887b5 100644 --- a/ts/components/CallBackgroundBlur.tsx +++ b/ts/components/CallBackgroundBlur.tsx @@ -27,10 +27,9 @@ export const CallBackgroundBlur = ({ }; return ( - <> -
-
+
+
{children} - +
); }; diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx index 801ae2db5..189e2b699 100644 --- a/ts/components/CallScreen.tsx +++ b/ts/components/CallScreen.tsx @@ -330,7 +330,9 @@ export class CallScreen extends React.Component { } else if (callState === CallState.Reconnecting) { message = i18n('callReconnecting'); } else if (callState === CallState.Accepted && acceptedDuration) { - message = i18n('callDuration', [this.renderDuration(acceptedDuration)]); + message = i18n('callDuration', [ + CallScreen.renderDuration(acceptedDuration), + ]); } if (!message) { @@ -339,8 +341,7 @@ export class CallScreen extends React.Component { return
{message}
; } - // eslint-disable-next-line class-methods-use-this - private renderDuration(ms: number): string { + static renderDuration(ms: number): string { const secs = Math.floor((ms / 1000) % 60) .toString() .padStart(2, '0'); diff --git a/ts/components/CallingLobby.stories.tsx b/ts/components/CallingLobby.stories.tsx index f56f07025..1eaacbc97 100644 --- a/ts/components/CallingLobby.stories.tsx +++ b/ts/components/CallingLobby.stories.tsx @@ -54,7 +54,15 @@ const story = storiesOf('Components/CallingLobby', module); story.add('Default', () => { const props = createProps(); - return ; + return ( + + ); }); story.add('No Camera', () => {