From 0dd7ce50d2383b3a7b6f9ceafd080b243cbc7de8 Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Thu, 29 Nov 2018 23:55:21 -0500
Subject: [PATCH 1/6] Added theme swapping.

---
 src/components/Main.js | 182 ++++++++++++++++++++++++++---------------
 1 file changed, 117 insertions(+), 65 deletions(-)

diff --git a/src/components/Main.js b/src/components/Main.js
index d3bde39..95ed1b3 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -33,6 +33,9 @@ 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 { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import indigo from '@material-ui/core/colors/indigo';
 
 const drawerWidth = 240;
 
@@ -77,6 +80,17 @@ class ResponsiveDrawer extends React.Component {
         key: 'Home',
         open: false,
         open2: false,
+        theme: createMuiTheme({
+            typography: {
+                useNextVariants: true,
+            },
+            palette: {
+                primary: indigo,
+                secondary: indigo
+            }
+        }),
+        themeName: 'light',
+        themeChecked: true
     };
 
     handleDrawerToggle = () => {
@@ -97,8 +111,38 @@ class ResponsiveDrawer extends React.Component {
         });
     }
 
+    handleChange = name => event => {
+        this.setState({ [name]: event.target.checked });
+        if (this.state.themeName === 'light') {
+            this.setState({
+                themeName: 'dark',
+                theme: createMuiTheme({
+                    typography: {
+                        useNextVariants: true,
+                    },
+                    palette: {
+                        type: 'dark'
+                    }
+                })
+            })
+        } else {
+            this.setState({
+                themeName: 'light',
+                theme: createMuiTheme({
+                    typography: {
+                        useNextVariants: true,
+                    },
+                    palette: {
+                        primary: indigo,
+                        secondary: indigo
+                    }
+                })
+            })
+        }
+    };
+
     render() {
-        const { classes, theme } = this.props;
+        const { classes } = this.props;
 
         const drawer = (
             <div>
@@ -178,70 +222,78 @@ class ResponsiveDrawer extends React.Component {
         );
 
         return (
-            <div className={classes.root}>
-                <CssBaseline />
-                <AppBar position="fixed" className={classes.appBar}>
-                    <Toolbar>
-                        <IconButton
-                            color="inherit"
-                            aria-label="Open drawer"
-                            onClick={this.handleDrawerToggle}
-                            className={classes.menuButton}
-                        >
-                            <MenuIcon />
-                        </IconButton>
-                        <Typography variant="title" color="inherit" noWrap>
-                            Marten Tracker
-                        </Typography>
-                    </Toolbar>
-                </AppBar>
-                <nav className={classes.drawer}>
-                    <Hidden smUp implementation="css">
-                        <Drawer
-                            container={this.props.container}
-                            variant="temporary"
-                            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
-                            open={this.state.mobileOpen}
-                            onClose={this.handleDrawerToggle}
-                            classes={{
-                                paper: classes.drawerPaper,
-                            }}
-                            ModalProps={{
-                                keepMounted: true, // Better open performance on mobile.
-                            }}
-                        >
-                            {drawer}
-                        </Drawer>
-                    </Hidden>
-                    <Hidden xsDown implementation="css">
-                        <Drawer
-                            classes={{
-                                paper: classes.drawerPaper,
-                            }}
-                            variant="permanent"
-                            open
-                        >
-                            {drawer}
-                        </Drawer>
-                    </Hidden>
-                </nav>
-                <main className={classes.content}>
-                    <div className={classes.toolbar} />
-                    {this.state.key === 'Home' && <Home />}
-                    {this.state.key === 'Report' && <Report />}
-                    {this.state.key === 'Map' && <ViewMap />}
-                    {this.state.key === 'List' && <SightingList />}
-                    {this.state.key === 'About' && <About />}
-                    {this.state.key === 'Contact' && <Contact />}
-                    {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
-                    {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 theme={this.state.theme}>
+                <div className={classes.root}>
+                    <CssBaseline />
+                    <AppBar position="fixed" color="primary" className={classes.appBar}>
+                        <Toolbar>
+                            <IconButton
+                                color="inherit"
+                                aria-label="Open drawer"
+                                onClick={this.handleDrawerToggle}
+                                className={classes.menuButton}
+                            >
+                                <MenuIcon />
+                            </IconButton>
+                            <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}>
+                        <Hidden smUp implementation="css">
+                            <Drawer
+                                container={this.props.container}
+                                variant="temporary"
+                                anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
+                                open={this.state.mobileOpen}
+                                onClose={this.handleDrawerToggle}
+                                classes={{
+                                    paper: classes.drawerPaper,
+                                }}
+                                ModalProps={{
+                                    keepMounted: true, // Better open performance on mobile.
+                                }}
+                            >
+                                {drawer}
+                            </Drawer>
+                        </Hidden>
+                        <Hidden xsDown implementation="css">
+                            <Drawer
+                                classes={{
+                                    paper: classes.drawerPaper,
+                                }}
+                                variant="permanent"
+                                open
+                            >
+                                {drawer}
+                            </Drawer>
+                        </Hidden>
+                    </nav>
+                    <main className={classes.content}>
+                        <div className={classes.toolbar} />
+                        {this.state.key === 'Home' && <Home />}
+                        {this.state.key === 'Report' && <Report />}
+                        {this.state.key === 'Map' && <ViewMap />}
+                        {this.state.key === 'List' && <SightingList key={this.state.themeName} />}
+                        {this.state.key === 'About' && <About />}
+                        {this.state.key === 'Contact' && <Contact />}
+                        {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
+                        {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>
         );
     }
 }

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 2/6] 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

From a06f9918887fff867e5c917e183ca37d00574561 Mon Sep 17 00:00:00 2001
From: WildScotsmen <thewildscotsmen@gmail.com>
Date: Fri, 30 Nov 2018 16:00:49 -0500
Subject: [PATCH 3/6] Added Typography to App Drawer to ensure all icons change
 with swap.

---
 package-lock.json      |  2 +-
 src/components/Main.js | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 885ea64..da5811d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5661,7 +5661,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": {
diff --git a/src/components/Main.js b/src/components/Main.js
index 95ed1b3..b6fe643 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -35,7 +35,6 @@ import Collapse from '@material-ui/core/Collapse';
 import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
-import indigo from '@material-ui/core/colors/indigo';
 
 const drawerWidth = 240;
 
@@ -85,8 +84,7 @@ class ResponsiveDrawer extends React.Component {
                 useNextVariants: true,
             },
             palette: {
-                primary: indigo,
-                secondary: indigo
+                type: 'light'
             }
         }),
         themeName: 'light',
@@ -133,8 +131,7 @@ class ResponsiveDrawer extends React.Component {
                         useNextVariants: true,
                     },
                     palette: {
-                        primary: indigo,
-                        secondary: indigo
+                        type: 'light'
                     }
                 })
             })
@@ -145,7 +142,7 @@ class ResponsiveDrawer extends React.Component {
         const { classes } = this.props;
 
         const drawer = (
-            <div>
+            <Typography component="div">
                 <div className={classes.toolbar} />
                 <Divider />
                 <List>
@@ -218,7 +215,7 @@ class ResponsiveDrawer extends React.Component {
                     </Collapse>
                 </List>
                 <Divider />
-            </div>
+            </Typography>
         );
 
         return (

From e6d152e1b6b6bcf19bec14a34fd8b43a68525c3b Mon Sep 17 00:00:00 2001
From: WildScotsmen <thewildscotsmen@gmail.com>
Date: Fri, 30 Nov 2018 17:13:58 -0500
Subject: [PATCH 4/6] Prevented having both drawers in side bar open at the
 same time.

---
 src/components/Main.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Main.js b/src/components/Main.js
index b6fe643..15700cf 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -96,11 +96,11 @@ class ResponsiveDrawer extends React.Component {
     }
 
     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) => {

From 0bca2064c64e64374d95f4d057696128a2d30273 Mon Sep 17 00:00:00 2001
From: WildScotsmen <thewildscotsmen@gmail.com>
Date: Fri, 30 Nov 2018 17:47:52 -0500
Subject: [PATCH 5/6] Fixed Disqus link color lookin nasty.

---
 src/App.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/App.css b/src/App.css
index d1e1bd6..9fba0a8 100644
--- a/src/App.css
+++ b/src/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: #2aafc7
+}
+
 .sighting-list {
     height: calc(50vh - 64px);
     overflow-y: scroll;

From be1f4585e7c38d0aae2cbaefe20be0b2a0683d34 Mon Sep 17 00:00:00 2001
From: WildScotsmen <thewildscotsmen@gmail.com>
Date: Fri, 30 Nov 2018 17:51:20 -0500
Subject: [PATCH 6/6] Made link color more consistent with Material UI indigo.

---
 src/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 9fba0a8..6a79e73 100644
--- a/src/App.css
+++ b/src/App.css
@@ -24,7 +24,7 @@ body {
 .comments .nav ul li a,
 .comments .nav ul li div a
 {
-    color: #2aafc7
+    color: #7986cb
 }
 
 .sighting-list {