Refactor icons and style

9 files changed, 125 insertions, 61 deletions

diff --git a/src/components/filters/language-filter/index.js b/src/components/filters/language-filter/index.js
index 00a468a..1d290c0 100644
--- a/src/components/filters/language-filter/index.js
+++ b/src/components/filters/language-filter/index.js
@@ -171,10 +171,10 @@ class LanguageFilter extends React.Component {
   render() {
     return (
       <div className='language-filter-wrap'>
-        <a href="javascript:void(0)" onClick={ this.toggleDropdown } className="btn btn-light language-filter shadowed">
+        <button onClick={ this.toggleDropdown } className="btn btn-light language-filter shadowed">
           <i className="fa fa-filter mr-2"></i>
           { this.props.selectedLanguage || 'All Languages' }
-        </a>
+        </button>
         { this.state.showDropdown && this.getLanguageDropdown() }
       </div>
     );
diff --git a/src/components/icons/fork.js b/src/components/icons/fork.js
new file mode 100644
index 0000000..c619aa7
--- /dev/null
+++ b/src/components/icons/fork.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Fork = (props) => (
+  <svg viewBox="0 0 10 16" version="1.1" width="10" height="16" role="img">
+    <path fillRule="evenodd"
+          d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
+  </svg>
+);
+
+export default Fork;
diff --git a/src/components/icons/logo.js b/src/components/icons/logo.js
new file mode 100644
index 0000000..2bdf01b
--- /dev/null
+++ b/src/components/icons/logo.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+const Logo = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+    <defs>
+      <style>{ '.cls-1{ fill:#1d1d1b; }.cls-2{ fill:#e7413e; }.cls-3{ fill:#e6e4da; }.cls-4{ fill:#cbe7f5; }.cls-5{ fill:#1f4863; }' }</style>
+    </defs>
+    <title>astronaut-helmet</title>
+    <g id="astronaut-helmet">
+      <path className="cls-1"
+            d="M9.19,25s.88-7.71,6.46-11.79,9.42-5.42,17.58-4.92,11.58,5.25,13.58,7.33S50,24.22,50,24.22s1.42.38,1.46,1.25.08,2,.08,2a9.44,9.44,0,0,0,2.17-.08c0-.17-.58-12.67-.58-12.67s-2.29-.75-2.37-2.5,1.38-3.38,3.83-2.58.71,4.58.71,4.58,1.5,14.5,1.38,15.08-.71.75-1,.83-4-.21-4-.21a9.81,9.81,0,0,1-.21,3c-.33.54-2,.88-2,.88A13.9,13.9,0,0,1,49,37.18a5.32,5.32,0,0,1-1,2.21s2.54,6.46,2.5,6.83-5.87,5.83-12.75,8.38-14.75.79-19-1.71-7.29-5.87-7.5-6.5,2-5.33,2-5.33-1.12-2.33-1.79-4a28.51,28.51,0,0,1-1-2.92S8,33.51,7.78,32.93s-.62-6.88-.33-7.38S8.82,25,9.19,25Z"/>
+      <path className="cls-2" d="M9.15,26.59s1.54-.17,1.58.13a46.49,46.49,0,0,1,0,5.92,1.48,1.48,0,0,1-1.13-.12C9.44,32.34,8.86,26.84,9.15,26.59Z"/>
+      <path className="cls-2" d="M48.65,25.51c.12-.12,1.08.13,1.13.38a45.42,45.42,0,0,1,0,5.83,1.3,1.3,0,0,1-1.08.13C48.61,31.72,48.61,25.55,48.65,25.51Z"/>
+      <path className="cls-3" d="M53.19,10.64c.95-.36,1.54.42,1.67,1.46A1.3,1.3,0,0,1,53,13.43,1.51,1.51,0,0,1,53.19,10.64Z"/>
+      <path className="cls-3" d="M51.94,28.26c.13,0,2.79,0,2.79-.25s-.5-8.42-.25-8.62.29.08.42.33a81.73,81.73,0,0,1,.67,9,11.81,11.81,0,0,1-3.62.13C51.78,28.72,51.94,28.26,51.94,28.26Z"/>
+      <path className="cls-4"
+            d="M12.19,25.18s-1.42.13-1.54,0A17.8,17.8,0,0,1,14.36,17a16.22,16.22,0,0,1,6.25-4.92s.08,1.63.29,1.71a10.07,10.07,0,0,0,3.17-.17c.17-.25-.25-2.92-.12-3a6.35,6.35,0,0,1,1.83-.33,32.37,32.37,0,0,0,.29,4,6.86,6.86,0,0,0,2.25.21A3.22,3.22,0,0,0,30.07,14c0-.12-.54-4-.42-4a3.49,3.49,0,0,1,.42-.08s.21,3.54.46,3.5,3.17-.12,3.13-.46-.46-3.25-.21-3.21a16.38,16.38,0,0,1,8.71,3.62C46,16.64,48,23.59,47.9,23.68a5,5,0,0,1-.71.25s-5.46-5.62-10.67-6.46-9.46-1.37-14.92,1.13A35,35,0,0,0,12.19,25.18Z"/>
+      <path className="cls-2" d="M21.61,11.68c.17-.08,1.33-.5,1.33-.5s.33,1.5.13,1.58a7,7,0,0,1-1.21.08Z"/>
+      <path className="cls-2" d="M26.73,10.09a10.72,10.72,0,0,1,2-.08,33.54,33.54,0,0,1,.13,3.5,5.81,5.81,0,0,1-1.71.13A17.46,17.46,0,0,1,26.73,10.09Z"/>
+      <path className="cls-2" d="M31,9.89c.17,0,1.46,0,1.46,0a13.34,13.34,0,0,1,.13,2.25c-.12,0-1.25.13-1.25.13Z"/>
+      <path className="cls-5"
+            d="M12.44,27.05a39.54,39.54,0,0,1,8.88-6.46c4.17-2,9.58-2.08,13.33-1.46s7.08,3.08,9.42,4.71,2.54,2.21,2.54,2.21a62.38,62.38,0,0,0,.29,6.5,4.29,4.29,0,0,0,.75,1A16.13,16.13,0,0,1,46,38.05a16.08,16.08,0,0,1-3.83,5A25.87,25.87,0,0,1,38.9,45s-2.83-2.75-3-2.79-.83.46-.71.71,3.13,2.42,2.88,2.58a24.82,24.82,0,0,1-8.58,1.83,18.55,18.55,0,0,1-11.87-4.58,24.08,24.08,0,0,1-5.17-8.5C12.36,34,12.4,27.14,12.44,27.05Z"/>
+      <path className="cls-1" d="M22.57,23.68c.51,0,1,.92.54,1.67s-2.75,3.54-2.54,6.17a7.63,7.63,0,0,0,1.92,4.83c.75.83,1.17.75,1.17,1.13s0,.42-.25.5a7.79,7.79,0,0,1-5.67-1c-2.38-1.62-2.42-5.25-2.29-6.54S16.23,23.89,22.57,23.68Z"/>
+      <path className="cls-3" d="M21.15,24.72c.46-.07.75.29.54.46s-2.71,3-2.58,6S20,35.51,20.48,36s.71.71.58.83a4.74,4.74,0,0,1-3.79-2.21c-1.25-2-.42-5.46.25-6.79S19.15,25,21.15,24.72Z"/>
+      <path className="cls-1" d="M40.53,22.68a4.32,4.32,0,0,1,1.88,1.38c0,.25-.08.46-.21.42a12.82,12.82,0,0,1-1.83-1.12A.47.47,0,0,1,40.53,22.68Z"/>
+      <path className="cls-1" d="M40.86,26.76a18.35,18.35,0,0,1,3.71,2.08c0,.25,0,.5-.12.5S41,27.68,40.82,27.59,40.65,26.8,40.86,26.76Z"/>
+      <path className="cls-1" d="M41.07,29.68a23.29,23.29,0,0,1,3.83,2.5c0,.25.08.63-.08.58s-3.79-2.12-4-2.33S40.94,29.68,41.07,29.68Z"/>
+      <path className="cls-1" d="M40.9,32.76a23,23,0,0,1,3.83,2.63c0,.21-.25.54-.25.54a44.18,44.18,0,0,1-3.87-2.37C40.57,33.34,40.9,32.76,40.9,32.76Z"/>
+      <path className="cls-1" d="M39.86,35.76s4.58,3,4.5,3.21-.12.54-.29.46-4.67-2.79-4.67-3S39.86,35.76,39.86,35.76Z"/>
+      <path className="cls-1" d="M38.9,38.26a29.79,29.79,0,0,1,4,3.25,2.2,2.2,0,0,1-.46.38s-4-2.92-4.08-3.12S38.65,38.3,38.9,38.26Z"/>
+      <path className="cls-1" d="M37.36,40.3a18.21,18.21,0,0,1,3.42,2.79,2.2,2.2,0,0,1-.46.38,32,32,0,0,1-3.42-2.58A1,1,0,0,1,37.36,40.3Z"/>
+      <path className="cls-3" d="M28.53,23.72a3.23,3.23,0,0,1,1,.08s.08-1.42.38-1.5.58,0,.58.13.08,1.21.08,1.21,1.17-.62,1.29-.46-.08.75-.08.75.42.25.42.42a1,1,0,0,1-.17.42s-1.42-.25-1.42,0a10.26,10.26,0,0,0,.46,1.46l-.62.25s-.5-.87-.58-.71a2.23,2.23,0,0,1-.75.67c-.12,0-.46-.5-.46-.5s.83-1.08.71-1.17-1-.29-1-.46A.9.9,0,0,1,28.53,23.72Z"/>
+      <path className="cls-3" d="M34.73,36.49a1.91,1.91,0,0,1,.59,0s0-.84.22-.89.34,0,.34.07,0,.71,0,.71.69-.37.76-.27,0,.44,0,.44.25.15.25.25a.61.61,0,0,1-.1.25S36,37,36,37.1a6.07,6.07,0,0,0,.27.86l-.37.15s-.3-.52-.34-.42a1.32,1.32,0,0,1-.44.39c-.07,0-.27-.3-.27-.3s.49-.64.42-.69-.62-.17-.62-.27A.53.53,0,0,1,34.73,36.49Z"/>
+      <path className="cls-3" d="M23.18,40.09c.17-.12.38-.33.58-.21s.38,1.08.38,1.08.88,0,1,.21a1.92,1.92,0,0,1,0,.75l-.67,0,.13.92-.42,0-.58-.79s-.33.58-.46.54a7.12,7.12,0,0,1-.71-.46l.67-.67s-.83-.17-.83-.42,0-.54.17-.5.63.25.67.13S23.18,40.09,23.18,40.09Z"/>
+      <path className="cls-3" d="M27.92,32.59c.17-.08.88-.42.88-.29s-.08.79.21.79,1.13-.08,1.13.08.29.5,0,.54-1,.17-1,.17l.13,1h-.5c-.25,0-.5-.92-.5-.92s-.71-.17-.71-.29,0-.42,0-.42l.38,0Z"/>
+      <path className="cls-3" d="M35.69,28.05c.17-.08.88-.42.88-.29s-.08.79.21.79,1.13-.08,1.13.08.29.5,0,.54-1,.17-1,.17l.13,1h-.5c-.25,0-.5-.92-.5-.92s-.71-.17-.71-.29,0-.42,0-.42l.38,0Z"/>
+      <path className="cls-3" d="M29.4,39.2c.17-.08.67-.12.75.08s.67.5.67.5L31.4,41l-.37.38s-.67.46-.75.29a3.72,3.72,0,0,0-.37-.5l-.37.54-.79-.33s-.25-.67,0-.87.54-.08.5-.33A2,2,0,0,1,29.4,39.2Z"/>
+      <path className="cls-4" d="M14.48,42.72c.22.15,1.33,1.42,2,2a9.09,9.09,0,0,0,1,.79s-1.54,2.54-1.79,2.5a10.93,10.93,0,0,1-2.54-2.08A11.44,11.44,0,0,1,14.48,42.72Z"/>
+      <path className="cls-2" d="M18.07,45.64c.12-.09.5.13.42.25s-1.54,3.17-1.67,3.17-.62-.08-.5-.25S17.9,45.76,18.07,45.64Z"/>
+      <path className="cls-2" d="M19.07,46.51l.42.25a23.68,23.68,0,0,1-1.54,3.29c-.17-.08-.46-.17-.46-.29S19.07,46.51,19.07,46.51Z"/>
+      <path className="cls-4"
+            d="M20.15,47.05a17.92,17.92,0,0,0,7.92,2.08c4.83.21,6.54.13,10.79-2a22.05,22.05,0,0,0,6.5-4.5,11.37,11.37,0,0,1,1.46-1.25s1.67,4.33,1.58,4.5a1.83,1.83,0,0,1-.46.42,22,22,0,0,0-1.79-2.92c-.21,0-.67.71-.67.71s1.67,2.46,1.5,2.71a5.24,5.24,0,0,1-1.17.75,15.06,15.06,0,0,0-1.42-2.42c-.25-.08-.92.42-.83.63s1.54,2.46,1.54,2.46-.83.75-1,.67-1.21-2.17-1.37-2.17-.67.58-.67.58,1.54,2,1.38,2.17l-.75.58-1.42-2.12s-.62.25-.62.42,1.46,2.38,1.38,2.5-2.46,2-7.75,2.63-8.62.13-11.54-.83-4-1.87-4.08-2A14.17,14.17,0,0,1,20.15,47.05Z"/>
+    </g>
+  </svg>
+);
+
+export default Logo;
diff --git a/src/components/icons/star.js b/src/components/icons/star.js
new file mode 100644
index 0000000..9f4d90f
--- /dev/null
+++ b/src/components/icons/star.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Star = (props) => (
+  <svg viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img">
+    <path fillRule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/>
+  </svg>
+);
+
+export default Star;
diff --git a/src/components/icons/watcher.js b/src/components/icons/watcher.js
new file mode 100644
index 0000000..aec956e
--- /dev/null
+++ b/src/components/icons/watcher.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Watcher = (props) => (
+  <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+    <path fillRule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path>
+  </svg>
+);
+
+export default Watcher;
diff --git a/src/components/repository-grid/grid-item/index.js b/src/components/repository-grid/grid-item/index.js
index 6496c77..86b4de3 100644
--- a/src/components/repository-grid/grid-item/index.js
+++ b/src/components/repository-grid/grid-item/index.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 
 import './styles.css';
+import Star from '../../icons/star';
+import Fork from '../../icons/fork';
+import Watcher from '../../icons/watcher';
 
 class GridItem extends React.Component {
   render() {
@@ -47,26 +50,19 @@ class GridItem extends React.Component {
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/stargazers` }
                target="_blank">
-              <svg viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img">
-                <path fillRule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/>
-              </svg>
+              <Star/>
               { this.props.repository.stargazers_count.toLocaleString() }
             </a>
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/network/members` }
                target="_blank">
-              <svg viewBox="0 0 10 16" version="1.1" width="10" height="16" role="img">
-                <path fillRule="evenodd"
-                      d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
-              </svg>
+              <Fork/>
               { this.props.repository.forks.toLocaleString() }
             </a>
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/watchers` }
                target="_blank">
-              <svg className="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
-                <path fillRule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path>
-              </svg>
+              <Watcher/>
               { this.props.repository.watchers.toLocaleString() }
             </a>
           </div>
diff --git a/src/components/repository-list/list-item/index.js b/src/components/repository-list/list-item/index.js
index fd70619..dd8cf0a 100644
--- a/src/components/repository-list/list-item/index.js
+++ b/src/components/repository-list/list-item/index.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 
 import './styles.css';
 import moment from 'moment';
+import Star from '../../icons/star';
+import Fork from '../../icons/fork';
+import Watcher from '../../icons/watcher';
 
 class ListItem extends React.Component {
   render() {
@@ -35,26 +38,19 @@ class ListItem extends React.Component {
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/stargazers` }
                target="_blank">
-              <svg viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img">
-                <path fillRule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/>
-              </svg>
+              <Star/>
               { this.props.repository.stargazers_count.toLocaleString() }
             </a>
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/network/members` }
                target="_blank">
-              <svg viewBox="0 0 10 16" version="1.1" width="10" height="16" role="img">
-                <path fillRule="evenodd"
-                      d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
-              </svg>
+              <Fork/>
               { this.props.repository.forks.toLocaleString() }
             </a>
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/watchers` }
                target="_blank">
-              <svg className="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
-                <path fillRule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path>
-              </svg>
+              <Watcher/>
               { this.props.repository.watchers.toLocaleString() }
             </a>
           </div>
diff --git a/src/components/top-nav/index.js b/src/components/top-nav/index.js
index ff87fc2..3480ea7 100644
--- a/src/components/top-nav/index.js
+++ b/src/components/top-nav/index.js
@@ -3,58 +3,55 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import './styles.css';
+import Logo from '../icons/logo';
 
 const TopNav = (props) => (
   <div className='top-nav'>
     <div className="container clearfix">
       <a href='/' className="logo clearfix float-left">
-        <img src='/img/logo.svg'/>
+        <Logo/>
         <div className="logo-text">
           <h4>GitHunt</h4>
           <p className="text-muted">Most starred projects on GitHub</p>
         </div>
       </a>
       <div className="float-right duration-btns">
-        <a href="javascript:void(0)"
-           onClick={ () => props.updateDateJump('year') }
-           className={
-             classNames('btn', {
-               'btn-primary': props.selectedDateJump === 'year',
-               'btn-light': props.selectedDateJump !== 'year',
-             })
-           }>
+        <button onClick={ () => props.updateDateJump('year') }
+                className={
+                  classNames('btn', {
+                    'btn-primary': props.selectedDateJump === 'year',
+                    'btn-light': props.selectedDateJump !== 'year',
+                  })
+                }>
           Yearly
-        </a>
-        <a href="javascript:void(0)"
-           onClick={ () => props.updateDateJump('month') }
-           className={
-             classNames('btn', {
-               'btn-primary': props.selectedDateJump === 'month',
-               'btn-light': props.selectedDateJump !== 'month',
-             })
-           }>
+        </button>
+        <button onClick={ () => props.updateDateJump('month') }
+                className={
+                  classNames('btn', {
+                    'btn-primary': props.selectedDateJump === 'month',
+                    'btn-light': props.selectedDateJump !== 'month',
+                  })
+                }>
           Monthly
-        </a>
-        <a href="javascript:void(0)"
-           onClick={ () => props.updateDateJump('week') }
-           className={
-             classNames('btn', {
-               'btn-primary': props.selectedDateJump === 'week',
-               'btn-light': props.selectedDateJump !== 'week',
-             })
-           }>
+        </button>
+        <button onClick={ () => props.updateDateJump('week') }
+                className={
+                  classNames('btn', {
+                    'btn-primary': props.selectedDateJump === 'week',
+                    'btn-light': props.selectedDateJump !== 'week',
+                  })
+                }>
           Weekly
-        </a>
-        <a href="javascript:void(0)"
-           onClick={ () => props.updateDateJump('day') }
-           className={
-             classNames('btn', {
-               'btn-primary': props.selectedDateJump === 'day',
-               'btn-light': props.selectedDateJump !== 'day',
-             })
-           }>
+        </button>
+        <button onClick={ () => props.updateDateJump('day') }
+                className={
+                  classNames('btn', {
+                    'btn-primary': props.selectedDateJump === 'day',
+                    'btn-light': props.selectedDateJump !== 'day',
+                  })
+                }>
           Daily
-        </a>
+        </button>
       </div>
     </div>
   </div>
diff --git a/src/components/top-nav/styles.css b/src/components/top-nav/styles.css
index c1c7cc2..7217eb2 100644
--- a/src/components/top-nav/styles.css
+++ b/src/components/top-nav/styles.css
@@ -10,7 +10,7 @@
   margin-left: -10px;
 }
 
-.top-nav .logo img {
+.top-nav .logo svg {
   height: 75px;
   float: left;
 }
@@ -31,7 +31,7 @@
   margin-bottom: 0;
 }
 
-.top-nav .duration-btns a.btn {
+.top-nav .duration-btns .btn {
   margin-left: 10px;
   margin-top: 24px;
   box-shadow: none;