Merge branch 'master' into master

Author: kylemh

Diff for: package.json

@@ -93,7 +93,8 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "backend": "./bin/run_backend.sh",
-    "validate": "npm ls"
+    "validate": "npm ls",
+    "image-size": "node scripts/imageSize.js"
   },
   "jest": {
     "moduleDirectories": ["node_modules", "src"],
@@ -119,5 +120,5 @@
     "presets": ["react-app"]
   },
   "homepage": "http://frontend.operationcode.org/",
-  "pre-commit": ["fix", "format", "lint"]
+  "pre-commit": ["fix", "format", "lint", "image-size"]
 }

Diff for: scripts/imageSize.js

@@ -0,0 +1,28 @@
+/* eslint-disable */
+const path = require('path');
+const fs = require('fs');
+
+const readImageDirectory = dir =>
+  fs
+    .readdirSync(dir)
+    .reduce(
+    (files, file) =>
+      fs.statSync(path.join(dir, file)).isDirectory()
+        ? files.concat(readImageDirectory(path.join(dir, file)))
+        : files.concat(path.join(dir, file)),
+    []
+    )
+    .filter(file => typeof file === 'string')
+    .filter(image => {
+      fs.lstatSync(image).size > 1000000;
+    });
+
+const fileArray = readImageDirectory('src/images/');
+
+if (fileArray.length) {
+  console.log(`The following image(s) are over our 1MB size limit: ${fileArray}`);
+  process.exit(-1);
+} else {
+  console.log('Test successful 💪 💪 💪 💪 💪 💪');
+  process.exit(0);
+}

Diff for: src/scenes/home/about/about.js

@@ -23,7 +23,7 @@ const About = () => (
         Aside from our work on the Hill, we offer many services to the military community and are continuing to expand our offerings as often as possible. First and foremost, <Link to="/team">our staff</Link> works tirelessly to provide mentorship for veterans interested in learning about various tech careers. Dozens of software engineers, product managers, system architects, security engineers, and various other IT professionals act as 1-on-1  mentors to all of our members. We also have a hardware loan program to help veterans in need of a laptop!
       </p>
       <p>
-        As a non-profit organization, we rely heavily on your support. If you are interested in helping us financially, please <a href="https://opencollective.com/operationcode#support" target="_blank" rel="noopener noreferrer">donate here</a> or <a href="https://smile.amazon.com/ch/47-4247572" target="_blank" rel="noopener noreferrer">set your Amazon Smile organization to &quot;Operation Code&quot;</a>. We also have our first Gala planned for Fall 2017 in Portland Oregon! Register to attend <Link to="/gala">here</Link>. If you have questions about our organization, platforms, or services, please reference our <Link to="/faq">FAQ page</Link>. Otherwise, do not hesitate to <Link to="/contact">reach out to our staff</Link>.
+        As a non-profit organization, we rely heavily on your support. If you are interested in helping us financially, please <a href="https://opencollective.com/operationcode#support" target="_blank" rel="noopener noreferrer">donate here</a> or <a href="https://smile.amazon.com/ch/47-4247572" target="_blank" rel="noopener noreferrer">set your Amazon Smile organization to &quot;Operation Code&quot;</a>. If you have questions about our organization, platforms, or services, please reference our <Link to="/faq">FAQ page</Link>. Otherwise, do not hesitate to <Link to="/contact">reach out to our staff</Link>.
       </p>
     </Section>
 

Diff for: src/scenes/home/branding/logos/logos.css

@@ -19,7 +19,7 @@
   text-align: justify;
 }
 
-a {
+.logosInfo a {
   color: #249cbc;
   font-size: 1.3rem;
   text-decoration: none;

Diff for: src/scenes/home/branding/logos/logos.js

@@ -36,7 +36,7 @@ const LogosSection = () => (
       In most cases, use the blue-accent version of the logo. The red-accent is
       delivered for special uses only.
     </p>
-    <p>
+    <p className={styles.logosInfo}>
       <a href="https://ocbranding.squarespace.com/s/Operation-Code-Logo.eps">
         Download master EPS file
       </a>

Diff for: src/scenes/home/footer/footer.css

@@ -1,8 +1,9 @@
 .footer {
-  background-color: #4A4A4A;
-  height: 250px;
+  background-color: #4a4a4a;
+  height: 300px;
   padding: 0 20px;
   position: relative;
+  font-size: 1.1rem;
 }
 
 .content {
@@ -12,15 +13,21 @@
   height: 100%;
 }
 
-/* outerFooterGroups class represents the NON logo columns of the footer flex container */
-.outerFooterGroups {
+/* outerFooterGroup classes represent the NON logo columns of the footer flex container */
+.outerFooterGroupLinks {
+  display: flex;
+  flex: 1 0 30%;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.outerFooterGroupSocial {
   display: flex;
   flex: 1 0 30%;
   flex-flow: column wrap;
   padding: 64px 0;
   justify-content: space-around;
   align-items: center;
-  overflow: hidden;
 }
 
 .email {
@@ -29,7 +36,7 @@
 }
 
 .email a {
-  color: #F7F7F7;
+  color: #f7f7f7;
   text-align: center;
   text-decoration: none;
 }
@@ -49,15 +56,17 @@
 .blockGroup {
   display: flex;
   flex: 1 0 50%;
-  flex-flow: row wrap;
-  align-items: center;
+  flex-flow: column wrap;
+  align-items: flex-start;
   justify-content: space-around;
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 
 .blockGroup a {
   text-decoration: none;
-  color: #F7F7F7;
-  padding: 0 30px;
+  color: #f7f7f7;
+  margin: 0.75rem 0px;
 }
 
 .blockGroup a:hover {
@@ -66,7 +75,7 @@
 }
 
 .copyright {
-  color:#F7F7F7;
+  color: #f7f7f7;
   font-size: inherit;
   font-family: 'PF Din Display';
   text-align: center;
@@ -78,7 +87,8 @@
 }
 
 @media screen and (max-width: 1330px) {
-  .outerFooterGroups {
+  .outerFooterGroupSocial,
+  .outerFooterGroupLinks {
     flex: 1 0 35%;
   }
 
@@ -93,7 +103,7 @@
   }
 }
 
-@media screen and (min-width: 481px) and (max-width: 979px) {
+@media screen and (min-width: 481px) and (max-width: 1100px) {
   .logo > img {
     height: 100px;
   }
@@ -104,66 +114,67 @@
 }
 
 @media screen and (max-width: 768px) {
-  .logo > p {
-    font-size: 0.5rem;
-  }
-}
-
-@media screen and (min-width: 481px) and (max-width: 768px) {
-  .outerFooterGroups {
-    padding: 32px 0;
-  }
-
-  .blockGroup {
-    flex-direction: column;
-    height: 100%;
-  }
-}
-
-@media screen and (max-width: 616px) {
-  .email {
-    font-size: 0.8rem;
-  }
-
-  .blockRow a {
-    padding: 10px 10px;
-  }
-}
-
-@media screen and (max-width: 480px) {
   .footer {
-    height: 500px;
-    padding: 0 16px;
+    height: 700px;
+    padding: 2rem 1rem 1rem 1rem;
   }
 
   .content {
     display: block;
   }
 
-  .outerFooterGroups {
+  .outerFooterGroupSocial,
+  .outerFooterGroupLinks {
     justify-content: center;
     flex: 1 0 auto;
-    padding: 20px 0;
+    padding: 5px 0px;
   }
 
   .email {
     font-size: 1.3rem;
     margin-bottom: 10px;
   }
 
+  .logo {
+    margin: 1rem 0;
+  }
+
+  .copyright {
+    margin: 0;
+  }
+
   .logo img {
     height: 100px;
+    line-height: 1.5;
+    margin: 0 0 1rem 0;
   }
 
   .blockGroup {
     font-size: 1rem;
   }
 
   .blockGroup a {
+    padding: 0px 0px 0px 6rem;
+    font-size: 1.3rem;
+  }
+}
+
+@media screen and (max-width: 616px) {
+  .blockRow a {
     padding: 10px 10px;
   }
 
-  .blockGroup ~ .blockGroup {
-    margin-top: 10px;
+  .footer {
+    height: 650px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .blockGroup a {
+    padding-left: 3rem;
+  }
+
+  .footer {
+    padding-bottom: 50px;
   }
 }

Diff for: src/scenes/home/footer/footer.js

@@ -8,7 +8,7 @@ import styles from './footer.css';
 const Footer = () => (
   <div className={styles.footer}>
     <div className={styles.content}>
-      <div className={styles.outerFooterGroups}>
+      <div className={styles.outerFooterGroupSocial}>
         <div className={styles.email} >
           <a href="mailto:[email protected]">[email protected]</a>
         </div>
@@ -22,7 +22,7 @@ const Footer = () => (
           Operation Code™
         </p>
       </div>
-      <div className={styles.outerFooterGroups}>
+      <div className={styles.outerFooterGroupLinks}>
         <div className={styles.blockGroup} >
           <Link to="/about">About</Link>
           <Link to="/press">Press</Link>
@@ -35,6 +35,7 @@ const Footer = () => (
           <a href="https://smile.amazon.com/ch/47-4247572" target="_blank" rel="noopener noreferrer">Amazon Smile</a>
           <Link to="/contact">Contact</Link>
           <a href="https://www.iubenda.com/privacy-policy/8174861" target="_blank" rel="noopener noreferrer">Privacy</a>
+          <Link to="/terms">Terms of Service</Link>
         </div>
         <ScrollUpButton />
       </div>

Diff for: src/scenes/home/landing/emailSignup/emailSignup.js

@@ -63,7 +63,7 @@ class EmailSignup extends Component {
         headingLines={false}
       >
         <p className={styles.emailSignupText}>
-          Keep up to date with everything Operation Code. We proimse we won&#39;t spam you or sell
+          Keep up to date with everything Operation Code. We promise we won&#39;t spam you or sell
           your information.
         </p>
         <Form className={styles.emailListForm}>

Diff for: src/scenes/home/mentorRequest/mentorRequest.js

@@ -13,7 +13,7 @@ class MentorRequest extends Component {
   state = {
     mentors: [],
     services: [],
-    loggedIn: true
+    loggedIn: false
   };
 
   componentDidMount() {

Diff for: src/shared/components/boardCard/boardCard.css

@@ -24,7 +24,8 @@
 .boardCard:active .descriptionText {
   opacity: 1;
   visibility: visible;
-  transition: opacity 0.3s linear;
+  transition: opacity 0.3s ease-in-out;
+  transition-delay: 0.2s;
 }
 
 .boardCard:hover > img,

Diff for: src/shared/components/schoolCard/schoolCard.css

@@ -13,6 +13,7 @@
 
 .schoolCardLink {
   text-decoration: none;
+  color: black;
 }
 
 .schoolCard p {