From 5c3f36e671cf4a45cac740399f53032d2fb33ac9 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Thu, 9 Jun 2016 22:15:50 -0400
Subject: [PATCH] add nav to IDE view

---
 shared/components/Nav/Nav.jsx              | 18 ++++++++++++++++++
 shared/components/Preview/PreviewFrame.jsx |  2 +-
 shared/containers/IDEView/IDEView.jsx      |  2 ++
 styles/base/_base.scss                     | 14 ++++++++++++++
 styles/base/_reset.scss                    |  5 +++++
 styles/components/_nav.scss                | 16 ++++++++++++++++
 styles/main.scss                           |  1 +
 7 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 shared/components/Nav/Nav.jsx
 create mode 100644 styles/components/_nav.scss

diff --git a/shared/components/Nav/Nav.jsx b/shared/components/Nav/Nav.jsx
new file mode 100644
index 00000000..92e5424c
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/shared/components/Preview/PreviewFrame.jsx b/shared/components/Preview/PreviewFrame.jsx
index d29423d1..0137f400 100644
--- a/shared/components/Preview/PreviewFrame.jsx
+++ b/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() {
diff --git a/shared/containers/IDEView/IDEView.jsx b/shared/containers/IDEView/IDEView.jsx
index a6763484..3df366e7 100644
--- a/shared/containers/IDEView/IDEView.jsx
+++ b/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}
diff --git a/styles/base/_base.scss b/styles/base/_base.scss
index 06d9f4ec..9cddec36 100644
--- a/styles/base/_base.scss
+++ b/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;
+	}
 }
\ No newline at end of file
diff --git a/styles/base/_reset.scss b/styles/base/_reset.scss
index 94606930..2e2487b3 100644
--- a/styles/base/_reset.scss
+++ b/styles/base/_reset.scss
@@ -5,4 +5,9 @@ html, body {
 	padding: 0;
 	min-height: 100%;
 	height: 100%;
+}
+
+ul {
+	padding: 0;
+	margin: 0;
 }
\ No newline at end of file
diff --git a/styles/components/_nav.scss b/styles/components/_nav.scss
new file mode 100644
index 00000000..2c54a6da
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/styles/main.scss b/styles/main.scss
index aa511445..573a2614 100644
--- a/styles/main.scss
+++ b/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';