Add styling

css/mail.css

@@ -875,12 +875,7 @@ input.submit-message,
 }
 
 #app-shortcuts {
-}
-
-#app-shortcuts table {
-    border-collapse: collapse;
-    width: 100%;
-    white-space: normal;
+	margin: 10px;
 }
 
 #app-shortcuts div {
@@ -888,16 +883,17 @@ input.submit-message,
 	padding-right: 15px;
 }
 
-#app-shortcuts div:first-child {
-    text-align: right;
-    font-weight: bold;
-    width: 140px;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
+#app-shortcuts .shortcut-row {
+	margin-left: 20px;
+}
+
+#app-shortcuts .shortcut-row .desc{
+	margin-right:10px;
 }
 
 #app-shortcuts div.one-colspan {
 	text-align: left;
+	font-weight: bold;
 }
 
 kbd {

js/templates/keyboard-shortcuts.html

@@ -7,34 +7,34 @@
 	<div>
 		<div class="one-colspan" colspan="2">Compose</div>
 	</div>
-	<div>
-		<span> {{ t 'Send' }}</span>
+	<div class="shortcut-row">
+		<span class="desc"> {{ t 'Send' }}</span>
 		<span><kbd>Ctrl</kbd> + <kbd>Enter</kbd></span>
 	</div>
 	<div>
 		<div class="one-colspan" colspan="2">Actions</div>
 	</div>
-	<div>
-		<span>{{t 'Refresh'}}</span>
+	<div class="shortcut-row">
+		<span class="desc">{{t 'Refresh'}}</span>
 		<span><kbd>R</kbd></span>
 	</div>
-	<div>
-		<span>{{ t 'Toggle star' }}</span>
+	<div class="shortcut-row">
+		<span class="desc">{{ t 'Toggle star' }}</span>
 		<span><kbd>S</kbd></span>
 	</div>
-	<div>
-		<span>{{ t 'Delete' }}</span>
+	<div class="shortcut-row">
+		<span class="desc">{{ t 'Delete' }}</span>
 		<span><kbd>Del</kbd></span>
 	</div>
-	<div>
-		<span>{{ t 'Toggle unread' }}</span>
+	<div class="shortcut-row">
+		<span class="desc">{{ t 'Toggle unread' }}</span>
 		<span><kbd>U</kbd></span>
 	</div>
 	<div>
 		<div class="one-colspan" colspan="2">Navigation</div>
 	</div>
-	<div>
-		<span>{{t 'Older message'}}</span>
+	<div class="shortcut-row">
+		<span class="desc">{{t 'Older message'}}</span>
 		<span><kbd>J</kbd> or <kbd>→</kbd></span>
 	</div>
 

js/templates/settings.html

 <div id="mailsettings">
 	<ul id="settings-accounts" class="mailaccount-list">
 	</ul>
+
 	<a id="new-mail-account"
 	   class="button new-button"
 	   href="{{addAccountUrl}}">{{ t 'Add mail account' }}</a>
 
-	<p><a id="keyboard-shortcuts"
-	   href="{{keyboardShortcutUrl}}">{{ t 'Keyboard shortcuts' }}</a></p>
+	<p class="app-settings-hint">
+	<a id="keyboard-shortcuts"
+		  href="{{keyboardShortcutUrl}}">{{ t 'Keyboard shortcuts' }}</a></p>
+
 	<p class="app-settings-hint">
 		{{{ t 'Looking to encrypt your emails? Install the <a href="https://www.mailvelope.com/" target="_blank">Mailvelope browser extension</a>!' }}}
 	</p>