From 1e752ae022ae89d52deabb2a3bf1b01c20c43f84 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Fri, 8 Dec 2017 18:16:28 +0000
Subject: [PATCH] Improve the look of events and contacts.

---
 src/Contact.tsx       |  4 +++-
 src/Event.tsx         | 27 ++++++++++++++++++++-------
 src/PimItemHeader.tsx | 24 ++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 src/PimItemHeader.tsx

diff --git a/src/Contact.tsx b/src/Contact.tsx
index b726697..4cb1a87 100644
--- a/src/Contact.tsx
+++ b/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)}
diff --git a/src/Event.tsx b/src/Event.tsx
index 60a4f24..8abc95e 100644
--- a/src/Event.tsx
+++ b/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>
     );
   }
 }
diff --git a/src/PimItemHeader.tsx b/src/PimItemHeader.tsx
new file mode 100644
index 0000000..544883a
--- /dev/null
+++ b/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>
+    );
+};