Merge pull request #156 from WrippleFoss/feature/form-setup-login-screen

Feature/form setup login screen

src-view/Routes.js

@@ -1,11 +1,15 @@
 import React from 'react'
 import LandingView from './views/LandingView'
 import { Router } from '@reach/router'
+import LoginView from './views/LoginView'
 
+import SignUpView from './views/SignUpView'
 export default () => {
   return (
     <Router>
       <LandingView path='/' />
+      <LoginView path='/login' />
+      <SignUpView path='/sign-up' />
     </Router>
   )
 }

src-view/assets/styles/LoginView.module.scss

@@ -0,0 +1,49 @@
+@import './mixins';
+
+.loginDiv {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: column;
+    align-self: center;
+    flex-shrink: 1;
+    padding: 5rem 0rem;
+    width: 80%;
+    max-width: 36rem;
+
+    >a {
+        cursor: pointer;
+        align-self: center;
+        margin-top: 1rem;
+    }
+
+    >h1 {
+        align-self: center;
+        font-weight: 400;
+    }
+
+    @include for-desktop {
+        box-shadow: 0px 0px 30px -2px rgba(150, 144, 150, 0.85);
+        padding: 5rem 3rem;
+        width: 50%;
+
+    }
+
+    &Wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+    }
+
+    .loginForm {
+        display: flex;
+        flex-direction: column;
+        margin: 2rem 0 0 0;
+
+        >button {
+            width: 100%;
+            margin: 2rem 0 0 0;
+        }
+    }
+}

src-view/assets/styles/SignUpView.module.scss

@@ -0,0 +1,43 @@
+@import './mixins';
+
+.signUpDiv {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: column;
+    align-self: center;
+    flex-shrink: 1;
+    padding: 5rem 0rem;
+    width: 80%;
+    max-width: 36rem;
+
+    >h1 {
+        align-self: center;
+        font-weight: 400;
+    }
+
+    @include for-desktop {
+        box-shadow: 0px 0px 30px -2px rgba(150, 144, 150, 0.85);
+        padding: 5rem 3rem;
+        width: 50%;
+
+    }
+
+    &Wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+    }
+
+    .signUpForm {
+        display: flex;
+        flex-direction: column;
+        margin: 2rem 0 0 0;
+
+        >button {
+            width: 100%;
+            margin: 2rem 0 0 0;
+        }
+    }
+}

src-view/assets/styles/_variables.scss

@@ -1,4 +1,3 @@
-
 $primary-violet: hsl(277, 49%, 52%);
 $primary-green: #28E2BC;
 
@@ -8,6 +7,7 @@ $primary-green: #28E2BC;
     --gray: hsl(0, 0%, 65%);
     --space: 1.25rem;
     --ruby: #ff9494;
+    --red: #ee534c;
     --violet: #{$primary-violet};
     --light-violet: #ECCCFF;
     --green: #{$primary-green};

src-view/assets/styles/components/AppLayout.module.scss

@@ -1,3 +1,34 @@
+@import '../mixins';
+
 .AppLayout {
-    display: flex;
+  .navbar {
+    padding: 1rem;
+    box-shadow: 0px 2px 5px rgba(68, 68, 68, 0.6);
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  .childContent {
+    position: relative;
+    flex: 1;
+    padding: 0 1rem;
+    margin-bottom: 2rem;
+
+    @include for-desktop {
+      padding: 0 1.625rem;
+    }
+
+
+    &Wrapper {
+      display: flex;
+      flex-flow: column;
+      min-height: 90vh;
+
+      @include for-desktop {
+        flex-flow: row;
+      }
+    }
+
+  }
 }

src-view/assets/styles/components/FormikError.module.scss

@@ -0,0 +1,11 @@
+@import '../variables';
+
+.error {
+    transition: all ease 0.3s;
+    color: var(--red);
+    margin: 0 0.5rem;
+
+    &.hasError {
+        margin: 0.5rem;
+    }
+}

src-view/assets/styles/components/Navbar.module.scss

@@ -1,3 +1,11 @@
 .navbar {
+  display: flex;
+
+  .navRight {
+    font-weight: 600;
     display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+  }
 }

src-view/components/FormikError.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import styles from "../assets/styles/components/FormikError.module.scss";
+
+const FormikError = ({ name, error, touched }) => {
+  const hasError = error[name] && touched[name];
+  return (
+    <div className={classNames(styles.error, hasError && styles.hasError)}>
+      {hasError ? errors[name] : ""}
+    </div>
+  );
+};
+
+FormikError.propTypes = {
+  name: PropTypes.string,
+  error: PropTypes.object,
+  touched: PropTypes.object,
+};
+
+FormikError.defaultProps = {
+  name: "",
+  error: {},
+  touched: {},
+};
+
+export default FormikError;

src-view/components/Navbar.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from '@reach/router'
-
+import { Button } from 'semantic-ui-react'
 import Masterlogo from '../assets/logo/master-logo.png'
 import styles from '../assets/styles/components/Navbar.module.scss'
 
@@ -12,6 +12,13 @@ const Navbar = () => {
           <img src={Masterlogo} />
         </Link>
       </div>
+      <div className={styles.navRight}>
+        <Link to='/login'>
+          <Button basic color='blue'>
+            Login
+          </Button>
+        </Link>
+      </div>
     </nav>
   )
 }

src-view/components/TextInput.jsx

@@ -0,0 +1,10 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { Field } from "formik";
+import FormikError from "../components/FormikError";
+
+const TextInput = {
+  errors,
+  touched
+};