Update call lobby UI to match new designs

ts/components/CallingHeader.tsx

@@ -8,11 +8,11 @@ import { Tooltip } from './Tooltip';
 import { Theme } from '../util/theme';
 
 export type PropsType = {
-  canPip?: boolean;
   i18n: LocalizerType;
   isInSpeakerView?: boolean;
   isGroupCall?: boolean;
   message?: string;
+  onCancel?: () => void;
   participantCount: number;
   showParticipantsList: boolean;
   title?: string;
@@ -23,11 +23,11 @@ export type PropsType = {
 };
 
 export const CallingHeader = ({
-  canPip = false,
   i18n,
   isInSpeakerView,
   isGroupCall = false,
   message,
+  onCancel,
   participantCount,
   showParticipantsList,
   title,
@@ -44,7 +44,7 @@ export const CallingHeader = ({
       <div className="module-ongoing-call__header-message">{message}</div>
     ) : null}
     <div className="module-calling-tools">
-      {isGroupCall ? (
+      {participantCount ? (
         <div className="module-calling-tools__button">
           <Tooltip
             content={i18n('calling__participants', [String(participantCount)])}
@@ -111,7 +111,7 @@ export const CallingHeader = ({
           </Tooltip>
         </div>
       )}
-      {canPip && (
+      {togglePip && (
         <div className="module-calling-tools__button">
           <Tooltip content={i18n('calling__pip--on')} theme={Theme.Dark}>
             <button
@@ -123,6 +123,18 @@ export const CallingHeader = ({
           </Tooltip>
         </div>
       )}
+      {onCancel && (
+        <div className="module-calling-tools__button">
+          <Tooltip content={i18n('cancel')} theme={Theme.Dark}>
+            <button
+              aria-label={i18n('cancel')}
+              className="module-calling-button__cancel"
+              onClick={onCancel}
+              type="button"
+            />
+          </Tooltip>
+        </div>
+      )}
     </div>
   </div>
 );