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,14 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128154616-1"></script>
     <script>
-    window.dataLayer = window.dataLayer || [];
+        window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+        function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
+        gtag('js', new Date());
 
-    gtag('config', 'UA-128154616-1');
+        gtag('config', 'UA-128154616-1');
     </script>
 
 
@@ -31,26 +32,26 @@
       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`.
     -->
+    <title>Marten Tracker</title>
+</head>
 
-   <!--<script>import flamelink from 'flamelink';</script>-->
+<body>
-
-    <title>React App</title>
-  </head>
-  <body>
     <noscript>
-      You need to enable JavaScript to run this app.
+        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){
+      (function(h,o,t,j,a,r){
-            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+          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];
+          a=o.getElementsByTagName('head')[0];
-            r=o.createElement('script');r.async=1;
+          r=o.createElement('script');r.async=1;
-            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+          r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
-            a.appendChild(r);
+          a.appendChild(r);
-        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
     </script>
-  </body>
+</body>
+
 </html>

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+  "short_name": "Marten Tracker",
-  "name": "Create React App Sample",
+  "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 (
-        <div>
+            <CookiesProvider>
-            <Main/>
+                <div>
-        </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() {
-        mobileOpen: false,
+        const { cookies } = this.props;
-        key: 'Home',
+
-        open: false,
+        var newName, newTheme, newChecked;
-        open2: false,
+
-    };
+        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,84 +264,91 @@ class ResponsiveDrawer extends React.Component {
                     </Collapse>
                 </List>
                 <Divider />
-            </div>
+            </Typography>
         );
 
         return (
-            <div className={classes.root}>
+            <MuiThemeProvider theme={this.state.theme}>
-                <CssBaseline />
+                <div className={classes.root}>
-                <AppBar position="fixed" className={classes.appBar}>
+                    <CssBaseline />
-                    <Toolbar>
+                    <AppBar position="fixed" color="primary" className={classes.appBar}>
-                        <IconButton
+                        <Toolbar>
-                            color="inherit"
+                            <IconButton
-                            aria-label="Open drawer"
+                                color="inherit"
-                            onClick={this.handleDrawerToggle}
+                                aria-label="Open drawer"
-                            className={classes.menuButton}
+                                onClick={this.handleDrawerToggle}
-                        >
+                                className={classes.menuButton}
-                            <MenuIcon />
+                            >
-                        </IconButton>
+                                <MenuIcon />
-                        <Typography variant="title" color="inherit" noWrap>
+                            </IconButton>
-                            Marten Tracker
+                            <Typography variant="title" color="inherit" noWrap>
-                        </Typography>
+                                Marten Tracker
-                    </Toolbar>
+                            </Typography>
-                </AppBar>
+                            <Switch
-                <nav className={classes.drawer}>
+                                checked={this.state.themeChecked}
-                    <Hidden smUp implementation="css">
+                                onChange={this.handleChange('themeChecked')}
-                        <Drawer
+                                value="themeChecked"
-                            container={this.props.container}
+                                color="default"
-                            variant="temporary"
+                            />
-                            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+                        </Toolbar>
-                            open={this.state.mobileOpen}
+                    </AppBar>
-                            onClose={this.handleDrawerToggle}
+                    <nav className={classes.drawer}>
-                            classes={{
+                        <Hidden smUp implementation="css">
-                                paper: classes.drawerPaper,
+                            <Drawer
-                            }}
+                                container={this.props.container}
-                            ModalProps={{
+                                variant="temporary"
-                                keepMounted: true, // Better open performance on mobile.
+                                anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
-                            }}
+                                open={this.state.mobileOpen}
-                        >
+                                onClose={this.handleDrawerToggle}
-                            {drawer}
+                                classes={{
-                        </Drawer>
+                                    paper: classes.drawerPaper,
-                    </Hidden>
+                                }}
-                    <Hidden xsDown implementation="css">
+                                ModalProps={{
-                        <Drawer
+                                    keepMounted: true, // Better open performance on mobile.
-                            classes={{
+                                }}
-                                paper: classes.drawerPaper,
+                            >
-                            }}
+                                {drawer}
-                            variant="permanent"
+                            </Drawer>
-                            open
+                        </Hidden>
-                        >
+                        <Hidden xsDown implementation="css">
-                            {drawer}
+                            <Drawer
-                        </Drawer>
+                                classes={{
-                    </Hidden>
+                                    paper: classes.drawerPaper,
-                </nav>
+                                }}
-                <main className={classes.content}>
+                                variant="permanent"
-                    <div className={classes.toolbar} />
+                                open
-                    {this.state.key === 'Home' && <Home />}
+                            >
-                    {this.state.key === 'Report' && <Report />}
+                                {drawer}
-                    {this.state.key === 'Map' && <ViewMap />}
+                            </Drawer>
-                    {this.state.key === 'List' && <SightingList />}
+                        </Hidden>
-                    {this.state.key === 'About' && <About />}
+                    </nav>
-                    {this.state.key === 'Contact' && <Contact />}
+                    <main className={classes.content}>
-                    {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
+                        <div className={classes.toolbar} />
-                    {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate'/>}
+                        {this.state.key === 'Home' && <Home />}
-                    {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced'/>}
+                        {this.state.key === 'Report' && <Report />}
-                    {this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'}/>}
+                        {this.state.key === 'Map' && <ViewMap />}
-                    {this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'}/>}
+                        {this.state.key === 'List' && <SightingList themeName={this.state.themeName} />}
-                    {this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/>}
+                        {this.state.key === 'About' && <About />}
-                    {this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'}/>}
+                        {this.state.key === 'Contact' && <Contact />}
-                </main>
+                        {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
-            </div>
+                        {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate' />}
+                        {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced' />}
+                        {this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'} />}
+                        {this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'} />}
+                        {this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'} />}
+                        {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",
+        marginRight: 'auto',
-        marginLeft: "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 item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkGallery} >
+                    <Grid container className={classes.flamelinkGalleryInnerContainer}>
-                        <RenderGallery key={Math.random()} />
+                        <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 flamelinkApp from '../../utilities/flamelink.js';
-import '../css/FlameLink.css';
+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 flamelinkApp from '../../utilities/flamelink.js';
-import '../css/FlameLink.css';
+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 firebase from '../../utilities/firebase.js';
-import GoogleMap from '../components/ReportMap';
+import GoogleMap from './ReportMap';
 import Modal from '@material-ui/core/Modal';
 import Typography from '@material-ui/core/Typography';
 

src/components/list/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;
+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>
@@ -71,20 +89,20 @@ class ViewSightings extends Component {
                     <Grid item xs={12} md={6} className='sighting-list'>
                         <Fragment>
                             <List>
-                            { 
+                                {
-                                this.state.sightings.map((sighting) => {
+                                    this.state.sightings.map((sighting) => {
-                                    return (
+                                        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)}>
+                                            <ListItem button key={sighting.id} onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
-                                            <ListItemText primary={`${sighting.desc}`}/>
+                                                <ListItemText primary={`${sighting.desc}`} />
-                                        </ListItem>
+                                            </ListItem>
-                                    );
+                                        );
-                                })
+                                    })
-                            }
+                                }
                             </List>
                         </Fragment>
                     </Grid>
                     <Grid item xs={12} md={6} className='sighting-details'>
-                        {this.state.clicked === true && <SightingDetail detail={ this.state.selectedSighting }/>}
+                        {this.state.clicked === true && <SightingDetail detail={this.state.selectedSighting} />}
                     </Grid>
                 </Grid>
             </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 './css/index.css';
-import App from './App';
+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 FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
-import flamelinkApp from '../flamelink.js';
+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() {