diff --git a/client/coral-admin/src/components/ModerationKeysModal.css b/client/coral-admin/src/components/ModerationKeysModal.css
index a030b6efa..73697d930 100644
--- a/client/coral-admin/src/components/ModerationKeysModal.css
+++ b/client/coral-admin/src/components/ModerationKeysModal.css
@@ -18,3 +18,47 @@
border-radius: 4px;
border: 1px solid #999;
}
+
+.callToAction {
+ position: fixed;
+ left: 10px;
+ bottom: 10px;
+ width: 280px;
+ height: 200px;
+ background: white;
+ padding: 15px;
+ box-sizing: border-box;
+ box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+
+ .ctaHeader {
+ font-size: 16px;
+ margin-bottom: 5px;
+ }
+
+ ul {
+ padding-left: 0;
+ list-style: none;
+ margin: 0 0 10px 0;
+ }
+
+ p, li {
+ font-size: 12px;
+ margin-bottom: 5px;
+ }
+
+ li span:first-child, p:last-child span:first-child {
+ display: inline-block;
+ width: 120px;
+ }
+}
+
+.closeButton {
+ float: right;
+ font-size: 20px;
+ cursor: pointer;
+}
+
+.smallKey {
+ padding: 5px;
+ border: 1px solid #ccc;
+}
diff --git a/client/coral-admin/src/components/ModerationKeysModal.js b/client/coral-admin/src/components/ModerationKeysModal.js
index 5a951e588..60933dee0 100644
--- a/client/coral-admin/src/components/ModerationKeysModal.js
+++ b/client/coral-admin/src/components/ModerationKeysModal.js
@@ -4,6 +4,8 @@ import React from 'react';
import Modal from 'components/Modal';
import styles from './ModerationKeysModal.css';
+const lang = new I18n(translations);
+
const shortcuts = [
{
title: 'modqueue.navigation',
@@ -23,29 +25,72 @@ const shortcuts = [
}
];
-export default ({open, onClose}) => (
- {lang.t('modqueue.shortcuts')}
-
-
-
- ))}
-
-
-
-
- {Object.keys(shortcut.shortcuts).map(key => (
- {lang.t(shortcut.title)}
-
-
- ))}
-
- {key}
- {lang.t(shortcut.shortcuts[key])}
-
{lang.t('modqueue.mod-faster')}
+{lang.t('modqueue.try-these')}:
+{lang.t('modqueue.view-more-shortcuts')} {lang.t('modqueue.shift-key')} + /
+| {lang.t(shortcut.title)} | +|
|---|---|
| {key} | +{lang.t(shortcut.shortcuts[key])} | +