From 7815c18deeb492292ae6cfd63f507c5a397e9cd5 Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Thu, 29 Nov 2018 23:58:09 -0500
Subject: [PATCH] Added Typography to SightingDetail

---
 src/components/SightingDetail.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/SightingDetail.js b/src/components/SightingDetail.js
index fb3f6a5..cb6f335 100644
--- a/src/components/SightingDetail.js
+++ b/src/components/SightingDetail.js
@@ -2,13 +2,19 @@ import React, { Component, Fragment } from 'react';
 import Disqus from 'disqus-react';
 import moment from 'moment';
 import SightingDetailMap from './SightingDetailMap';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+const styles = theme => ({
+});
 
 /** 
   * Types of sightings. Label is what is
   * viewed in the application, value is
   * what is stored in the database.
   */
- const sightingTypes = [
+const sightingTypes = [
     {
         value: 'visual',
         label: 'Visual',
@@ -143,18 +149,24 @@ class SightingDetail extends Component {
         return (
             <Fragment>
                 <SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} />
+                <Typography component="div">
                 <div className='sighting-details-content'>
                     <p><b>Type:</b> {this.getType(this.props.detail.type)}</p>
                     <p><b>When:</b> {this.formatDate(this.props.detail.date)}, {this.getTime(this.props.detail.time)}</p>
                     <p><b>Where:</b> {this.props.detail.lat} degrees N, and {this.props.detail.lng} degrees E</p>
                     <p><b>I am confident of my sighting:</b> {this.getConfidence(this.props.detail.confidence)}</p>
-                    <hr/>
+                    <hr />
                     <p>{`${this.props.detail.desc}`}</p>
                 </div>
-                <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
+                    <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
+                </Typography>
             </Fragment>
         );
     }
 }
 
-export default SightingDetail;
\ No newline at end of file
+SightingDetail.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SightingDetail);
\ No newline at end of file