feat: Add keyboard shortcuts to tooltips

app/components/Tooltip.js

@@ -5,6 +5,7 @@ import Tippy from '@tippy.js/react';
 
 type Props = {
   tooltip: React.Node,
+  shortcut?: React.Node,
   placement?: 'top' | 'bottom' | 'left' | 'right',
   children: React.Node,
   delay?: number,
@@ -19,6 +20,7 @@ class Tooltip extends React.Component<Props> {
 
   render() {
     const {
+      shortcut,
       tooltip,
       delay = 50,
       children,
@@ -28,12 +30,22 @@ class Tooltip extends React.Component<Props> {
     } = this.props;
     const Component = block ? 'div' : 'span';
 
+    let content = tooltip;
+
+    if (shortcut) {
+      content = (
+        <React.Fragment>
+          {tooltip} &middot; <Shortcut>{shortcut}</Shortcut>
+        </React.Fragment>
+      );
+    }
+
     return (
       <StyledTippy
         arrow
         arrowType="round"
         animation="shift-away"
-        content={tooltip}
+        content={content}
         delay={delay}
         duration={[200, 150]}
         inertia
@@ -45,6 +57,21 @@ class Tooltip extends React.Component<Props> {
   }
 }
 
+const Shortcut = styled.kbd`
+  position: relative;
+  top: -2px;
+
+  display: inline-block;
+  padding: 2px 4px;
+  font: 10px 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
+    monospace;
+  line-height: 10px;
+  color: ${props => props.theme.tooltipBackground};
+  vertical-align: middle;
+  background-color: ${props => props.theme.tooltipText};
+  border-radius: 3px;
+`;
+
 const StyledTippy = styled(Tippy)`
   font-size: 13px;
   background-color: ${props => props.theme.tooltipBackground};