add keyboard shortcuts to nav items

client/components/Nav.jsx

@@ -3,6 +3,10 @@ import { Link } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 
+import {
+  metaKeyName,
+} from '../utils/metaKey';
+
 const triangleUrl = require('../images/down-filled-triangle.svg');
 const logoUrl = require('../images/p5js-logo-small.svg');
 
@@ -127,6 +131,7 @@ class Nav extends React.PureComponent {
                   onBlur={this.handleBlur}
                 >
                   Save
+                  <span className="nav__keyboard-shortcut">{metaKeyName} + s</span>
                 </button>
               </li> }
               { this.props.project.id && this.props.user.authenticated &&
@@ -201,6 +206,7 @@ class Nav extends React.PureComponent {
                   onBlur={this.handleBlur}
                 >
                   Tidy Code
+                  <span className="nav__keyboard-shortcut">{'\u21E7'} + Tab</span>
                 </button>
               </li>
               <li className="nav__dropdown-item">
@@ -210,6 +216,7 @@ class Nav extends React.PureComponent {
                   onBlur={this.handleBlur}
                 >
                   Find
+                  <span className="nav__keyboard-shortcut">{metaKeyName} + F</span>
                 </button>
               </li>
             </ul>

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -8,7 +8,7 @@ function KeyboardShortcutModal() {
   return (
     <ul className="keyboard-shortcuts" title="keyboard shortcuts">
       <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">Shift + Tab</span>
+        <span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
         <span>Tidy</span>
       </li>
       <li className="keyboard-shortcut-item">
@@ -31,7 +31,7 @@ function KeyboardShortcutModal() {
       </li>
       <li className="keyboard-shortcut-item">
         <span className="keyboard-shortcut__command">
-          {metaKeyName} + Shift + G
+          {metaKeyName} + {'\u21E7'} + G
         </span>
         <span>Find Previous Text Match</span>
       </li>
@@ -61,19 +61,19 @@ function KeyboardShortcutModal() {
       </li>
       <li className="keyboard-shortcut-item">
         <span className="keyboard-shortcut__command">
-          {metaKeyName} + Shift + Enter
+          {metaKeyName} + {'\u21E7'} + Enter
         </span>
         <span>Stop Sketch</span>
       </li>
       <li className="keyboard-shortcut-item">
         <span className="keyboard-shortcut__command">
-          {metaKeyName} + Shift + 1
+          {metaKeyName} + {'\u21E7'} + 1
         </span>
         <span>Toggle Text-based Canvas</span>
       </li>
       <li className="keyboard-shortcut-item">
         <span className="keyboard-shortcut__command">
-          {metaKeyName} + Shift + 2
+          {metaKeyName} + {'\u21E7'} + 2
         </span>
         <span>Turn Off Text-based Canvas</span>
       </li>

client/styles/abstracts/_variables.scss

@@ -46,7 +46,8 @@ $themes: (
     input-border-color: #b5b5b5,
     about-list-text-color: #4a4a4a,
     search-background-color: #ebebeb,
-    dropdown-color: #414141
+    dropdown-color: #414141,
+    keyboard-shortcut-color: #757575
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -83,7 +84,8 @@ $themes: (
     input-border-color: #b5b5b5,
     about-list-text-color: #f4f4f4,
     search-background-color: #ebebeb,
-    dropdown-color: #414141
+    dropdown-color: #414141,
+    keyboard-shortcut-color: #B5B5B5
   ),
   contrast: (
     logo-color: $yellow,
@@ -119,7 +121,8 @@ $themes: (
     input-border-color: #b5b5b5,
     about-list-text-color: #f4f4f4,
     search-background-color: $white,
-    dropdown-color: #e1e1e1
+    dropdown-color: #e1e1e1,
+    keyboard-shortcut-color: #e1e1e1
   )
 );
 

client/styles/components/_nav.scss

@@ -149,6 +149,14 @@
       }
     }
   }
+
+  & button, & a {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 
 .nav__dropdown-item:last-child {
@@ -179,3 +187,16 @@
   }
 }
 
+.nav__keyboard-shortcut {
+  font-size: #{12 / $base-font-size}rem;
+  font-family: Inconsololata, monospace;
+  @include themify() {
+    color: getThemifyVariable('keyboard-shortcut-color');
+  }
+  .nav__dropdown-item:hover & {
+    @include themify() {
+      color: getThemifyVariable('button-hover-color');
+    }
+  }
+}
+

client/utils/metaKey.js

@@ -8,7 +8,7 @@ const metaKey = (() => {
   return 'Ctrl';
 })();
 
-const metaKeyName = metaKey === 'Cmd' ? 'Command' : 'Control';
+const metaKeyName = metaKey === 'Cmd' ? '\u2318' : 'Ctrl';
 
 export {
   metaKey,