Add real buttons to document header

Fixed: Incorrect page title when starting a new doc
Fixed: Linting error

app/components/Button.js

@@ -14,7 +14,7 @@ const RealButton = styled.button`
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
-  height: 36px;
+  height: ${props => (props.small ? 24 : 36)}px;
   text-decoration: none;
   text-transform: uppercase;
   flex-shrink: 0;
@@ -69,9 +69,9 @@ const Label = styled.span`
 `;
 
 const Inner = styled.span`
-  padding: 0 12px;
+  padding: 0 ${props => (props.small ? 8 : 12)}px;
   display: flex;
-  line-height: 28px;
+  line-height: ${props => (props.small ? 24 : 28)}px;
   justify-content: center;
   align-items: center;
 
@@ -86,6 +86,7 @@ export type Props = {
   icon?: React.Node,
   className?: string,
   children?: React.Node,
+  small?: boolean,
 };
 
 export default function Button({
@@ -93,14 +94,15 @@ export default function Button({
   icon,
   children,
   value,
+  small,
   ...rest
 }: Props) {
   const hasText = children !== undefined || value !== undefined;
   const hasIcon = icon !== undefined;
 
   return (
-    <RealButton {...rest}>
+    <RealButton small={small} {...rest}>
-      <Inner hasIcon={hasIcon}>
+      <Inner hasIcon={hasIcon} small={small}>
         {hasIcon && icon}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
       </Inner>

app/components/Modal.js

@@ -46,7 +46,8 @@ const Modal = ({
         <Content column>
           {title && <h1>{title}</h1>}
           <Close onClick={onRequestClose}>
-            <CloseIcon size={32} />
+            <CloseIcon size={40} />
+            <Esc>esc</Esc>
           </Close>
           {children}
         </Content>
@@ -80,6 +81,13 @@ const StyledModal = styled(ReactModal)`
   outline: none;
 `;
 
+const Esc = styled.span`
+  display: block;
+  text-align: center;
+  margin-top: -10px;
+  font-size: 13px;
+`;
+
 const Close = styled.a`
   position: fixed;
   top: 16px;

app/components/Tip.js

@@ -4,7 +4,6 @@ import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import { CloseIcon } from 'outline-icons';
-import Button from './Button';
 import Tooltip from './Tooltip';
 import Flex from 'shared/components/Flex';
 

app/scenes/Document/Document.js

@@ -300,7 +300,9 @@ class DocumentScene extends React.Component<Props> {
     if (!document || !Editor) {
       return (
         <Container column auto>
-          <PageTitle title={location.state ? location.state.title : ''} />
+          <PageTitle
+            title={location.state ? location.state.title : 'Untitled'}
+          />
           <CenteredContent>
             <LoadingState />
           </CenteredContent>
@@ -330,7 +332,7 @@ class DocumentScene extends React.Component<Props> {
             )}
           />
           <PageTitle
-            title={document.title.replace(document.emoji, '')}
+            title={document.title.replace(document.emoji, '') || 'Untitled'}
             favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
           />
           {(this.isUploading || this.isSaving) && <LoadingIndicator />}

app/scenes/Document/components/Header.js

@@ -15,6 +15,7 @@ import Breadcrumb from './Breadcrumb';
 import DocumentMenu from 'menus/DocumentMenu';
 import NewChildDocumentMenu from 'menus/NewChildDocumentMenu';
 import DocumentShare from 'scenes/DocumentShare';
+import Button from 'components/Button';
 import Modal from 'components/Modal';
 import Collaborators from 'components/Collaborators';
 import { Action, Separator } from 'components/Actions';
@@ -126,45 +127,53 @@ class Header extends React.Component<Props> {
                 <Status>Saving…</Status>
               </Action>
             )}
-          {isDraft && (
-            <Action>
-              <Link
-                onClick={this.handlePublish}
-                title="Publish document (Cmd+Enter)"
-                disabled={savingIsDisabled}
-                highlight
-              >
-                {isPublishing ? 'Publishing…' : 'Publish'}
-              </Link>
-            </Action>
-          )}
           {!isDraft &&
             !isEditing &&
             canShareDocuments && (
               <Action>
-                <Link onClick={this.handleShareLink} title="Share document">
+                <Button
+                  onClick={this.handleShareLink}
+                  title="Share document"
+                  neutral
+                  small
+                >
                   Share
-                </Link>
+                </Button>
               </Action>
             )}
           {isEditing && (
             <React.Fragment>
               <Action>
-                <Link
+                <Button
                   onClick={this.handleSave}
                   title="Save changes (Cmd+Enter)"
                   disabled={savingIsDisabled}
                   isSaving={isSaving}
-                  highlight={!isDraft}
+                  neutral={isDraft}
+                  small
                 >
-                  {isDraft ? 'Save Draft' : 'Done'}
+                  {isDraft ? 'Save Draft' : 'Done Editing'}
-                </Link>
+                </Button>
               </Action>
             </React.Fragment>
           )}
+          {isDraft && (
+            <Action>
+              <Button
+                onClick={this.handlePublish}
+                title="Publish document (Cmd+Enter)"
+                disabled={savingIsDisabled}
+                small
+              >
+                {isPublishing ? 'Publishing…' : 'Publish'}
+              </Button>
+            </Action>
+          )}
           {!isEditing && (
             <Action>
-              <Link onClick={this.handleEdit}>Edit</Link>
+              <Button onClick={this.handleEdit} neutral small>
+                Edit
+              </Button>
             </Action>
           )}
           {!isEditing && (
@@ -250,15 +259,4 @@ const Title = styled.div`
   `};
 `;
 
-const Link = styled.a`
-  display: flex;
-  align-items: center;
-  font-weight: ${props => (props.highlight ? 500 : 'inherit')};
-  color: ${props =>
-    props.highlight ? `${props.theme.primary} !important` : 'inherit'};
-  opacity: ${props => (props.disabled ? 0.5 : 1)};
-  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
-  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
-`;
-
 export default inject('auth')(Header);