Misc frontend fixes - HashRouter, NavLinks, styling changes.

src/App.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { HashRouter as Router } from 'react-router-dom';
 
 import Routes from './Routes';
 import Header from './components/main/header/Header';

src/components/main/header/Header.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 import COLORS from '../../../styles/COLORS';
 
 const Header = () => {
@@ -33,19 +33,19 @@ const Header = () => {
       <div id="navbar" className="navbar-menu">
         <div className="navbar-end">
           <div className="navbar-item">
-            <Link to="/comparison" style={cta2Style}>
+            <NavLink to="/comparison" activeClassName="navbar-selected" style={cta2Style}>
               Comparison Tool
-            </Link>
+            </NavLink>
           </div>
           <div className="navbar-item">
-            <Link to="/about" style={backgroundStyle}>
+            <NavLink to="/about" activeClassName="navbar-selected" style={backgroundStyle}>
               About 311 Data
-            </Link>
+            </NavLink>
           </div>
           <div className="navbar-item">
-            <Link to="/contact" style={backgroundStyle}>
+            <NavLink to="/contact" activeClassName="navbar-selected" style={backgroundStyle}>
               Contact Us
-            </Link>
+            </NavLink>
           </div>
         </div>
       </div>

src/components/main/menu/NCSelector.jsx

@@ -118,7 +118,7 @@ const NCSelector = ({
         <div
           className="nc-list"
           style={{
-            height: '231px',
+            height: '200px',
             overflowX: 'hidden',
             msOverflowY: 'scroll',
             padding: '10px 23px 10px 10px',

src/components/main/menu/Submit.jsx

@@ -12,7 +12,7 @@ const Submit = ({
   };
 
   return (
-    <div className="level" style={{ padding: '50px 192px' }}>
+    <div className="level" style={{ padding: '25px 192px 15px' }}>
       <div className="level-item">
         <Button
           id="sidebar-submit-button"

src/styles/_base.scss

@@ -1,6 +1,6 @@
 
 // layout vars
-$header-height: 60px;
+$header-height: 62px;
 $footer-height: 52px;
 $menu-width: 509px;
 $menu-transition: all 0.5s ease 0s;

src/styles/main/_header.scss

@@ -14,4 +14,10 @@
     font-size: 16px;
     margin-right: 46px;
   }
+
+  .navbar-selected {
+    border-bottom: 5px solid $brand-cta1-color;
+    padding-bottom: 2px;
+    margin-bottom: -7px;
+  }
 }

src/styles/main/_menu.scss

@@ -46,7 +46,7 @@
 
   .menu-content {
     padding: 16px;
-    overflow: scroll;
+    overflow: auto;
     height: calc(100% - #{$tabs-height});
     h1 {
       margin-bottom: 8px;