12 files changed, 169 insertions, 132 deletions
diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js
new file mode 100644
index 00000000..8e6aed1a
--- /dev/null
+++ b/src/components/home/ContactSection.js
@@ -0,0 +1,33 @@
+import React from "react";
+import ContentSection from "./ContentSection";
+import "./ContentSection.css";
+
+const ContactSection = () => (
+    <ContentSection name="contact">
+        <h1>Contact</h1>
+        <div className="row">
+            <img src="img/tudelfticon.png" className="col-lg-2 col-md-2 col-sm-3 col-xs-6
+                    col-lg-offset-4 col-md-offset-4 col-sm-offset-3 col-xs-offset-3 tudelft-icon" alt="TU Delft Logo"/>
+            <div className="col-lg-4 col-md-5 col-sm-6 col-xs-10
+                col-lg-offset-0 col-md-offset-0 col-sm-offset-0 col-xs-offset-1 text-left">
+                <div className="row vcenter">
+                    <img src="img/email-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Email Icon"/>
+                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
+                        <a href="mailto:opendc@atlarge-research.com">opendc@atlarge-research.com</a>
+                    </div>
+                </div>
+                <div className="row vcenter">
+                    <img src="img/github-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Github Icon"/>
+                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
+                        <a href="https://github.com/atlarge-research/opendc">atlarge-research/opendc</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className="atlarge-footer row">
+            A project by the <a href="http://atlarge-research.com"><strong>@Large Research Group</strong></a>.
+        </div>
+    </ContentSection>
+);
+
+export default ContactSection;
diff --git a/src/components/home/ContentSection.js b/src/components/home/ContentSection.js
new file mode 100644
index 00000000..126c5e4b
--- /dev/null
+++ b/src/components/home/ContentSection.js
@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+import "./ContentSection.css";
+
+const ContentSection = ({name, children}) => (
+    <div id={name} className={classNames(name + "-section", "content-section")}>
+        <div className="container">
+            <div className="row">
+                {children}
+            </div>
+        </div>
+    </div>
+);
+
+ContentSection.propTypes = {
+    name: PropTypes.string.isRequired,
+};
+
+export default ContentSection;
diff --git a/src/components/home/ContentSection.sass b/src/components/home/ContentSection.sass
new file mode 100644
index 00000000..c84f26db
--- /dev/null
+++ b/src/components/home/ContentSection.sass
@@ -0,0 +1,27 @@
+@import ../../style-globals/_variables.sass
+
+.content-section
+  padding-top: 50px
+  padding-bottom: 150px
+  text-align: center
+
+@media screen and (min-width: $screen-sm) and (max-width: $screen-md)
+  .content-section h1
+    font-size: 2em
+    margin-bottom: 40px
+
+  .content-section h3
+    font-size: 1.5em
+
+@media screen and (min-width: $screen-md) and (max-width: $screen-lg)
+  .content-section h1
+    font-size: 3em
+    margin-bottom: 40px
+
+  .content-section h3
+    font-size: 1.8em
+
+@media screen and (min-width: $screen-lg)
+  .content-section h1
+    font-size: 3em
+    margin-bottom: 40px
diff --git a/src/components/navigation/LogoutButton.js b/src/components/navigation/LogoutButton.js
index e2da7751..d58776dc 100644
--- a/src/components/navigation/LogoutButton.js
+++ b/src/components/navigation/LogoutButton.js
@@ -1,11 +1,11 @@
 import PropTypes from "prop-types";
 import React from "react";
+import FontAwesome from "react-fontawesome";
 import {Link} from "react-router-dom";
-import "./LogoutButton.css";
 
 const LogoutButton = ({onLogout}) => (
-    <Link className="logout" title="Sign out" to="#" onClick={onLogout}>
-        <span className="fa fa-lg fa-power-off"/>
+    <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
+        <FontAwesome name="power-off" size="lg"/>
     </Link>
 );
 
diff --git a/src/components/navigation/LogoutButton.sass b/src/components/navigation/LogoutButton.sass
deleted file mode 100644
index b63494ab..00000000
--- a/src/components/navigation/LogoutButton.sass
+++ /dev/null
@@ -1,17 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.logout
-  float: right
-  margin-top: -1px
-  width: $navbar-height
-
-  font-size: 14pt
-
-  +clickable
-
-  &:hover
-    background: #e3474d
-
-  &:active
-    background: #a73438
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
index ce020fef..5a4cd29e 100644
--- a/src/components/navigation/Navbar.js
+++ b/src/components/navigation/Navbar.js
@@ -1,37 +1,66 @@
-import React, {Component} from 'react';
-import FontAwesome from "react-fontawesome";
+import classNames from "classnames";
+import React from 'react';
 import Mailto from "react-mailto";
-import {Link} from "react-router-dom";
+import {Link, withRouter} from "react-router-dom";
+import {userIsLoggedIn} from "../../auth/index";
+import Login from "../../containers/auth/Login";
 import Logout from "../../containers/auth/Logout";
 import ProfileName from "../../containers/auth/ProfileName";
 import "./Navbar.css";
 
-class Navbar extends Component {
-    render() {
-        return (
-            <div className="opendc-navbar">
-                <Link className="opendc-brand" to="/">
-                    <img src="/img/logo.png" alt="OpenDC Logo"/>
-                    <div className="opendc-title">
-                        Open<strong>DC</strong>
-                    </div>
-                </Link>
-                <div className="navigation navbar-button-group">
-                    <Link className="simulations" title="Simulations" to="/simulations">Simulations</Link>
-                </div>
-                <div className="user-controls navbar-button-group">
-                    <Mailto className="support" title="Support" email="opendc.tudelft@gmail.com"
-                            headers={{subject: "OpenDC Support"}}>
-                        <FontAwesome name="question-circle" size="lg"/>
-                    </Mailto>
-                    <Link className="username" title="My Profile" to="/profile">
-                        <ProfileName/>
-                    </Link>
-                    <Logout/>
-                </div>
+const NavItem = withRouter(props => <NavItemWithoutRoute {...props}/>);
+
+const NavItemWithoutRoute = ({route, location, children}) => (
+    <li className={classNames("nav-item", location.pathname === route ? "active" : undefined)}>
+        {children}
+    </li>
+);
+
+const Navbar = () => (
+    <nav className="navbar fixed-top navbar-toggleable-md navbar-light bg-faded">
+        <div className="container">
+            <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
+                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                <span className="navbar-toggler-icon"/>
+            </button>
+            <Link className="navbar-brand opendc-brand" to="/">
+                <img src="/img/logo.png" alt="OpenDC Logo"/>
+            </Link>
+
+            <div className="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul className="navbar-nav mr-auto">
+                    <NavItem route="/simulations">
+                        <Link className="nav-link simulations" title="Simulations"
+                              to="/simulations">Simulations</Link>
+                    </NavItem>
+                    <NavItem route="email">
+                        <Mailto className="nav-link support" title="Support" email="opendc.tudelft@gmail.com"
+                                headers={{subject: "OpenDC Support"}}>
+                            Support
+                        </Mailto>
+                    </NavItem>
+                </ul>
+                <ul className="navbar-nav">
+                    {userIsLoggedIn() ?
+                        [
+                            <NavItem route="/profile">
+                                <Link className="username nav-link" title="My Profile" to="/profile">
+                                    <ProfileName/>
+                                </Link>
+                            </NavItem>,
+                            <NavItem route="logout">
+                                <Logout/>
+                            </NavItem>
+                        ] :
+                        <NavItem route="login">
+                            <Login visible={true}/>
+                        </NavItem>
+                    }
+                </ul>
             </div>
-        );
-    }
-}
+        </div>
+    </nav>
+);
 
 export default Navbar;
diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass
index e9a83301..80346660 100644
--- a/src/components/navigation/Navbar.sass
+++ b/src/components/navigation/Navbar.sass
@@ -1,59 +1,30 @@
 @import ../../style-globals/_mixins.sass
 @import ../../style-globals/_variables.sass
 
-.opendc-navbar
-  position: relative
-  display: block
-  width: 100%
-  height: $navbar-height
-
-  color: #eee
-  background: #343434
-
-  z-index: 100
-
-  -webkit-box-shadow: -10px 8px 3px 12px #000
-  -moz-box-shadow: -10px 8px 3px 12px #000
-  box-shadow: -10px -10px 3px 12px #000
+.navbar
+  border-top: $blue 3px solid
+  border-bottom: $gray-semi-dark 1px solid
+  color: $gray-very-dark
+  background: #fafafb
 
 .opendc-brand
   display: inline-block
-  float: left
-  margin-left: $global-padding
+  //float: left
+  //margin-left: $global-padding
 
-  padding: 0 10px
+  //padding: 0 10px
 
-  cursor: pointer
-  color: #eee
-  height: 100%
+  //cursor: pointer
+  color: $gray-very-dark
+  //height: 100%
 
   +transition(background, $transition-length)
 
-  &:hover
-    color: #fff
-
   img
+    position: relative
+    bottom: 3px
     display: inline-block
-    float: left
-    margin: $navbar-padding 0
-
-    width: $navbar-height - $navbar-padding * 2
-    height: $navbar-height - $navbar-padding * 2
-    vertical-align: middle
-
-  .opendc-title
-    display: inline-block
-    float: right
-    margin-left: 20px
-
-    font-size: 16pt
-    line-height: $navbar-height
-
-.opendc-brand:hover
-  background: $blue
-
-.opendc-brand:active
-  background: $blue-dark
+    width: 30px
 
 .navbar-button-group
   display: inline-block
@@ -63,18 +34,16 @@
     display: inline-block
     line-height: $navbar-height
     text-align: center
-    color: #eee
-
-    border-left: 1px solid #464646
+    color: $gray-very-dark
 
     +clickable
     +transition(background, $transition-length)
 
-  a:last-of-type
-    border-right: 1px solid #464646
+  a:hover
+    color: $gray-dark
 
 .navigation
-  margin-left: 30px
+  margin-left: 10px
 
   .simulations
     float: left
@@ -82,12 +51,6 @@
 
     font-size: 12pt
 
-  .simulations:hover
-    background: #606060
-
-  .simulations:active
-    background: #161616
-
 .user-controls
   float: right
   margin-right: $global-padding
@@ -100,20 +63,8 @@
 
     font-size: 14pt
 
-  .support:hover
-    background: #41a0cd
-
-  .support:active
-    background: #307798
-
   .username
     float: left
     padding: 0 20px
 
     font-size: 12pt
-
-  .username:hover
-    background: #4eae44
-
-  .username:active
-    background: #2d6527
diff --git a/src/components/simulations/FilterButton.sass b/src/components/simulations/FilterButton.sass
index 60f6faca..698bc9a4 100644
--- a/src/components/simulations/FilterButton.sass
+++ b/src/components/simulations/FilterButton.sass
@@ -4,18 +4,13 @@
 .simulation-filter-button
   display: inline-block
   width: 33.3%
-  //margin-right: -4px
   padding: 10px $global-padding
 
   font-size: 12pt
-  border-right: 1px solid #06326b
 
   +clickable
   +transition(background, $transition-length)
 
-.simulation-filter-button:last-of-type
-  border: 0
-
 .simulation-filter-button:hover
   background: #0c60bf
 
diff --git a/src/components/simulations/FilterPanel.js b/src/components/simulations/FilterPanel.js
index b43139c1..811da005 100644
--- a/src/components/simulations/FilterPanel.js
+++ b/src/components/simulations/FilterPanel.js
@@ -7,7 +7,7 @@ const FilterPanel = () => (
         <div className="simulation-filters">
             <FilterLink filter="SHOW_ALL">All Simulations</FilterLink>
             <FilterLink filter="SHOW_OWN">My Simulations</FilterLink>
-            <FilterLink filter="SHOW_SHARED">Simulations shared with me</FilterLink>
+            <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
         </div>
     </div>
 );
diff --git a/src/components/simulations/FilterPanel.sass b/src/components/simulations/FilterPanel.sass
index a59ffdfd..70401dcb 100644
--- a/src/components/simulations/FilterPanel.sass
+++ b/src/components/simulations/FilterPanel.sass
@@ -5,12 +5,11 @@
   display: block
 
   background: #0761b1
-  border: 1px solid #06326b
   color: #eee
 
   text-align: center
 
-  +border-radius($standard-border-radius)
+  +border-radius(25px)
   overflow: hidden
 
   margin-bottom: 20px
diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js
index 1731b9be..29872fcb 100644
--- a/src/components/simulations/SimulationActionButtons.js
+++ b/src/components/simulations/SimulationActionButtons.js
@@ -7,7 +7,7 @@ const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
         <Link to={"/simulations/" + simulationId} className="open" title="Open this simulation">
             <span className="fa fa-play"/>
         </Link>
-        <div className="users" title="View and edit collaborators on this simulation"
+        <div className="users" title="View and edit collaborators"
              onClick={() => onViewUsers(simulationId)}>
             <span className="fa fa-users"/>
         </div>
diff --git a/src/components/simulations/SimulationAuthList.sass b/src/components/simulations/SimulationAuthList.sass
index 58683446..cb1fe4cc 100644
--- a/src/components/simulations/SimulationAuthList.sass
+++ b/src/components/simulations/SimulationAuthList.sass
@@ -54,8 +54,9 @@
 .simulation-list .list-head > div:not(:first-of-type)
   padding-left: 5px !important
 
-.simulation-row .simulation-icons
+.simulation-icons
   text-align: right
+  padding-right: 0 !important
 
 .simulation-row .simulation-icons div, .simulation-row .simulation-icons a
   display: inline-block
@@ -75,9 +76,10 @@
     top: -4px
     left: -1px
 
+  background-color: $blue-dark
+
   &.open
-    $icon-color: #0c60bf
-    background: $icon-color
+    $icon-color: #0a00bf
 
     span
       left: 1px
@@ -91,23 +93,21 @@
   &.users
     font-size: 10pt
     $icon-color: #17bf55
-    background: $icon-color
 
     span
       left: -2px
 
     &:hover
-      background: lighten($icon-color, 10%)
+      background: $icon-color
 
     &:active
       background: darken($icon-color, 10%)
 
   &.delete
     $icon-color: #e3474d
-    background: $icon-color
 
     &:hover
-      background: lighten($icon-color, 10%)
+      background: $icon-color
 
     &:active
       background: darken($icon-color, 10%)