Updating code to use material-ui newer typography variants

app/js/components/App.js

@@ -1,12 +1,20 @@
-import React, {Component, Fragment} from 'react';
+import React, {Component} from 'react';
 import Create from './Create';
 import Header from './Header';
 import Post from './Post';
 import _ from 'lodash';
+import {MuiThemeProvider, createMuiTheme} from '@material-ui/core/styles';
 
 import EmbarkJS from 'Embark/EmbarkJS';
 import DReddit from 'Embark/contracts/DReddit';
 
+const theme = createMuiTheme({
+  typography: {
+    useNextVariants: true,
+    suppressDeprecationWarnings: true
+  }
+});
+
 class App extends Component {
 
   constructor(props) {
@@ -22,7 +30,7 @@ class App extends Component {
   }
 
   componentDidMount() {
-    // TODO: Invoke the next function as soon as Embark is ready
+    // TODO: Invoke this._loadPosts() function as soon as Embark is ready
   }
 
   _toggleForm = () => {
@@ -79,12 +87,11 @@ class App extends Component {
       orderedList = _.orderBy(list, 'creationDate', sortOrder);
     }
 
-    return (<Fragment>
+    return <MuiThemeProvider theme={theme}>
         <Header toggleForm={this._toggleForm} sortOrder={this._setSortOrder} search={this._search} />
         { displayForm && <Create afterPublish={this._loadPosts} /> }
         { orderedList.map((record) => <Post key={record.id} {...record} filterBy={filterBy} />) }
-        </Fragment>
-    );
+        </MuiThemeProvider>;
   }
 }
 

app/js/components/Post.js

@@ -133,7 +133,7 @@ class Post extends Component {
                 </IconButton>
               } />
             <CardContent>
-                <Typography variant="title"  className={classes.title}  gutterBottom>
+                <Typography variant="h6"  className={classes.title}  gutterBottom>
                 {title}
                 </Typography>
                 <Typography component="div" dangerouslySetInnerHTML={{__html: mdText}} />