From 5cadf8986c38bff926e92fd65115902390a5ad7c Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 30 Aug 2017 17:22:36 -0400
Subject: [PATCH] fix logo styling, add link to keybaord shortcuts

---
 client/components/Nav.jsx            | 9 ++++++---
 client/modules/IDE/pages/IDEView.jsx | 1 +
 client/styles/components/_nav.scss   | 9 +++++++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index bb21e769..8b68d522 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -81,7 +81,7 @@ class Nav extends React.PureComponent {
     return (
       <nav className="nav" role="navigation" title="main-navigation">
         <ul className="nav__items-left" title="project-menu">
-          <li>
+          <li className="nav__item-logo">
             <InlineSVG src={logoUrl} alt="p5.js logo" />
           </li>
           <li className={navDropdownState.file}>
@@ -239,7 +239,9 @@ class Nav extends React.PureComponent {
                 <InlineSVG src={triangleUrl} />
               </li>
               <li className="nav__dropdown-item">
-                Keyboard Shortcuts
+                <button onClick={this.props.showKeyboardShortcutModal}>
+                  Keyboard Shortcuts
+                </button>
               </li>
               <li className="nav__dropdown-item">
                 <a
@@ -366,7 +368,8 @@ Nav.propTypes = {
   showShareModal: PropTypes.func.isRequired,
   showErrorModal: PropTypes.func.isRequired,
   unsavedChanges: PropTypes.bool.isRequired,
-  warnIfUnsavedChanges: PropTypes.func.isRequired
+  warnIfUnsavedChanges: PropTypes.func.isRequired,
+  showKeyboardShortcutModal: PropTypes.func.isRequired
 };
 
 Nav.defaultProps = {
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 3929f8e5..fdb01704 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -218,6 +218,7 @@ class IDEView extends React.Component {
           showErrorModal={this.props.showErrorModal}
           unsavedChanges={this.props.ide.unsavedChanges}
           warnIfUnsavedChanges={this.warnIfUnsavedChanges}
+          showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
         />
         <Toolbar
           className="Toolbar"
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 611f9e6a..103918cd 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -170,3 +170,12 @@
   z-index: 0;
 }
 
+.nav__item-logo {
+  position: relative;
+  height: #{42 / $base-font-size}rem;
+  width: #{56 / $base-font-size}rem;
+  & span {
+    position: absolute;
+  }
+}
+