Feature/improvements

package.json

@@ -34,13 +34,14 @@
     "recompose": "^0.30.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "BROWSER=firefox react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
     "lint": "eslint --ext .jsx,.js src/",
     "lint:fix": "eslint --ext .jsx,.js src/ --fix"
+
   },
   "browserslist": {
     "production": [
@@ -68,4 +69,4 @@
     "eslint-plugin-standard": "^4.0.1",
     "prettier": "^2.0.5"
   }
-}
+}

src/components/main-site/Footer.js

@@ -7,6 +7,7 @@ import {
   faGithub,
   faFacebook,
   faTwitterSquare,
+  faYoutubeSquare
 } from "@fortawesome/free-brands-svg-icons";
 import { withStyles } from "@material-ui/styles";
 
@@ -16,7 +17,7 @@ const styles = {
   },
   footer: {
     backgroundColor: "#333",
-    borderBottom: "3px solid #f21131",
+    borderBottom: "3px solid #871a13",
     textAlign: "center",
   },
   footerIcon: {
@@ -85,6 +86,16 @@ const Footer = ({ classes }) => (
                   />
                 </a>
               </span>
+              <span>{""}</span>
+              <span>
+                <a href="https://www.youtube.com/channel/UCh5M0KFUG1-qSYQIUmXHl7w">
+                  {""}
+                  <FontAwesomeIcon
+                    className={classes.footerIcon}
+                    icon={faYoutubeSquare}
+                  />
+                </a>
+              </span>
             </div>
           </div>
         </Row>

src/components/main-site/Header.js

@@ -12,36 +12,43 @@ import { faUserCircle } from "@fortawesome/free-solid-svg-icons";
 import * as ROUTES from "../../constants/routes";
 
 import img from "../../assets/img/header.jpg";
+import logo from "../../assets/img/logo_resized.png"
+import UPEclass from "../../assets/img/UPEclass.jpg"
+
 
 const styles = {
   mainNav: {
     paddingTop: "10px",
+    paddingLeft: "200px",
     paddingBottom: "10px",
-    fontfamily: "Andale Mono, monospace",
-    borderTop: "3px solid #f21131",
+    fontfamily: "Recursive",
+    borderTop: "3px solid #871a13", // was f21131
     backgroundColor: "#333",
   },
   mainNavBrand: {
     "& span": {
-      fontFamily: "Gruppo",
+      // fontFamily: "Gruppo",
+      // fontFamily: "Montserrat",
       fontSize: "36px",
       margin: 0,
       lineHeight: 1,
       fontWeight: 800,
       letterSpacing: "3px",
       textTransform: "uppercase",
-      color: "#f21131",
+      color: "#871a13", // was #f21131
       transition: "all .3s",
+      paddingLeft: "0px",
       "@media only screen and (max-width:992px)": {
         paddingLeft: "20px",
       },
       "@media only screen and (min-width:992px)": {
-        paddingLeft: "300px",
+        paddingLeft: "50px", //was 300px
       },
       "&:hover": {
         color: "#C30000",
         textDecoration: "none",
       },
+
     },
   },
   mainNavLinks: {
@@ -53,14 +60,14 @@ const styles = {
     paddingLeft: "20px",
     color: "#fff",
     "&:hover": {
-      color: "#f21131",
+      color: "#871a13",
       textDecoration: "none",
     },
     "& span": {
       paddingLeft: "30px",
       color: "#fff",
       "&:hover": {
-        color: "#f21131",
+        color: "#871a13",
         textDecoration: "none",
       },
     },
@@ -78,7 +85,7 @@ const styles = {
     textDecoration: "none",
     "&:hover": {
       textDecoration: "none",
-      color: "#f21131",
+      color: "#871a13",
     },
   },
   masthead: {
@@ -88,21 +95,22 @@ const styles = {
     backgroundAttachment: "scroll",
     position: "relative",
     backgroundSize: "cover",
-    backgroundImage: `url(${img})`,
+    backgroundImage: `url(${UPEclass})`,
+
   },
   mastheadSiteHeading: {
-    padding: "200px 0 150px",
+    padding: "350px 0 150px",
     color: "#fff",
     "@media only screen and (min-width:768px)": {
-      padding: "200px 0!important",
+      padding: "325px 0!important",
     },
   },
   loginIcon: {
     color: "white",
     fontSize: "30px",
     transition: "all .3s linear",
     "&:hover": {
-      color: "#f21131",
+      color: "#f871a13",
       "-webkit-transform": "translateY(-2px)",
       transform: "translateY(-2px)",
       transition: "all .3s linear",
@@ -116,6 +124,7 @@ const Header = ({ classes }) => (
       <Navbar collapseOnSelect className={classes.mainNav} expand="lg">
         <Link to={ROUTES.LANDING}>
           <Navbar.Brand className={classes.mainNavBrand}>
+            <img src={logo} alt="Logo of UPE"/>
             <span>BU UPE</span>
           </Navbar.Brand>
         </Link>
@@ -172,17 +181,15 @@ const Header = ({ classes }) => (
         </Navbar.Collapse>
       </Navbar>
     </div>
-
-    <div className={classes.masthead}>
-      <div className="container">
-        <div className="row">
-          <div className="col-lg-8 col-md-10 mx-auto">
-            <div className={classes.mastheadSiteHeading} />
-          </div>
-        </div>
-      </div>
-    </div>
+
   </div>
+
+
+
+
+
+
+
 );
 
 export default withStyles(styles)(Header);

src/components/main-site/HeaderPhoto.js

@@ -0,0 +1,48 @@
+import React from "react";
+
+import "bootstrap/dist/css/bootstrap.min.css";
+import { withStyles } from "@material-ui/styles";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUserCircle } from "@fortawesome/free-solid-svg-icons";
+
+import UPEclass from "../../assets/img/UPEclass.jpg"
+
+const styles = {
+    masthead: {
+        marginBottom: "50px",
+        background: "no-repeat center center",
+        backgroundColor: "#868e96",
+        backgroundAttachment: "scroll",
+        position: "relative",
+        backgroundSize: "cover",
+        backgroundImage: `url(${UPEclass})`,
+
+      },
+      mastheadSiteHeading: {
+        padding: "350px 0 150px",
+        color: "#fff",
+        "@media only screen and (min-width:768px)": {
+          padding: "325px 0!important",
+        },
+      },
+}
+
+
+
+
+
+const HeaderPhoto = ({classes}) => (
+    <div className={classes.masthead}>
+    <div className="container">
+      <div className="row">
+        <div className="col-lg-8 col-md-10 mx-auto">
+          <div className={classes.mastheadSiteHeading} />
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+
+
+export default withStyles(styles)(HeaderPhoto);

src/components/main-site/MemberCard.js

@@ -39,12 +39,12 @@ const styles = {
   },
   cardTitle: {
     fontSize: "30px",
-    fontFamily: "Gruppo",
+    fontFamily: "Montserrat",
     fontWeight: 1000,
   },
   cardSubtitle: {
     fontSize: "25px",
-    fontFamily: "Gruppo",
+    fontFamily: "Montserrat",
     fontWeight: 1000,
     color: "#f21131",
   },

src/pages/main-site/About.js

@@ -12,11 +12,15 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import Button from "react-bootstrap/Button";
 
+
+
 const About = () => {
   return (
     <div className="landing">
       <Header />
+      <div style={{padding:"20px"}}>
 
+      </div>
       <Container>
         <Row>
           <Col md={12}>
@@ -34,7 +38,7 @@ const About = () => {
               <p>
                 UPE BU Members are both undergraduate & graduate students from
                 Boston University who are either actively studying information
-                techniologies and computing disciplines or have shown exceeding
+                technologies and computing disciplines or have shown exceeding
                 interest and/or talent in them.
               </p>
             </div>

src/pages/main-site/Contact.js

@@ -11,11 +11,14 @@ import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 
+
 const About = () => {
   return (
     <div className="landing">
       <Header />
+      <div style={{padding:"20px"}}></div>
 
+
       <Container>
         <Row>
           <Col md={12}>

src/pages/main-site/Events.js

@@ -6,12 +6,12 @@ import Footer from "../../components/main-site/Footer";
 import EventsCalendar from "../../components/main-site/EventsCalendar";
 
 import "../../styles/main-site/main.css";
-
 const Members = () => {
   return (
     <div className="landing">
       <Header />
-
+      <div style={{padding:"20px"}}></div>
+
       <EventsCalendar />
 
       <Footer />