refactoring

src/components/Card.js

@@ -18,7 +18,7 @@ class Card extends Component {
     let bodyAlign;
     let headAlign;
 
-    if (this.props.align) {
+    if (this.props.bodyAlign) {
       bodyAlign = `text-${this.props.bodyAlign}`;
     } 
 

src/components/DropDown.js

@@ -18,7 +18,7 @@ class DropDown extends Component {
 
   return(
     <Input
-      name = "type"
+      name = {this.props.name}
       type = "select"
       value = { this.props.value }
       onChange = { this.props.onChange }

src/components/Logo.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 
-
 class Logo extends Component {
   constructor(props) {
     super(props);

src/components/NavBar.css

@@ -0,0 +1,15 @@
+.custom-toggler.navbar-toggler {
+    border-color:#007bff;
+}
+
+.navbar-brand {
+    font-weight: bolder;
+    font-size: 25px;
+    color: #007bff;
+}
+
+.custom-toggler .navbar-toggler-icon {
+    
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(9,55,150, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+
+} 

src/components/NavBar.js

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Container,
+  Collapse,
+  Navbar,
+  NavbarBrand,
+  NavbarToggler,
+  Nav,
+  NavItem,
+  NavLink,
+  Button
+} from 'reactstrap';
+
+import './NavBar.css';
+
+
+class NavBar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpen: false
+    };
+
+    // binding
+    this.toggle = this.toggle.bind(this);
+    this.closeNavbar = this.closeNavbar.bind(this);
+  }
+
+
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+
+
+  closeNavbar() {
+    this.setState({
+      isOpen: false
+    });
+  }
+
+
+  render() {
+    return (
+      <Navbar
+        fixed="top"
+        color="light"
+        light
+        expand="sm"
+        className="shadow-sm p-3 mb-5 bg-white"
+      >
+        <Container>
+          <NavbarBrand
+            onClick={this.closeNavbar}
+            tag={Link}
+            to="/"
+          >
+            tick3t
+          </NavbarBrand>
+
+          <NavbarToggler
+            className="custom-toggler"
+            onClick={this.toggle}
+          />
+
+          <Collapse
+            isOpen={this.state.isOpen}
+            navbar
+          >
+            <Nav
+              className="mr-auto"
+              navbar
+            >
+              <NavItem>
+                <NavLink
+                  onClick={this.closeNavbar}
+                  tag={Link}
+                  to="/credits"
+                >
+                  Credits
+                </NavLink>
+              </NavItem>
+            </Nav>
+
+            <Nav className="ml-auto">
+              <NavItem>
+                <Button
+                  color="primary"
+                  onClick={this.closeNavbar}
+                  tag={Link}
+                  to="/login"
+                >
+                  Admin
+                </Button>
+              </NavItem>
+            </Nav>
+          </Collapse>
+        </Container>
+      </Navbar>
+    );
+  }
+}
+
+export default NavBar;

src/components/Table.js

@@ -60,6 +60,10 @@ class Table extends Component {
               <td className="font-weight-bold text-right td-key">message</td>
               <td className="td-value text-left">{data.message}</td>
             </tr>
+            <tr>
+              <td className="font-weight-bold text-right td-key">note</td>
+              <td className="td-value text-left">{data.note}</td>
+            </tr>
           </tbody>
         </TableBootstrap>
         </Col>