Restyle CallLobby and ringing screens

stylesheets/_modules.scss

@@ -3649,27 +3649,44 @@ button.module-image__border-overlay:focus {
 
   &__camera-is-off {
     @include calling-text-shadow;
-    @include font-body-1;
+    align-items: center;
     color: $color-white;
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    flex-grow: 1;
+    font-size: 15px;
+    line-height: 20px;
+    margin-block-start: 15px;
+    margin-block-end: 15px;
+    justify-content: center;
+    text-align: center;
+    transition: opacity 100ms ease-out;
+    user-select: none;
     z-index: $z-index-base;
-    margin-top: 10px;
-
-    // To match the icon height in ::before
-    line-height: 24px;
 
     &::before {
       content: '';
       display: block;
-      background-image: url('../images/icons/v3/video/video-slash-fill-white.svg');
-      background-size: 100%;
-      -webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40);
-      height: 20px;
-      margin-inline-end: 10px;
-      width: 20px;
+      background-color: $color-white;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: 100%;
+      -webkit-mask-image: url('../images/icons/v3/video/video-slash-light.svg');
+      height: 24px;
+      width: 24px;
+      margin-block-end: 12px;
     }
   }
+
+  &__camera-is-off-spacer {
+    flex-basis: 120px;
+  }
+}
+
+.module-calling__spacer {
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 1;
 }
 
 @keyframes module-ongoing-call__controls--fade-in {
@@ -4014,7 +4031,10 @@ button.module-image__border-overlay:focus {
       overflow: hidden;
       position: relative;
       width: $local-preview-width;
+
+      &--active {
         box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
+      }
 
       &__video {
         // The background-color is seen while the video loads.

stylesheets/components/CallingLobby.scss

@@ -5,35 +5,26 @@
   &__local-preview {
     position: absolute;
     z-index: $z-index-negative;
+    top: 28px;
 
     &--camera-is-on {
       @include lonely-local-video-preview;
-      top: 15px;
-      height: 100%;
-      max-height: calc(100% - 127px);
       width: auto;
+      height: 100%;
+      max-height: calc(100% - 140px);
       opacity: 0.6;
     }
 
     &--camera-is-off {
+      @include lonely-local-video-preview;
+      width: auto;
       height: 100%;
-      width: 100%;
+      max-height: calc(100% - 140px);
+      aspect-ratio: 4 / 3;
     }
   }
 
   &__camera-is-off {
-    @include calling-text-shadow;
-    @include font-subtitle;
-    align-items: center;
-    color: $color-white;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: center;
-    text-align: center;
-    transition: opacity 100ms ease-out;
-    user-select: none;
-
     &--visible {
       opacity: 1;
     }
@@ -41,16 +32,9 @@
     &--invisible {
       opacity: 0;
     }
+  }
+}
 
-    &::before {
-      content: '';
-      display: block;
-      background-image: url('../images/icons/v3/video/video-slash-fill-light-white.svg');
-      background-size: 100%;
-      -webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40);
-      height: 20px;
-      margin-bottom: 8px;
-      width: 20px;
-    }
-  }
+.module-CallingLobby__CallControls-spacer {
+  flex-basis: 70px;
 }

stylesheets/components/CallingPreCallInfo.scss

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-CallingPreCallInfo {
-  margin-block-start: 43px;
+  margin-block-start: 15px;
   text-align: center;
   user-select: none;
 
@@ -28,3 +28,8 @@
     margin-top: 8px;
   }
 }
+
+.module-CallingPreCallInfo-spacer {
+  flex-basis: 64px;
+  margin-block-start: 25px;
+}

ts/components/Avatar.tsx

@@ -39,9 +39,11 @@ export enum AvatarSize {
   TWENTY_EIGHT = 28,
   THIRTY_TWO = 32,
   THIRTY_SIX = 36,
+  FORTY = 40,
   FORTY_EIGHT = 48,
   FIFTY_TWO = 52,
   EIGHTY = 80,
+  NINETY_SIX = 96,
 }
 
 type BadgePlacementType = { bottom: number; right: number };

ts/components/CallScreen.tsx

@@ -347,23 +347,7 @@ export function CallScreen({
           <video ref={localVideoRef} autoPlay />
         ) : (
           <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
-            <Avatar
-              acceptedMessageRequest
-              avatarPath={me.avatarPath}
-              badge={undefined}
-              color={me.color || AvatarColors[0]}
-              noteToSelf={false}
-              conversationType="direct"
-              i18n={i18n}
-              isMe
-              phoneNumber={me.phoneNumber}
-              profileName={me.profileName}
-              title={me.title}
-              // `sharedGroupNames` makes no sense for yourself, but `<Avatar>` needs it
-              //   to determine blurring.
-              sharedGroupNames={[]}
-              size={AvatarSize.EIGHTY}
-            />
+            <div className="module-calling__spacer module-calling__camera-is-off-spacer" />
             <div className="module-calling__camera-is-off">
               {i18n('icu:calling__your-video-is-off')}
             </div>
@@ -398,7 +382,7 @@ export function CallScreen({
           title={me.title}
           // See comment above about `sharedGroupNames`.
           sharedGroupNames={[]}
-          size={AvatarSize.EIGHTY}
+          size={AvatarSize.FORTY}
         />
       </CallBackgroundBlur>
     );
@@ -520,6 +504,8 @@ export function CallScreen({
         />
       </div>
       {isRinging && (
+        <>
+          <div className="module-CallingPreCallInfo-spacer " />
           <CallingPreCallInfo
             conversation={conversation}
             groupMembers={groupMembers}
@@ -527,6 +513,7 @@ export function CallScreen({
             me={me}
             ringMode={RingMode.IsRinging}
           />
+        </>
       )}
       {remoteParticipantsElement}
       {lonelyInCallNode}
@@ -594,7 +581,14 @@ export function CallScreen({
             </Button>
           </div>
         </div>
-        <div className="module-ongoing-call__footer__local-preview">
+        <div
+          className={classNames(
+            'module-ongoing-call__footer__local-preview',
+            `module-ongoing-call__footer__local-preview--${
+              localPreviewNode ? 'active' : 'inactive'
+            }`
+          )}
+        >
           {localPreviewNode}
           <CallingAudioIndicator
             hasAudio={hasLocalAudio}

ts/components/CallingLobby.tsx

@@ -255,6 +255,7 @@ export function CallingLobby({
           onCancel={onCallCanceled}
         />
 
+        <div className="module-calling__spacer module-CallingPreCallInfo-spacer" />
         <CallingPreCallInfo
           conversation={conversation}
           groupMembers={groupMembers}
@@ -267,7 +268,7 @@ export function CallingLobby({
 
         <div
           className={classNames(
-            'module-CallingLobby__camera-is-off',
+            'module-calling__camera-is-off module-CallingLobby__camera-is-off',
             `module-CallingLobby__camera-is-off--${
               shouldShowLocalVideo ? 'invisible' : 'visible'
             }`
@@ -276,6 +277,8 @@ export function CallingLobby({
           {i18n('icu:calling__your-video-is-off')}
         </div>
 
+        <div className="module-calling__spacer module-CallingLobby__CallControls-spacer" />
+
         <div className="CallControls">
           <div className="CallControls__InfoDisplay">
             <div className="CallControls__CallTitle">{conversation.title}</div>

ts/components/CallingPreCallInfo.tsx

@@ -184,7 +184,7 @@ export function CallingPreCallInfo({
         phoneNumber={conversation.phoneNumber}
         profileName={conversation.profileName}
         sharedGroupNames={conversation.sharedGroupNames}
-        size={AvatarSize.EIGHTY}
+        size={AvatarSize.NINETY_SIX}
         title={conversation.title}
         unblurredAvatarPath={conversation.unblurredAvatarPath}
         i18n={i18n}