From ec3c6cef9655497b783728aaa1245f1f5b52a3f5 Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 17:47:00 -0500
Subject: [PATCH 01/10] #3155: svg-pencil-note.jsx, add 'SvgPencilNoteIcon'

---
 src/jsx/import/svg/svg-pencil-note.jsx | 83 ++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/jsx/import/svg/svg-pencil-note.jsx

diff --git a/src/jsx/import/svg/svg-pencil-note.jsx b/src/jsx/import/svg/svg-pencil-note.jsx
new file mode 100644
index 000000000..90d169f82
--- /dev/null
+++ b/src/jsx/import/svg/svg-pencil-note.jsx
@@ -0,0 +1,83 @@
+/**
+ * svg-pencil-note.jsx: append pencil note icon.
+ *
+ * @SvgPencilNoteIcon, must be capitalized in order for reactjs to render it as a
+ *     component. Otherwise, the variable is rendered as a dom node.
+ *
+ * Note: this script implements jsx (reactjs) syntax.
+ */
+
+import colors from '../general/colors.js';
+import React, { Component } from 'react';
+
+class SvgPencilNoteIcon extends Component {
+    // initial 'state properties'
+    constructor() {
+        super();
+        this.state = {
+            body_color: colors['gray-5'],
+            head_color: colors['gray-6'],
+        }
+        this.mouseOverHome = this.mouseOverHome.bind(this);
+        this.mouseOutHome = this.mouseOutHome.bind(this);
+    }
+    // callback for mouseOver svg
+    mouseOverHome(event) {
+        this.setState({ body_color: colors['green-3'] });
+    }
+    // callback for mouseOut svg
+    mouseOutHome(event) {
+        this.setState({ body_color: colors['gray-5'] });
+    }
+    // triggered when 'state properties' change
+    render() {
+        return(
+            <svg
+                version='1.1'
+                xmlns='http://www.w3.org/2000/svg'
+                width='45px'
+                height='45px'
+                x='0px'
+                y='0px'
+                viewBox='0 0 512 512'
+                enableBackground='new 0 0 45 45'
+                preserveAspectRatio='xMidYMid meet'
+                onMouseOver={this.mouseOverHome}
+                onMouseOut={this.mouseOutHome}
+            >
+                <g>
+                    <path
+                        d={`
+                            M448, 177.14V 448c 0, 35.344 -28.656, 64 -64, 64H 64c
+                            -35.344, 0 -64 -28.656 -64 -64V 128c 0 -35.344, 28.656
+                            -64, 64 -64h 270.844l -63.969, 64H 64v 320h 320V
+                            241.156L 448, 177.14z
+                        `}
+                    />
+                    <path
+                        d={`
+                            M398.875, 45.25L 376.25, 67.875 l67.875, 67.891 l22.625
+                            -22.625L 398.875, 45.25z
+                        `}
+                    />
+                    <path
+                        d={`
+                            M444.125, 0 L421.5, 22.625 l67.875, 67.891L 512, 67.875L
+                            444.125, 0z
+                        `}
+                    />
+                    <path
+                        d={`
+                            M150, 294.188 l67.875, 67.875L 421.5, 158.406l -67.875
+                            -67.891L 150, 294.188z
+                        `}
+                    />
+                    <path d='M128,384h64l-64-64V384z' />
+                </g>
+            </svg>
+        );
+    }
+}
+
+// indicate which class can be exported, and instantiated via 'require'
+export default SvgPencilNoteIcon;

From 057e48c850ec15fc872d05825b207d6839419b60 Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 17:47:25 -0500
Subject: [PATCH 02/10] #3155: headere-menu.jsx, implement 'SvgPencilNoteIcon'

---
 src/jsx/import/navigation/header-menu.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/jsx/import/navigation/header-menu.jsx b/src/jsx/import/navigation/header-menu.jsx
index 6b55c8be6..5e63b3358 100644
--- a/src/jsx/import/navigation/header-menu.jsx
+++ b/src/jsx/import/navigation/header-menu.jsx
@@ -8,6 +8,7 @@ import React, { Component } from 'react';
 import SvgHome from '../svg/svg-home.jsx';
 import SvgBooksIcon from '../svg/svg-books.jsx';
 import SvgUserIcon from '../svg/svg-user.jsx';
+import SvgPencilNoteIcon from '../svg/svg-pencil-note.jsx';
 import { Link } from 'react-router-dom'
 import HomeLink from './menu-items/home.jsx';
 import LoginLinkState from '../redux/container/login-link.jsx';
@@ -69,7 +70,10 @@ class HeaderMenu extends Component {
                             </NavItem>
                         </LinkContainer>
                         <LinkContainer to='/register'>
-                            <NavItem>Register</NavItem>
+                            <NavItem className='nav-item'>
+                                <span><SvgPencilNoteIcon /></span>
+                                <span className='menu-label'>Register</span>
+                            </NavItem>
                         </LinkContainer>
                     </Nav>
                 </Navbar.Collapse>

From 31df2e2de374bb323130dae3e48bfc6c6aa75c17 Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 19:13:03 -0500
Subject: [PATCH 03/10] #3155: svg-pencil-note.jsx, define 'pencil_color'

---
 src/jsx/import/svg/svg-pencil-note.jsx | 28 +++++++++++++++++---------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/jsx/import/svg/svg-pencil-note.jsx b/src/jsx/import/svg/svg-pencil-note.jsx
index 90d169f82..2101ffdfe 100644
--- a/src/jsx/import/svg/svg-pencil-note.jsx
+++ b/src/jsx/import/svg/svg-pencil-note.jsx
@@ -15,19 +15,20 @@ class SvgPencilNoteIcon extends Component {
     constructor() {
         super();
         this.state = {
-            body_color: colors['gray-5'],
-            head_color: colors['gray-6'],
+            pencil_color: colors['gray-5'],
+            inner_color: colors['gray-5'],
+            outer_color: colors['gray-6'],
         }
         this.mouseOverHome = this.mouseOverHome.bind(this);
         this.mouseOutHome = this.mouseOutHome.bind(this);
     }
     // callback for mouseOver svg
     mouseOverHome(event) {
-        this.setState({ body_color: colors['green-3'] });
+        this.setState({ inner_color: colors['green-3'] });
     }
     // callback for mouseOut svg
     mouseOutHome(event) {
-        this.setState({ body_color: colors['gray-5'] });
+        this.setState({ inner_color: colors['gray-5'] });
     }
     // triggered when 'state properties' change
     render() {
@@ -36,7 +37,7 @@ class SvgPencilNoteIcon extends Component {
                 version='1.1'
                 xmlns='http://www.w3.org/2000/svg'
                 width='45px'
-                height='45px'
+                height='28px'
                 x='0px'
                 y='0px'
                 viewBox='0 0 512 512'
@@ -47,6 +48,7 @@ class SvgPencilNoteIcon extends Component {
             >
                 <g>
                     <path
+                        fill={this.state.outer_color}
                         d={`
                             M448, 177.14V 448c 0, 35.344 -28.656, 64 -64, 64H 64c
                             -35.344, 0 -64 -28.656 -64 -64V 128c 0 -35.344, 28.656
@@ -55,24 +57,30 @@ class SvgPencilNoteIcon extends Component {
                         `}
                     />
                     <path
+                        fill={this.state.pencil_color}
                         d={`
-                            M398.875, 45.25L 376.25, 67.875 l67.875, 67.891 l22.625
-                            -22.625L 398.875, 45.25z
+                            M444.125, 0 L421.5, 22.625 l67.875, 67.891L 512, 67.875L
+                            444.125, 0z
                         `}
                     />
                     <path
+                        fill={this.state.pencil_color}
                         d={`
-                            M444.125, 0 L421.5, 22.625 l67.875, 67.891L 512, 67.875L
-                            444.125, 0z
+                            M398.875, 45.25L 376.25, 67.875 l67.875, 67.891 l22.625
+                            -22.625L 398.875, 45.25z
                         `}
                     />
                     <path
+                        fill={this.state.inner_color}
                         d={`
                             M150, 294.188 l67.875, 67.875L 421.5, 158.406l -67.875
                             -67.891L 150, 294.188z
                         `}
                     />
-                    <path d='M128,384h64l-64-64V384z' />
+                    <path
+                        fill={this.state.pencil_color}
+                        d='M128, 384h 64l -64 -64V 384z'
+                    />
                 </g>
             </svg>
         );

From c0cf6e420c0a2a423fc0b180c23fce874831cf6d Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 19:15:35 -0500
Subject: [PATCH 04/10] #3155: implement 'header-font-color[-hover]' classes

---
 src/scss/_navigation.scss | 13 ++++++++++++-
 src/scss/_variables.scss  |  2 ++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/scss/_navigation.scss b/src/scss/_navigation.scss
index 77e8a161a..105b83efc 100644
--- a/src/scss/_navigation.scss
+++ b/src/scss/_navigation.scss
@@ -31,10 +31,12 @@
 
   .dropdown-menu {
     a {
+      color: $header-font-color;
       background-color: transparent;
     }
 
     a:hover {
+      color: $header-font-color-hover;
       text-decoration: none;
     }
   }
@@ -53,10 +55,16 @@
     }
 
     .menu-label {
+      color: $header-font-color;
       position: relative;
+      text-decoration: none
       top: -.55em;
     }
 
+    .menu-label:hover {
+      color: $header-font-color-hover;
+    }
+
     #basic-nav-dropdown {
       color: $gray-1;
       text-decoration: none;
@@ -71,8 +79,11 @@
       padding: 0;
     }
     .nav-item {
+        padding-top: $gutter-1 / 4
+
       a {
-        padding: 0;
+        padding-left: 0;
+        color: $header-font-color;
       }
     }
 
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 23757e6dc..8babe3e5e 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -36,3 +36,5 @@ $red-1: #800000;
 $red-2: #86181d;
 $red-3: #ffdce0;
 $lcol-width: 16rem;
+$header-font-color: #ddd;
+$header-font-color-hover: #fff;

From 8c5a67bff8342fd2436e20b07a771fe18ca1f670 Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 19:24:47 -0500
Subject: [PATCH 05/10] #3155: _navigation.scss, add missing ';'

---
 src/scss/_navigation.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/_navigation.scss b/src/scss/_navigation.scss
index 105b83efc..42e697cb1 100644
--- a/src/scss/_navigation.scss
+++ b/src/scss/_navigation.scss
@@ -57,7 +57,7 @@
     .menu-label {
       color: $header-font-color;
       position: relative;
-      text-decoration: none
+      text-decoration: none;
       top: -.55em;
     }
 

From db66339f942c3ef7000c3b4888237a79b0b27690 Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 19:40:12 -0500
Subject: [PATCH 06/10] #3155: consistently apply, and remove 'Icon' suffix

---
 src/jsx/import/navigation/header-menu.jsx | 12 ++++++------
 src/jsx/import/navigation/user-menu.jsx   | 12 ++++++------
 src/jsx/import/svg/svg-books.jsx          | 18 +++++++++---------
 src/jsx/import/svg/svg-home.jsx           | 12 ++++++------
 src/jsx/import/svg/svg-pencil-note.jsx    | 18 +++++++++---------
 src/jsx/import/svg/svg-user.jsx           | 18 +++++++++---------
 6 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/jsx/import/navigation/header-menu.jsx b/src/jsx/import/navigation/header-menu.jsx
index 5e63b3358..78ddf6869 100644
--- a/src/jsx/import/navigation/header-menu.jsx
+++ b/src/jsx/import/navigation/header-menu.jsx
@@ -6,9 +6,9 @@
 
 import React, { Component } from 'react';
 import SvgHome from '../svg/svg-home.jsx';
-import SvgBooksIcon from '../svg/svg-books.jsx';
-import SvgUserIcon from '../svg/svg-user.jsx';
-import SvgPencilNoteIcon from '../svg/svg-pencil-note.jsx';
+import SvgBooks from '../svg/svg-books.jsx';
+import SvgUser from '../svg/svg-user.jsx';
+import SvgPencilNote from '../svg/svg-pencil-note.jsx';
 import { Link } from 'react-router-dom'
 import HomeLink from './menu-items/home.jsx';
 import LoginLinkState from '../redux/container/login-link.jsx';
@@ -30,7 +30,7 @@ class HeaderMenu extends Component {
     }
     showMobileHeader() {
         const session = <span>
-            <span><SvgBooksIcon /></span>
+            <span><SvgBooks /></span>
             <span className='menu-label'>Session</span>
         </span>
         return (
@@ -65,13 +65,13 @@ class HeaderMenu extends Component {
                     <Nav pullRight>
                         <LinkContainer to='/login'>
                             <NavItem className='nav-item'>
-                                <span><SvgUserIcon /></span>
+                                <span><SvgUser /></span>
                                 <span className='menu-label'>Login</span>
                             </NavItem>
                         </LinkContainer>
                         <LinkContainer to='/register'>
                             <NavItem className='nav-item'>
-                                <span><SvgPencilNoteIcon /></span>
+                                <span><SvgPencilNote /></span>
                                 <span className='menu-label'>Register</span>
                             </NavItem>
                         </LinkContainer>
diff --git a/src/jsx/import/navigation/user-menu.jsx b/src/jsx/import/navigation/user-menu.jsx
index 35e0d135a..925970810 100644
--- a/src/jsx/import/navigation/user-menu.jsx
+++ b/src/jsx/import/navigation/user-menu.jsx
@@ -7,8 +7,8 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import SvgHome from '../svg/svg-home.jsx';
-import SvgUserIcon from '../svg/svg-user.jsx';
-import SvgBooksIcon from '../svg/svg-books.jsx';
+import SvgUser from '../svg/svg-user.jsx';
+import SvgBooks from '../svg/svg-books.jsx';
 import { Link, withRouter } from 'react-router-dom'
 import setLogoutState from '../redux/action/logout.jsx';
 import { LinkContainer } from 'react-router-bootstrap';
@@ -129,12 +129,12 @@ class UserMenu extends Component {
     }
     showDesktopUserDropdown() {
         const user = this.getCurrentUser();
-        const sessionDropdown = this.getSessionDropdown(<SvgBooksIcon />);
+        const sessionDropdown = this.getSessionDropdown(<SvgBooks />);
         return (
             <Navbar.Collapse>
                 <Nav pullRight>
                     <NavDropdown
-                        title={<SvgUserIcon />}
+                        title={<SvgUser />}
                         className='svg-dropdown-desktop'
                         id='basic-nav-dropdown'
                     >
@@ -161,11 +161,11 @@ class UserMenu extends Component {
     showMobileUserDropdown() {
         const user = this.getCurrentUser();
         const title = <span>
-            <span><SvgUserIcon /></span>
+            <span><SvgUser /></span>
             <span className='menu-label'>{user}</span>
         </span>
         const session = <span>
-            <span><SvgBooksIcon /></span>
+            <span><SvgBooks /></span>
             <span className='menu-label'>Session</span>
         </span>
         const sessionDropdown = this.getSessionDropdown(session);
diff --git a/src/jsx/import/svg/svg-books.jsx b/src/jsx/import/svg/svg-books.jsx
index 6e559433a..abb74d41b 100644
--- a/src/jsx/import/svg/svg-books.jsx
+++ b/src/jsx/import/svg/svg-books.jsx
@@ -1,7 +1,7 @@
 /**
  * svg-books.jsx: append book icon.
  *
- * @SvgBooksIcon, must be capitalized in order for reactjs to render it as a
+ * @SvgBooks, must be capitalized in order for reactjs to render it as a
  *     component. Otherwise, the variable is rendered as a dom node.
  *
  * Note: this script implements jsx (reactjs) syntax.
@@ -10,7 +10,7 @@
 import colors from '../general/colors.js';
 import React, { Component } from 'react';
 
-class SvgBooksIcon extends Component {
+class SvgBooks extends Component {
     // initial 'state properties'
     constructor() {
         super();
@@ -18,15 +18,15 @@ class SvgBooksIcon extends Component {
             inner_color: colors['gray-5'],
             outer_color: colors['gray-6'],
         }
-        this.mouseOverHome = this.mouseOverHome.bind(this);
-        this.mouseOutHome = this.mouseOutHome.bind(this);
+        this.mouseOverIcon = this.mouseOverIcon.bind(this);
+        this.mouseOutIcon = this.mouseOutIcon.bind(this);
     }
     // callback for mouseOver svg
-    mouseOverHome(event) {
+    mouseOverIcon(event) {
         this.setState({ outer_color: colors['green-3'] });
     }
     // callback for mouseOut svg
-    mouseOutHome(event) {
+    mouseOutIcon(event) {
         this.setState({ outer_color: colors['gray-6'] });
     }
     // triggered when 'state properties' change
@@ -38,8 +38,8 @@ class SvgBooksIcon extends Component {
                 height='45px'
                 viewBox='0 0 225 225'
                 preserveAspectRatio='xMidYMid meet'
-                onMouseOver={this.mouseOverHome}
-                onMouseOut={this.mouseOutHome}
+                onMouseOver={this.mouseOverIcon}
+                onMouseOut={this.mouseOutIcon}
             >
                 <g
                     transform='translate(20, 280) scale(0.1, -0.1)'
@@ -118,4 +118,4 @@ class SvgBooksIcon extends Component {
 }
 
 // indicate which class can be exported, and instantiated via 'require'
-export default SvgBooksIcon;
+export default SvgBooks;
diff --git a/src/jsx/import/svg/svg-home.jsx b/src/jsx/import/svg/svg-home.jsx
index 3fef0a640..ddbbebdc8 100644
--- a/src/jsx/import/svg/svg-home.jsx
+++ b/src/jsx/import/svg/svg-home.jsx
@@ -18,15 +18,15 @@ class SvgHome extends Component {
             roof_color: colors['gray-5'],
             house_color: colors['gray-6'],
         }
-        this.mouseOverHome = this.mouseOverHome.bind(this);
-        this.mouseOutHome = this.mouseOutHome.bind(this);
+        this.mouseOverIcon = this.mouseOverIcon.bind(this);
+        this.mouseOutIcon = this.mouseOutIcon.bind(this);
     }
     // callback for mouseOver svg
-    mouseOverHome(event) {
+    mouseOverIcon(event) {
         this.setState({ roof_color: colors['green-3'] });
     }
     // callback for mouseOut svg
-    mouseOutHome(event) {
+    mouseOutIcon(event) {
         this.setState({ roof_color: colors['gray-5'] });
     }
     // triggered when 'state properties' change
@@ -47,8 +47,8 @@ class SvgHome extends Component {
                 height='45px'
                 viewBox='0 0 626.000000 626.000000'
                 preserveAspectRatio='xMidYMid meet'
-                onMouseOver={this.mouseOverHome}
-                onMouseOut={this.mouseOutHome}
+                onMouseOver={this.mouseOverIcon}
+                onMouseOut={this.mouseOutIcon}
             >
                 <g
                     transform={`
diff --git a/src/jsx/import/svg/svg-pencil-note.jsx b/src/jsx/import/svg/svg-pencil-note.jsx
index 2101ffdfe..e613ed697 100644
--- a/src/jsx/import/svg/svg-pencil-note.jsx
+++ b/src/jsx/import/svg/svg-pencil-note.jsx
@@ -1,7 +1,7 @@
 /**
  * svg-pencil-note.jsx: append pencil note icon.
  *
- * @SvgPencilNoteIcon, must be capitalized in order for reactjs to render it as a
+ * @SvgPencilNote, must be capitalized in order for reactjs to render it as a
  *     component. Otherwise, the variable is rendered as a dom node.
  *
  * Note: this script implements jsx (reactjs) syntax.
@@ -10,7 +10,7 @@
 import colors from '../general/colors.js';
 import React, { Component } from 'react';
 
-class SvgPencilNoteIcon extends Component {
+class SvgPencilNote extends Component {
     // initial 'state properties'
     constructor() {
         super();
@@ -19,15 +19,15 @@ class SvgPencilNoteIcon extends Component {
             inner_color: colors['gray-5'],
             outer_color: colors['gray-6'],
         }
-        this.mouseOverHome = this.mouseOverHome.bind(this);
-        this.mouseOutHome = this.mouseOutHome.bind(this);
+        this.mouseOverIcon = this.mouseOverIcon.bind(this);
+        this.mouseOutIcon = this.mouseOutIcon.bind(this);
     }
     // callback for mouseOver svg
-    mouseOverHome(event) {
+    mouseOverIcon(event) {
         this.setState({ inner_color: colors['green-3'] });
     }
     // callback for mouseOut svg
-    mouseOutHome(event) {
+    mouseOutIcon(event) {
         this.setState({ inner_color: colors['gray-5'] });
     }
     // triggered when 'state properties' change
@@ -43,8 +43,8 @@ class SvgPencilNoteIcon extends Component {
                 viewBox='0 0 512 512'
                 enableBackground='new 0 0 45 45'
                 preserveAspectRatio='xMidYMid meet'
-                onMouseOver={this.mouseOverHome}
-                onMouseOut={this.mouseOutHome}
+                onMouseOver={this.mouseOverIcon}
+                onMouseOut={this.mouseOutIcon}
             >
                 <g>
                     <path
@@ -88,4 +88,4 @@ class SvgPencilNoteIcon extends Component {
 }
 
 // indicate which class can be exported, and instantiated via 'require'
-export default SvgPencilNoteIcon;
+export default SvgPencilNote;
diff --git a/src/jsx/import/svg/svg-user.jsx b/src/jsx/import/svg/svg-user.jsx
index 700000d01..cd92ab4b5 100644
--- a/src/jsx/import/svg/svg-user.jsx
+++ b/src/jsx/import/svg/svg-user.jsx
@@ -1,7 +1,7 @@
 /**
  * svg-user.jsx: append user icon.
  *
- * @SvgUserIcon, must be capitalized in order for reactjs to render it as a
+ * @SvgUser, must be capitalized in order for reactjs to render it as a
  *     component. Otherwise, the variable is rendered as a dom node.
  *
  * Note: this script implements jsx (reactjs) syntax.
@@ -10,7 +10,7 @@
 import colors from '../general/colors.js';
 import React, { Component } from 'react';
 
-class SvgUserIcon extends Component {
+class SvgUser extends Component {
     // initial 'state properties'
     constructor() {
         super();
@@ -18,15 +18,15 @@ class SvgUserIcon extends Component {
             body_color: colors['gray-5'],
             head_color: colors['gray-6'],
         }
-        this.mouseOverHome = this.mouseOverHome.bind(this);
-        this.mouseOutHome = this.mouseOutHome.bind(this);
+        this.mouseOverIcon = this.mouseOverIcon.bind(this);
+        this.mouseOutIcon = this.mouseOutIcon.bind(this);
     }
     // callback for mouseOver svg
-    mouseOverHome(event) {
+    mouseOverIcon(event) {
         this.setState({ body_color: colors['green-3'] });
     }
     // callback for mouseOut svg
-    mouseOutHome(event) {
+    mouseOutIcon(event) {
         this.setState({ body_color: colors['gray-5'] });
     }
     // triggered when 'state properties' change
@@ -42,8 +42,8 @@ class SvgUserIcon extends Component {
                 viewBox='0 0 512 512'
                 enableBackground='new 0 0 45 45'
                 preserveAspectRatio='xMidYMid meet'
-                onMouseOver={this.mouseOverHome}
-                onMouseOut={this.mouseOutHome}
+                onMouseOver={this.mouseOverIcon}
+                onMouseOut={this.mouseOutIcon}
             >
                 <g>
 	                <circle
@@ -70,4 +70,4 @@ class SvgUserIcon extends Component {
 }
 
 // indicate which class can be exported, and instantiated via 'require'
-export default SvgUserIcon;
+export default SvgUser;

From 180f6d889d13ff5b6a089685fd3e03d100556103 Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 19:42:47 -0500
Subject: [PATCH 07/10] #3155: replace 'Icon' with 'Image' mouse event suffix

---
 src/jsx/import/svg/svg-books.jsx       | 12 ++++++------
 src/jsx/import/svg/svg-home.jsx        | 12 ++++++------
 src/jsx/import/svg/svg-pencil-note.jsx | 12 ++++++------
 src/jsx/import/svg/svg-user.jsx        | 12 ++++++------
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/jsx/import/svg/svg-books.jsx b/src/jsx/import/svg/svg-books.jsx
index abb74d41b..2feb083d2 100644
--- a/src/jsx/import/svg/svg-books.jsx
+++ b/src/jsx/import/svg/svg-books.jsx
@@ -18,15 +18,15 @@ class SvgBooks extends Component {
             inner_color: colors['gray-5'],
             outer_color: colors['gray-6'],
         }
-        this.mouseOverIcon = this.mouseOverIcon.bind(this);
-        this.mouseOutIcon = this.mouseOutIcon.bind(this);
+        this.mouseOverImage = this.mouseOverImage.bind(this);
+        this.mouseOutImage = this.mouseOutImage.bind(this);
     }
     // callback for mouseOver svg
-    mouseOverIcon(event) {
+    mouseOverImage(event) {
         this.setState({ outer_color: colors['green-3'] });
     }
     // callback for mouseOut svg
-    mouseOutIcon(event) {
+    mouseOutImage(event) {
         this.setState({ outer_color: colors['gray-6'] });
     }
     // triggered when 'state properties' change
@@ -38,8 +38,8 @@ class SvgBooks extends Component {
                 height='45px'
                 viewBox='0 0 225 225'
                 preserveAspectRatio='xMidYMid meet'
-                onMouseOver={this.mouseOverIcon}
-                onMouseOut={this.mouseOutIcon}
+                onMouseOver={this.mouseOverImage}
+                onMouseOut={this.mouseOutImage}
             >
                 <g
                     transform='translate(20, 280) scale(0.1, -0.1)'
diff --git a/src/jsx/import/svg/svg-home.jsx b/src/jsx/import/svg/svg-home.jsx
index ddbbebdc8..ed08ae151 100644
--- a/src/jsx/import/svg/svg-home.jsx
+++ b/src/jsx/import/svg/svg-home.jsx
@@ -18,15 +18,15 @@ class SvgHome extends Component {
             roof_color: colors['gray-5'],
             house_color: colors['gray-6'],
         }
-        this.mouseOverIcon = this.mouseOverIcon.bind(this);
-        this.mouseOutIcon = this.mouseOutIcon.bind(this);
+        this.mouseOverImage = this.mouseOverImage.bind(this);
+        this.mouseOutImage = this.mouseOutImage.bind(this);
     }
     // callback for mouseOver svg
-    mouseOverIcon(event) {
+    mouseOverImage(event) {
         this.setState({ roof_color: colors['green-3'] });
     }
     // callback for mouseOut svg
-    mouseOutIcon(event) {
+    mouseOutImage(event) {
         this.setState({ roof_color: colors['gray-5'] });
     }
     // triggered when 'state properties' change
@@ -47,8 +47,8 @@ class SvgHome extends Component {
                 height='45px'
                 viewBox='0 0 626.000000 626.000000'
                 preserveAspectRatio='xMidYMid meet'
-                onMouseOver={this.mouseOverIcon}
-                onMouseOut={this.mouseOutIcon}
+                onMouseOver={this.mouseOverImage}
+                onMouseOut={this.mouseOutImage}
             >
                 <g
                     transform={`
diff --git a/src/jsx/import/svg/svg-pencil-note.jsx b/src/jsx/import/svg/svg-pencil-note.jsx
index e613ed697..7c40eccf7 100644
--- a/src/jsx/import/svg/svg-pencil-note.jsx
+++ b/src/jsx/import/svg/svg-pencil-note.jsx
@@ -19,15 +19,15 @@ class SvgPencilNote extends Component {
             inner_color: colors['gray-5'],
             outer_color: colors['gray-6'],
         }
-        this.mouseOverIcon = this.mouseOverIcon.bind(this);
-        this.mouseOutIcon = this.mouseOutIcon.bind(this);
+        this.mouseOverImage = this.mouseOverImage.bind(this);
+        this.mouseOutImage = this.mouseOutImage.bind(this);
     }
     // callback for mouseOver svg
-    mouseOverIcon(event) {
+    mouseOverImage(event) {
         this.setState({ inner_color: colors['green-3'] });
     }
     // callback for mouseOut svg
-    mouseOutIcon(event) {
+    mouseOutImage(event) {
         this.setState({ inner_color: colors['gray-5'] });
     }
     // triggered when 'state properties' change
@@ -43,8 +43,8 @@ class SvgPencilNote extends Component {
                 viewBox='0 0 512 512'
                 enableBackground='new 0 0 45 45'
                 preserveAspectRatio='xMidYMid meet'
-                onMouseOver={this.mouseOverIcon}
-                onMouseOut={this.mouseOutIcon}
+                onMouseOver={this.mouseOverImage}
+                onMouseOut={this.mouseOutImage}
             >
                 <g>
                     <path
diff --git a/src/jsx/import/svg/svg-user.jsx b/src/jsx/import/svg/svg-user.jsx
index cd92ab4b5..9b09edd7c 100644
--- a/src/jsx/import/svg/svg-user.jsx
+++ b/src/jsx/import/svg/svg-user.jsx
@@ -18,15 +18,15 @@ class SvgUser extends Component {
             body_color: colors['gray-5'],
             head_color: colors['gray-6'],
         }
-        this.mouseOverIcon = this.mouseOverIcon.bind(this);
-        this.mouseOutIcon = this.mouseOutIcon.bind(this);
+        this.mouseOverImage = this.mouseOverImage.bind(this);
+        this.mouseOutImage = this.mouseOutImage.bind(this);
     }
     // callback for mouseOver svg
-    mouseOverIcon(event) {
+    mouseOverImage(event) {
         this.setState({ body_color: colors['green-3'] });
     }
     // callback for mouseOut svg
-    mouseOutIcon(event) {
+    mouseOutImage(event) {
         this.setState({ body_color: colors['gray-5'] });
     }
     // triggered when 'state properties' change
@@ -42,8 +42,8 @@ class SvgUser extends Component {
                 viewBox='0 0 512 512'
                 enableBackground='new 0 0 45 45'
                 preserveAspectRatio='xMidYMid meet'
-                onMouseOver={this.mouseOverIcon}
-                onMouseOut={this.mouseOutIcon}
+                onMouseOver={this.mouseOverImage}
+                onMouseOut={this.mouseOutImage}
             >
                 <g>
 	                <circle

From 463ec347a5e18a9416e79e9b8b2ed96ff56e0d3a Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 19:47:44 -0500
Subject: [PATCH 08/10] #3155: _navigation.scss, fix indentation add ';'

---
 src/scss/_navigation.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/_navigation.scss b/src/scss/_navigation.scss
index 42e697cb1..9211d3d67 100644
--- a/src/scss/_navigation.scss
+++ b/src/scss/_navigation.scss
@@ -79,7 +79,7 @@
       padding: 0;
     }
     .nav-item {
-        padding-top: $gutter-1 / 4
+      padding-top: $gutter-1 / 4;
 
       a {
         padding-left: 0;

From 999cab9876f146e61c4b7437d4bca856ff2fe9ab Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 19:57:28 -0500
Subject: [PATCH 09/10] #3155: header-menu.jsx, lowercase 'results'

---
 src/jsx/import/navigation/header-menu.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/jsx/import/navigation/header-menu.jsx b/src/jsx/import/navigation/header-menu.jsx
index 78ddf6869..c38e3d38b 100644
--- a/src/jsx/import/navigation/header-menu.jsx
+++ b/src/jsx/import/navigation/header-menu.jsx
@@ -58,7 +58,7 @@ class HeaderMenu extends Component {
                             </LinkContainer>
                             <MenuItem divider />
                             <LinkContainer to='/session/results'>
-                                <NavItem>Review Results</NavItem>
+                                <NavItem>Review results</NavItem>
                             </LinkContainer>
                         </NavDropdown>
                     </Nav>

From 9e308c90d543a0c4728b76a9206a29c00dd4458e Mon Sep 17 00:00:00 2001
From: "Jeffrey M. Levesque" <jeff1evesque@yahoo.com>
Date: Mon, 18 Dec 2017 20:31:36 -0500
Subject: [PATCH 10/10] #3155: _navigation.scss, adjust margin, padding, color

---
 src/scss/_navigation.scss | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/scss/_navigation.scss b/src/scss/_navigation.scss
index 9211d3d67..d326f2df4 100644
--- a/src/scss/_navigation.scss
+++ b/src/scss/_navigation.scss
@@ -30,9 +30,11 @@
   }
 
   .dropdown-menu {
-    a {
-      color: $header-font-color;
-      background-color: transparent;
+    li {
+      a {
+        color: $header-font-color;
+        background-color: transparent;
+      }
     }
 
     a:hover {
@@ -57,7 +59,6 @@
     .menu-label {
       color: $header-font-color;
       position: relative;
-      text-decoration: none;
       top: -.55em;
     }
 
@@ -79,11 +80,19 @@
       padding: 0;
     }
     .nav-item {
-      padding-top: $gutter-1 / 4;
-
       a {
-        padding-left: 0;
         color: $header-font-color;
+        margin-bottom: 1.25rem;
+        padding: 0;
+        text-decoration: none;
+      }
+    }
+    .nav-item:last-of-type {
+      a {
+        color: $header-font-color;
+        margin-bottom: 0;
+        padding: 0;
+        text-decoration: none;
       }
     }