From 3a65afb6da0b6eca28f69eea6f56cc0ecfe4bed1 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 11 Sep 2019 16:46:56 -0400
Subject: [PATCH] change link to editor back to 'back to editor'

---
 client/components/Nav.jsx          |  8 ++++++--
 client/styles/components/_nav.scss | 27 ++++++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index d6a7a742..d47f8eb4 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -11,6 +11,7 @@ import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
 import { logoutUser } from '../modules/User/actions';
 
 import { metaKeyName, } from '../utils/metaKey';
+import caretLeft from '../images/left-arrow.svg';
 
 const triangleUrl = require('../images/down-filled-triangle.svg');
 const logoUrl = require('../images/p5js-logo-small.svg');
@@ -224,8 +225,11 @@ class Nav extends React.PureComponent {
           <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
         </li>
         <li className="nav__item nav__item--no-icon">
-          <Link to="/">
-            <span className="nav__item-header">Editor</span>
+          <Link to="/" className="nav__back-link">
+            <InlineSVG src={caretLeft} className="nav__back-icon" />
+            <span className="nav__item-header">
+              Back to Editor
+            </span>
           </Link>
         </li>
       </ul>
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index d58e54d0..b60752c4 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -58,6 +58,12 @@
       color: getThemifyVariable('nav-hover-color');
     }
   }
+  
+  & g, & path {
+    @include themify() {
+      fill: getThemifyVariable('nav-hover-color');
+    }
+  }
 
   .nav__item-header-triangle polygon {
     @include themify() {
@@ -68,8 +74,13 @@
 
 .nav__item-header:hover {
   @include themify() {
-      color: getThemifyVariable('nav-hover-color');
+    color: getThemifyVariable('nav-hover-color');
+  }
+  & g, & path {
+    @include themify() {
+      fill: getThemifyVariable('nav-hover-color');
     }
+  }
 }
 
 .nav__item-header-triangle {
@@ -181,3 +192,17 @@
     }
   }
 }
+
+.nav__back-icon {
+  & g, & path {
+    opacity: 1;
+    @include themify() {
+      fill: getThemifyVariable('inactive-text-color');
+    }
+  }
+  margin-right: #{5 / $base-font-size}rem;
+}
+
+.nav__back-link {
+  display: flex;
+}