refactor(keyboard-shortcuts) use jss instead of scss

css/_keyboard-shortcuts.scss

@@ -1,10 +0,0 @@
-.shortcuts-list {
-    list-style-type: none;
-    padding: 0;
-
-    &__item {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: em(7, 14);
-    }
-}

css/main.scss

@@ -57,7 +57,6 @@ $flagsImagePath: "../images/";
 @import 'welcome_page_content';
 @import 'welcome_page_settings_toolbar';
 @import 'toolbars';
-@import 'keyboard-shortcuts';
 @import 'redirect_page';
 @import 'components/form-control';
 @import 'components/link';

react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js

@@ -1,6 +1,8 @@
 /* @flow */
 
 import Lozenge from '@atlaskit/lozenge';
+import { withStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
 import React, { Component } from 'react';
 
 import { Dialog } from '../../base/dialog';
@@ -12,6 +14,11 @@ import { translate } from '../../base/i18n';
  */
 type Props = {
 
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: Object,
+
     /**
      * A Map with keyboard keys as keys and translation keys as values.
      */
@@ -23,6 +30,28 @@ type Props = {
     t: Function
 };
 
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = theme => {
+    return {
+        list: {
+            listStyleType: 'none',
+            padding: 0,
+
+            '& .shortcuts-list__item': {
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginBottom: theme.spacing(2)
+            }
+        }
+    };
+};
+
 /**
  * Implements a React {@link Component} which displays a dialog describing
  * registered keyboard shortcuts.
@@ -49,7 +78,7 @@ class KeyboardShortcutsDialog extends Component<Props> {
                 <div
                     id = 'keyboard-shortcuts'>
                     <ul
-                        className = 'shortcuts-list'
+                        className = { clsx('shortcuts-list', this.props.classes.list) }
                         id = 'keyboard-shortcuts-list'>
                         { shortcuts }
                     </ul>
@@ -96,4 +125,4 @@ class KeyboardShortcutsDialog extends Component<Props> {
     }
 }
 
-export default translate(KeyboardShortcutsDialog);
+export default translate(withStyles(styles)(KeyboardShortcutsDialog));