Login & Signup Pages

package.json

@@ -44,7 +44,7 @@
     "css-loader": "^2.0.1",
     "eslint": "^5.10.0",
     "eslint-config-prettier": "^3.3.0",
-    "eslint-loader": "^2.0.0",
+    "eslint-loader": "^2.1.1",
     "eslint-plugin-react": "^7.8.2",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^3.0.1",

src/components/App.js

@@ -4,6 +4,8 @@ import NavBar from "./NavBar/NavBar.js";
 import HomePage from "./HomePage.js";
 import Second from "./Second.js";
 import QuizPage from "./QuizPage.js";
+import Login from "./Login.js";
+import Signup from "./Signup.js";
 import { Switch, Route } from "react-router-dom";
 
 export default class App extends Component {
@@ -21,7 +23,9 @@ export default class App extends Component {
         <Switch>
           <Route exact path="/" component={HomePage} />
           <Route exact path="/contact" component={Second} />
-          <Route exasct path="/quiz" component={QuizPage} />
+          <Route exact path="/quiz" component={QuizPage} />
+          <Route exact path="/login" component={Login} />
+          <Route exact path="/signup" component={Signup} />
         </Switch>
       </div>
     );

src/components/HomePage.js

@@ -25,16 +25,12 @@ function scrollToAbout() {
 
 export default class HomePage extends Component {
   render() {
-    // var mobileVsDesktop = this.props.width < 600;
     return (
       <div className="homePage page">
         <div id="background"> </div>
         <div className="spaceForNav" />
         <div className="youtrition">
-          <h1 className="y"> Y</h1>
-          <h1 className="ou">OU</h1>
-          <h1 className="t">T</h1>
-          <h1 className="rition">RITION</h1>
+
         </div>
         <div className="stepsDiv">
           <div className="steps flex">

src/components/Login.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import Button from "@material-ui/core/Button";
+import { NavLink } from "react-router-dom";
+
+import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
+import { createMuiTheme } from "@material-ui/core/styles";
+
+// import PropTypes from 'prop-types';
+//THEME FOR NAV BAR
+const theme = createMuiTheme({
+  palette: {
+    primary: { main: "#84ADD9" }
+  },
+  typography: {
+    useNextVariants: true,
+    fontFamily: ["impact", "helvetica", "sans-serif"].join(",")
+  }
+  // overrides: {
+  //     Button: {
+  //         fontWeight: 700,
+  //     }
+  // },
+});
+
+export default class Login extends Component {
+    render() {
+        return (
+            <MuiThemeProvider theme={theme}>
+                <div className="page">
+                    <div id="background"> </div>
+                    <div className="spaceForNav"/>
+                    <div className="accountDiv flex">
+                    <img className="loginLogo" />
+                        <h1 className="loginText"> 
+                            Log In
+                        </h1>
+                        <form className="accountForm flex">
+                            Username/E-mail: <br />
+                            <br />
+                            <input type="text"
+                                   required 
+                                   placeholder="joel33@gmail.com" 
+                                   pattern=".{4,}"
+                                   title="4 characters minimum"/> 
+                            <br />
+                            Password: <br />
+                            <br />
+                            <input type="password" 
+                                   name="password" 
+                                   required 
+                                   pattern=".{8,}" 
+                                   title="8 characters minimum"/>
+                            <br />
+                            <Button type="submit" 
+                                    variant="contained" 
+                                    className="loginButton" 
+                                    color="primary"> 
+                              <NavLink style={{ color: "inherit" }} to="/">
+                                Log In
+                              </NavLink>
+                            </Button>
+                            <br />
+                            Dont have an account? <br />
+                              <NavLink style={{ color: "inherit", textDecoration: "underline" }} to="/signup">
+                                Sign Up Here
+                              </NavLink>
+                        </form>
+
+                    </div>
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}
+
+// Background.propTypes = {
+//     width: PropTypes.number,
+// };

src/components/NavBar/NavBar.js

@@ -19,7 +19,7 @@ const theme = createMuiTheme({
   },
   typography: {
     useNextVariants: true,
-    fontFamily: ["impact", "helvetica", "sans-serif"].join(",")
+    fontFamily: ["Futura", "helvetica", "sans-serif"].join(",")
   }
   // overrides: {
   //     Button: {
@@ -50,7 +50,9 @@ class OtherPageButtons extends Component {
           </NavLink>
         </Button>
         <Button className="navDiv2button" color="primary">
-          Meet Our Nutritionists
+          <NavLink style={{ color: "inherit" }} to="/meet">
+            Meet Our Nutritionists
+          </NavLink>
         </Button>
         <Button className="navDiv2button" color="primary">
           <NavLink style={{ color: "inherit" }} to="/contact">
@@ -62,14 +64,6 @@ class OtherPageButtons extends Component {
   }
 }
 
-/*<Button className="navDiv2button" color="primary">
-    <NavLink to="/nutritionists">Meet Our Nutritionists</NavLink>
-</Button>
-<Button className="navDiv2button" color="primary">
-    <NavLink to="/contact">Contact Us</NavLink>
-</Button>
-*/
-
 class LogInButton extends Component {
   render() {
     return (
@@ -80,7 +74,9 @@ class LogInButton extends Component {
         size="small"
       >
         {" "}
-        Log In
+          <NavLink style={{ color: "inherit" }} to="/login">
+            Log In
+          </NavLink>
       </Button>
     );
   }
@@ -96,8 +92,11 @@ class SignUpLogInButtons extends Component {
           color="primary"
           size="small"
         >
+          <NavLink style={{ color: "inherit" }} to="/signup">
           {" "}
-          Sign Up{" "}
+            Sign Up
+          {" "}
+          </NavLink>
         </Button>
         <div className="navDiv3space"> </div>
         <LogInButton />

src/components/Signup.js

@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import Button from "@material-ui/core/Button";
+import { NavLink } from "react-router-dom";
+
+import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
+import { createMuiTheme } from "@material-ui/core/styles";
+
+// import PropTypes from 'prop-types';
+//THEME FOR NAV BAR
+const theme = createMuiTheme({
+  palette: {
+    primary: { main: "#84ADD9" }
+  },
+  typography: {
+    useNextVariants: true,
+    fontFamily: ["impact", "helvetica", "sans-serif"].join(",")
+  }
+  // overrides: {
+  //     Button: {
+  //         fontWeight: 700,
+  //     }
+  // },
+});
+
+export default class Signup extends Component {
+    render() {
+        return (
+            <MuiThemeProvider theme={theme}>
+                <div className="page">
+                    <div id="background"> </div>
+                    <div className="spaceForNav"/>
+                    <div className="accountDiv flex">
+                    <img className="loginLogo" />
+                        <h1 className="loginText"> 
+                            Sign Up
+                        </h1>
+                        <form className="accountForm flex">
+                            E-mail: <br />
+                            <br />
+                            <input type="email" 
+                                   name="email" 
+                                   required 
+                                   placeholder="joel33@gmail.com" />
+                            <br />
+                            Create a Username: <br />
+                            <br />
+                            <input type="text" 
+                                   name="username" 
+                                   required
+                                   pattern=".{4,}" 
+                                   title="4 characters minimum"/> 
+                            <br />
+                            Password: <br />
+                            <br />
+                            <input type="password" 
+                                   name="password" 
+                                   required pattern=".{8,}" 
+                                   title="8 characters minimum"/>
+                            <br />
+                            <Button type="submit" 
+                                    variant="contained" 
+                                    className="loginButton" 
+                                    color="primary"> 
+                              <NavLink style={{ color: "inherit" }} to="/">
+                                Sign Up
+                              </NavLink>
+                            </Button>
+                            <br />
+                            Already have an account? <br />
+                              <NavLink style={{ color: "inherit", textDecoration: "underline" }} to="/login">
+                                Log In Here
+                              </NavLink>
+                        </form>
+
+                    </div>
+                </div>
+            </MuiThemeProvider>
+        );
+    }
+}
+
+// Background.propTypes = {
+//     width: PropTypes.number,
+// };

src/components/app.scss

@@ -0,0 +1,2 @@
+@import '_settings.scss';
+@import '_base.scss';

src/index.js

@@ -1,11 +1,19 @@
+// -–––––––––––––––––––––––––––––––––––––––––––––––––––––––––- \\
+/* IMPROVEMENTS THAT CAN BE MADE 
+1. import the scss files for individual pages (e.g. account.scss for Login.js)
+directly in the .js file for that component
+*/
+
+// -–––––––––––––––––––––––––––––––––––––––––––––––––––––––––- \\
+
 // PACKAGE DEPENDENCIES
 import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 // STYLES
-
-import "normalize.css";
-import "./styles/app.scss";
+import 'normalize.css';
+import './styles/app.scss';
+import './styles/account.scss';
 
 import App from "./components/App.js";
 

src/styles/_base.scss

@@ -180,9 +180,15 @@ a {
 
 .youtrition {
   margin-top: 1em;
-  margin-bottom: 1.5em;
-  font-size: 110%;
+  margin-bottom: 1em;
+  width: 100%;
+  height: 9em;
   color: #e5ba5c;
+
+  background-image: url("../assets/youtritiontext.png");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 .y {
@@ -197,7 +203,7 @@ a {
   width: 100%;
   height: auto;
   text-align: center;
-  font-family: "Impact";
+  // font-family: "Impact";
 }
 
 .stepsDiv {
@@ -213,14 +219,12 @@ a {
 }
 
 .steps {
-  border: 1px solid snow;
-  width: 90%;
+  width: 100%;
   height: 100%;
   background-color: black;
   background-color: rgba(0, 0, 0, 0.6);
-  border-radius: 3%;
   z-index: 50;
-  // filter: drop-shadow(0 0 10px #ffffff);
+  font-family: "Futura";
 }
 
 .step {
@@ -237,7 +241,7 @@ a {
   margin-top: 0;
   width: 60%;
   height: auto;
-  content: url("../assets/form3.png");
+  content: url("../assets/form4.png");
   max-width: 15em;
 }
 
@@ -247,11 +251,11 @@ a {
 }
 
 #step2 {
-  content: url("../assets/yellowPerson.png");
+  content: url("../assets/person4.png");
 }
 
 #step3 {
-  content: url("../assets/truck3.png");
+  content: url("../assets/truck4.png");
 }
 
 .stepRectange {
@@ -441,6 +445,10 @@ a {
     margin-bottom: 0;
   }
 
+  .stepsDiv {
+    height: 100vh;
+  }
+
   .steps {
     flex-direction: column;
     width: 80%;