From e09db23049d3e880e5bac9c90e015c6ad2e7c289 Mon Sep 17 00:00:00 2001
From: radibit <radimir.bitsov@gmail.com>
Date: Mon, 25 Jul 2016 23:56:13 +0200
Subject: [PATCH 1/8] create helper window and add keyboard shortcuts - fix #7

---
 app/electron.js                             |  23 +++-
 app/main/menu.js                            |   5 +
 app/src/App.vue                             |   6 +-
 app/src/components/AboutView.vue            |  31 +----
 app/src/components/HelpView.vue             | 127 ++++++++++++++++++++
 app/src/routes.js                           |   4 +
 app/src/styles/components/_drag-handle.scss |  12 ++
 app/src/styles/components/_logo.scss        |  13 ++
 8 files changed, 190 insertions(+), 31 deletions(-)
 create mode 100644 app/src/components/HelpView.vue
 create mode 100644 app/src/styles/components/_drag-handle.scss
 create mode 100644 app/src/styles/components/_logo.scss

diff --git a/app/electron.js b/app/electron.js
index 6e26908..5749f8f 100644
--- a/app/electron.js
+++ b/app/electron.js
@@ -8,6 +8,7 @@ const windowStateKeeper               = require( 'electron-window-state' );
 
 let mainWindows = [];
 let aboutWindow;
+let helpWindow;
 let config = {};
 
 // fix path to guarantee that npm and node are available
@@ -20,10 +21,12 @@ if ( process.env.NODE_ENV === 'development' ) {
   config          = require( '../config' ).config;
   config.url      = `http://localhost:${ config.port }`;
   config.aboutUrl = `http://localhost:${ config.port }#!/about`;
+  config.helpUrl  = `http://localhost:${ config.port }#!/help`;
 } else {
   config.devtron  = false;
   config.url      = `file://${ __dirname }/dist/index.html`;
   config.aboutUrl = `file://${ __dirname }/dist/index.html#!/about`;
+  config.helpUrl  = `file://${ __dirname }/dist/index.html#!/help`;
 }
 
 ipcMain.on( 'updatedAppSetting', ( event, key, value ) => {
@@ -59,6 +62,23 @@ function openAboutWindow() {
   }
 }
 
+function openHelpWindow() {
+  if ( ! helpWindow ) {
+    helpWindow = new BrowserWindow( {
+      height        : 500,
+      width         : 475,
+      titleBarStyle : 'hidden',
+      resizable     : false
+    } );
+
+    helpWindow.loadURL( config.helpUrl );
+
+    helpWindow.on( 'closed', () => helpWindow = null );
+  } else {
+    helpWindow.focus();
+  }
+}
+
 /**
  *
  */
@@ -114,7 +134,8 @@ function createWindow( event, hash ) {
   if ( mainWindows.length === 1 ) {
     menu.init( {
       createWindow,
-      openAboutWindow
+      openAboutWindow,
+      openHelpWindow
     } );
   }
 
diff --git a/app/main/menu.js b/app/main/menu.js
index 7261df0..9f8a1cb 100644
--- a/app/main/menu.js
+++ b/app/main/menu.js
@@ -71,6 +71,11 @@ module.exports = {
       {
         role    : 'help',
         submenu : [
+          {
+            label       : 'Keyboard Shortcuts',
+            accelerator : 'CmdOrCtrl+/',
+            click() { options.openHelpWindow(); }
+          },
           {
             label : 'Learn More',
             click() { electron.shell.openExternal( 'http://electron.atom.io' ); }
diff --git a/app/src/App.vue b/app/src/App.vue
index 7d33bb9..e13d69f 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -8,6 +8,8 @@
   @import './styles/objects/paragraphs';
   @import './styles/objects/lists';
   @import './styles/objects/small';
+  @import './styles/components/drag-handle';
+  @import './styles/components/logo';
   @import './styles/animations/move-down';
   @import './styles/transitions/slide-right--slide-left';
   @import './styles/transitions/slide-up--slide-down';
@@ -138,7 +140,9 @@
 </style>
 
 <template>
-  <header-bar v-if="$route.name !== 'about-page'"></header-bar>
+  <header-bar
+    v-if="$route.name !== 'about-page' && $route.name !== 'help-page'">
+  </header-bar>
   <main>
     <settings v-if="showSettings"></settings>
     <router-view v-on:activate="toggleSettings( false )"></router-view>
diff --git a/app/src/components/AboutView.vue b/app/src/components/AboutView.vue
index 26acced..50ad7df 100644
--- a/app/src/components/AboutView.vue
+++ b/app/src/components/AboutView.vue
@@ -6,19 +6,6 @@
 
     text-align : center;
 
-    &--dragHandle {
-      position : absolute;
-
-      top   : 0;
-      right : 0;
-      left  : 0;
-
-      height : 2em;
-
-      -webkit-user-select : none;
-      -webkit-app-region  : drag;
-    }
-
     &--heartList {
       padding    : 0 1em;
       list-style : none;
@@ -27,28 +14,14 @@
         margin-bottom : .5em;
       }
     }
-
-    &--logo {
-      display : inline-block;
-
-      width  : 5em;
-      height : 5em;
-
-      margin-bottom : .5em;
-
-      svg {
-        max-width  : 100%;
-        max-height : 100%;
-      }
-    }
   }
 </style>
 
 <template>
   <div class="c-about">
-    <div class="c-about--dragHandle"></div>
+    <div class="c-dragHandle"></div>
 
-    <div class="c-about--logo" transition="project">
+    <div class="c-logo" transition="project">
       <svg width="330" height="330" viewBox="0 0 330 330" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <title>Forrest logo</title>
         <defs>
diff --git a/app/src/components/HelpView.vue b/app/src/components/HelpView.vue
new file mode 100644
index 0000000..f5d902c
--- /dev/null
+++ b/app/src/components/HelpView.vue
@@ -0,0 +1,127 @@
+<style lang="scss">
+  .c-help {
+    position : relative;
+
+    padding : 1em;
+
+    text-align : center;
+
+    &--definitionList {
+      font-size : .9em; 
+
+      dt {
+        clear   : both;
+        width   : 20%;
+        padding : .5em 0;
+      }
+
+      dd {
+        width      : 80%;
+        text-align : left;
+
+        padding : .5em 0 .5em .5em;
+      }
+
+      dt, dd {
+        float   : left;
+        margin  : 0;
+      }
+    }
+
+    &--key {
+      display :  inline-block;
+
+      background-color : var(--header-background);
+      border-radius    : 2px;
+
+      color : var( --code-color );
+
+      padding : .25em .5em;
+
+      text-align : center;
+
+      min-width : 2em;
+      height    : 2em;
+    }
+  }
+</style>
+
+<template>
+  <div class="c-help">
+    <div class="c-dragHandle"></div>
+
+    <div class="c-logo" transition="project">
+      <svg width="330" height="330" viewBox="0 0 330 330" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>Forrest logo</title>
+        <defs>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
+            <stop stop-color="#EEEBEB" offset="0%" />
+            <stop stop-color="#FCFBFB" offset="18.142%" />
+            <stop stop-color="#CFCFCF" offset="100%" />
+          </linearGradient>
+          <ellipse id="b" cx="161.175" cy="161.175" rx="161.175" ry="161.175" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a">
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1" />
+          </filter>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d">
+            <stop stop-color="#344352" offset="0%" />
+            <stop stop-color="#2A333C" offset="100%" />
+          </linearGradient>
+          <ellipse id="e" cx="161.175" cy="161.175" rx="150.059" ry="150.059" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="f">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1" />
+            <feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1" />
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"
+            />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowInnerInner1" />
+          </filter>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <g transform="translate(4 3)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b" />
+            <use fill="url(#c)" xlink:href="#b" />
+          </g>
+          <g transform="translate(4 3)">
+            <use fill="url(#d)" xlink:href="#e" />
+            <use fill="#000" filter="url(#f)" xlink:href="#e" />
+          </g>
+          <g stroke-width="5">
+            <path d="M102.013 105.372l49.846 103.795H52.167l49.846-103.795zM87.06 209.167h29.908v10.38H87.059v-10.38zM215.235 209.167h29.908v10.38h-29.908v-10.38zm14.954-103.795l49.846 103.795h-99.692l49.846-103.795z"
+              stroke="#F1F1F1" />
+            <path d="M194.584 240.954h49.847L166.1 69.693l-78.33 171.261h49.847v14.843h56.966v-14.843z" stroke="#2A333C" fill="#CD3632"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="u-marginBottom">
+      <h1 class="o-headline-2">Keyboard Shortcuts</h1>
+    </div>
+
+    <dl class="c-help--definitionList">
+      <dt>
+        <span class="c-help--key">&#8592;</span>
+        <span class="c-help--key">&#8594;</span>
+      </dt>
+      <dd>Navigate between the home and project screens</dd>
+
+      <dt>
+        <span class="c-help--key">&#8593;</span>
+        <span class="c-help--key">&#8595;</span>
+      </dt>
+      <dd>Navigate between the available projects and commands</dd>
+
+      <dt>
+        <span class="c-help--key">tab</span>
+      </dt>
+      <dd>Focus on the next action</dd>
+
+      <dt>
+        <span class="c-help--key">shift + tab</span>
+      </dt>
+      <dd>Focus on the previous action</dd>
+    </dl>
+  </div>
+</template>
diff --git a/app/src/routes.js b/app/src/routes.js
index 13ff3d1..00bbeba 100644
--- a/app/src/routes.js
+++ b/app/src/routes.js
@@ -10,5 +10,9 @@ export default {
   '/about' : {
     component : require( './components/AboutView' ),
     name      : 'about-page'
+  },
+  '/help' : {
+    component : require( './components/HelpView' ),
+    name      : 'help-page'
   }
 };
diff --git a/app/src/styles/components/_drag-handle.scss b/app/src/styles/components/_drag-handle.scss
new file mode 100644
index 0000000..e323834
--- /dev/null
+++ b/app/src/styles/components/_drag-handle.scss
@@ -0,0 +1,12 @@
+.c-dragHandle {
+  position : absolute;
+
+  top   : 0;
+  right : 0;
+  left  : 0;
+
+  height : 2em;
+
+  -webkit-user-select : none;
+  -webkit-app-region  : drag;
+}
diff --git a/app/src/styles/components/_logo.scss b/app/src/styles/components/_logo.scss
new file mode 100644
index 0000000..450a1e2
--- /dev/null
+++ b/app/src/styles/components/_logo.scss
@@ -0,0 +1,13 @@
+.c-logo {
+  display : inline-block;
+
+  width  : 5em;
+  height : 5em;
+
+  margin-bottom : .5em;
+
+  svg {
+    max-width  : 100%;
+    max-height : 100%;
+  }
+}

From 6cfe020469671503eea84872ec990f9e9dbdea08 Mon Sep 17 00:00:00 2001
From: radibit <radimir.bitsov@gmail.com>
Date: Tue, 26 Jul 2016 11:27:20 +0200
Subject: [PATCH 2/8] apply changes from the CR - #7

---
 app/electron.js                 | 94 +++++++++++++++++++--------------
 app/main/menu.js                |  8 +--
 app/src/components/HelpView.vue | 34 +++++++++---
 3 files changed, 83 insertions(+), 53 deletions(-)

diff --git a/app/electron.js b/app/electron.js
index 5749f8f..7285d0b 100644
--- a/app/electron.js
+++ b/app/electron.js
@@ -6,10 +6,38 @@ const menu                            = require( './main/menu' );
 const fixPath                         = require( 'fix-path' );
 const windowStateKeeper               = require( 'electron-window-state' );
 
+// configuration for the available static windows
+const staticWindows = {
+  about : {
+    config : {
+      height        : 625,
+      width         : 475,
+      titleBarStyle : 'hidden',
+      resizable     : false
+    },
+    hash : '#!/about',
+    initializedWindow : null
+  },
+  help : {
+    config : {
+      height        : 625,
+      width         : 475,
+      titleBarStyle : 'hidden',
+      resizable     : false
+    },
+    hash : '#!/help',
+    initializedWindow : null
+  }
+};
+
 let mainWindows = [];
 let aboutWindow;
 let helpWindow;
-let config = {};
+let config  = {};
+let baseUrl = {
+  development : ``,
+  production  : `file://${ __dirname }/dist/index.html`
+};
 
 // fix path to guarantee that npm and node are available
 fixPath();
@@ -18,15 +46,13 @@ fixPath();
 app.commandLine.appendSwitch( '--enable-experimental-web-platform-features' );
 
 if ( process.env.NODE_ENV === 'development' ) {
-  config          = require( '../config' ).config;
-  config.url      = `http://localhost:${ config.port }`;
-  config.aboutUrl = `http://localhost:${ config.port }#!/about`;
-  config.helpUrl  = `http://localhost:${ config.port }#!/help`;
+  config              = require( '../config' ).config;
+  baseUrl.development = `http://localhost:${ config.port }`;
+
+  config.url      = `${ baseUrl.development }`;
 } else {
   config.devtron  = false;
-  config.url      = `file://${ __dirname }/dist/index.html`;
-  config.aboutUrl = `file://${ __dirname }/dist/index.html#!/about`;
-  config.helpUrl  = `file://${ __dirname }/dist/index.html#!/help`;
+  config.url      = `${ baseUrl.production }`;
 }
 
 ipcMain.on( 'updatedAppSetting', ( event, key, value ) => {
@@ -45,37 +71,26 @@ ipcMain.on( 'updatedRepos', ( event, reposString ) => {
 
 ipcMain.on( 'openNewWindow', createWindow );
 
-function openAboutWindow() {
-  if ( ! aboutWindow ) {
-    aboutWindow = new BrowserWindow( {
-      height        : 625,
-      width         : 475,
-      titleBarStyle : 'hidden',
-      resizable     : false
-    } );
-
-    aboutWindow.loadURL( config.aboutUrl );
-
-    aboutWindow.on( 'closed', () => aboutWindow = null );
-  } else {
-    aboutWindow.focus();
-  }
-}
-
-function openHelpWindow() {
-  if ( ! helpWindow ) {
-    helpWindow = new BrowserWindow( {
-      height        : 500,
-      width         : 475,
-      titleBarStyle : 'hidden',
-      resizable     : false
-    } );
-
-    helpWindow.loadURL( config.helpUrl );
-
-    helpWindow.on( 'closed', () => helpWindow = null );
+/**
+ * Open a selected static window
+ *
+ * @param {String} type - name of the selected window type
+ */
+function openStaticWindow( type ) {
+  if ( ! staticWindows[ type ].initializedWindow ) {
+    staticWindows[ type ].initializedWindow = new BrowserWindow(
+      staticWindows[ type ].config
+    );
+
+    staticWindows[ type ].initializedWindow.loadURL(
+      `${ config.url }` + staticWindows[ type ].hash
+    );
+
+    staticWindows[ type ].initializedWindow.on(
+      'closed', () => staticWindows[ type ].initializedWindow = null
+    );
   } else {
-    helpWindow.focus();
+    staticWindows[ type ].initializedWindow.focus();
   }
 }
 
@@ -134,8 +149,7 @@ function createWindow( event, hash ) {
   if ( mainWindows.length === 1 ) {
     menu.init( {
       createWindow,
-      openAboutWindow,
-      openHelpWindow
+      openStaticWindow
     } );
   }
 
diff --git a/app/main/menu.js b/app/main/menu.js
index 9f8a1cb..d43d779 100644
--- a/app/main/menu.js
+++ b/app/main/menu.js
@@ -74,11 +74,7 @@ module.exports = {
           {
             label       : 'Keyboard Shortcuts',
             accelerator : 'CmdOrCtrl+/',
-            click() { options.openHelpWindow(); }
-          },
-          {
-            label : 'Learn More',
-            click() { electron.shell.openExternal( 'http://electron.atom.io' ); }
+            click() { options.openStaticWindow( 'help' ); }
           }
         ]
       }
@@ -91,7 +87,7 @@ module.exports = {
         submenu : [
           {
             label : 'About Forrest',
-            click() { options.openAboutWindow(); }
+            click() { options.openStaticWindow( 'about' ); }
           },
           {
             type : 'separator'
diff --git a/app/src/components/HelpView.vue b/app/src/components/HelpView.vue
index f5d902c..21236ef 100644
--- a/app/src/components/HelpView.vue
+++ b/app/src/components/HelpView.vue
@@ -7,7 +7,7 @@
     text-align : center;
 
     &--definitionList {
-      font-size : .9em; 
+      font-size : .9em;
 
       dt {
         clear   : both;
@@ -40,8 +40,8 @@
 
       text-align : center;
 
-      min-width : 2em;
-      height    : 2em;
+      min-width  : 2em;
+      min-height : 2em;
     }
   }
 </style>
@@ -101,27 +101,47 @@
     </div>
 
     <dl class="c-help--definitionList">
-      <dt>
+      <dt aria-label="Left and right keys">
         <span class="c-help--key">&#8592;</span>
         <span class="c-help--key">&#8594;</span>
       </dt>
       <dd>Navigate between the home and project screens</dd>
 
-      <dt>
+      <dt aria-label="Up and down keys">
         <span class="c-help--key">&#8593;</span>
         <span class="c-help--key">&#8595;</span>
       </dt>
       <dd>Navigate between the available projects and commands</dd>
 
-      <dt>
+      <dt aria-label="Tab key">
         <span class="c-help--key">tab</span>
       </dt>
       <dd>Focus on the next action</dd>
 
-      <dt>
+      <dt aria-label="Shift plus tab key combination">
         <span class="c-help--key">shift + tab</span>
       </dt>
       <dd>Focus on the previous action</dd>
+
+      <dt aria-label="Escape key">
+        <span class="c-help--key">esc</span>
+      </dt>
+      <dd>Close a running command</dd>
+
+      <dt aria-label="Right arrow key">
+        <span class="c-help--key">&#8594;</span>
+      </dt>
+      <dd>Run a given command when in project panel</dd>
+
+      <dt aria-label="Left arrow key">
+        <span class="c-help--key">&#8592;</span>
+      </dt>
+      <dd>Terminate a running command</dd>
+
+      <dt aria-label="Right mouse button">
+        <span class="c-help--key">right mouse click</span>
+      </dt>
+      <dd>Display more options when click on project</dd>
     </dl>
   </div>
 </template>

From cecf3bf3751fccd218054748970483c33be8707f Mon Sep 17 00:00:00 2001
From: radibit <radimir.bitsov@gmail.com>
Date: Tue, 26 Jul 2016 18:48:06 +0200
Subject: [PATCH 3/8] create groups for the help page - fix #7

---
 app/electron.js                 |   2 +-
 app/src/components/HelpView.vue | 101 ++++++++++++++++++--------------
 2 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/app/electron.js b/app/electron.js
index 7285d0b..96d176b 100644
--- a/app/electron.js
+++ b/app/electron.js
@@ -21,7 +21,7 @@ const staticWindows = {
   help : {
     config : {
       height        : 625,
-      width         : 475,
+      width         : 725,
       titleBarStyle : 'hidden',
       resizable     : false
     },
diff --git a/app/src/components/HelpView.vue b/app/src/components/HelpView.vue
index 21236ef..5b8754f 100644
--- a/app/src/components/HelpView.vue
+++ b/app/src/components/HelpView.vue
@@ -11,12 +11,12 @@
 
       dt {
         clear   : both;
-        width   : 20%;
+        width   : 25%;
         padding : .5em 0;
       }
 
       dd {
-        width      : 80%;
+        width      : 75%;
         text-align : left;
 
         padding : .5em 0 .5em .5em;
@@ -100,48 +100,59 @@
       <h1 class="o-headline-2">Keyboard Shortcuts</h1>
     </div>
 
-    <dl class="c-help--definitionList">
-      <dt aria-label="Left and right keys">
-        <span class="c-help--key">&#8592;</span>
-        <span class="c-help--key">&#8594;</span>
-      </dt>
-      <dd>Navigate between the home and project screens</dd>
-
-      <dt aria-label="Up and down keys">
-        <span class="c-help--key">&#8593;</span>
-        <span class="c-help--key">&#8595;</span>
-      </dt>
-      <dd>Navigate between the available projects and commands</dd>
-
-      <dt aria-label="Tab key">
-        <span class="c-help--key">tab</span>
-      </dt>
-      <dd>Focus on the next action</dd>
-
-      <dt aria-label="Shift plus tab key combination">
-        <span class="c-help--key">shift + tab</span>
-      </dt>
-      <dd>Focus on the previous action</dd>
-
-      <dt aria-label="Escape key">
-        <span class="c-help--key">esc</span>
-      </dt>
-      <dd>Close a running command</dd>
-
-      <dt aria-label="Right arrow key">
-        <span class="c-help--key">&#8594;</span>
-      </dt>
-      <dd>Run a given command when in project panel</dd>
-
-      <dt aria-label="Left arrow key">
-        <span class="c-help--key">&#8592;</span>
-      </dt>
-      <dd>Terminate a running command</dd>
-
-      <dt aria-label="Right mouse button">
-        <span class="c-help--key">right mouse click</span>
-      </dt>
-      <dd>Display more options when click on project</dd>
-    </dl>
+    <div class="u-flex">
+      <div>
+        <h4 class="o-headline-4">Home & Projects</h4>
+
+        <dl class="c-help--definitionList u-marginTopSmall">
+          <dt aria-label="Left and right keys">
+            <span class="c-help--key">&#8592;</span>
+            <span class="c-help--key">&#8594;</span>
+          </dt>
+          <dd>Navigate between the home and project panels</dd>
+
+          <dt aria-label="Up and down keys">
+            <span class="c-help--key">&#8593;</span>
+            <span class="c-help--key">&#8595;</span>
+          </dt>
+          <dd>Navigate between the available projects and commands</dd>
+
+          <dt aria-label="Tab key">
+            <span class="c-help--key">tab</span>
+          </dt>
+          <dd>Focus on the next action</dd>
+
+          <dt aria-label="Shift plus tab key combination">
+            <span class="c-help--key">shift + tab</span>
+          </dt>
+          <dd>Focus on the previous action</dd>
+
+          <dt aria-label="Right mouse button">
+            <span class="c-help--key">right mouse click</span>
+          </dt>
+          <dd>Display more options when click on a project</dd>
+        </dl>
+      </div>
+      <div class="">
+        <h4 class="o-headline-4">Commands</h4>
+
+        <dl class="c-help--definitionList u-marginTopSmall">
+          <dt aria-label="Escape key">
+            <span class="c-help--key">esc</span>
+          </dt>
+          <dd>Close a running command</dd>
+
+          <dt aria-label="Right arrow key">
+            <span class="c-help--key">&#8594;</span>
+          </dt>
+          <dd>Run a given command when in project panel</dd>
+
+          <dt aria-label="Left arrow key">
+            <span class="c-help--key">&#8592;</span>
+          </dt>
+          <dd>Terminate a running command</dd>
+        </dl>
+      </div>
+    </div>
   </div>
 </template>

From 59e6cef93731d01d9b3b8995a98e3a1cdda618b2 Mon Sep 17 00:00:00 2001
From: radibit <radimir.bitsov@gmail.com>
Date: Tue, 26 Jul 2016 23:09:49 +0200
Subject: [PATCH 4/8] change the style of the help window - #7

---
 app/electron.js                 |  10 ++--
 app/main/menu.js                |   9 ++-
 app/src/App.vue                 |   1 +
 app/src/components/HelpView.vue | 103 ++++++++++++++++++--------------
 app/src/styles/_utils.scss      |  10 +++-
 5 files changed, 78 insertions(+), 55 deletions(-)

diff --git a/app/electron.js b/app/electron.js
index 8c7dcb6..f5996a4 100644
--- a/app/electron.js
+++ b/app/electron.js
@@ -16,28 +16,26 @@ const staticWindows = {
       titleBarStyle   : 'hidden',
       resizable       : false
     },
-    hash : '#!/about',
+    hash              : '#!/about',
     initializedWindow : null
   },
   help : {
     config : {
       height          : 625,
-      width           : 725,
+      width           : 625,
       backgroundColor : '#f1f1f1',
       titleBarStyle   : 'hidden',
       resizable       : false
     },
-    hash : '#!/help',
+    hash              : '#!/help',
     initializedWindow : null
   }
 };
 
 let mainWindows = [];
-let aboutWindow;
-let helpWindow;
 let config  = {};
 let baseUrl = {
-  development : ``,
+  development : '',
   production  : `file://${ __dirname }/dist/index.html`
 };
 
diff --git a/app/main/menu.js b/app/main/menu.js
index d43d779..c7384fe 100644
--- a/app/main/menu.js
+++ b/app/main/menu.js
@@ -1,4 +1,5 @@
 const electron = require( 'electron' );
+const shell    = electron.shell;
 const Menu     = electron.Menu;
 
 module.exports = {
@@ -72,9 +73,13 @@ module.exports = {
         role    : 'help',
         submenu : [
           {
-            label       : 'Keyboard Shortcuts',
+            label       : 'Shortcuts',
             accelerator : 'CmdOrCtrl+/',
             click() { options.openStaticWindow( 'help' ); }
+          },
+          {
+            label       : 'Report an Issue',
+            click() { shell.openExternal( 'https://github.com/stefanjudis/forrest/issues' ) }
           }
         ]
       }
@@ -93,7 +98,7 @@ module.exports = {
             type : 'separator'
           },
           {
-            label       : 'Open new window',
+            label       : 'Open New Window',
             accelerator : 'CmdOrCtrl+N',
             click() { options.createWindow(); }
           },
diff --git a/app/src/App.vue b/app/src/App.vue
index e13d69f..10da1ec 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -35,6 +35,7 @@
     --svg-fill       : #2a333c;
     --svg-fill-red   : var(--npm-red);
     --svg-fill-green : #399039;
+    --svg-fill-white : #ffffff;
 
     --svg-fill-bright : var(--main-bg-color);
 
diff --git a/app/src/components/HelpView.vue b/app/src/components/HelpView.vue
index 5b8754f..4d2236d 100644
--- a/app/src/components/HelpView.vue
+++ b/app/src/components/HelpView.vue
@@ -7,8 +7,6 @@
     text-align : center;
 
     &--definitionList {
-      font-size : .9em;
-
       dt {
         clear   : both;
         width   : 25%;
@@ -16,6 +14,8 @@
       }
 
       dd {
+        font-size  : .9em;
+        
         width      : 75%;
         text-align : left;
 
@@ -31,17 +31,12 @@
     &--key {
       display :  inline-block;
 
-      background-color : var(--header-background);
-      border-radius    : 2px;
-
-      color : var( --code-color );
-
-      padding : .25em .5em;
+      font-size   : 1em;
+      font-weight : bold;
+      color       : var(--header-background);
+      text-align  : center;
 
-      text-align : center;
-
-      min-width  : 2em;
-      min-height : 2em;
+      min-height  : 2em;
     }
   }
 </style>
@@ -97,62 +92,78 @@
       </svg>
     </div>
     <div class="u-marginBottom">
-      <h1 class="o-headline-2">Keyboard Shortcuts</h1>
+      <h1 class="o-headline-2">Shortcuts</h1>
     </div>
 
-    <div class="u-flex">
+    <div class="u-flexCenter u-marginBottom">
       <div>
-        <h4 class="o-headline-4">Home & Projects</h4>
+        <h4 class="o-headline-4">Home</h4>
 
         <dl class="c-help--definitionList u-marginTopSmall">
-          <dt aria-label="Left and right keys">
-            <span class="c-help--key">&#8592;</span>
-            <span class="c-help--key">&#8594;</span>
-          </dt>
-          <dd>Navigate between the home and project panels</dd>
-
-          <dt aria-label="Up and down keys">
-            <span class="c-help--key">&#8593;</span>
-            <span class="c-help--key">&#8595;</span>
-          </dt>
-          <dd>Navigate between the available projects and commands</dd>
-
-          <dt aria-label="Tab key">
-            <span class="c-help--key">tab</span>
+          <dt aria-label="Right mouse button">
+            <svg class="u-fillWhite" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8 8 8s8-3.58 8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z" stroke="#2a333c" />
+              <path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93z" fill="#cb3837" />
+            </svg>
           </dt>
-          <dd>Focus on the next action</dd>
+          <dd>Show more project options</dd>
 
-          <dt aria-label="Shift plus tab key combination">
-            <span class="c-help--key">shift + tab</span>
+          <dt aria-label="Right arrow key">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
+            </svg>
           </dt>
-          <dd>Focus on the previous action</dd>
+          <dd>Open project</dd>
 
-          <dt aria-label="Right mouse button">
-            <span class="c-help--key">right mouse click</span>
+          <dt aria-label="Up and down keys">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="#010101" />
+            </svg>
           </dt>
-          <dd>Display more options when click on a project</dd>
+          <dd>Navigate through projects</dd>
         </dl>
       </div>
-      <div class="">
-        <h4 class="o-headline-4">Commands</h4>
+      <div>
+        <h4 class="o-headline-4">Projects</h4>
 
         <dl class="c-help--definitionList u-marginTopSmall">
           <dt aria-label="Escape key">
-            <span class="c-help--key">esc</span>
+            <span class="c-help--key u-textTransformUppercase">esc</span>
           </dt>
-          <dd>Close a running command</dd>
+          <dd>Terminate running command</dd>
 
-          <dt aria-label="Right arrow key">
-            <span class="c-help--key">&#8594;</span>
+          <dt aria-label="Left arrow key">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0z" fill="none"/>
+              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+            </svg>
           </dt>
-          <dd>Run a given command when in project panel</dd>
+          <dd>Go Home / Terminate running command</dd>
 
-          <dt aria-label="Left arrow key">
-            <span class="c-help--key">&#8592;</span>
+          <dt aria-label="Up and down keys">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="#010101" />
+            </svg>
           </dt>
-          <dd>Terminate a running command</dd>
+          <dd>Navigate through commands</dd>
         </dl>
       </div>
     </div>
+
+    <p class="u-marginTop">
+      To reach other actions use the <span class="c-help--key u-textTransformUppercase">tab</span> key when needed.
+    </p>
   </div>
 </template>
diff --git a/app/src/styles/_utils.scss b/app/src/styles/_utils.scss
index 33546f2..ced248a 100644
--- a/app/src/styles/_utils.scss
+++ b/app/src/styles/_utils.scss
@@ -85,6 +85,10 @@
   fill : var(--svg-fill-green);
 }
 
+.u-fillWhite {
+  fill : var(--svg-fill-white);
+}
+
 .u-fullHeight {
   height : 100%;
 }
@@ -110,4 +114,8 @@
 
 .u-fontSizeSmall {
   font-size : .9em;
-}
\ No newline at end of file
+}
+
+.u-textTransformUppercase {
+  text-transform : uppercase;
+}

From 096e411777fdbc24e5ff475793a882136d70a1ea Mon Sep 17 00:00:00 2001
From: radibit <radimir.bitsov@gmail.com>
Date: Tue, 26 Jul 2016 23:14:12 +0200
Subject: [PATCH 5/8] fix lint issues - #7

---
 app/main/menu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/main/menu.js b/app/main/menu.js
index c7384fe..6f64741 100644
--- a/app/main/menu.js
+++ b/app/main/menu.js
@@ -78,8 +78,8 @@ module.exports = {
             click() { options.openStaticWindow( 'help' ); }
           },
           {
-            label       : 'Report an Issue',
-            click() { shell.openExternal( 'https://github.com/stefanjudis/forrest/issues' ) }
+            label : 'Report an Issue',
+            click() { shell.openExternal( 'https://github.com/stefanjudis/forrest/issues' ); }
           }
         ]
       }

From 6a16dcc8816439a2451d2e964fd54d7b1c219ace Mon Sep 17 00:00:00 2001
From: radibit <radimir.bitsov@gmail.com>
Date: Mon, 25 Jul 2016 23:56:13 +0200
Subject: [PATCH 6/8] create helper window, document shortcuts and update
 styles - fix #7

---
 app/electron.js                             |  78 ++++++---
 app/main/menu.js                            |  14 +-
 app/src/App.vue                             |   7 +-
 app/src/components/AboutView.vue            |  31 +---
 app/src/components/AppView/Settings.vue     |   2 +-
 app/src/components/HelpView.vue             | 169 ++++++++++++++++++++
 app/src/routes.js                           |   4 +
 app/src/styles/_utils.scss                  |  10 +-
 app/src/styles/components/_drag-handle.scss |  12 ++
 app/src/styles/components/_logo.scss        |  13 ++
 10 files changed, 283 insertions(+), 57 deletions(-)
 create mode 100644 app/src/components/HelpView.vue
 create mode 100644 app/src/styles/components/_drag-handle.scss
 create mode 100644 app/src/styles/components/_logo.scss

diff --git a/app/electron.js b/app/electron.js
index 6e26908..f5996a4 100644
--- a/app/electron.js
+++ b/app/electron.js
@@ -6,9 +6,38 @@ const menu                            = require( './main/menu' );
 const fixPath                         = require( 'fix-path' );
 const windowStateKeeper               = require( 'electron-window-state' );
 
+// configuration for the available static windows
+const staticWindows = {
+  about : {
+    config : {
+      height          : 625,
+      width           : 475,
+      backgroundColor : '#f1f1f1',
+      titleBarStyle   : 'hidden',
+      resizable       : false
+    },
+    hash              : '#!/about',
+    initializedWindow : null
+  },
+  help : {
+    config : {
+      height          : 625,
+      width           : 625,
+      backgroundColor : '#f1f1f1',
+      titleBarStyle   : 'hidden',
+      resizable       : false
+    },
+    hash              : '#!/help',
+    initializedWindow : null
+  }
+};
+
 let mainWindows = [];
-let aboutWindow;
-let config = {};
+let config  = {};
+let baseUrl = {
+  development : '',
+  production  : `file://${ __dirname }/dist/index.html`
+};
 
 // fix path to guarantee that npm and node are available
 fixPath();
@@ -17,13 +46,13 @@ fixPath();
 app.commandLine.appendSwitch( '--enable-experimental-web-platform-features' );
 
 if ( process.env.NODE_ENV === 'development' ) {
-  config          = require( '../config' ).config;
-  config.url      = `http://localhost:${ config.port }`;
-  config.aboutUrl = `http://localhost:${ config.port }#!/about`;
+  config              = require( '../config' ).config;
+  baseUrl.development = `http://localhost:${ config.port }`;
+
+  config.url      = `${ baseUrl.development }`;
 } else {
   config.devtron  = false;
-  config.url      = `file://${ __dirname }/dist/index.html`;
-  config.aboutUrl = `file://${ __dirname }/dist/index.html#!/about`;
+  config.url      = `${ baseUrl.production }`;
 }
 
 ipcMain.on( 'updatedAppSetting', ( event, key, value ) => {
@@ -42,20 +71,26 @@ ipcMain.on( 'updatedRepos', ( event, reposString ) => {
 
 ipcMain.on( 'openNewWindow', createWindow );
 
-function openAboutWindow() {
-  if ( ! aboutWindow ) {
-    aboutWindow = new BrowserWindow( {
-      height        : 625,
-      width         : 475,
-      titleBarStyle : 'hidden',
-      resizable     : false
-    } );
-
-    aboutWindow.loadURL( config.aboutUrl );
-
-    aboutWindow.on( 'closed', () => aboutWindow = null );
+/**
+ * Open a selected static window
+ *
+ * @param {String} type - name of the selected window type
+ */
+function openStaticWindow( type ) {
+  if ( ! staticWindows[ type ].initializedWindow ) {
+    staticWindows[ type ].initializedWindow = new BrowserWindow(
+      staticWindows[ type ].config
+    );
+
+    staticWindows[ type ].initializedWindow.loadURL(
+      `${ config.url }` + staticWindows[ type ].hash
+    );
+
+    staticWindows[ type ].initializedWindow.on(
+      'closed', () => staticWindows[ type ].initializedWindow = null
+    );
   } else {
-    aboutWindow.focus();
+    staticWindows[ type ].initializedWindow.focus();
   }
 }
 
@@ -76,6 +111,7 @@ function createWindow( event, hash ) {
     width             : mainWindowState.width,
     x                 : mainWindowState.x,
     y                 : mainWindowState.y,
+    backgroundColor   : '#f1f1f1',
     minWidth          : 250,
     titleBarStyle     : 'hidden',
     'web-preferences' : {
@@ -114,7 +150,7 @@ function createWindow( event, hash ) {
   if ( mainWindows.length === 1 ) {
     menu.init( {
       createWindow,
-      openAboutWindow
+      openStaticWindow
     } );
   }
 
diff --git a/app/main/menu.js b/app/main/menu.js
index 7261df0..6f64741 100644
--- a/app/main/menu.js
+++ b/app/main/menu.js
@@ -1,4 +1,5 @@
 const electron = require( 'electron' );
+const shell    = electron.shell;
 const Menu     = electron.Menu;
 
 module.exports = {
@@ -72,8 +73,13 @@ module.exports = {
         role    : 'help',
         submenu : [
           {
-            label : 'Learn More',
-            click() { electron.shell.openExternal( 'http://electron.atom.io' ); }
+            label       : 'Shortcuts',
+            accelerator : 'CmdOrCtrl+/',
+            click() { options.openStaticWindow( 'help' ); }
+          },
+          {
+            label : 'Report an Issue',
+            click() { shell.openExternal( 'https://github.com/stefanjudis/forrest/issues' ); }
           }
         ]
       }
@@ -86,13 +92,13 @@ module.exports = {
         submenu : [
           {
             label : 'About Forrest',
-            click() { options.openAboutWindow(); }
+            click() { options.openStaticWindow( 'about' ); }
           },
           {
             type : 'separator'
           },
           {
-            label       : 'Open new window',
+            label       : 'Open New Window',
             accelerator : 'CmdOrCtrl+N',
             click() { options.createWindow(); }
           },
diff --git a/app/src/App.vue b/app/src/App.vue
index 7d33bb9..10da1ec 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -8,6 +8,8 @@
   @import './styles/objects/paragraphs';
   @import './styles/objects/lists';
   @import './styles/objects/small';
+  @import './styles/components/drag-handle';
+  @import './styles/components/logo';
   @import './styles/animations/move-down';
   @import './styles/transitions/slide-right--slide-left';
   @import './styles/transitions/slide-up--slide-down';
@@ -33,6 +35,7 @@
     --svg-fill       : #2a333c;
     --svg-fill-red   : var(--npm-red);
     --svg-fill-green : #399039;
+    --svg-fill-white : #ffffff;
 
     --svg-fill-bright : var(--main-bg-color);
 
@@ -138,7 +141,9 @@
 </style>
 
 <template>
-  <header-bar v-if="$route.name !== 'about-page'"></header-bar>
+  <header-bar
+    v-if="$route.name !== 'about-page' && $route.name !== 'help-page'">
+  </header-bar>
   <main>
     <settings v-if="showSettings"></settings>
     <router-view v-on:activate="toggleSettings( false )"></router-view>
diff --git a/app/src/components/AboutView.vue b/app/src/components/AboutView.vue
index 26acced..50ad7df 100644
--- a/app/src/components/AboutView.vue
+++ b/app/src/components/AboutView.vue
@@ -6,19 +6,6 @@
 
     text-align : center;
 
-    &--dragHandle {
-      position : absolute;
-
-      top   : 0;
-      right : 0;
-      left  : 0;
-
-      height : 2em;
-
-      -webkit-user-select : none;
-      -webkit-app-region  : drag;
-    }
-
     &--heartList {
       padding    : 0 1em;
       list-style : none;
@@ -27,28 +14,14 @@
         margin-bottom : .5em;
       }
     }
-
-    &--logo {
-      display : inline-block;
-
-      width  : 5em;
-      height : 5em;
-
-      margin-bottom : .5em;
-
-      svg {
-        max-width  : 100%;
-        max-height : 100%;
-      }
-    }
   }
 </style>
 
 <template>
   <div class="c-about">
-    <div class="c-about--dragHandle"></div>
+    <div class="c-dragHandle"></div>
 
-    <div class="c-about--logo" transition="project">
+    <div class="c-logo" transition="project">
       <svg width="330" height="330" viewBox="0 0 330 330" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <title>Forrest logo</title>
         <defs>
diff --git a/app/src/components/AppView/Settings.vue b/app/src/components/AppView/Settings.vue
index bf51b2f..1006eb6 100644
--- a/app/src/components/AppView/Settings.vue
+++ b/app/src/components/AppView/Settings.vue
@@ -26,7 +26,7 @@
 </style>
 
 <template>
-  <div class="c-settings"
+  <div class="c-settings scrollContainer"
         transition="t-slideDown--slideUp"
         v-key-tracker
         :on-esc="handleEsc"
diff --git a/app/src/components/HelpView.vue b/app/src/components/HelpView.vue
new file mode 100644
index 0000000..4d2236d
--- /dev/null
+++ b/app/src/components/HelpView.vue
@@ -0,0 +1,169 @@
+<style lang="scss">
+  .c-help {
+    position : relative;
+
+    padding : 1em;
+
+    text-align : center;
+
+    &--definitionList {
+      dt {
+        clear   : both;
+        width   : 25%;
+        padding : .5em 0;
+      }
+
+      dd {
+        font-size  : .9em;
+        
+        width      : 75%;
+        text-align : left;
+
+        padding : .5em 0 .5em .5em;
+      }
+
+      dt, dd {
+        float   : left;
+        margin  : 0;
+      }
+    }
+
+    &--key {
+      display :  inline-block;
+
+      font-size   : 1em;
+      font-weight : bold;
+      color       : var(--header-background);
+      text-align  : center;
+
+      min-height  : 2em;
+    }
+  }
+</style>
+
+<template>
+  <div class="c-help">
+    <div class="c-dragHandle"></div>
+
+    <div class="c-logo" transition="project">
+      <svg width="330" height="330" viewBox="0 0 330 330" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>Forrest logo</title>
+        <defs>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
+            <stop stop-color="#EEEBEB" offset="0%" />
+            <stop stop-color="#FCFBFB" offset="18.142%" />
+            <stop stop-color="#CFCFCF" offset="100%" />
+          </linearGradient>
+          <ellipse id="b" cx="161.175" cy="161.175" rx="161.175" ry="161.175" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a">
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1" />
+          </filter>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d">
+            <stop stop-color="#344352" offset="0%" />
+            <stop stop-color="#2A333C" offset="100%" />
+          </linearGradient>
+          <ellipse id="e" cx="161.175" cy="161.175" rx="150.059" ry="150.059" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="f">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1" />
+            <feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1" />
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"
+            />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowInnerInner1" />
+          </filter>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <g transform="translate(4 3)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b" />
+            <use fill="url(#c)" xlink:href="#b" />
+          </g>
+          <g transform="translate(4 3)">
+            <use fill="url(#d)" xlink:href="#e" />
+            <use fill="#000" filter="url(#f)" xlink:href="#e" />
+          </g>
+          <g stroke-width="5">
+            <path d="M102.013 105.372l49.846 103.795H52.167l49.846-103.795zM87.06 209.167h29.908v10.38H87.059v-10.38zM215.235 209.167h29.908v10.38h-29.908v-10.38zm14.954-103.795l49.846 103.795h-99.692l49.846-103.795z"
+              stroke="#F1F1F1" />
+            <path d="M194.584 240.954h49.847L166.1 69.693l-78.33 171.261h49.847v14.843h56.966v-14.843z" stroke="#2A333C" fill="#CD3632"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="u-marginBottom">
+      <h1 class="o-headline-2">Shortcuts</h1>
+    </div>
+
+    <div class="u-flexCenter u-marginBottom">
+      <div>
+        <h4 class="o-headline-4">Home</h4>
+
+        <dl class="c-help--definitionList u-marginTopSmall">
+          <dt aria-label="Right mouse button">
+            <svg class="u-fillWhite" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8 8 8s8-3.58 8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z" stroke="#2a333c" />
+              <path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93z" fill="#cb3837" />
+            </svg>
+          </dt>
+          <dd>Show more project options</dd>
+
+          <dt aria-label="Right arrow key">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
+            </svg>
+          </dt>
+          <dd>Open project</dd>
+
+          <dt aria-label="Up and down keys">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="#010101" />
+            </svg>
+          </dt>
+          <dd>Navigate through projects</dd>
+        </dl>
+      </div>
+      <div>
+        <h4 class="o-headline-4">Projects</h4>
+
+        <dl class="c-help--definitionList u-marginTopSmall">
+          <dt aria-label="Escape key">
+            <span class="c-help--key u-textTransformUppercase">esc</span>
+          </dt>
+          <dd>Terminate running command</dd>
+
+          <dt aria-label="Left arrow key">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0z" fill="none"/>
+              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+            </svg>
+          </dt>
+          <dd>Go Home / Terminate running command</dd>
+
+          <dt aria-label="Up and down keys">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="#010101" />
+            </svg>
+          </dt>
+          <dd>Navigate through commands</dd>
+        </dl>
+      </div>
+    </div>
+
+    <p class="u-marginTop">
+      To reach other actions use the <span class="c-help--key u-textTransformUppercase">tab</span> key when needed.
+    </p>
+  </div>
+</template>
diff --git a/app/src/routes.js b/app/src/routes.js
index 13ff3d1..00bbeba 100644
--- a/app/src/routes.js
+++ b/app/src/routes.js
@@ -10,5 +10,9 @@ export default {
   '/about' : {
     component : require( './components/AboutView' ),
     name      : 'about-page'
+  },
+  '/help' : {
+    component : require( './components/HelpView' ),
+    name      : 'help-page'
   }
 };
diff --git a/app/src/styles/_utils.scss b/app/src/styles/_utils.scss
index 33546f2..ced248a 100644
--- a/app/src/styles/_utils.scss
+++ b/app/src/styles/_utils.scss
@@ -85,6 +85,10 @@
   fill : var(--svg-fill-green);
 }
 
+.u-fillWhite {
+  fill : var(--svg-fill-white);
+}
+
 .u-fullHeight {
   height : 100%;
 }
@@ -110,4 +114,8 @@
 
 .u-fontSizeSmall {
   font-size : .9em;
-}
\ No newline at end of file
+}
+
+.u-textTransformUppercase {
+  text-transform : uppercase;
+}
diff --git a/app/src/styles/components/_drag-handle.scss b/app/src/styles/components/_drag-handle.scss
new file mode 100644
index 0000000..e323834
--- /dev/null
+++ b/app/src/styles/components/_drag-handle.scss
@@ -0,0 +1,12 @@
+.c-dragHandle {
+  position : absolute;
+
+  top   : 0;
+  right : 0;
+  left  : 0;
+
+  height : 2em;
+
+  -webkit-user-select : none;
+  -webkit-app-region  : drag;
+}
diff --git a/app/src/styles/components/_logo.scss b/app/src/styles/components/_logo.scss
new file mode 100644
index 0000000..450a1e2
--- /dev/null
+++ b/app/src/styles/components/_logo.scss
@@ -0,0 +1,13 @@
+.c-logo {
+  display : inline-block;
+
+  width  : 5em;
+  height : 5em;
+
+  margin-bottom : .5em;
+
+  svg {
+    max-width  : 100%;
+    max-height : 100%;
+  }
+}

From 694fe598293ee73977f9c08c491eb2bae949cb3c Mon Sep 17 00:00:00 2001
From: radibit <radimir.bitsov@gmail.com>
Date: Mon, 25 Jul 2016 23:56:13 +0200
Subject: [PATCH 7/8] create helper window, add shortcuts, update styles - fix
 #7 (+6 squashed commits) Squashed commits: [59e6cef] change the style of the
 help window - #7 [3e49a8e] set initial loading color - fix #38 [cecf3bf]
 create groups for the help page - fix #7 [25262c0] add scroll container to
 settings panel - fix #35 [6cfe020] apply changes from the CR - #7 [e09db23]
 create helper window and add keyboard shortcuts - fix #7

---
 app/electron.js                             |  78 ++++++---
 app/main/menu.js                            |  14 +-
 app/src/App.vue                             |   7 +-
 app/src/components/AboutView.vue            |  31 +---
 app/src/components/AppView/Settings.vue     |   2 +-
 app/src/components/HelpView.vue             | 169 ++++++++++++++++++++
 app/src/routes.js                           |   4 +
 app/src/styles/_utils.scss                  |  10 +-
 app/src/styles/components/_drag-handle.scss |  12 ++
 app/src/styles/components/_logo.scss        |  13 ++
 10 files changed, 283 insertions(+), 57 deletions(-)
 create mode 100644 app/src/components/HelpView.vue
 create mode 100644 app/src/styles/components/_drag-handle.scss
 create mode 100644 app/src/styles/components/_logo.scss

diff --git a/app/electron.js b/app/electron.js
index 6e26908..f5996a4 100644
--- a/app/electron.js
+++ b/app/electron.js
@@ -6,9 +6,38 @@ const menu                            = require( './main/menu' );
 const fixPath                         = require( 'fix-path' );
 const windowStateKeeper               = require( 'electron-window-state' );
 
+// configuration for the available static windows
+const staticWindows = {
+  about : {
+    config : {
+      height          : 625,
+      width           : 475,
+      backgroundColor : '#f1f1f1',
+      titleBarStyle   : 'hidden',
+      resizable       : false
+    },
+    hash              : '#!/about',
+    initializedWindow : null
+  },
+  help : {
+    config : {
+      height          : 625,
+      width           : 625,
+      backgroundColor : '#f1f1f1',
+      titleBarStyle   : 'hidden',
+      resizable       : false
+    },
+    hash              : '#!/help',
+    initializedWindow : null
+  }
+};
+
 let mainWindows = [];
-let aboutWindow;
-let config = {};
+let config  = {};
+let baseUrl = {
+  development : '',
+  production  : `file://${ __dirname }/dist/index.html`
+};
 
 // fix path to guarantee that npm and node are available
 fixPath();
@@ -17,13 +46,13 @@ fixPath();
 app.commandLine.appendSwitch( '--enable-experimental-web-platform-features' );
 
 if ( process.env.NODE_ENV === 'development' ) {
-  config          = require( '../config' ).config;
-  config.url      = `http://localhost:${ config.port }`;
-  config.aboutUrl = `http://localhost:${ config.port }#!/about`;
+  config              = require( '../config' ).config;
+  baseUrl.development = `http://localhost:${ config.port }`;
+
+  config.url      = `${ baseUrl.development }`;
 } else {
   config.devtron  = false;
-  config.url      = `file://${ __dirname }/dist/index.html`;
-  config.aboutUrl = `file://${ __dirname }/dist/index.html#!/about`;
+  config.url      = `${ baseUrl.production }`;
 }
 
 ipcMain.on( 'updatedAppSetting', ( event, key, value ) => {
@@ -42,20 +71,26 @@ ipcMain.on( 'updatedRepos', ( event, reposString ) => {
 
 ipcMain.on( 'openNewWindow', createWindow );
 
-function openAboutWindow() {
-  if ( ! aboutWindow ) {
-    aboutWindow = new BrowserWindow( {
-      height        : 625,
-      width         : 475,
-      titleBarStyle : 'hidden',
-      resizable     : false
-    } );
-
-    aboutWindow.loadURL( config.aboutUrl );
-
-    aboutWindow.on( 'closed', () => aboutWindow = null );
+/**
+ * Open a selected static window
+ *
+ * @param {String} type - name of the selected window type
+ */
+function openStaticWindow( type ) {
+  if ( ! staticWindows[ type ].initializedWindow ) {
+    staticWindows[ type ].initializedWindow = new BrowserWindow(
+      staticWindows[ type ].config
+    );
+
+    staticWindows[ type ].initializedWindow.loadURL(
+      `${ config.url }` + staticWindows[ type ].hash
+    );
+
+    staticWindows[ type ].initializedWindow.on(
+      'closed', () => staticWindows[ type ].initializedWindow = null
+    );
   } else {
-    aboutWindow.focus();
+    staticWindows[ type ].initializedWindow.focus();
   }
 }
 
@@ -76,6 +111,7 @@ function createWindow( event, hash ) {
     width             : mainWindowState.width,
     x                 : mainWindowState.x,
     y                 : mainWindowState.y,
+    backgroundColor   : '#f1f1f1',
     minWidth          : 250,
     titleBarStyle     : 'hidden',
     'web-preferences' : {
@@ -114,7 +150,7 @@ function createWindow( event, hash ) {
   if ( mainWindows.length === 1 ) {
     menu.init( {
       createWindow,
-      openAboutWindow
+      openStaticWindow
     } );
   }
 
diff --git a/app/main/menu.js b/app/main/menu.js
index 7261df0..6f64741 100644
--- a/app/main/menu.js
+++ b/app/main/menu.js
@@ -1,4 +1,5 @@
 const electron = require( 'electron' );
+const shell    = electron.shell;
 const Menu     = electron.Menu;
 
 module.exports = {
@@ -72,8 +73,13 @@ module.exports = {
         role    : 'help',
         submenu : [
           {
-            label : 'Learn More',
-            click() { electron.shell.openExternal( 'http://electron.atom.io' ); }
+            label       : 'Shortcuts',
+            accelerator : 'CmdOrCtrl+/',
+            click() { options.openStaticWindow( 'help' ); }
+          },
+          {
+            label : 'Report an Issue',
+            click() { shell.openExternal( 'https://github.com/stefanjudis/forrest/issues' ); }
           }
         ]
       }
@@ -86,13 +92,13 @@ module.exports = {
         submenu : [
           {
             label : 'About Forrest',
-            click() { options.openAboutWindow(); }
+            click() { options.openStaticWindow( 'about' ); }
           },
           {
             type : 'separator'
           },
           {
-            label       : 'Open new window',
+            label       : 'Open New Window',
             accelerator : 'CmdOrCtrl+N',
             click() { options.createWindow(); }
           },
diff --git a/app/src/App.vue b/app/src/App.vue
index 7d33bb9..10da1ec 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -8,6 +8,8 @@
   @import './styles/objects/paragraphs';
   @import './styles/objects/lists';
   @import './styles/objects/small';
+  @import './styles/components/drag-handle';
+  @import './styles/components/logo';
   @import './styles/animations/move-down';
   @import './styles/transitions/slide-right--slide-left';
   @import './styles/transitions/slide-up--slide-down';
@@ -33,6 +35,7 @@
     --svg-fill       : #2a333c;
     --svg-fill-red   : var(--npm-red);
     --svg-fill-green : #399039;
+    --svg-fill-white : #ffffff;
 
     --svg-fill-bright : var(--main-bg-color);
 
@@ -138,7 +141,9 @@
 </style>
 
 <template>
-  <header-bar v-if="$route.name !== 'about-page'"></header-bar>
+  <header-bar
+    v-if="$route.name !== 'about-page' && $route.name !== 'help-page'">
+  </header-bar>
   <main>
     <settings v-if="showSettings"></settings>
     <router-view v-on:activate="toggleSettings( false )"></router-view>
diff --git a/app/src/components/AboutView.vue b/app/src/components/AboutView.vue
index 26acced..50ad7df 100644
--- a/app/src/components/AboutView.vue
+++ b/app/src/components/AboutView.vue
@@ -6,19 +6,6 @@
 
     text-align : center;
 
-    &--dragHandle {
-      position : absolute;
-
-      top   : 0;
-      right : 0;
-      left  : 0;
-
-      height : 2em;
-
-      -webkit-user-select : none;
-      -webkit-app-region  : drag;
-    }
-
     &--heartList {
       padding    : 0 1em;
       list-style : none;
@@ -27,28 +14,14 @@
         margin-bottom : .5em;
       }
     }
-
-    &--logo {
-      display : inline-block;
-
-      width  : 5em;
-      height : 5em;
-
-      margin-bottom : .5em;
-
-      svg {
-        max-width  : 100%;
-        max-height : 100%;
-      }
-    }
   }
 </style>
 
 <template>
   <div class="c-about">
-    <div class="c-about--dragHandle"></div>
+    <div class="c-dragHandle"></div>
 
-    <div class="c-about--logo" transition="project">
+    <div class="c-logo" transition="project">
       <svg width="330" height="330" viewBox="0 0 330 330" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <title>Forrest logo</title>
         <defs>
diff --git a/app/src/components/AppView/Settings.vue b/app/src/components/AppView/Settings.vue
index bf51b2f..1006eb6 100644
--- a/app/src/components/AppView/Settings.vue
+++ b/app/src/components/AppView/Settings.vue
@@ -26,7 +26,7 @@
 </style>
 
 <template>
-  <div class="c-settings"
+  <div class="c-settings scrollContainer"
         transition="t-slideDown--slideUp"
         v-key-tracker
         :on-esc="handleEsc"
diff --git a/app/src/components/HelpView.vue b/app/src/components/HelpView.vue
new file mode 100644
index 0000000..4d2236d
--- /dev/null
+++ b/app/src/components/HelpView.vue
@@ -0,0 +1,169 @@
+<style lang="scss">
+  .c-help {
+    position : relative;
+
+    padding : 1em;
+
+    text-align : center;
+
+    &--definitionList {
+      dt {
+        clear   : both;
+        width   : 25%;
+        padding : .5em 0;
+      }
+
+      dd {
+        font-size  : .9em;
+        
+        width      : 75%;
+        text-align : left;
+
+        padding : .5em 0 .5em .5em;
+      }
+
+      dt, dd {
+        float   : left;
+        margin  : 0;
+      }
+    }
+
+    &--key {
+      display :  inline-block;
+
+      font-size   : 1em;
+      font-weight : bold;
+      color       : var(--header-background);
+      text-align  : center;
+
+      min-height  : 2em;
+    }
+  }
+</style>
+
+<template>
+  <div class="c-help">
+    <div class="c-dragHandle"></div>
+
+    <div class="c-logo" transition="project">
+      <svg width="330" height="330" viewBox="0 0 330 330" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>Forrest logo</title>
+        <defs>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
+            <stop stop-color="#EEEBEB" offset="0%" />
+            <stop stop-color="#FCFBFB" offset="18.142%" />
+            <stop stop-color="#CFCFCF" offset="100%" />
+          </linearGradient>
+          <ellipse id="b" cx="161.175" cy="161.175" rx="161.175" ry="161.175" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a">
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1" />
+          </filter>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d">
+            <stop stop-color="#344352" offset="0%" />
+            <stop stop-color="#2A333C" offset="100%" />
+          </linearGradient>
+          <ellipse id="e" cx="161.175" cy="161.175" rx="150.059" ry="150.059" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="f">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1" />
+            <feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1" />
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"
+            />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowInnerInner1" />
+          </filter>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <g transform="translate(4 3)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b" />
+            <use fill="url(#c)" xlink:href="#b" />
+          </g>
+          <g transform="translate(4 3)">
+            <use fill="url(#d)" xlink:href="#e" />
+            <use fill="#000" filter="url(#f)" xlink:href="#e" />
+          </g>
+          <g stroke-width="5">
+            <path d="M102.013 105.372l49.846 103.795H52.167l49.846-103.795zM87.06 209.167h29.908v10.38H87.059v-10.38zM215.235 209.167h29.908v10.38h-29.908v-10.38zm14.954-103.795l49.846 103.795h-99.692l49.846-103.795z"
+              stroke="#F1F1F1" />
+            <path d="M194.584 240.954h49.847L166.1 69.693l-78.33 171.261h49.847v14.843h56.966v-14.843z" stroke="#2A333C" fill="#CD3632"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="u-marginBottom">
+      <h1 class="o-headline-2">Shortcuts</h1>
+    </div>
+
+    <div class="u-flexCenter u-marginBottom">
+      <div>
+        <h4 class="o-headline-4">Home</h4>
+
+        <dl class="c-help--definitionList u-marginTopSmall">
+          <dt aria-label="Right mouse button">
+            <svg class="u-fillWhite" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8 8 8s8-3.58 8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z" stroke="#2a333c" />
+              <path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93z" fill="#cb3837" />
+            </svg>
+          </dt>
+          <dd>Show more project options</dd>
+
+          <dt aria-label="Right arrow key">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
+            </svg>
+          </dt>
+          <dd>Open project</dd>
+
+          <dt aria-label="Up and down keys">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="#010101" />
+            </svg>
+          </dt>
+          <dd>Navigate through projects</dd>
+        </dl>
+      </div>
+      <div>
+        <h4 class="o-headline-4">Projects</h4>
+
+        <dl class="c-help--definitionList u-marginTopSmall">
+          <dt aria-label="Escape key">
+            <span class="c-help--key u-textTransformUppercase">esc</span>
+          </dt>
+          <dd>Terminate running command</dd>
+
+          <dt aria-label="Left arrow key">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0z" fill="none"/>
+              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+            </svg>
+          </dt>
+          <dd>Go Home / Terminate running command</dd>
+
+          <dt aria-label="Up and down keys">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="#010101" />
+            </svg>
+          </dt>
+          <dd>Navigate through commands</dd>
+        </dl>
+      </div>
+    </div>
+
+    <p class="u-marginTop">
+      To reach other actions use the <span class="c-help--key u-textTransformUppercase">tab</span> key when needed.
+    </p>
+  </div>
+</template>
diff --git a/app/src/routes.js b/app/src/routes.js
index 13ff3d1..00bbeba 100644
--- a/app/src/routes.js
+++ b/app/src/routes.js
@@ -10,5 +10,9 @@ export default {
   '/about' : {
     component : require( './components/AboutView' ),
     name      : 'about-page'
+  },
+  '/help' : {
+    component : require( './components/HelpView' ),
+    name      : 'help-page'
   }
 };
diff --git a/app/src/styles/_utils.scss b/app/src/styles/_utils.scss
index 33546f2..ced248a 100644
--- a/app/src/styles/_utils.scss
+++ b/app/src/styles/_utils.scss
@@ -85,6 +85,10 @@
   fill : var(--svg-fill-green);
 }
 
+.u-fillWhite {
+  fill : var(--svg-fill-white);
+}
+
 .u-fullHeight {
   height : 100%;
 }
@@ -110,4 +114,8 @@
 
 .u-fontSizeSmall {
   font-size : .9em;
-}
\ No newline at end of file
+}
+
+.u-textTransformUppercase {
+  text-transform : uppercase;
+}
diff --git a/app/src/styles/components/_drag-handle.scss b/app/src/styles/components/_drag-handle.scss
new file mode 100644
index 0000000..e323834
--- /dev/null
+++ b/app/src/styles/components/_drag-handle.scss
@@ -0,0 +1,12 @@
+.c-dragHandle {
+  position : absolute;
+
+  top   : 0;
+  right : 0;
+  left  : 0;
+
+  height : 2em;
+
+  -webkit-user-select : none;
+  -webkit-app-region  : drag;
+}
diff --git a/app/src/styles/components/_logo.scss b/app/src/styles/components/_logo.scss
new file mode 100644
index 0000000..450a1e2
--- /dev/null
+++ b/app/src/styles/components/_logo.scss
@@ -0,0 +1,13 @@
+.c-logo {
+  display : inline-block;
+
+  width  : 5em;
+  height : 5em;
+
+  margin-bottom : .5em;
+
+  svg {
+    max-width  : 100%;
+    max-height : 100%;
+  }
+}

From d4e9cc4ab013c07d1060a89965e5effce6704dfb Mon Sep 17 00:00:00 2001
From: stefan judis <stefanjudis@gmail.com>
Date: Wed, 27 Jul 2016 07:30:22 +0200
Subject: [PATCH 8/8] adjust window size of help - #7

---
 app/electron.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/electron.js b/app/electron.js
index f5996a4..5aca63f 100644
--- a/app/electron.js
+++ b/app/electron.js
@@ -21,8 +21,8 @@ const staticWindows = {
   },
   help : {
     config : {
-      height          : 625,
-      width           : 625,
+      height          : 400,
+      width           : 550,
       backgroundColor : '#f1f1f1',
       titleBarStyle   : 'hidden',
       resizable       : false