Display keyboard shortcuts on a modal

Fixes #241

5 files changed, 41 insertions, 4 deletions

diff --git a/client/components/boards/boardArchive.jade b/client/components/boards/boardArchive.jade
index d659d0cc..b4b41d0f 100644
--- a/client/components/boards/boardArchive.jade
+++ b/client/components/boards/boardArchive.jade
@@ -1,5 +1,7 @@
 template(name="archivedBoards")
-  h2 Archived boards
+  h2
+    i.fa.fa-archive
+    | Archived boards
 
   ul.archived-lists
     each archivedBoards
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index d886cd6f..ee454e78 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -39,7 +39,7 @@
   flex-wrap: wrap
   background-color: #fff
   min-height: 20px
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
+  box-shadow: 0 1px 2px rgba(0,0,0,.15)
   border-radius: 2px
   color: #4d4d4d
   overflow: hidden
diff --git a/client/components/main/keyboardShortcuts.styl b/client/components/main/keyboardShortcuts.styl
new file mode 100644
index 00000000..42e0637b
--- /dev/null
+++ b/client/components/main/keyboardShortcuts.styl
@@ -0,0 +1,25 @@
+.shortcuts-list
+  .shortcuts-list-item
+    border-bottom: 1px solid darken(white, 25%)
+    padding: 10px 5px
+
+    &:last-child
+      border-bottom: none
+
+    .shortcuts-list-item-keys
+      margin-top: 5px
+      float: right
+
+      kbd
+        padding: 5px 8px
+        margin: 5px
+        font-size: 18px
+        font-weight: bold
+        background: white
+        border-radius: 3px
+        border: 1px solid darken(white, 10%)
+        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
+
+    .shortcuts-list-item-action
+      font-size: 1.4em
+      margin: 5px
diff --git a/client/components/main/keyboardShortcuts.tpl.jade b/client/components/main/keyboardShortcuts.tpl.jade
index 321c2b0a..d10068ed 100644
--- a/client/components/main/keyboardShortcuts.tpl.jade
+++ b/client/components/main/keyboardShortcuts.tpl.jade
@@ -1,4 +1,11 @@
-.wrapper
+.wrapper.shortcuts-list
   h2
     i.fa.fa-keyboard-o
     | Keyboard shortcuts
+
+  each mapping
+    .shortcuts-list-item
+      .shortcuts-list-item-keys
+        each keys
+          kbd= this
+      .shortcuts-list-item-action= action
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
index 9a831a40..e9367b11 100644
--- a/client/components/main/layouts.styl
+++ b/client/components/main/layouts.styl
@@ -39,7 +39,7 @@ body
   overflow-y: auto
 
   .modal-content
-    width: 660px
+    width: 500px
     min-height: 160px
     margin: 42px auto
     padding: 12px
@@ -47,6 +47,9 @@ body
     background: darken(white, 13%)
     z-index: 110
 
+    h2
+      margin-bottom: 25px
+
     .modal-close-btn
       display: block
       float: right