From 63a1b0286be3204d3f0fead23affcfd812a6a4e7 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Fri, 8 Dec 2017 16:55:13 +0000
Subject: [PATCH] Improve the journal's look.

---
 src/Journal.tsx         | 53 ++++++++++++++++++++++++++++++-----------
 src/JournalCalendar.tsx |  9 +++----
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/Journal.tsx b/src/Journal.tsx
index cc9de60..d6e78f3 100644
--- a/src/Journal.tsx
+++ b/src/Journal.tsx
@@ -3,6 +3,8 @@ import { Tabs, Tab } from 'material-ui/Tabs';
 
 import * as EteSync from './api/EteSync';
 
+import Container from './Container';
+
 import JournalEntries from './JournalEntries';
 import JournalAddressBook from './JournalAddressBook';
 import JournalCalendar from './JournalCalendar';
@@ -10,6 +12,8 @@ import LoadingIndicator from './LoadingIndicator';
 
 import { syncEntriesToItemMap, syncEntriesToCalendarItemMap } from './journal-processors';
 
+import { getPalette } from './App';
+
 import { JournalsData, EntriesType, CredentialsData } from './store';
 
 interface PropsType {
@@ -72,21 +76,42 @@ class Journal extends React.Component {
       itemsTitle = 'Items';
     }
 
+    const style = {
+      header: {
+        backgroundColor: getPalette('primary1Color'),
+        color: getPalette('alternateTextColor'),
+        padding: 15,
+        textAlign: 'center',
+      },
+      headerText: {
+        margin: 0,
+      },
+    };
+
     return (
-      <Tabs>
-        <Tab
-          label={itemsTitle}
-        >
-            <h2>{collectionInfo.displayName}</h2>
-            {itemsView}
-        </Tab>
-        <Tab
-          label="Journal Entries"
-        >
-            <h2>{collectionInfo.displayName}</h2>
-            <JournalEntries journal={journal} entries={syncEntries} />;
-        </Tab>
-      </Tabs>
+      <React.Fragment>
+        <div style={style.header}>
+          <Container>
+            <h2 style={style.headerText}>{collectionInfo.displayName}</h2>
+          </Container>
+        </div>
+        <Tabs>
+          <Tab
+            label={itemsTitle}
+          >
+            <Container>
+              {itemsView}
+            </Container>
+          </Tab>
+          <Tab
+            label="Journal Entries"
+          >
+            <Container>
+              <JournalEntries journal={journal} entries={syncEntries} />;
+            </Container>
+          </Tab>
+        </Tabs>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/JournalCalendar.tsx b/src/JournalCalendar.tsx
index c5cd0d7..2f35f4a 100644
--- a/src/JournalCalendar.tsx
+++ b/src/JournalCalendar.tsx
@@ -48,12 +48,9 @@ class JournalCalendar extends React.Component {
         <Route
           path={routeResolver.getRoute('journals._id.items._id')}
           exact={true}
-          render={({match}) => {
-
-            return (
-              <Event event={items.get(match.params.itemUid)} />
-            );
-          }}
+          render={({match}) => (
+            <Event event={items.get(match.params.itemUid)} />
+          )}
         />
       </Switch>
     );