Restyle CallLobby and ringing screens

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,13 +504,16 @@ export function CallScreen({
         />
       </div>
       {isRinging && (
-        <CallingPreCallInfo
-          conversation={conversation}
-          groupMembers={groupMembers}
-          i18n={i18n}
-          me={me}
-          ringMode={RingMode.IsRinging}
-        />
+        <>
+          <div className="module-CallingPreCallInfo-spacer " />
+          <CallingPreCallInfo
+            conversation={conversation}
+            groupMembers={groupMembers}
+            i18n={i18n}
+            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}