From fe0500001a150afc40096f0744e95601511e6766 Mon Sep 17 00:00:00 2001
From: GeordieP <geordie.powers@gmail.com>
Date: Mon, 8 Oct 2018 19:50:49 -0400
Subject: [PATCH] Add feather icons, update navbar to use icons

---
 ExtraModules.d.ts                |  1 +
 package.json                     |  1 +
 src/containers/NavBar/NavBar.css |  6 ++++++
 src/containers/NavBar/index.tsx  | 11 +++++++++--
 src/styles/index.css             |  4 ++++
 yarn.lock                        |  4 ++++
 6 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/ExtraModules.d.ts b/ExtraModules.d.ts
index e687735..2c4b23e 100644
--- a/ExtraModules.d.ts
+++ b/ExtraModules.d.ts
@@ -15,3 +15,4 @@ declare module 'koa-session';
 declare module 'koa-redis';
 declare module 'koa-router';
 declare module 'mongoose';
+declare module 'react-feather';
diff --git a/package.json b/package.json
index 18fcb3d..f707ada 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "react": "^16.4.2",
     "react-apollo": "^2.1.11",
     "react-dom": "^16.4.2",
+    "react-feather": "^1.1.3",
     "react-router-dom": "^4.3.1",
     "react-scripts-ts": "2.17.0",
     "reset.css": "^2.0.2",
diff --git a/src/containers/NavBar/NavBar.css b/src/containers/NavBar/NavBar.css
index 9939b08..bf29665 100644
--- a/src/containers/NavBar/NavBar.css
+++ b/src/containers/NavBar/NavBar.css
@@ -11,6 +11,11 @@
     height: 100%;
     padding: var(--spc-small);
 
+    & svg {
+        width: 1rem;
+        height: 1rem;
+    }
+
     & a {
         color: inherit;
         text-decoration: none;
@@ -26,6 +31,7 @@
         border-radius: 300px;
         border: 2px solid var(--col-maxContrast);
         margin: 0 var(--spc-small);
+        font-size: 0.8rem;
 
         &:hover {
             background: rgba(var(--rgb-bgAccentLowContrast), 0.1);
diff --git a/src/containers/NavBar/index.tsx b/src/containers/NavBar/index.tsx
index 628bfe4..22fc9d6 100644
--- a/src/containers/NavBar/index.tsx
+++ b/src/containers/NavBar/index.tsx
@@ -5,6 +5,7 @@ import { Query, QueryResult, ApolloConsumer } from 'react-apollo';
 import { authStatus } from 'src/util/graphql/clientQueries';
 import history from 'src/util/history';
 import * as classnames from 'classnames';
+import { Home as HomeIcon, LogOut as LogoutIcon } from 'react-feather';
 
 import NavRoutes from './NavRoutes';
 
@@ -24,7 +25,11 @@ class NavBar extends React.Component<Props, {}> {
         return (
             <nav className={classnames('NavBar u-fullWidth u-fullHeight', this.props.className)}>
                 <ul className="u-flexH NavBar-itemList">
-                    <Link to='/projects' title='Home'><li className='circle'>🏠</li></Link>
+                    <Link to='/projects' title='Home'>
+                        <li className='u-flexV u-centerBoth circle'>
+                            <HomeIcon />
+                        </li>
+                    </Link>
                 </ul>
 
                 <ul className="u-flexH NavBar-itemList">
@@ -74,7 +79,9 @@ const LogoutBtn = ({ username, children }: any) => (
     <ApolloConsumer>
         { (client: any) => (
             <Link to='/' onClick={logoutRequest.bind(null, client)}>
-                <li className='circle' title={`Logged in as ${username}`}>🠊</li>
+                <li className='u-flexV u-centerBoth circle' title={`Logged in as ${username}`}>
+                    <LogoutIcon />
+                </li>
             </Link>
         )}
     </ApolloConsumer>
diff --git a/src/styles/index.css b/src/styles/index.css
index 9101369..f4a6f6e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -24,6 +24,10 @@ body {
     background: var(--col-bgPrimary);
 }
 
+svg {
+    display: block;
+}
+
 hr {
     background: rgba(var(--rgb-primary), 0.1);
     border: none;
diff --git a/yarn.lock b/yarn.lock
index 46a98f2..5e7c2f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8642,6 +8642,10 @@ react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
+react-feather@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.3.tgz#f0c0ae701265393d81d883e1ce903cae34290475"
+
 react-router-dom@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"