Improve the look of events and contacts.

src/Contact.tsx

@@ -6,6 +6,8 @@ import CommunicationChatBubble from 'material-ui/svg-icons/communication/chat-bu
 import CommunicationEmail from 'material-ui/svg-icons/communication/email';
 import { indigo500 } from 'material-ui/styles/colors';
 
+import PimItemHeader from './PimItemHeader';
+
 import { ContactType } from './pim-types';
 
 class Contact extends React.Component {
@@ -106,7 +108,7 @@ class Contact extends React.Component {
 
     return (
       <div>
-        <h3>{name}</h3>
+        <PimItemHeader text={name} />
         {lists.map((list, idx) => (
           <React.Fragment key={idx}>
             {listIfNotEmpty(list)}

src/Event.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as moment from 'moment';
 
+import PimItemHeader from './PimItemHeader';
+
 import * as ICAL from 'ical.js';
 
 import { EventType } from './pim-types';
@@ -43,14 +45,25 @@ class Event extends React.Component {
       throw Error('Event should be defined!');
     }
 
+    const style = {
+      content: {
+        padding: 15,
+      },
+    };
+
     return (
-      <div>
-        <h2>{this.props.event.summary}</h2>
-        <div>{formatDateRange(this.props.event.startDate, this.props.event.endDate)}</div>
-        <div><u>{this.props.event.location}</u></div>
-        <div>{this.props.event.description}</div>
-        <div>Attendees: {this.props.event.attendees.map((x) => (x.getFirstValue())).join(', ')}</div>
-      </div>
+      <React.Fragment>
+        <PimItemHeader text={this.props.event.summary}>
+          <div>{formatDateRange(this.props.event.startDate, this.props.event.endDate)}</div>
+          <br/>
+          <div><u>{this.props.event.location}</u></div>
+        </PimItemHeader>
+        <div style={style.content}>
+          <div>{this.props.event.description}</div>
+          {(this.props.event.attendees.length > 0) && (
+            <div>Attendees: {this.props.event.attendees.map((x) => (x.getFirstValue())).join(', ')}</div>)}
+        </div>
+      </React.Fragment>
     );
   }
 }

src/PimItemHeader.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { getPalette } from './App';
+
+export default (props: {text: string, children?: any}) => {
+    const style = {
+      header: {
+        backgroundColor: getPalette('accent1Color'),
+        color: getPalette('alternateTextColor'),
+        padding: 15,
+      },
+      headerText: {
+        marginTop: 10,
+        marginBottom: 10,
+      },
+    };
+
+    return (
+      <div style={style.header}>
+        <h2 style={style.headerText}>{props.text}</h2>
+        {props.children}
+      </div>
+    );
+};