Add feather icons, update navbar to use icons

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';

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",

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);

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>

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;

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"