feat: Add keyboard shortcuts to tooltips

app/components/Modal.js

@@ -51,7 +51,7 @@ const Modal = ({
         <Content column>
           {title && <h1>{title}</h1>}
           <Close onClick={onRequestClose}>
-            <CloseIcon size={40} />
+            <CloseIcon size={40} color="currentColor" />
             <Esc>esc</Esc>
           </Close>
           {children}
@@ -98,8 +98,8 @@ const Close = styled.a`
   position: fixed;
   top: 16px;
   right: 16px;
-  opacity: 0.5;
-  color: ${props => props.theme.textSecondary};
+  opacity: 0.75;
+  color: ${props => props.theme.text};
 
   &:hover {
     opacity: 1;

app/components/Tip.js

@@ -1,58 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import styled from 'styled-components';
-import { CloseIcon } from 'outline-icons';
-import Tooltip from './Tooltip';
-import Flex from 'shared/components/Flex';
-
-type Props = {
-  id: string,
-  children: React.Node,
-  disabled?: boolean,
-};
-
-@observer
-class Tip extends React.Component<Props> {
-  @observable
-  isHidden: boolean = window.localStorage.getItem(this.storageId) === 'hidden';
-
-  get storageId() {
-    return `tip-${this.props.id}`;
-  }
-
-  hide = () => {
-    window.localStorage.setItem(this.storageId, 'hidden');
-    this.isHidden = true;
-  };
-
-  render() {
-    const { children } = this.props;
-    if (this.props.disabled || this.isHidden) return null;
-
-    return (
-      <Wrapper align="flex-start">
-        <span>{children}</span>
-
-        <Tooltip tooltip="Hide this message" placement="bottom">
-          <Close type="close" size={32} color="#000" onClick={this.hide} />
-        </Tooltip>
-      </Wrapper>
-    );
-  }
-}
-
-const Close = styled(CloseIcon)`
-  margin-top: 8px;
-`;
-
-const Wrapper = styled(Flex)`
-  background: ${props => props.theme.primary};
-  color: ${props => props.theme.text};
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-weight: 400;
-`;
-
-export default Tip;

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