r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

change link to editor back to 'back to editor'

Browse source
This commit is contained in:
Cassie Tarakajian 2019-09-11 16:46:56 -04:00
parent 41636642c9
commit 3a65afb6da
2 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/components/Nav.jsx
View file

@ -11,6 +11,7 @@ import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
import { logoutUser } from '../modules/User/actions'; import { logoutUser } from '../modules/User/actions';
import { metaKeyName, } from '../utils/metaKey'; import { metaKeyName, } from '../utils/metaKey';
import caretLeft from '../images/left-arrow.svg';
const triangleUrl = require('../images/down-filled-triangle.svg'); const triangleUrl = require('../images/down-filled-triangle.svg');
const logoUrl = require('../images/p5js-logo-small.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" /> <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
</li> </li>
<li className="nav__item nav__item--no-icon"> <li className="nav__item nav__item--no-icon">
<Link to="/"> <Link to="/" className="nav__back-link">
<span className="nav__item-header">Editor</span> <InlineSVG src={caretLeft} className="nav__back-icon" />
<span className="nav__item-header">
Back to Editor
</span>
</Link> </Link>
</li> </li>
</ul> </ul>

27
client/styles/components/_nav.scss
View file

@ -58,6 +58,12 @@
color: getThemifyVariable('nav-hover-color'); color: getThemifyVariable('nav-hover-color');
} }
} }
& g, & path {
@include themify() {
fill: getThemifyVariable('nav-hover-color');
}
}
.nav__item-header-triangle polygon { .nav__item-header-triangle polygon {
@include themify() { @include themify() {
@ -68,8 +74,13 @@
.nav__item-header:hover { .nav__item-header:hover {
@include themify() { @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 { .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;
}