Contact: show a contact's photo if available.

src/components/Contact.tsx

@@ -15,7 +15,7 @@ import CopyIcon from '../icons/Copy';
 import PimItemHeader from './PimItemHeader';
 
 import { ContactType } from '../pim-types';
-import { IconButton } from '@material-ui/core';
+import { IconButton, Avatar } from '@material-ui/core';
 
 class Contact extends React.PureComponent {
   public props: {
@@ -162,9 +162,11 @@ class Contact extends React.PureComponent {
       }
     }
 
+    const contactImageSrc = contact.comp.getFirstProperty('photo')?.getFirstValue();
+
     return (
       <div>
-        <PimItemHeader text={name}>
+        <PimItemHeader text={name} rightItem={contactImageSrc && (<Avatar style={{ width: '3em', height: '3em' }} src={contactImageSrc} />)}>
           {lastModified && (
             <span style={{ fontSize: '90%' }}>{lastModified}</span>
           )}

src/components/PimItemHeader.tsx

@@ -6,7 +6,7 @@ import Color from 'color';
 
 import { Theme, withTheme } from '@material-ui/core/styles';
 
-export default withTheme((props: {text: string, backgroundColor?: string, children?: any, theme: Theme}) => {
+export default withTheme((props: {text: string, backgroundColor?: string, children?: any, rightItem?: React.ReactNode, theme: Theme}) => {
   const backgroundColor = props.backgroundColor ?? props.theme.palette.secondary.main;
   const foregroundColor = props.theme.palette.getContrastText(Color(backgroundColor).rgb().string());
   const style = {
@@ -14,6 +14,8 @@ export default withTheme((props: {text: string, backgroundColor?: string, childr
       backgroundColor,
       color: foregroundColor,
       padding: 15,
+      display: 'flex',
+      justifyContent: 'space-between',
     },
     headerText: {
       marginTop: 10,
@@ -23,8 +25,11 @@ export default withTheme((props: {text: string, backgroundColor?: string, childr
 
   return (
     <div style={style.header}>
-      <h2 style={style.headerText}>{props.text}</h2>
-      {props.children}
+      <div>
+        <h2 style={style.headerText}>{props.text}</h2>
+        {props.children}
+      </div>
+      {props.rightItem}
     </div>
   );
 });