Merged

.env

@@ -1 +1 @@
-REACT_APP_API_URL='https://hd-backend.azurewebsites.net'
+REACT_APP_API_URL=https://hd-backend.azurewebsites.net

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

src/components/pages/SuperLogin/SuperLogin.component.js

@@ -1,40 +1,52 @@
+
+import { Link } from 'react-router-dom';
 import React, { useState } from 'react';
-import { MDBContainer, MDBRow, MDBCol, MDBBtn } from 'mdbreact';
+import { MDBContainer, MDBRow, MDBCol } from 'mdbreact';
+import '../test.css';
+
 
 const SuperLogin = ({ login }) => {
   const [state, setstate] = useState('');
 
   return (
-    <MDBContainer style={{ margin: 'auto' }}>
-      <MDBRow>
-        <MDBCol md="6">
-          <form onSubmit={e => e.preventDefault()}>
-            <p className="h4 text-center mb-4">Sign in</p>
-            <label htmlFor="defaultFormLoginEmailEx" className="grey-text">
+    <div className="centerer">
+      <MDBContainer >
+        <MDBRow>
+          <MDBCol md="4" />
+          <MDBCol md="4">
+            <form onSubmit={e => e.preventDefault()} className="test">
+              <p className="h4 text-center mb-4 test grande">Sign in</p>
+              <label htmlFor="defaultFormLoginEmailEx" className="gray-text test">
               Your email
-            </label>
-            <input
-              type="email"
-              id="defaultFormLoginEmailEx"
-              className="form-control"
-              onChange={e => setstate(e.target.value)}
-            />
-            <br />
-            <label htmlFor="defaultFormLoginPasswordEx" className="grey-text">
+              </label>
+              <input
+                type="email"
+                id="defaultFormLoginEmailEx"
+                className="form-control"
+                onChange={e => setstate(e.target.value)}
+              />
+              <br />
+              <label htmlFor="defaultFormLoginPasswordEx" className="gray-text test">
               Your password
-            </label>
-            <input
-              type="password"
-              id="defaultFormLoginPasswordEx"
-              className="form-control"
-            />
-            <div className="text-center mt-4">
-              <MDBBtn color="indigo" type="submit" onClick={() => login({ email: state })}>Login</MDBBtn>
-            </div>
-          </form>
-        </MDBCol>
-      </MDBRow>
-    </MDBContainer>
+              </label>
+              <input
+                type="password"
+                id="defaultFormLoginPasswordEx"
+                className="form-control"
+              />
+              <div className="text-center mt-4">
+                <button onClick={() => login({ email: state })} className="buttonLogin">Login</button>
+              </div>
+              <div className="mini text-center mt-4 test">
+                <Link className="test" to="/signup">Not registered? <span className="bold">Sign up!</span></Link>
+              </div>
+            </form>
+          </MDBCol>
+          <MDBCol md="4" />
+        </MDBRow>
+      </MDBContainer>
+    </div>
+
   );
 };
 

src/components/pages/SuperSignUp/SuperSignUp.component.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { MDBContainer, MDBRow, MDBCol, MDBBtn } from 'mdbreact';
+import '../test.css';
+
+
+const SuperSignUp = () => (
+  <div className="centerer">
+    <MDBContainer >
+      <MDBRow>
+        <MDBCol md="4" />
+        <MDBCol md="4">
+          <form className="test">
+            <p className="h4 text-center mb-4 test grande">Sign up</p>
+            <label htmlFor="defaultFormLoginEmailEx" className="gray-text test">
+              Your name
+            </label>
+            <input
+              type="email"
+              id="defaultFormLoginEmailEx"
+              className="form-control"
+            />
+            <br />
+            <label htmlFor="defaultFormLoginEmailEx" className="gray-text test">
+              Your email
+            </label>
+            <input
+              type="email"
+              id="defaultFormLoginEmailEx"
+              className="form-control"
+            />
+            <br />
+            <label htmlFor="defaultFormLoginEmailEx" className="gray-text test">
+              Confirm your email
+            </label>
+            <input
+              type="email"
+              id="defaultFormLoginEmailEx"
+              className="form-control"
+            />
+            <br />
+            <label htmlFor="defaultFormLoginPasswordEx" className="gray-text test">
+              Your password
+            </label>
+            <input
+              type="password"
+              id="defaultFormLoginPasswordEx"
+              className="form-control"
+            />
+            <div className="text-center mt-4">
+              <button className="buttonLogin">Register</button>
+            </div>
+            <div className="mini text-center mt-4 test">
+              <Link className="test" to="/">Already registered? <span className="bold">Log in!</span></Link>
+            </div>
+          </form>
+        </MDBCol>
+        <MDBCol md="4" />
+      </MDBRow>
+    </MDBContainer>
+  </div>
+
+);
+
+export default SuperSignUp;

src/components/pages/index.js

@@ -1,9 +1,11 @@
 import SuperLogin from './SuperLogin/SuperLogin.container';
+import SuperSignUp from './SuperSignUp/SuperSignUp.component';
 import Home from './Home/Home.container';
 import Dashboard from './DashBoard/Dashboard.container';
 
 export {
   SuperLogin,
+  SuperSignUp,
   Home,
   Dashboard,
 };

src/components/pages/test.css

@@ -0,0 +1,54 @@
+@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
+
+.test {
+  font-family: 'Lato', sans-serif !important;
+  color: white;
+}
+
+.grande {
+  font-size: 2em;
+}
+
+.centerer {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  background-color: #2f4858;
+}
+
+.mini {
+  font-size: 0.9em;
+}
+
+.bold {
+  font-family: 'Lato', sans-serif !important;
+  color: white;
+  font-weight: bold;
+  color: white;
+}
+
+.buttonLogin {
+  color: rgb(56, 56, 56);
+  font-family: 'Lato', sans-serif !important;
+  color: white;
+  background-color: #38fd9e;
+  width: 160px;
+  height: 40px;
+  border-radius: 10px;
+  border: none;
+  transition: all 0.4s ease-out 0s;
+}
+
+.buttonLogin:hover {
+  color: white;
+  background-color: #008fa0;
+  transform: scale(1.1);
+}
+
+.gray-text {
+  font-family: 'Lato', sans-serif !important;
+  color: white;
+  font-size: 1em;
+  display: block;
+  padding-bottom: 7px;
+}

src/routes.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import {
   SuperLogin,
+  SuperSignUp,
   Home,
 } from './components/pages';
 import { MainLayout } from './components/layout';
@@ -11,6 +12,7 @@ const Routes = (
   <div>
     <Switch>
       <Route path="/" exact component={() => <SuperLogin />} />
+      <Route path="/signup" exact component={() => <SuperSignUp />} />
       <Route
         path="/home"
         exact