Merge branch 'master' of https://github.com/alDuncanson/marten-application

package-lock.json

@@ -917,6 +917,11 @@
       "integrity": "sha512-FhlMa34NHp9K5MY1Uz8yb+ZvuX0pnvn3jScRSNAb75KHGB8d3rEU6hqMs3Z2vjuytcMfRg6c5CHMc3wtYyD2/A==",
       "optional": true
     },
+    "@types/cookie": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.2.tgz",
+      "integrity": "sha512-aHQA072E10/8iUQsPH7mQU/KUyQBZAGzTVRCUvnSz8mSvbrYsP4xEO2RSA0Pjltolzi0j8+8ixrm//Hr4umPzw=="
+    },
     "@types/form-data": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-2.2.1.tgz",
@@ -936,6 +941,14 @@
         "@types/request": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz",
+      "integrity": "sha512-3wTz66vV+WatOAjMST+hKCmo01KYPFgnsu+QeLcn0FuwPCoymX6aj1a4RvFCdVsfh2m0hfTPhE/zTv4M28ho1Q==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/jss": {
       "version": "9.5.5",
       "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.5.tgz",
@@ -961,6 +974,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.36.tgz",
       "integrity": "sha512-SL6KhfM7PTqiFmbCW3eVNwVBZ+88Mrzbuvn9olPsfv43mbiWaFY+nRcz/TGGku0/lc2FepdMbImdMY1JrQ+zbw=="
     },
+    "@types/object-assign": {
+      "version": "4.0.30",
+      "resolved": "http://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
+      "integrity": "sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI="
+    },
     "@types/prop-types": {
       "version": "15.5.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.5.tgz",
@@ -5661,7 +5679,7 @@
         },
         "core-js": {
           "version": "2.5.5",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
+          "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
           "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs="
         },
         "firebase": {
@@ -12494,6 +12512,26 @@
         "schedule": "^0.4.0"
       }
     },
+    "react-cookie": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.7.tgz",
+      "integrity": "sha512-c4lGOqIPC54kUocE7kbuqZNeIdXtZGzXQMA7BSWhaJ/5tWeoW5fJ7mF/pR+rU5fYDF9kktTHCIbovwSsNYblOg==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.0.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "universal-cookie": "^3.0.7"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.0.tgz",
+          "integrity": "sha512-3IascCRfaEkbmHjJnUxWSspIUE1okLPjGTMVXW8zraUo1t3yg1BadKAxAGILHwgoBzmMnzrgeeaDGBvpuPz6dA==",
+          "requires": {
+            "react-is": "^16.3.2"
+          }
+        }
+      }
+    },
     "react-dev-utils": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.2.tgz",
@@ -12577,6 +12615,11 @@
         "resize-observer-polyfill": "^1.5.0"
       }
     },
+    "react-is": {
+      "version": "16.6.3",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz",
+      "integrity": "sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA=="
+    },
     "react-jss": {
       "version": "8.6.1",
       "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
@@ -14675,6 +14718,17 @@
         "crypto-random-string": "^1.0.0"
       }
     },
+    "universal-cookie": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-3.0.7.tgz",
+      "integrity": "sha512-wfZRbaEzFTDbP64fzTfGDfokB3pWkDNjtsuRAZQWaiuj/Up+3/0AEvN4IhFHPK24iGNtGJ6PNIxv1GQzMSiyMw==",
+      "requires": {
+        "@types/cookie": "^0.3.1",
+        "@types/object-assign": "^4.0.30",
+        "cookie": "^0.3.1",
+        "object-assign": "^4.1.0"
+      }
+    },
     "universal-deep-strict-equal": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/universal-deep-strict-equal/-/universal-deep-strict-equal-1.2.2.tgz",

package.json

@@ -17,6 +17,7 @@
     "material-ui-icons": "^1.0.0-beta.36",
     "moment": "^2.22.2",
     "react": "^16.5.1",
+    "react-cookie": "^3.0.7",
     "react-dom": "^16.5.1",
     "react-image-gallery": "^0.8.12",
     "react-quiz-component": "0.2.0",

public/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128154616-1"></script>
@@ -31,21 +32,20 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-
-   <!--<script>import flamelink from 'flamelink';</script>-->
-
-    <title>React App</title>
+    <title>Marten Tracker</title>
 </head>
+
 <body>
     <noscript>
         You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
     <!-- Hotjar Tracking Code for https://marten-application.netlify.com/ -->
+    <!-- Hotjar Tracking Code for https://marten-tracker.netlify.com/ -->
     <script>
       (function(h,o,t,j,a,r){
           h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
-            h._hjSettings={hjid:1066756,hjsv:6};
+          h._hjSettings={hjid:1119955,hjsv:6};
           a=o.getElementsByTagName('head')[0];
           r=o.createElement('script');r.async=1;
           r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
@@ -53,4 +53,5 @@
       })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
     </script>
 </body>
+
 </html>

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Marten Tracker",
+  "name": "American Marten Tracker",
   "icons": [
     {
       "src": "favicon.ico",

readme.md

@@ -24,5 +24,6 @@ The application allows for users to post marten sightings. They can attach photo
 * Material-UI
 * Google API
 * Netlify
+* Disqus
 * Flamelink CMS
 * EmailJS

src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import Main from './components/Main';
-import './App.css';
+import './css/App.css';
+import { CookiesProvider } from 'react-cookie';
 
 class App extends Component {
     componentDidMount() {
@@ -9,9 +10,11 @@ class App extends Component {
 
     render() {
         return (
+            <CookiesProvider>
                 <div>
                     <Main />
                 </div>
+            </CookiesProvider>
         );
     }
 }

src/components/Main.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { instanceOf } from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@@ -32,7 +32,10 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import Collapse from '@material-ui/core/Collapse';
-import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
+import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import { withCookies, Cookies } from 'react-cookie';
 
 const drawerWidth = 240;
 
@@ -72,23 +75,71 @@ const styles = theme => ({
 });
 
 class ResponsiveDrawer extends React.Component {
-    state = {
+    componentWillMount() {
+        const { cookies } = this.props;
+
+        var newName, newTheme, newChecked;
+
+        if (cookies.get('themeName') === undefined) {
+            newName = 'light'
+            newTheme = createMuiTheme({
+                typography: {
+                    useNextVariants: true,
+                },
+                palette: {
+                    type: 'light'
+                }
+            });
+            newChecked = true;
+
+            cookies.set('themeName', newName, { path: '/' });
+        } else {
+            if (cookies.get('themeName') === 'light') {
+                newName = 'light'
+                newTheme = createMuiTheme({
+                    typography: {
+                        useNextVariants: true,
+                    },
+                    palette: {
+                        type: 'light'
+                    }
+                });
+                newChecked = true;
+            } else {
+                newName = 'dark'
+                newTheme = createMuiTheme({
+                    typography: {
+                        useNextVariants: true,
+                    },
+                    palette: {
+                        type: 'dark'
+                    }
+                });
+                newChecked = false;
+            }
+        }
+
+        this.setState({
             mobileOpen: false,
             key: 'Home',
             open: false,
             open2: false,
-    };
+            theme: newTheme,
+            themeName: newName,
+            themeChecked: newChecked
+        });
+    }
 
     handleDrawerToggle = () => {
         this.setState(state => ({ mobileOpen: !state.mobileOpen }));
     }
 
     handleClick = () => {
-        this.setState(state => ({ open: !state.open }));
+        this.setState(state => ({ open: !state.open, open2: false }));
     }
 
     handleClick2 = () => {
-        this.setState(state => ({ open2: !state.open2 }));
+        this.setState(state => ({ open2: !state.open2, open: false }));
     }
 
     nav = (text) => {
@@ -97,11 +148,50 @@ class ResponsiveDrawer extends React.Component {
         });
     }
 
+    handleChange = name => event => {
+        const { cookies } = this.props;
+
+        this.setState({ [name]: event.target.checked });
+
+        var newTheme, newName;
+
+        if (this.state.themeName === 'light') {
+            newTheme = createMuiTheme({
+                typography: {
+                    useNextVariants: true,
+                },
+                palette: {
+                    type: 'dark'
+                }
+            });
+
+            newName = 'dark';
+        } else {
+            newTheme = createMuiTheme({
+                typography: {
+                    useNextVariants: true,
+                },
+                palette: {
+                    type: 'light'
+                }
+            });
+
+            newName = 'light';
+        }
+
+        this.setState({
+            themeName: newName,
+            theme: newTheme
+        })
+
+        cookies.set('themeName', newName, { path: '/' });
+    };
+
     render() {
-        const { classes, theme } = this.props;
+        const { classes } = this.props;
 
         const drawer = (
-            <div>
+            <Typography component="div">
                 <div className={classes.toolbar} />
                 <Divider />
                 <List>
@@ -174,13 +264,14 @@ class ResponsiveDrawer extends React.Component {
                     </Collapse>
                 </List>
                 <Divider />
-            </div>
+            </Typography>
         );
 
         return (
+            <MuiThemeProvider theme={this.state.theme}>
                 <div className={classes.root}>
                     <CssBaseline />
-                <AppBar position="fixed" className={classes.appBar}>
+                    <AppBar position="fixed" color="primary" className={classes.appBar}>
                         <Toolbar>
                             <IconButton
                                 color="inherit"
@@ -193,6 +284,12 @@ class ResponsiveDrawer extends React.Component {
                             <Typography variant="title" color="inherit" noWrap>
                                 Marten Tracker
                             </Typography>
+                            <Switch
+                                checked={this.state.themeChecked}
+                                onChange={this.handleChange('themeChecked')}
+                                value="themeChecked"
+                                color="default"
+                            />
                         </Toolbar>
                     </AppBar>
                     <nav className={classes.drawer}>
@@ -200,7 +297,7 @@ class ResponsiveDrawer extends React.Component {
                             <Drawer
                                 container={this.props.container}
                                 variant="temporary"
-                            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+                                anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
                                 open={this.state.mobileOpen}
                                 onClose={this.handleDrawerToggle}
                                 classes={{
@@ -230,7 +327,7 @@ class ResponsiveDrawer extends React.Component {
                         {this.state.key === 'Home' && <Home />}
                         {this.state.key === 'Report' && <Report />}
                         {this.state.key === 'Map' && <ViewMap />}
-                    {this.state.key === 'List' && <SightingList />}
+                        {this.state.key === 'List' && <SightingList themeName={this.state.themeName} />}
                         {this.state.key === 'About' && <About />}
                         {this.state.key === 'Contact' && <Contact />}
                         {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
@@ -242,16 +339,16 @@ class ResponsiveDrawer extends React.Component {
                         {this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'} />}
                     </main>
                 </div>
+            </MuiThemeProvider>
         );
     }
 }
 
 ResponsiveDrawer.propTypes = {
     classes: PropTypes.object.isRequired,
-    // Injected by the documentation to work in an iframe.
-    // You won't need it on your project.
     container: PropTypes.object,
     theme: PropTypes.object.isRequired,
+    cookies: instanceOf(Cookies).isRequired,
 };
 
-export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
+export default withStyles(styles, { withTheme: true })(withCookies(ResponsiveDrawer));

src/components/SightingMap.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
 import moment from 'moment';
 import Typography from '@material-ui/core/Typography';
-import firebase from '../firebase.js';
+import firebase from '../utilities/firebase.js';
 
 // Google Maps API Key
 const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
@@ -216,22 +216,22 @@ export class MapContainer extends Component {
 
         switch(type) {
             case 'visual':
-                pinIcon = '/mapicons/marten-icon.png';
+                pinIcon = '/map-icons/marten-icon.png';
                 break;
             case 'roadkill':
-                pinIcon = '/mapicons/tire-icon.png';
+                pinIcon = '/map-icons/tire-icon.png';
                 break;
             case 'viewed_tracks':
-                pinIcon = '/mapicons/paws.png';
+                pinIcon = '/map-icons/paws.png';
                 break;
             case 'trapped':
-                pinIcon = '/mapicons/cage.png';
+                pinIcon = '/map-icons/cage.png';
                 break;
             case 'photo':
-                pinIcon = '/mapicons/photo-icon.png';
+                pinIcon = '/map-icons/photo-icon.png';
                 break;
             case 'other':
-                pinIcon = '/mapicons/other-icon.png';
+                pinIcon = '/map-icons/other-icon.png';
                 break;
             default:
                 break;

src/components/flamelink/FlameLinkCollection.js

@@ -1,5 +1,5 @@
 import React, { Component} from 'react';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
 import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
 
 class FlameLinkCollection extends Component {

src/components/flamelink/FlameLinkCollectionGallery.js

@@ -3,10 +3,10 @@ import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
 import RenderGallery from './RenderGallery';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
 import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent';
 import "react-image-gallery/styles/css/image-gallery.css";
-import '../css/FlameLink.css';
+import '../../css/FlameLink.css';
 
 const styles = theme => ({
     flamelinkItem: {
@@ -16,14 +16,28 @@ const styles = theme => ({
     },
 
     flamelinkGallery: {
-        marginRight: "auto",
-        marginLeft: "auto",
+        marginRight: 'auto',
+        marginLeft: 'auto',
+        backgroundImage: 'url(../images/galleryBackgroundImage.png)',
+        overflow: 'hidden',
+        minHeight: 180,
+        minWidth:  300,
+        width:     'auto',
+        height:    'auto',
     },
 
     flamelinkGalleryContainer: {
         backgroundColor: 'black',
         marginTop: 20,
     },
+    flamelinkGalleryInnerContainer: {
+        maxHeight:   1000,
+        minHeight:   180,
+        height:      'auto',
+        width:       'auto',
+        marginRight: 'auto',
+        marginLeft:  'auto',
+    },
 });
 
 class FlameLinkCollectionGallery extends Component {
@@ -51,7 +65,7 @@ class FlameLinkCollectionGallery extends Component {
             schemaDetails: '',
             schemaContent: '',
             schemaDescription: '',
-        }
+        };
 
         flamelinkApp.schemas.getFields(this.props.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
             .then(result => this.setState({
@@ -111,8 +125,12 @@ class FlameLinkCollectionGallery extends Component {
                     {this.state.schemaDescription}
                 </Typography>
                 <Grid container className={classes.flamelinkGalleryContainer}>
+                    <Grid container className={classes.flamelinkGalleryInnerContainer}>
                         <Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkGallery}>
+                            <div>
                                 <RenderGallery key={Math.random()} />
+                            </div>
+                        </Grid>
                     </Grid>
                 </Grid>
             </Grid>

src/components/flamelink/FlameLinkCollectionGalleryContent.js

@@ -1,6 +1,6 @@
 import { Component } from 'react';
-import flamelinkApp from '../flamelink.js';
-import '../css/FlameLink.css';
+import flamelinkApp from '../../utilities/flamelink.js';
+import '../../css/FlameLink.css';
 
 class FlameLinkCollectionGalleryContent extends Component {
     constructor(props) {

src/components/flamelink/FlameLinkCollectionStructure.js

@@ -2,7 +2,7 @@ import React, { Component} from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
 import FlameLinkImage from './FlameLinkImage';
 import FlameLinkFieldSet from './FlameLinkFieldSet';
 

src/components/flamelink/FlameLinkImage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
-import flamelinkApp from '../flamelink.js';
-import '../css/FlameLink.css';
+import flamelinkApp from '../../utilities/flamelink.js';
+import '../../css/FlameLink.css';
 
 class FlameLinkImage extends Component {
     constructor() {

src/components/flamelink/FlameLinkStructure.js

@@ -2,7 +2,7 @@ import React, { Component} from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
-import flamelinkApp from '../flamelink.js';
+import flamelinkApp from '../../utilities/flamelink.js';
 import FlameLinkImage from './FlameLinkImage';
 import FlameLinkFieldSet from './FlameLinkFieldSet';
 

src/components/flamelink/RenderGallery.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import ImageGallery from 'react-image-gallery';
 import "react-image-gallery/styles/css/image-gallery.css";
-import '../css/FlameLink.css';
+import '../../css/FlameLink.css';
 
 class RenderGallery extends Component {
     constructor() {
@@ -9,9 +9,9 @@ class RenderGallery extends Component {
 
         this.state = {
             showThumbnails: false,
-            showIndex: true,
-            showBullets: true,
             mounted: false,
+            autoPlay: true,
+            slideInterval: 6000,
         }
     }
 
@@ -28,9 +28,9 @@ class RenderGallery extends Component {
             <ImageGallery
                 items={global.galleryImages}
                 showThumbnails={this.state.showThumbnails}
-                showIndex={this.state.showIndex}
-                showBullets={this.state.showBullets}
                 onImageLoad={this._onImageLoad}
+                autoPlay={this.state.autoPlay}
+                slideInterval={this.state.slideInterval}
             />
         );
     }

src/components/forms/ContactForm.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
-import emailjs from '../emailjs.js'
+import emailjs from '../../utilities/emailjs.js'
 import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';

src/components/forms/ReportForm.js

@@ -9,8 +9,8 @@ import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Button from '@material-ui/core/Button';
-import firebase from '../firebase.js';
-import GoogleMap from '../components/ReportMap';
+import firebase from '../../utilities/firebase.js';
+import GoogleMap from './ReportMap';
 import Modal from '@material-ui/core/Modal';
 import Typography from '@material-ui/core/Typography';
 

src/components/list/SightingDetail.js

@@ -2,6 +2,12 @@ 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
@@ -143,6 +149,7 @@ 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>
@@ -152,9 +159,14 @@ class SightingDetail extends Component {
                     <p>{`${this.props.detail.desc}`}</p>
                 </div>
                     <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
+                </Typography>
             </Fragment>
         );
     }
 }
 
-export default SightingDetail;
+SightingDetail.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SightingDetail);

src/components/list/ViewSightings.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import Grid from '@material-ui/core/Grid';
-import firebase from '../firebase.js';
+import firebase from '../../utilities/firebase.js';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -64,6 +64,24 @@ class ViewSightings extends Component {
         clicked: false
     };
 
+    componentDidUpdate(props) {
+        if (this.props.themeName !== props.themeName) {
+            this.setState({
+                selectedSighting: {
+                    id: null,
+                    lat: null,
+                    lng: null,
+                    desc: null,
+                    type: null,
+                    confidence: null,
+                    date: null,
+                    time: null
+                },
+                clicked: false
+            });
+        }
+    }
+
     render() {
         return (
             <Fragment>

src/css/App.css

@@ -20,6 +20,13 @@ body {
     margin: 0 auto;
 }
 
+#disqus_thread a,
+.comments .nav ul li a,
+.comments .nav ul li div a
+{
+    color: #7986cb
+}
+
 .sighting-list {
     height: calc(50vh - 64px);
     overflow-y: scroll;

src/emailjs.js

@@ -1,5 +0,0 @@
-import * as emailjs from 'emailjs-com'
-
-emailjs.init("user_4d5R86dmu6vgeJP4euxSA");
-
-export default emailjs;

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import './css/index.css';
+import App from './App.js';
 import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(<App/>, document.getElementById('root'));

src/pages/About.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
-import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
-import flamelinkApp from '../flamelink.js';
+import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
+import flamelinkApp from '../utilities/flamelink.js';
 
 class About extends Component {
     constructor() {

src/pages/Contact.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ContactForm from '../components/ContactForm.js'
+import ContactForm from '../components/forms/ContactForm.js'
 
 class Contact extends Component {
     componentDidMount() {