From a90b8f6e71acb4940ab5e9c79e596bb128a0c47c Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Mon, 11 Apr 2016 09:54:26 +0200
Subject: [PATCH] Adds '?' to shortcuts

- Fixes '?' after using the terminal
- Fixes <kbd> styling, border-radius was behaving strangley w/ transform
  to center the overlay, so opted for more old school methods.
---
 client/app/scripts/components/help-panel.js |  7 ++++---
 client/app/scripts/components/terminal.js   |  1 +
 client/app/styles/main.less                 | 10 ++++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/client/app/scripts/components/help-panel.js b/client/app/scripts/components/help-panel.js
index 3c28914e1..42564a249 100644
--- a/client/app/scripts/components/help-panel.js
+++ b/client/app/scripts/components/help-panel.js
@@ -1,12 +1,13 @@
 import React from 'react';
 
 const GENERAL_SHORTCUTS = [
-  {key: 'esc', label: 'Close panel'},
+  {key: 'esc', label: 'Close active panel'},
+  {key: '?', label: 'Toggle shortcut menu'},
 ];
 
 const CANVAS_METRIC_SHORTCUTS = [
-  {key: '<', label: 'Pin previous metric'},
-  {key: '>', label: 'Pin next metric'},
+  {key: '<', label: 'Select and pin previous metric'},
+  {key: '>', label: 'Select and pin next metric'},
   {key: 'q', label: 'Unpin current metric'},
 ];
 
diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js
index 591a5d59a..ff062659e 100644
--- a/client/app/scripts/components/terminal.js
+++ b/client/app/scripts/components/terminal.js
@@ -175,6 +175,7 @@ export default class Terminal extends React.Component {
 
     if (this.term) {
       log('destroy terminal');
+      this.term.blur();
       this.term.destroy();
       this.term = null;
     }
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index d3f815c07..35b49aa91 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -1084,12 +1084,19 @@ h2 {
 // Help panel!
 //
 
+@help-panel-width: 400px;
+@help-panel-height: 380px;
 .help-panel {
   position: absolute;
+  -webkit-transform: translate3d(0, 0, 0);
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  width: @help-panel-width;
+  height: @help-panel-height;
+  margin-left: @help-panel-width / -2;
+  margin-top: @help-panel-height / -2;
   z-index: 2048;
+  background-color: white;
   .shadow-2;
 
   &-header {
@@ -1104,7 +1111,6 @@ h2 {
 
   &-main {
     padding: 12px 36px 36px;
-    background-color: white;
   }
 
   h3 {