Use the new MUI-like List API.

We had to change away from MUI because the list efficiency was abysmal.
Everything is an order of magnitude faster now.

src/AddressBook.tsx

@@ -63,16 +63,13 @@ class AddressBook extends React.PureComponent {
       return (
         <ListItem
           key={uid}
-          onClick={(e: any) => {
+          leftIcon={
-            e.preventDefault();
+            <Avatar style={{backgroundColor: getContactColor(entry)}}>
-            this.props.onItemClick(entry);
+              {name[0].toUpperCase()}
-          }}
+            </Avatar>}
-        >
+          primaryText={name}
-        <Avatar style={{backgroundColor: getContactColor(entry)}}>
+          onClick={(e: any) => this.props.onItemClick(entry)}
-          {name[0].toUpperCase()}
+        />
-        </Avatar>
-        {name}
-        </ListItem>
       );
     });
 

src/Avatar.tsx

@@ -15,7 +15,6 @@ export const Avatar = pure((props: { children: React.ReactNode[] | React.ReactNo
         borderRadius: '50%',
         height: size,
         width: size,
-        marginRight: 15,
         ...props.style,
       }}
     >

src/Contact.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import * as moment from 'moment';
 
-import { List, ListItem } from 'material-ui/List';
+import { List, ListItem, ListDivider as Divider } from './List';
-import Divider from 'material-ui/Divider';
 import IconHome from 'material-ui/svg-icons/action/home';
 import IconDate from 'material-ui/svg-icons/action/date-range';
 import CommunicationCall from 'material-ui/svg-icons/communication/call';
@@ -150,6 +149,7 @@ class Contact extends React.PureComponent {
             <span style={{fontSize: '90%'}}>{lastModified}</span>
           )}
         </PimItemHeader>
+        <div style={{padding: 8}} />
         {lists.map((list, idx) => (
           <React.Fragment key={idx}>
             {listIfNotEmpty(list)}

src/JournalEntries.tsx

@@ -1,7 +1,7 @@
 import * as Immutable from 'immutable';
 
 import * as React from 'react';
-import { List, ListItem } from 'material-ui/List';
+import { List, ListItem } from './List';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import IconAdd from 'material-ui/svg-icons/content/add';

src/SideMenu.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
-import { List, ListItem } from 'material-ui/List';
+import { List, ListItem, ListSubheader, ListDivider } from './List';
-import Subheader from 'material-ui/Subheader';
-import Divider from 'material-ui/Divider';
 import ActionCode from 'material-ui/svg-icons/action/code';
 import ActionHome from 'material-ui/svg-icons/action/home';
 import ActionBugReport from 'material-ui/svg-icons/action/bug-report';
@@ -52,8 +50,8 @@ class SideMenu extends React.PureComponent {
     if (this.props.etesync) {
       const journals = (this.props.journals && this.props.journals.value) && (
         <React.Fragment>
-          <Divider />
+          <ListDivider />
-          <Subheader>Journals</Subheader>
+          <ListSubheader>Journals</ListSubheader>
           <SideMenuJournals
             etesync={this.props.etesync}
             journals={this.props.journals.value}
@@ -91,8 +89,8 @@ class SideMenu extends React.PureComponent {
             }}
           />
           {loggedInItems}
-          <Divider />
+          <ListDivider />
-          <Subheader>External Links</Subheader>
+          <ListSubheader>External Links</ListSubheader>
           <ListItem primaryText="Website" leftIcon={<ActionHome />} href={C.homePage} />
           <ListItem primaryText="FAQ" leftIcon={<ActionQuestionAnswer />} href={C.faq} />
           <ListItem primaryText="Source Code" leftIcon={<ActionCode />} href={C.sourceCode} />

src/SideMenuJournals.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { ListItem } from 'material-ui/List';
+import { ListItem } from './List';
 
 import * as EteSync from './api/EteSync';