merged

frontend/src/components/about.js

@@ -1,11 +1,19 @@
 import React from 'react';
 
+import Card from './expandable-card';
+import info from '../assets/card-info.js';
+
+import '../styles/card.scss';
+
 class About extends React.Component {
 	render () {
+		const cards = info.map(card => (<Card info={card} />));
+
 		return (<div className="about-us">
 			<div className="content-header">About Us</div>
 			<div className="content-body">
 				<div className="about-text">This is an about us section</div>
+				{cards}
 			</div>
 		</div>);
 	}	

frontend/src/components/expandable-card.js

@@ -0,0 +1,15 @@
+import React from 'React';
+
+import Collapsible from 'react-collapsible';
+
+class Card extends React.Component {
+	render () {
+		return (<div className="expandable-card" id={this.props.info.id}>
+			<Collapsible trigger={this.props.info.title}>
+			<div dangerouslySetInnerHTML={{__html: this.props.info.content}} />
+			</Collapsible>
+		</div>);
+	}
+}
+
+export default Card;

frontend/src/components/menu.js

@@ -6,9 +6,9 @@ import '../styles/menu.scss';
 class NavMenu extends React.Component {
 	render () {
 		return (<Menu pageWrapId={'content'} isOpen={this.props.isMenuOpen}>
-			<button onClick={this.props.setContent} id="home-menu" className="menu-item" data="home">Home</button>
-        	<button onClick={this.props.setContent} id="about-menu" className="menu-item" data="about">About Us</button>
-			<button onClick={this.props.setContent} id="calendar-menu" className="menu-item" data="calendar">Calendar</button>
+			<div onClick={this.props.setContent} id="home-menu" className="menu-item" data="home">Home</div>
+        	<div onClick={this.props.setContent} id="about-menu" className="menu-item" data="about">About Us</div>
+			<div onClick={this.props.setContent} id="calendar-menu" className="menu-item" data="calendar">Calendar</div>
 		</Menu>);
 	}
 }

frontend/src/styles/app.scss

@@ -1,13 +1,9 @@
 body {
 	margin: 0;
 	padding: 0;
-
+	font-family: sans-serif;
 	font-size: large;
 	font-weight: bold;
-
-	p {
-		color: #00b048;
-	}
 }
 
 #content {
@@ -22,5 +18,6 @@ body {
 
 	.content-body {
 		margin-top: 34px;
+		margin-right: 8px;
 	}
 }

frontend/src/styles/card.scss

@@ -0,0 +1,13 @@
+.Collapsible__trigger {
+	width: 98%;
+	background-color: #fdb6d4;
+	color: white;
+	padding-left: 2%;
+}
+
+.Collapsible__contentInner {
+	padding: 10px;
+	background-color: #FAEBF1;
+	font-size: 15px;
+	font-weight: 400;
+}

frontend/src/styles/menu.scss

@@ -24,6 +24,10 @@
 }
 
 /* General sidebar styles */
+.bm-menu-wrap {
+	left: 0px;
+}
+
 .bm-menu {
 	background: #fdb6d4;
 	padding: 2.5em 1.5em 0;
@@ -48,4 +52,7 @@
 
 .menu-item {
 	font-family: 'Raleway', Arial, sans-serif;
+	cursor: pointer;
+	padding-bottom: 13px;
+	color: #00b048;
 }

package.json

@@ -23,10 +23,11 @@
   "homepage": "https://github.com/wkwiatek/react-hot-loader-minimal-boilerplate#readme",
   "dependencies": {
     "css-loader": "^0.28.7",
-    "node-sass": "^4.5.3",
     "express": "https://registry.npmjs.org/express/-/express-4.14.1.tgz",
+    "node-sass": "^4.5.3",
     "react": "^15.4.2",
     "react-burger-menu": "^2.1.9",
+    "react-collapsible": "^2.0.3",
     "react-dom": "^15.4.2",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0"