Improve Navbar UI to match up AC's. Add spinner when loading table data

app/src/App.tsx

@@ -3,6 +3,7 @@ import {
   BrowserRouter as Router,
   Switch,
   Route,
+  NavLink,
 } from 'react-router-dom';
 import { Container } from 'reactstrap';
 import 'App.css';
@@ -34,7 +35,7 @@ const App: React.FunctionComponent = () => {
   return (
     <div className="cc-app">
       <Router>
-        <Navbar routes={routes} />
+        <Navbar/>
         <div className="cc-content">
           <Container>
             <Switch>

app/src/components/Button/styles.css

@@ -16,6 +16,7 @@ button.cc-button {
   color: #867969;
   padding: 0.5rem 1rem;
   border-radius: 40px;
+  white-space: nowrap;
 }
 
 button.cc-button:hover {

app/src/components/Navbar/index.tsx

@@ -1,29 +1,31 @@
 import React from 'react';
 import './styles.css';
 import { NavLink as Link } from 'react-router-dom';
-import { Nav, NavItem } from 'reactstrap';
-
+import { FaBug, FaFish } from 'react-icons/fa'
 type NavbarProps = {
-  routes: {
-    path: string,
-    name: string,
-    exact?: boolean,
-    component: React.FunctionComponent
-  }[]
 }
 
-const Navbar: React.FunctionComponent<NavbarProps> = ({ routes }) => {
+const Navbar: React.FunctionComponent<NavbarProps> = () => {
+  const routes = [
+    { path:'/fishes', name:'fishes', icon: FaFish },
+    { path: '/insects', name: 'insects', icon: FaBug }
+  ];
+
   return (
     <div className="cc-navbar">
-      <Nav>
-        {
-          routes.map((route, key) => (
-            <NavItem key={key}>
-              <Link to={route.path} className="nav-link" activeClassName="selected-page">{route.name}</Link>
-            </NavItem>
-          ))
-        }
-      </Nav>
+      <div className="nav-container">
+        <nav>
+          {
+            routes.map((route, key) => (
+                <Link key={key} to={route.path} className="nav-link" activeClassName="selected-page">
+                  <div className="nav-link-label">{route.name}</div>
+                  <div className="nav-link-icon"><route.icon/></div>
+                </Link>
+            ))
+          }
+
+        </nav>
+      </div>
       <div className="scallop"></div>
     </div>
   )

app/src/components/Navbar/styles.css

@@ -1,20 +1,38 @@
-.cc-navbar .nav{
+.cc-navbar .nav-container {
   background-color: white;
-  display: flex;
-  justify-content: space-around;
   padding: 1rem;
-  padding-top: 1.5rem;
+  display: flex;
+  justify-content: center;
 }
 
-.cc-navbar .nav a {
+.cc-navbar nav {
+  display: flex;
+  justify-content: space-around;
+}
+.cc-navbar nav a {
   color: #797979;
   text-transform: capitalize;
-  font-weight: 800;
-  padding: 0.2rem 5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.cc-navbar .nav-link-label {
+  opacity: 0;
+  background-color: #e58541;
+  color: white; 
+  padding: 0 0.5rem;
+  border-radius: 30px;
+  font-weight: 500;
+}
+
+.cc-navbar nav a:hover .nav-link-label,
+.cc-navbar nav a.selected-page .nav-link-label {
+  opacity: 1;
 }
 
-.cc-navbar .nav a:hover,
-.cc-navbar .nav a.selected-page {
+.cc-navbar nav a:hover,
+.cc-navbar nav a.selected-page {
   text-decoration: none;
   color: #e58541;
 }

app/src/components/Table/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, FunctionComponent, useEffect } from 'react';
 import Critter, { Time, Month, Colors } from 'types';
-import { Table as Tb } from 'reactstrap';
+import { Table as Tb, Spinner } from 'reactstrap';
 import Tag from 'components/Tag';
 import Button from 'components/Button';
 import Input from 'components/Input';
@@ -8,7 +8,6 @@ import moment from 'moment';
 import { parseMonth } from 'services/DataParser';
 import { includes, descend, ascend, sortWith } from 'ramda';
 import { FaSort, FaSortUp, FaSortDown } from 'react-icons/fa';
-
 import './styles.css';
 
 export type Column<T> = {
@@ -219,37 +218,46 @@ const Table = <T extends Critter>({ data, columns }: TableProps<T>) => {
         <Button onClick={() => { availableNow() }} color="primary">Available now</Button>
         <Button onClick={() => { showAll() }}>Show all</Button>
       </div>
-      <Tb striped hover responsive className="critter-table">
-        <thead>
-          <tr>
-            <th></th>
-            {
-              columns.map(({ label, sort, key }, i) => (
-                <th key={i}>{label} {sort ? showSortIcon(key as string, sort) : null}</th>
-              ))
-            }
-          </tr>
-        </thead>
-        <tbody>
-          {
-            critters.map((critter, key) => (
-              <tr key={key}>
-                <td className="critter-img"><img className="critter-img" src={`${process.env.REACT_APP_API}/${critter.img}`} alt={critter.name}/></td>
+      {
+        critters.length ? (
+          <Tb striped hover responsive className="critter-table">
+            <thead>
+              <tr>
+                <th></th>
                 {
-                  columns.map(({ key, display, type }, i) => (
-                      <td key={i}>
-                        { type ? DisplayData(type)(critter) :
-                          display ? display(critter) :
-                          critter[key]
-                        }
-                      </td>
+                  columns.map(({ label, sort, key }, i) => (
+                    <th key={i}>{label} {sort ? showSortIcon(key as string, sort) : null}</th>
                   ))
                 }
               </tr>
-            ))
-          }
-        </tbody>
-      </Tb>      
+            </thead>
+            <tbody>
+              {
+                critters.map((critter, key) => (
+                  <tr key={key}>
+                    <td className="critter-img"><img className="critter-img" src={`${process.env.REACT_APP_API}/${critter.img}`} alt={critter.name}/></td>
+                    {
+                      columns.map(({ key, display, type }, i) => (
+                          <td key={i}>
+                            { type ? DisplayData(type)(critter) :
+                              display ? display(critter) :
+                              critter[key]
+                            }
+                          </td>
+                      ))
+                    }
+                  </tr>
+                ))
+              }
+            </tbody>
+          </Tb>      
+        ) : (
+          <div className="cc-critter-schedule-loading">
+            <Spinner type="grow" color="info" />
+            <h5>Loading data</h5>
+          </div>
+        )
+      }
     </div>
   )
 }

app/src/components/Table/styles.css

@@ -37,6 +37,20 @@ td.critter-img img {
   height: auto;
 }
 
+.cc-critter-schedule {
+  display: flex;
+  flex-direction: column;
+}
+
+.cc-critter-schedule-loading .spinner-grow.text-info {
+  color: #14c5b5!important;
+}
+.cc-critter-schedule-loading {
+  align-self: center;
+  text-align: center;
+  color: #14c5b5;
+}
+
 .cc-critter-schedule-actions {
   display: flex;
   justify-content: flex-end;
@@ -45,4 +59,7 @@ td.critter-img img {
 .cc-critter-schedule-actions > div,
 .cc-critter-schedule-actions > button {
   margin-left: 1rem;
+}
+.cc-critter-schedule-actions-search {
+  display: flex;
 }

app/src/index.css

@@ -1,3 +1,6 @@
+html {
+  overflow-y: scroll;
+}
 body {
   margin: 0;
   font-family: 'Dosis', sans-serif;