From 4f064e546eb06e16d216d16f3f4111b41b7f38e4 Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Fri, 26 Oct 2018 11:04:44 -0400
Subject: [PATCH] added styles and sighting details

---
 src/App.css                      |  4 ++++
 src/components/SightingDetail.js | 10 +++++++++-
 src/components/ViewSightings.js  | 15 ++++++++-------
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9494272..439e3fd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,4 +13,8 @@ body {
     .report-google-map-container > div {
         width: calc(100% - 50% - 120px) !important;
     }
+}
+
+#disqus_thread {
+    width: 99% !important;
 }
\ No newline at end of file
diff --git a/src/components/SightingDetail.js b/src/components/SightingDetail.js
index f0e47ef..47dee0b 100644
--- a/src/components/SightingDetail.js
+++ b/src/components/SightingDetail.js
@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import Disqus from 'disqus-react';
+import Divider from '@material-ui/core/Divider';
 
 class SightingDetail extends Component {
 
@@ -13,7 +14,14 @@ class SightingDetail extends Component {
 
         return (
             <Fragment>
-                <p>{this.props.detail.type}</p>
+                <h1>{`Sighting ${this.props.detail.id}`}</h1>
+                <Divider/>
+                <p>{`Type: ${this.props.detail.type}`}</p>
+                <p>{`Confidence: ${this.props.detail.confidence}`}</p>
+                <p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p>
+                <p>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>
+                <p>{`${this.props.detail.desc}`}</p>
+
                 <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
             </Fragment>
         );
diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js
index 57a81f3..0da8e16 100644
--- a/src/components/ViewSightings.js
+++ b/src/components/ViewSightings.js
@@ -75,13 +75,14 @@ class ViewSightings extends Component {
                             <List>
                             { 
                                 this.state.sightings.map((sighting) => {
-                                return (
-                                    <ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
-                                        <ListItemIcon><HomeIcon/></ListItemIcon>
-                                        <ListItemText primary={`Type: ${sighting.type}`}/>
-                                    </ListItem>
-                                )
-                            })}
+                                    return (
+                                        <ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
+                                            <ListItemIcon><HomeIcon/></ListItemIcon>
+                                            <ListItemText primary={`Type: ${sighting.type}`}/>
+                                        </ListItem>
+                                    )
+                                })
+                            }
                             </List>
                         </Fragment>
                     </Grid>