From 081b1abc8511b2fd84147528a1a80abf04673791 Mon Sep 17 00:00:00 2001
From: Tirta Rachman <tirtawening@gmail.com>
Date: Tue, 26 May 2020 17:48:47 -0400
Subject: [PATCH 1/2] Add keyboard shortcut note

---
 .../IDE/components/KeyboardShortcutModal.jsx  | 163 +++++++++---------
 .../components/_keyboard-shortcuts.scss       |   5 +
 2 files changed, 83 insertions(+), 85 deletions(-)

diff --git a/client/modules/IDE/components/KeyboardShortcutModal.jsx b/client/modules/IDE/components/KeyboardShortcutModal.jsx
index 420a99c6..53aa6ab4 100644
--- a/client/modules/IDE/components/KeyboardShortcutModal.jsx
+++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx
@@ -3,91 +3,84 @@ import { metaKeyName, } from '../../../utils/metaKey';
 
 function KeyboardShortcutModal() {
   return (
-    <ul className="keyboard-shortcuts" title="keyboard shortcuts">
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
-        <span>Tidy</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + S
-        </span>
-        <span>Save</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + F
-        </span>
-        <span>Find Text</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + G
-        </span>
-        <span>Find Next Text Match</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + {'\u21E7'} + G
-        </span>
-        <span>Find Previous Text Match</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + [
-        </span>
-        <span>Indent Code Left</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + ]
-        </span>
-        <span>Indent Code Right</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + /
-        </span>
-        <span>Comment Line</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + Enter
-        </span>
-        <span>Start Sketch</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + {'\u21E7'} + Enter
-        </span>
-        <span>Stop Sketch</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + {'\u21E7'} + 1
-        </span>
-        <span>Turn on Accessible Output</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + {'\u21E7'} + 2
-        </span>
-        <span>Turn off Accessible Output</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          {metaKeyName} + B
-        </span>
-        <span>Toggle Sidebar</span>
-      </li>
-      <li className="keyboard-shortcut-item">
-        <span className="keyboard-shortcut__command">
-          Ctrl + `
-        </span>
-        <span>Toggle Console</span>
-      </li>
-    </ul>
+    <div className="keyboard-shortcuts">
+      <div className="keyboard-shortcuts-note">
+        <strong>Note:</strong> our keyboard shortcuts follow <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">Sublime Text shortcuts</a>
+      </div>
+      <ul title="keyboard shortcuts">
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
+          <span>Tidy</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + S
+          </span>
+          <span>Save</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + F
+          </span>
+          <span>Find Text</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + G
+          </span>
+          <span>Find Next Text Match</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + {'\u21E7'} + G
+          </span>
+          <span>Find Previous Text Match</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + [
+          </span>
+          <span>Indent Code Left</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + ]
+          </span>
+          <span>Indent Code Right</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + /
+          </span>
+          <span>Comment Line</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + Enter
+          </span>
+          <span>Start Sketch</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + {'\u21E7'} + Enter
+          </span>
+          <span>Stop Sketch</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + {'\u21E7'} + 1
+          </span>
+          <span>Turn on Accessible Output</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + {'\u21E7'} + 2
+          </span>
+          <span>Turn off Accessible Output</span>
+        </li>
+      </ul>
+    </div>
   );
 }
 
-export default KeyboardShortcutModal;
+export default KeyboardShortcutModal;
\ No newline at end of file
diff --git a/client/styles/components/_keyboard-shortcuts.scss b/client/styles/components/_keyboard-shortcuts.scss
index 66963e91..f30dd8d3 100644
--- a/client/styles/components/_keyboard-shortcuts.scss
+++ b/client/styles/components/_keyboard-shortcuts.scss
@@ -4,6 +4,11 @@
   width: #{450 / $base-font-size}rem;
 }
 
+.keyboard-shortcuts-note {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
 .keyboard-shortcut-item {
   display: flex;
   & + & {

From 6384c633484b5987b60ad18e351c2d20e06788b7 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Thu, 28 May 2020 16:44:00 -0400
Subject: [PATCH 2/2] Fixes #1386 - Add headers to keyboard shortcut modal, add
 styling to keyboard commands in list

---
 .../IDE/components/KeyboardShortcutModal.jsx  | 26 ++++++++++--------
 client/styles/base/_base.scss                 |  1 +
 .../components/_keyboard-shortcuts.scss       | 27 +++++++++++++++++--
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/client/modules/IDE/components/KeyboardShortcutModal.jsx b/client/modules/IDE/components/KeyboardShortcutModal.jsx
index 53aa6ab4..691bab70 100644
--- a/client/modules/IDE/components/KeyboardShortcutModal.jsx
+++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx
@@ -4,20 +4,15 @@ import { metaKeyName, } from '../../../utils/metaKey';
 function KeyboardShortcutModal() {
   return (
     <div className="keyboard-shortcuts">
-      <div className="keyboard-shortcuts-note">
-        <strong>Note:</strong> our keyboard shortcuts follow <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">Sublime Text shortcuts</a>
-      </div>
-      <ul title="keyboard shortcuts">
+      <h3 className="keyboard-shortcuts__title">Code Editing</h3>
+      <p className="keyboard-shortcuts__description">
+        Code editing keyboard shortcuts follow <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">Sublime Text shortcuts</a>.
+      </p>
+      <ul className="keyboard-shortcuts__list">
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
           <span>Tidy</span>
         </li>
-        <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">
-            {metaKeyName} + S
-          </span>
-          <span>Save</span>
-        </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + F
@@ -54,6 +49,15 @@ function KeyboardShortcutModal() {
           </span>
           <span>Comment Line</span>
         </li>
+      </ul>
+      <h3 className="keyboard-shortcuts__title">General</h3>
+      <ul className="keyboard-shortcuts__list">
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + S
+          </span>
+          <span>Save</span>
+        </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + Enter
@@ -83,4 +87,4 @@ function KeyboardShortcutModal() {
   );
 }
 
-export default KeyboardShortcutModal;
\ No newline at end of file
+export default KeyboardShortcutModal;
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 58b1030b..d824c646 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -74,6 +74,7 @@ h2 {
 
 h3 {
 	font-weight: normal;
+	font-size: #{16 / $base-font-size}rem;
 }
 h4 {
 	font-weight: normal;
diff --git a/client/styles/components/_keyboard-shortcuts.scss b/client/styles/components/_keyboard-shortcuts.scss
index f30dd8d3..ca6f81fd 100644
--- a/client/styles/components/_keyboard-shortcuts.scss
+++ b/client/styles/components/_keyboard-shortcuts.scss
@@ -18,8 +18,31 @@
 }
 
 .keyboard-shortcut__command {
-  width: 50%;
   font-weight: bold;
   text-align: right;
-  padding-right: #{10 / $base-font-size}rem;
+  margin-right: #{10 / $base-font-size}rem;
+  padding: #{3 / $base-font-size}rem;
+  @include themify {
+    border: 1px solid getThemifyVariable("button-border-color");
+    border-radius: 3px;
+  }
+}
+
+.keyboard-shortcuts__title {
+  padding-bottom: #{10 / $base-font-size}rem;
+}
+
+.keyboard-shortcuts__description {
+  padding-bottom: #{10 / $base-font-size}rem;
+}
+
+.keyboard-shortcuts__list:not(:last-of-type) {
+  padding-bottom: #{10 / $base-font-size}rem;
+}
+
+.keyboard-shortcuts__title:not(:first-of-type) {
+  @include themify() {
+    border-top: 1px dashed getThemifyVariable("button-border-color");
+    padding-top: #{10 / $base-font-size}rem;
+  }
 }