Issue8 register ui - new pr (#18)

* add react boilerplate

* issue8-register-ui-v1

* remove console log and fix naming convention

* Rename files

* Rename register.css

* Rename routes.js

public/css/main.css

@@ -0,0 +1,53 @@
+body,
+html {
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+html {
+    box-sizing: border-box;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+* {
+    box-sizing: "border-box";
+}
+
+p,
+ul {
+    font-family: "Brandon", "Lato";
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: "Quan", "Cairo"
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+.navbar-brand > img {
+    width: 75px;
+    height: 75px;
+}
+
+/* Default */
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
+}

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "BIT React App",
+  "name": "Bridge In Tech",
   "icons": [
     {
       "src": "anitab.ico",

src/Login.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default function Login() {
+    return (
+      <div>This is the Login page</div>
+   );
+}  

src/routes.js → src/Routes.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 import Home from "./Home";
+import Register from "./register/Register";
+import Login from "./Login";
 import { Navbar, Nav } from "react-bootstrap";
 
 
@@ -28,7 +30,9 @@ export default (
           </Navbar.Collapse>
       </Navbar>
       <Switch>
-        <Route exact path="/" component={Home} />
+      <Route exact path="/" component={Home} />
+        <Route path="/register" component={Register} />
+        <Route path="/login" component={Login} />
       </Switch>
     </div>
   </BrowserRouter>

src/index.js

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
-import routes from "./routes";
+import Routes from "./Routes";
 
 ReactDOM.render(
-  routes, document.getElementById('root')
+  Routes, document.getElementById('root')
 );
 

src/register/Register.css

@@ -0,0 +1,52 @@
+.container {
+    background: #F7F9FA;
+    height: auto;
+    width: 70%;
+    margin: 5em auto;
+    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
+    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
+}
+
+
+
+label {
+    color: #24B9B6;
+    font-size: 1.2em;
+    font-weight: 400;
+}
+
+h1 {
+    color: #24B9B6;
+    padding-top: .5em;
+}
+
+
+.error {
+    color: red;
+}
+.error-message {
+    color: #FF6565;
+    padding: .5em .2em;
+    height: 1em;
+    position: absolute;
+    font-size: .8em;
+}
+
+.field {
+    border: 1px solid #1C6EA4;
+    width: 100%;
+    height: 2em;
+}
+
+.button-group {
+    width: 100%;
+}
+
+
+.register-form {
+width: 80%;
+text-align: left;
+padding-top: 2em;
+padding-bottom: 2em;
+}