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

* slight modifications to keyboards dialog

* Updating shortcuts modal

webapp/components/shortcuts_modal.jsx

@@ -12,8 +12,14 @@ import React from 'react';
 
 const allShortcuts = defineMessages({
     mainHeader: {
-        id: 'shortcuts.header',
+        default: {
-        defaultMessage: 'Keyboard Shortcuts'
+            id: 'shortcuts.header',
+            defaultMessage: 'Keyboard Shortcuts\tCtrl|/'
+        },
+        mac: {
+            id: 'shortcuts.header.mac',
+            defaultMessage: 'Keyboard Shortcuts\t⌘|/'
+        }
     },
     navHeader: {
         id: 'shortcuts.nav.header',
@@ -103,10 +109,6 @@ 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'
@@ -296,7 +298,7 @@ class ShortcutsModal extends React.PureComponent {
                 <div className='shortcuts-content'>
                     <Modal.Header closeButton={true}>
                         <Modal.Title>
-                            <strong>{formatMessage(shortcuts.mainHeader)}</strong>
+                            <strong>{renderShortcut(formatMessage(shortcuts.mainHeader))}</strong>
                         </Modal.Title>
                     </Modal.Header>
                     <Modal.Body ref='modalBody'>
@@ -320,7 +322,6 @@ 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,18 +11,43 @@
                     background: transparent;
                     border: none;
                     color: inherit;
-                    padding: 40px 40px 20px;
+                    padding: 20px 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;
+                            }
+                        }
                     }
                 }
             }