From bfd5ba5d2759783779a0b8f387e52cd0c3040275 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Fri, 8 Dec 2017 17:42:47 +0000
Subject: [PATCH] Split secondary header to its own component.

---
 src/Journal.tsx         | 22 +++-------------------
 src/SecondaryHeader.tsx | 23 +++++++++++++++++++++++
 2 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 src/SecondaryHeader.tsx

diff --git a/src/Journal.tsx b/src/Journal.tsx
index d6e78f3..adb7d9d 100644
--- a/src/Journal.tsx
+++ b/src/Journal.tsx
@@ -5,6 +5,8 @@ import * as EteSync from './api/EteSync';
 
 import Container from './Container';
 
+import SecondaryHeader from './SecondaryHeader';
+
 import JournalEntries from './JournalEntries';
 import JournalAddressBook from './JournalAddressBook';
 import JournalCalendar from './JournalCalendar';
@@ -12,8 +14,6 @@ import LoadingIndicator from './LoadingIndicator';
 
 import { syncEntriesToItemMap, syncEntriesToCalendarItemMap } from './journal-processors';
 
-import { getPalette } from './App';
-
 import { JournalsData, EntriesType, CredentialsData } from './store';
 
 interface PropsType {
@@ -76,25 +76,9 @@ class Journal extends React.Component {
       itemsTitle = 'Items';
     }
 
-    const style = {
-      header: {
-        backgroundColor: getPalette('primary1Color'),
-        color: getPalette('alternateTextColor'),
-        padding: 15,
-        textAlign: 'center',
-      },
-      headerText: {
-        margin: 0,
-      },
-    };
-
     return (
       <React.Fragment>
-        <div style={style.header}>
-          <Container>
-            <h2 style={style.headerText}>{collectionInfo.displayName}</h2>
-          </Container>
-        </div>
+        <SecondaryHeader text={collectionInfo.displayName} />
         <Tabs>
           <Tab
             label={itemsTitle}
diff --git a/src/SecondaryHeader.tsx b/src/SecondaryHeader.tsx
new file mode 100644
index 0000000..b4ac7b2
--- /dev/null
+++ b/src/SecondaryHeader.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { getPalette } from './App';
+
+export default (props: {text: string}) => {
+    const style = {
+      header: {
+        backgroundColor: getPalette('primary1Color'),
+        color: getPalette('alternateTextColor'),
+        padding: 15,
+        textAlign: 'center',
+      },
+      headerText: {
+        margin: 0,
+      },
+    };
+
+    return (
+      <div style={style.header}>
+        <h2 style={style.headerText}>{props.text}</h2>
+      </div>
+    );
+};