Feature: Add About Page [#151016375] (#155)

* Feature: Add About Page [#151016375]

* mary notifs - initial commit

* create application

create a new application when applying to a project.

* fix lint

* remove white space

* mark as seen applications

* show application info

Author: ianroberts131

.git-authors

@@ -16,6 +16,7 @@ pairs:
   md: Michael Donal; michaelbretagne
   ch: Christina Hsieh
   sm: Sergio Monteiro
+  ir: Ian Roberts
 
 email:
   prefix: pair
@@ -26,3 +27,4 @@ email_addresses:
    km: [email protected]
    mw: [email protected]
    ch: [email protected]
+   ir: [email protected]

client/App.js

@@ -9,6 +9,7 @@ import AuthActionCreator from './actions/auth'
 import ForgotPasswordForm from './components/ForgotPasswordForm/ForgotPasswordForm'
 import Header from './components/Header/Header'
 import Home from './components/Home/Home'
+import About from './components/About/About'
 import LoginForm from './components/LoginForm/LoginForm'
 import restricted from './components/Restricted/Restricted'
 import SignupForm from './components/SignupForm/SignupForm'
@@ -44,6 +45,7 @@ class App extends Component {
         <Version />
         <Switch>
           <Route exact path='/' component={Home}/>
+          <Route path='/about' component={About}/>
           <Route path='/create-project' component={CreateProjectRestrictedLoadable}/>
           <Route path='/forgot-password' component={ForgotPasswordForm}/>
           <Route path='/login' component={LoginForm}/>

client/components/About/About.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+
+import styles from './About.scss'
+
+class About extends Component {
+  render () {
+    return (
+      <section className={styles.aboutSection}>
+        <h1>Contact</h1>
+        <p className={styles.aboutItem}>
+          <span className={styles.aboutItemTitle}>Email: </span>
+          <span>
+            <a href="mailto:[email protected]">
+              [email protected]
+            </a>
+          </span>
+        </p>
+        <p className={styles.aboutItem}>
+          <span className={styles.aboutItemTitle}>Slack Channel: </span>
+          <span>
+            <a href="http://join-our-slack.code4socialgood.org">
+              call-to-code-info
+            </a>
+          </span>
+        </p>
+        <h1>Mission Statement</h1>
+        <p>
+          A platform where college students can get development experience by
+          matching them with nonprofits, calltocode.org is a nonprofit and open-sourced
+          product built by volunteers to accomplish a positive mission.
+        </p>
+      </section>
+    )
+  }
+}
+
+export default About

client/components/About/About.scss

@@ -0,0 +1,12 @@
+.aboutItem {
+  margin-bottom: 10px;
+}
+
+.aboutItemTitle {
+  font-weight: 900;
+}
+
+.aboutSection {
+  padding: 0 60px;
+  display: grid;
+}

client/components/Header/Header.js

@@ -21,7 +21,9 @@ class Header extends Component {
   }
 
   componentDidMount () {
-    this.props.getNotifications()
+    if (this.props.authenticated) {
+      this.props.getNotifications()
+    }
   }
 
   renderNotificationBadge () {
@@ -74,6 +76,7 @@ class Header extends Component {
               <Link to="/" className={styles.button}>calltocode</Link>
             </Typography>
             {this.renderHeaderButtons()}
+            <Link key="about" to="/about" className={this.getLinkStyles('about')}>ABOUT</Link>
           </Toolbar>
         </AppBar>
       </div>

client/components/Home/Home.js

@@ -73,11 +73,11 @@ class Home extends Component {
         <section className={styles.filterSection}>
           <span className={styles.filterTitle}><h1>{'Filters'}</h1></span>
           <FormLabel className={styles.causeTitle}>Causes</FormLabel>
-          <FormGroup column className={styles.causesList}>
+          <FormGroup className={styles.causesList}>
             { this.renderList(causes, 'causes') }
           </FormGroup>
           <FormLabel className={styles.techTitle}>Tech</FormLabel>
-          <FormGroup column className={styles.techList}>
+          <FormGroup className={styles.techList}>
             { this.renderList(technologies, 'technologies') }
           </FormGroup>
         </section>

yarn.lock

@@ -3228,7 +3228,7 @@ es6-error@^4.0.1, es6-error@^4.0.2, es6-error@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
 
-es6-iterator@^2.0.1, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
+es6-iterator@^2.0.1, es6-iterator@~2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
   dependencies: