refactor(keyboard-shortcuts) use jss instead of scss

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));