Updates to About Us, Project Details, and Dashboard (#88)

* Added footer to About Us page

* Refactored redundant code in nav ui

* Added project details route

* Added new text to landing page

* Refactored project card as a separate component

* Added class names to project-info component and updated general styling

* Add window reload to trigger Auth0

* Added config to add default title and responsive meta tag to index.html

* Added method to force reload browser to trigger login

* Added callback and dashboard edit routes

* Added profile input fields and form component

* Moved nav bar to app.js

* Refactored project detail component to business and volunteer views

* Updated text content on landing page and general styling

* Updated base styling

* Added profile component

* Added conditional rendering for profile form fields based on user type

* Changed svg fill color to prevent blending with white background

* Moved footer to app.js and added logout route

* Add redirect to dashboard on profile form submission

* Changed About Us component to functional component

* Replaced remaining elements in project pane with project card components

* Added new profile form, business and volunteer profile edit forms

* Removed form component

* Abstracted Posed button into its own component

* Updated button styling

* Added project editing and new project form routes

* Moved profile forms to profile form folder

* Moved profile component to its own folder

* Updated styling to make footer stay at bottom of window

* Added form component for creating new projects

* Added sign up and edit project buttons to project info component

* Renamed existingSite to businessSite

* Updated input labels

* Added general form styling

* Removed unneeded fields

* Removed unnecessary statements

* Moved sign up button to ProjectInfo component

* Added links to edit project and create project buttons

* Updated project card styling

* Updated with latest changes from voluntech repo

* Connecting latest projects endpoint to home page latest projects. #83

front-end/src/components/about-us/about-us.js

@@ -2,57 +2,50 @@
 import React from 'react';
 
 // custom components
-import NavUi from '../nav-ui/nav-ui';
 
 // styles
 import './about-us.scss';
 
-class AboutUs extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { AboutUs };
-  }
-  render() {
-    const { location } = this.props;
-    return (
-        <div>
-          <NavUi location={location} />
+const AboutUs = (props) => {
+  const { location } = props;
+  return (
+    <div className="about-us-container">
+      <div className='about-us'>
+        <div className="about-style-container">
           <h3 className="header-styles">About Us!</h3>
-          <div className="about-style-container">
-            <h2 className="about-styles">
-              Weigh eight pounds but take up a full-size bed pee in the shoe.
-              Kitten is playing with dead mouse licks your face. Demand to be let
-              outside at once, and expect owner to wait for me as i think about it
-              lick master's hand at first then bite because im moody for meow.
-              Sweet beast i cry and cry and cry unless you pet me, and then maybe
-              i cry just for fun. Suddenly go on wild-eyed crazy rampage pose
-              purrfectly to show my beauty you have cat to be kitten me right meow
-              meowing chowing and wowing make plans to dominate world and then
-              take a nap. Suddenly go on wild-eyed crazy rampage snuggles up to
-              shoulders or knees and purrs you to sleep so meow loudly just to
-              annoy owners inspect anything brought into the house jumps off
-              balcony gives owner dead mouse at present then poops in litter box
-              snatches yarn and fights with dog cat chases laser then plays in
-              grass finds tiny spot in cupboard and sleeps all day jumps in
-              bathtub and meows when owner fills food dish the cat knocks over the
-              food dish cat slides down the water slide and into pool and swims
-              even though it does not like water. Ignore the squirrels, you'll
-              never catch them anyway meow mew attack dog, run away and pretend to
-              be victim. Behind the couch that box? i can fit in that box but
-              chase mice. Use lap as chair meow all night having their mate
-              disturbing sleeping humans lick human with sandpaper tongue, favor
-              packaging over toy but play time, purr. What a cat-ass-trophy!.
-              Adventure always give attitude chill on the couch table stare out
-              cat door then go back inside so meow sleep on my human's head.
-              Scamper decide to want nothing to do with my owner today for spend
-              all night ensuring people don't sleep sleep all day lick butt, and
-              you call this cat food cough furball then cats take over the world
-            </h2>
-          </div>
+          <h2 className="about-styles">
+            Weigh eight pounds but take up a full-size bed pee in the shoe.
+            Kitten is playing with dead mouse licks your face. Demand to be let
+            outside at once, and expect owner to wait for me as i think about it
+            lick master's hand at first then bite because im moody for meow.
+            Sweet beast i cry and cry and cry unless you pet me, and then maybe
+            i cry just for fun. Suddenly go on wild-eyed crazy rampage pose
+            purrfectly to show my beauty you have cat to be kitten me right meow
+            meowing chowing and wowing make plans to dominate world and then
+            take a nap. Suddenly go on wild-eyed crazy rampage snuggles up to
+            shoulders or knees and purrs you to sleep so meow loudly just to
+            annoy owners inspect anything brought into the house jumps off
+            balcony gives owner dead mouse at present then poops in litter box
+            snatches yarn and fights with dog cat chases laser then plays in
+            grass finds tiny spot in cupboard and sleeps all day jumps in
+            bathtub and meows when owner fills food dish the cat knocks over the
+            food dish cat slides down the water slide and into pool and swims
+            even though it does not like water. Ignore the squirrels, you'll
+            never catch them anyway meow mew attack dog, run away and pretend to
+            be victim. Behind the couch that box? i can fit in that box but
+            chase mice. Use lap as chair meow all night having their mate
+            disturbing sleeping humans lick human with sandpaper tongue, favor
+            packaging over toy but play time, purr. What a cat-ass-trophy!.
+            Adventure always give attitude chill on the couch table stare out
+            cat door then go back inside so meow sleep on my human's head.
+            Scamper decide to want nothing to do with my owner today for spend
+            all night ensuring people don't sleep sleep all day lick butt, and
+            you call this cat food cough furball then cats take over the world
+          </h2>
         </div>
-    );
-  }
-}
+      </div>
+    </div>
+  );
+};
 
 export default AboutUs;
-

front-end/src/components/about-us/about-us.scss

@@ -1,18 +1,32 @@
+.about-us-container {
+  flex: 1;
+  margin-top: auto;
+  min-height: 92.75vh;
+}
+
+.about-us {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  top: 75px;
+  height: auto;
+  position: relative;
+}
+
 .header-styles {
   color: black;
   font-size: large;
-  position: absolute;
-  top: 30%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: 100%;
+  text-align: center;
+  height: 50px;
+  align-self: flex-start;
 }
 
 .about-style-container {
   width: 70%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  align-self: center;
+  top: 30%;
 }
 
 .about-styles {

front-end/src/components/app/app.js

@@ -6,11 +6,18 @@ import * as routes from '../../routes';
 
 // custom components
 import Landing from '../landing/landing';
+import NavUi from '../nav-ui/nav-ui';
+import Callback from '../callback/callback';
 import Dashboard from '../dashboard/dashboard';
+import DashboardEdit from '../dashboard/dashboard-edit';
 import AuthRedirect from '../auth-redirect/auth-redirect';
 import Projects from '../open-projects/open-projects';
+import ProjectDetails from '../project-details/project-details';
+import ProjectEdit from '../project-details/project-editing';
+import NewProject from '../project-form/new-project-form';
 import AboutUs from '../about-us/about-us';
-import ThankYou from "../thank-you/thank-you";
+import ThankYou from '../thank-you/thank-you';
+import Footer from '../footer/footer';
 import {Redirect, Switch} from "react-router";
 import HashRouter from "react-router-dom/es/HashRouter";
 
@@ -19,15 +26,22 @@ class App extends React.Component {
     return (
         <div>
           <HashRouter basename={process.env.CDN_URL}>
-            <div>
-              {/* <Route path='*' component={Landing}/> */}
+            <div className='main-container'>
+              <NavUi location={location} />
               <Route exact path={routes.SITE_ROOT_FRONTEND} component={Landing}/>
               <Route path={routes.LOGIN_FRONTEND} component={Landing}/>
+              <Route path={routes.LOGOUT_FRONTEND} component={Landing}/>
               <Route path={routes.SIGNUP_FRONTEND} component={Landing}/>
+              <Route path={routes.CALLBACK_FRONTEND} component={Callback}/>
               <Route path={routes.DASHBOARD_FRONTEND} component={Dashboard}/>
+              <Route path={routes.DASHBOARD_EDIT_FRONTEND} component={DashboardEdit}/>
               <Route path={routes.PROJECTS_FRONTEND} component={Projects}/>
+              <Route path={routes.PROJECT_NEW_FRONTEND} component={NewProject}/>
+              <Route path={routes.PROJECT_DETAILS_FRONTEND} component={ProjectDetails}/>
+              <Route path={routes.PROJECT_EDIT_FRONTEND} component={ProjectEdit}/>
               <Route path={routes.ABOUT_US_FRONTEND} component={AboutUs}/>
               <Route path={routes.THANK_YOU_FRONTEND} component={ThankYou}/>
+              <Footer />
             </div>
           </HashRouter>
         </div>

front-end/src/components/auth-redirect/auth-redirect.js

@@ -30,7 +30,7 @@ class AuthRedirect extends React.Component {
 
     // default for new user sign-up
     if (!token && path === routes.SIGNUP_FRONTEND) {
-      sendTo = routes.SIGNUP_FRONTEND;
+      sendTo = routes.DASHBOARD_EDIT_FRONTEND;
     }
 
     // default for "authorized users"

front-end/src/components/button/button.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import posed from 'react-pose';
+
+const Posedbutton = posed.button({
+  hoverable: true,
+  pressable: true,
+  init: { scale: 1 },
+  hover: { scale: 1.2 },
+  press: { scale: 1.1 },
+});
+
+const Button = (props) => {
+  return (
+    <Posedbutton {...props}/>
+  );
+};
+
+export default Button;

front-end/src/components/callback/callback.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import AuthRedirect from '../auth-redirect/auth-redirect';
+
+const Callback = (props) => {
+  return (
+    <AuthRedirect />
+  );
+};
+
+export default Callback;

front-end/src/components/dashboard/dashboard-edit.js

@@ -0,0 +1,34 @@
+// packages
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+
+import NewProfileForm from '../profile-form/new-profile-form';
+import BusinessProfileEdit from '../profile-form/business-profile-edit';
+import VolunteerProfileEdit from '../profile-form/volunteer-profile-edit';
+
+// styles
+import './dashboard-edit.scss';
+/* TODO Add redux for conditional rendering */
+class DashboardEdit extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userExist: null,
+      userType: null,
+    }
+  }
+
+  render() {
+    const { location } = this.props;
+
+    return (
+        <React.Fragment>
+          {this.state.userType === null && <NewProfileForm />}
+          {this.state.userType === 'business' && <BusinessProfileEdit />}
+          {this.state.userType === 'volunteer' && <VolunteerProfileEdit />}
+        </React.Fragment>
+    );
+  }
+}
+
+export default DashboardEdit;

front-end/src/components/dashboard/dashboard-edit.scss

@@ -0,0 +1,110 @@
+@import '../../../style/variables.scss';
+
+/*.profile-form {
+  padding-top: 100px;
+  position: static;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  margin: auto;
+}
+
+.form-container {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
+
+.profile-container {
+  width: 60vw;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  margin: 0 0 20px 0;
+  color: $color-primary;
+}
+
+.profile-container > h2, h3 {
+  width: 100%;
+  text-align: center;
+}
+
+.profile-container > span > p {
+  color: $color-primary;
+}
+
+.profile-container > h2 {
+  background-color: $color-quaternary;
+  margin: 0;
+  padding: 18px 0 18px 0;
+  border-radius: 10px 10px 0 0;
+  color: $color-primary;
+}
+
+.profile-form p {
+  color: $color-octonary;
+}
+
+.profile-edit-fields {
+  display: flex;
+  flex-flow: column wrap;
+  margin: 20px 0 0 0;
+  width: 80%;
+  justify-content: center;
+  font-weight: bold;
+}
+
+.profile-edit-fields > label {
+  padding: 1em 0 1em 0;
+}
+
+.profile-edit-fields input[type='text'], input[type='email'], input[type='url'], textarea {
+  font-family: $raleway;
+  font-size: 18px;
+}
+
+.user-type label {
+  font-size: 20px;
+}
+
+.user-type > label:nth-of-type(2) {
+  padding-left: 2em;
+}
+
+.profile-edit-fields button {
+  width: 80px;
+  background-color: $color-quaternary;
+  margin: 20px 0 20px 0;
+  font-size: 16px;
+  align-self: center;
+  color: $color-primary;
+}
+
+button:disabled {
+  background-color: #dddddd;
+  color: #666666;
+}
+
+.skills-group {
+  margin: 30px 0 0 0;
+}
+
+.skills-checkbox {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: [label] 40% [input] 2em ;
+  max-height: 270px;
+  padding-left: 22%;
+}
+
+.skills-checkbox > li {
+  border: 1px transparent solid;
+  display:inline-block;
+  width: 12em;
+  align-self: center;
+}
+
+.invalid-feedback {
+  color: red;
+}*/