From 0861c6e6b9b59d1073f9387e4b35e3a1e47cac78 Mon Sep 17 00:00:00 2001
From: Richard Ramos <info@richardramos.me>
Date: Sat, 13 Oct 2018 12:16:18 -0400
Subject: [PATCH] Updating code to use material-ui newer typography variants

---
 app/js/components/App.js  | 17 ++++++++++++-----
 app/js/components/Post.js |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/js/components/App.js b/app/js/components/App.js
index eec336f..d60e9ae 100644
--- a/app/js/components/App.js
+++ b/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>;
   }
 }
 
diff --git a/app/js/components/Post.js b/app/js/components/Post.js
index 343837b..0f486c1 100644
--- a/app/js/components/Post.js
+++ b/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}} />