Modify : client desgin

@@ -8,7 +8,8 @@
   "dependencies": {
     "axios": "^0.15.2",
     "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.3.2",
+    "react-spinjs": "^3.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

@@ -2,23 +2,10 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.shorten {
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-bottom: 20px;
+  font-size: 16px;
+  color : #555555;
 }

 import React, { Component } from 'react';
-import logo from './logo.png';
 import './App.css';
 import axios from 'axios';
+import ReactSpinner from 'react-spinjs';
+import Header from './Components/Header';
 
 class App extends Component {
   constructor(props){
     super(props);
     this.state = {
-      shorten : []
+      shorten : undefined
     };
 
     this.fetchShorten = this.fetchShorten.bind(this);
@@ -37,22 +38,26 @@ class App extends Component {
   printShorten() {
     if(this.state.shorten){
       return (
-        <div>
+        <div className="shorten">
           <p>1 : {this.state.shorten[0]}</p>
           <p>2 : {this.state.shorten[1]}</p>
           <p>3 : {this.state.shorten[2]}</p>
         </div>
       );
+    } else {
+      return (
+        <div>
+          <ReactSpinner top="50%" left="50%"/>
+        </div>
+      );
     }
   }
 
   render() {
+
     return (
       <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo"/>
-          <h2>Redesigned by 3Line</h2>
-        </div>
+        <Header />
         <div className="App-intro">
           {this.printShorten()}
         </div>

+.navbar {
+  height : 50px;
+  background-color: #F5C53A;
+  box-shadow: 0px 2px 8px #AAAAAA;
+}
+
+.right {
+  margin-right: 3%;
+}
+
+.left {
+  margin-left: 3%;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+
+  width : 60px;
+  height : 50px;
+  vertical-align: middle;
+  display: table-cell;
+}
+
+li a {
+  text-decoration: none;
+  color : black;
+}
+
+#logo {
+  width : 42px;
+  padding-top: 4px;
+}
+
+.right {
+  top:0;
+  right: 0;
+}

+import React, { Component, PropTypes } from 'react';
+import './Header.css';
+import logo from './logo.png';
+
+class Header extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return(
+            <div>
+              <div className="navbar">
+                <ul id="nav-button">
+                  <li>
+                    <a href="#">
+                      <img id="logo" src={logo} />
+                    </a>
+                  </li>
+                </ul>
+
+              </div>
+            </div>
+        );
+    }
+}
+
+export default Header;

@@ -2,6 +2,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-  width : 400px;
+  width : 430px;
   min-height: 250px;
+  background-color: #EEEEEE;
 }