change link to editor back to 'back to editor'

Author: catarak

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>

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;
+}