add nav to IDE view

shared/components/Nav/Nav.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+class Nav extends React.Component {
+	render() {
+		return (
+			<nav className="nav">
+				<ul className="nav__items">
+					<li>
+						<Link to={`/login`}>Login</Link> or <Link to={`/signup`}>Sign Up</Link>
+					</li>
+				</ul>
+			</nav>
+		);
+	}
+}
+
+export default Nav;

shared/components/Preview/PreviewFrame.jsx

@@ -53,7 +53,7 @@ class PreviewFrame extends React.Component {
 	}
 
 	componentWillUnmount() {
-		React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
+		ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
 	}
 
 	render() {

shared/containers/IDEView/IDEView.jsx

@@ -3,6 +3,7 @@ import Editor from '../../components/Editor/Editor'
 import PreviewFrame from '../../components/Preview/PreviewFrame'
 import Toolbar from '../../components/Toolbar/Toolbar'
 import Preferences from '../../components/Preferences/Preferences'
+import Nav from '../../components/Nav/Nav'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as FileActions from '../../redux/actions'
@@ -11,6 +12,7 @@ class IDEView extends React.Component {
 	render() {
 		return (
 			<div className="ide">
+				<Nav />
 				<Toolbar 
 					className="Toolbar"
 					isPlaying={this.props.ide.isPlaying}

styles/base/_base.scss

@@ -6,7 +6,21 @@ html {
 	font-size: #{$base-font-size}px;
 }
 
+body {
+	font-family: Montserrat, sans-serif;
+	color: $light-primary-text-color;
+}
+
 .root-app, .app {
 	min-height: 100%;
 	height: 100%;
+}
+
+a {
+	text-decoration: none;
+	color: $light-secondary-text-color;
+	&:hover {
+		text-decoration: none;
+		color: $light-primary-text-color;
+	}
 }

styles/base/_reset.scss

@@ -5,4 +5,9 @@ html, body {
 	padding: 0;
 	min-height: 100%;
 	height: 100%;
+}
+
+ul {
+	padding: 0;
+	margin: 0;
 }

styles/components/_nav.scss

@@ -0,0 +1,16 @@
+.nav {
+	width: 100%;
+	padding: #{10 / $base-font-size}rem #{40 / $base-font-size}rem;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+}
+
+.nav__items {
+	list-style: none;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	padding: #{5 / $base-font-size}rem #{10 / $base-font-size}rem;
+	border-bottom: 2px dashed;
+}

styles/main.scss

@@ -8,6 +8,7 @@
 
 @import 'components/p5-widget-codemirror-theme';
 @import 'components/editor';
+@import 'components/nav';
 @import 'components/toolbar';
 @import 'components/preferences';