incoming call dialog show avatar + caller name

_locales/en/messages.json

@@ -435,7 +435,7 @@
   "notificationSubtitle": "Notifications - $setting$",
   "surveyTitle": "Take our Session Survey",
   "goToOurSurvey": "Go to our survey",
-  "incomingCall": "Incoming call",
+  "incomingCallFrom": "Incoming call from '$name$'",
   "accept": "Accept",
   "decline": "Decline",
   "endCall": "End call",

ts/components/session/calling/IncomingCallDialog.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import _ from 'underscore';
 import { CallManager } from '../../../session/utils';
 import { getHasIncomingCall, getHasIncomingCallFrom } from '../../../state/selectors/conversations';
+import { Avatar, AvatarSize } from '../../Avatar';
 import { SessionButton, SessionButtonColor } from '../SessionButton';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 
@@ -21,6 +22,10 @@ export const CallWindow = styled.div`
   border: var(--session-border);
 `;
 
+const IncomingCallAvatatContainer = styled.div`
+  padding: 0 0 2rem 0;
+`;
+
 // TODO:
 /**
  * Add mute input, deafen, end call, possibly add person to call
@@ -48,9 +53,19 @@ export const IncomingCallDialog = () => {
     return null;
   }
 
+  const from = incomingCallProps?.profileName || incomingCallProps?.name || incomingCallProps?.id;
+
   if (hasIncomingCall) {
     return (
-      <SessionWrapperModal title={window.i18n('incomingCall')}>
+      <SessionWrapperModal title={window.i18n('incomingCallFrom', from)}>
+        <IncomingCallAvatatContainer>
+          <Avatar
+            size={AvatarSize.XL}
+            avatarPath={incomingCallProps?.avatarPath}
+            name={incomingCallProps?.profileName}
+            pubkey={incomingCallProps?.id}
+          />
+        </IncomingCallAvatatContainer>
         <div className="session-modal__button-group">
           <SessionButton text={window.i18n('decline')} onClick={handleDeclineIncomingCall} />
           <SessionButton