From 480d54c2d8e962df96e5cf993151d120849cfd21 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 2 Jun 2018 10:17:39 +0100
Subject: [PATCH] Finished shortcuts modal styling

---
 src/components/modals/ShortcutsModal.jsx | 11 +++++++----
 src/styles/_modal.scss                   | 17 +++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/modals/ShortcutsModal.jsx b/src/components/modals/ShortcutsModal.jsx
index 99e660c..b14b413 100644
--- a/src/components/modals/ShortcutsModal.jsx
+++ b/src/components/modals/ShortcutsModal.jsx
@@ -19,7 +19,7 @@ class ShortcutsModal extends React.Component {
     const help = [
       {
         key: "?",
-        text: "Show shortcuts menu"
+        text: "Shortcuts menu"
       },
       {
         key: "o",
@@ -35,11 +35,11 @@ class ShortcutsModal extends React.Component {
       },
       {
         key: "p",
-        text: "Source settings modal"
+        text: "Style settings modal"
       },
       {
         key: "i",
-        text: "Toggle map"
+        text: "Toggle inspect"
       },
       {
         key: "m",
@@ -54,7 +54,10 @@ class ShortcutsModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Shortcuts'}
     >
-      <div className="maputnik-modal-section">
+      <div className="maputnik-modal-section maputnik-modal-shortcuts">
+        <p>
+          Press <code>ESC</code> to lose focus of any active elements, then press one of:
+        </p>
         <ul>
           {help.map((item) => {
             return <li>
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index f87a00c..98c3807 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -222,3 +222,20 @@
   text-decoration: none;
   color: #ef5350;
 }
+
+.maputnik-modal-shortcuts {
+  code {
+    color: white;
+    background: #3c3c3c;
+    padding: 2px 6px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 2px;
+    margin-right: 4px;
+    font-family: monospace;
+  }
+
+  li {
+    margin-bottom: 4px;
+  }
+}