Revert "[PLT-7471] Slight modifications to keyboards dialog (#7325)" (#7363)

This reverts commit 967a0df0f8.

webapp/components/shortcuts_modal.jsx

@@ -12,14 +12,8 @@ import React from 'react';
 
 const allShortcuts = defineMessages({
     mainHeader: {
-        default: {
-            id: 'shortcuts.header',
-            defaultMessage: 'Keyboard Shortcuts\tCtrl|/'
-        },
-        mac: {
-            id: 'shortcuts.header.mac',
-            defaultMessage: 'Keyboard Shortcuts\t⌘|/'
-        }
+        id: 'shortcuts.header',
+        defaultMessage: 'Keyboard Shortcuts'
     },
     navHeader: {
         id: 'shortcuts.nav.header',
@@ -109,6 +103,10 @@ const allShortcuts = defineMessages({
         id: 'shortcuts.msgs.header',
         defaultMessage: 'Messages'
     },
+    msgMarkAsRead: {
+        id: 'shortcuts.msgs.mark_as_read',
+        defaultMessage: 'Mark current channel as read:\tEsc'
+    },
     msgInputHeader: {
         id: 'shortcuts.msgs.input.header',
         defaultMessage: 'Works inside an empty input field'
@@ -298,7 +296,7 @@ class ShortcutsModal extends React.PureComponent {
                 <div className='shortcuts-content'>
                     <Modal.Header closeButton={true}>
                         <Modal.Title>
-                            <strong>{renderShortcut(formatMessage(shortcuts.mainHeader))}</strong>
+                            <strong>{formatMessage(shortcuts.mainHeader)}</strong>
                         </Modal.Title>
                     </Modal.Header>
                     <Modal.Body ref='modalBody'>
@@ -322,6 +320,7 @@ class ShortcutsModal extends React.PureComponent {
                                 <div className='section'>
                                     <div>
                                         <h4 className='section-title'><strong>{formatMessage(shortcuts.msgHeader)}</strong></h4>
+                                        {renderShortcut(formatMessage(shortcuts.msgMarkAsRead))}
                                         <span><strong>{formatMessage(shortcuts.msgInputHeader)}</strong></span>
                                         <div className='subsection'>
                                             {renderShortcut(formatMessage(shortcuts.msgEdit))}

webapp/sass/routes/_shortcuts-modal.scss

@@ -11,43 +11,18 @@
                     background: transparent;
                     border: none;
                     color: inherit;
-                    padding: 20px 40px 20px;
+                    padding: 40px 40px 20px;
 
                     .close {
                         color: inherit;
                         font-size: 28px;
                         font-weight: normal;
                         right: 35px;
-                        top: 35px;
                     }
 
                     .modal-title {
                         color: inherit;
                         font-size: 20px;
-
-                        > div {
-                            &:first-child {
-                                margin-bottom: 2.5em;
-                            }
-                        }
-
-                        .shortcut-line {
-                            margin: 17px 0;
-
-                            span {
-                                &:first-child {
-                                    margin-right: 5px;
-                                }
-                            }
-
-                            .shortcut-key {
-                                border-radius: 3px;
-                                font-size: .9em;
-                                font-weight: 500;
-                                margin: 5px 0 5px 5px;
-                                padding: 1px 5px;
-                            }
-                        }
                     }
                 }
             }