fix: accessiblity improvements, focus states, real buttons

app/scenes/Document/components/Header.js

@@ -156,16 +156,22 @@ class Header extends React.Component<Props> {
           {isEditing && (
             <React.Fragment>
               <Action>
-                <Button
-                  onClick={this.handleSave}
-                  title={`Save changes (${meta}+Enter)`}
-                  disabled={savingIsDisabled}
-                  isSaving={isSaving}
-                  neutral={isDraft}
-                  small
+                <Tooltip
+                  tooltip="Save"
+                  shortcut={`${meta}+enter`}
+                  delay={500}
+                  placement="bottom"
                 >
-                  {isDraft ? 'Save Draft' : 'Done Editing'}
-                </Button>
+                  <Button
+                    onClick={this.handleSave}
+                    disabled={savingIsDisabled}
+                    isSaving={isSaving}
+                    neutral={isDraft}
+                    small
+                  >
+                    {isDraft ? 'Save Draft' : 'Done Editing'}
+                  </Button>
+                </Tooltip>
               </Action>
             </React.Fragment>
           )}

app/scenes/Document/components/KeyboardShortcuts.js

@@ -2,12 +2,12 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
-import { lighten } from 'polished';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { KeyboardIcon } from 'outline-icons';
 import Modal from 'components/Modal';
 import Tooltip from 'components/Tooltip';
+import NudeButton from 'components/NudeButton';
 import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
 
 type Props = {};
@@ -49,31 +49,12 @@ class KeyboardShortcutsButton extends React.Component<Props> {
   }
 }
 
-const Button = styled.button`
+const Button = styled(NudeButton)`
   display: none;
   position: fixed;
   bottom: 0;
   right: 0;
   margin: 24px;
-  width: 24px;
-  height: 24px;
-  opacity: 0.8;
-  background: none;
-  border-radius: 4px;
-  line-height: 0;
-  border: 0;
-  padding: 0;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  &:focus {
-    transition-duration: 0.05s;
-    box-shadow: ${props => lighten(0.4, props.theme.buttonBackground)} 0px 0px
-      0px 3px;
-    outline: none;
-  }
 
   ${breakpoint('tablet')`
     display: block;