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 {
-
- Editor
+
+
+
+ Back to Editor
+
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;
+}