Split secondary header to its own component.

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}>
+        <SecondaryHeader text={collectionInfo.displayName} />
-          <Container>
-            <h2 style={style.headerText}>{collectionInfo.displayName}</h2>
-          </Container>
-        </div>
         <Tabs>
           <Tab
             label={itemsTitle}

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>
+    );
+};