In the process of linking backend and UI

twistter-frontend/src/App.css

@@ -37,7 +37,4 @@
 .authInput {
   background-color: #eee;
   width:500px;
-  height:40px;
-  border: 0px;
-  padding: 10px;
 }

twistter-frontend/src/App.js

@@ -13,16 +13,12 @@ class App extends Component {
     return (
       <Router>
 
-
-
         <div className="app">
           <Route exact path="/" component={home}/>
           <Route exact path="/register" component={register}/>
           <Route exact path="/login" component={login}/>
         </div>
 
-
-
       </Router>
     );
   }

twistter-frontend/src/Home.js

@@ -3,6 +3,7 @@ import './App.css';
 
 import logo from './twistter-logo.png';
 
+
 class Home extends Component {
   render() {
     return (
@@ -23,7 +24,7 @@ class Home extends Component {
           <form action="./register">
             <button className="authButtons register">Sign up</button> 
           </form>
-          <br/><br/>
+          <br/>
           <form action="./login">
             <button className="authButtons login">Sign in</button>
           </form>

twistter-frontend/src/Login.js

@@ -2,6 +2,9 @@ import React, { Component } from 'react';
 import './App.css';
 
 import logo from './twistter-logo.png';
+import TextField from '@material-ui/core/TextField';
+
+import axios from 'axios';
 
 class Login extends Component {
   render() {
@@ -11,14 +14,14 @@ class Login extends Component {
         <br/><br/>
         <b>Log in to Twistter</b>
         <br/><br/>
-        <input class="authInput" placeholder="Username or email"></input>
+        <TextField className="authInput" id="email" name="email" label="Email" />
         <br/><br/>
-        <input class="authInput" placeholder="Password"></input>
+        <TextField className="authInput" id="password" name="password" label="Password" />
         <br/><br/>
-        <button class="authButtons register">Sign in</button>
+        <button className="authButtons register" type="submit">Sign in</button>
       </div>
     );
-  }
+  };
 }
 
 export default Login;

twistter-frontend/src/Register.js

@@ -2,6 +2,9 @@ import React, { Component } from 'react';
 import './App.css';
 
 import logo from './twistter-logo.png';
+import TextField from '@material-ui/core/TextField';
+
+//import axios from 'axios';
 
 class Register extends Component {
   render() {
@@ -11,13 +14,13 @@ class Register extends Component {
         <br/><br/>
         <b>Create your account</b>
         <br/><br/>
-        <input class="authInput" id="email" placeholder="Email"></input>
+        <TextField className="authInput" id="email" name="email" label="Email" />
         <br/><br/>
-        <input class="authInput" id="username" placeholder="Username"></input>
+        <TextField className="authInput" id="username" name="username" label="Username" />
         <br/><br/>
-        <input class="authInput" id="password" placeholder="Password"></input>
+        <TextField className="authInput" id="password" name="password" label="Password" />
         <br/><br/>
-        <input class="authInput" id="confirmPassword" placeholder="Confirm Password"></input>
+        <TextField className="authInput" id="confirmPassword" name="confirmPassword" label="Confirm Password" />
         <br/><br/>
         <button class="authButtons register" id="submit">Sign up</button>
       </div>

twistter-frontend/src/index.css

@@ -1,5 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}

twistter-frontend/src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import './index.css';
 
 ReactDOM.render(
   <App />,