Prettify the journals page.

src/Journals/JournalsList.tsx

@@ -1,8 +1,16 @@
 import * as React from 'react';
 import { History } from 'history';
 
+import { Link } from 'react-router-dom';
+
+import IconButton from '@material-ui/core/IconButton';
+import IconAdd from '@material-ui/icons/Add';
+
 import { List, ListItem } from '../widgets/List';
 
+import AppBarOverride from '../widgets/AppBarOverride';
+import Container from '../widgets/Container';
+
 import * as EteSync from '../api/EteSync';
 
 import { routeResolver } from '../App';
@@ -55,22 +63,33 @@ class JournalsList extends React.PureComponent {
       });
 
     return (
-      <List>
+      <Container>
-        <ListItem
+        <AppBarOverride title="Journals">
-          primaryText="Address Books"
+          <IconButton
-          nestedItems={journalMap.ADDRESS_BOOK}
+            component={Link}
-        />
+            title="New"
-
+            {...{to: routeResolver.getRoute('journals.new')}}
-        <ListItem
+          >
-          primaryText="Calendars"
+            <IconAdd />
-          nestedItems={journalMap.CALENDAR}
+          </IconButton>
-        />
+        </AppBarOverride>
-
+        <List>
-        <ListItem
+          <ListItem
-          primaryText="Tasks"
+            primaryText="Address Books"
-          nestedItems={journalMap.TASKS}
+            nestedItems={journalMap.ADDRESS_BOOK}
-        />
+          />
-      </List>
+
+          <ListItem
+            primaryText="Calendars"
+            nestedItems={journalMap.CALENDAR}
+          />
+
+          <ListItem
+            primaryText="Tasks"
+            nestedItems={journalMap.TASKS}
+          />
+        </List>
+      </Container>
     );
   }
 

src/Journals/index.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
 import { Location, History } from 'history';
 import { Route, Switch } from 'react-router';
-import { Link } from 'react-router-dom';
-
-import IconButton from '@material-ui/core/IconButton';
-import IconAdd from '@material-ui/icons/Add';
 
 import Journal from './Journal';
 import JournalEdit from './JournalEdit';
 import JournalsList from './JournalsList';
 
-import AppBarOverride from '../widgets/AppBarOverride';
 import { routeResolver } from '../App';
 
 import { store, JournalsData, UserInfoData, CredentialsData } from '../store';
@@ -44,15 +39,6 @@ class Journals extends React.PureComponent {
           exact={true}
           render={({ history }) => (
             <>
-              <AppBarOverride title="Journals">
-                <IconButton
-                  component={Link}
-                  title="New"
-                  {...{to: routeResolver.getRoute('journals.new')}}
-                >
-                  <IconAdd />
-                </IconButton>
-              </AppBarOverride>
               <JournalsList
                 userInfo={this.props.userInfo}
                 etesync={this.props.etesync}