Empty state language improvemnts

app/components/DocumentPreview/DocumentPreview.js

@@ -152,7 +152,7 @@ class DocumentPreview extends React.Component<Props> {
       >
         <Heading>
           <Title text={document.title} highlight={highlight} />
-          {document.publishedAt && (
+          {!document.isDraft && (
             <Actions>
               {document.starred ? (
                 <StyledStar onClick={this.unstar} solid />

app/components/Heading.js

@@ -0,0 +1,13 @@
+// @flow
+import styled from 'styled-components';
+
+const Heading = styled.h1`
+  display: flex;
+
+  svg {
+    margin-left: -6px;
+    margin-right: 2px;
+  }
+`;
+
+export default Heading;

app/menus/DocumentMenu.js

@@ -70,11 +70,10 @@ class DocumentMenu extends React.Component<Props> {
 
   render() {
     const { document, label, className, showPrint } = this.props;
-    const isDraft = !document.publishedAt;
 
     return (
       <DropdownMenu label={label || <MoreIcon />} className={className}>
-        {!isDraft && (
+        {!document.isDraft && (
           <React.Fragment>
             {document.pinned ? (
               <DropdownMenuItem onClick={this.handleUnpin}>

app/models/Document.js

@@ -74,6 +74,11 @@ class Document extends BaseModel {
     return [];
   }
 
+  @computed
+  get isDraft(): boolean {
+    return !this.publishedAt;
+  }
+
   @computed
   get isEmpty(): boolean {
     // Check if the document title has been modified and user generated content exists

app/scenes/Collection.js

@@ -15,6 +15,7 @@ import Collection from 'models/Collection';
 import Search from 'scenes/Search';
 import CollectionMenu from 'menus/CollectionMenu';
 import Actions, { Action, Separator } from 'components/Actions';
+import Heading from 'components/Heading';
 import CenteredContent from 'components/CenteredContent';
 import { ListPlaceholder } from 'components/LoadingPlaceholder';
 import Button from 'components/Button';
@@ -184,15 +185,6 @@ const TinyPinIcon = styled(PinIcon)`
   opacity: 0.8;
 `;
 
-const Heading = styled.h1`
-  display: flex;
-
-  svg {
-    margin-left: -6px;
-    margin-right: 6px;
-  }
-`;
-
 const Wrapper = styled(Flex)`
   margin: 10px 0;
 `;

app/scenes/CollectionNew.js

@@ -56,7 +56,7 @@ class CollectionNew extends React.Component<Props> {
     return (
       <form onSubmit={this.handleSubmit}>
         <HelpText>
-          Collections are for grouping your Outline. They work best when
+          Collections are for grouping your knowledge base. They work best when
           organized around a topic or internal team — Product or Engineering for
           example.
         </HelpText>

app/scenes/Document/Document.js

@@ -304,7 +304,7 @@ class DocumentScene extends React.Component<Props> {
             {!isShare && (
               <Header
                 document={document}
-                isDraft={!document.publishedAt}
+                isDraft={document.isDraft}
                 isEditing={this.isEditing}
                 isSaving={this.isSaving}
                 isPublishing={this.isPublishing}

app/scenes/Drafts.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { observer, inject } from 'mobx-react';
 import { NewDocumentIcon } from 'outline-icons';
 
+import Heading from 'components/Heading';
 import CenteredContent from 'components/CenteredContent';
 import { ListPlaceholder } from 'components/LoadingPlaceholder';
 import Empty from 'components/Empty';
@@ -30,9 +31,9 @@ class Drafts extends React.Component<Props> {
     return (
       <CenteredContent column auto>
         <PageTitle title="Drafts" />
-        <h1>Drafts</h1>
+        <Heading>Drafts</Heading>
         {showLoading && <ListPlaceholder />}
-        {showEmpty && <Empty>No drafts yet.</Empty>}
+        {showEmpty && <Empty>You’ve not got any drafts at the moment.</Empty>}
         <DocumentList documents={drafts} showCollection />
         <Actions align="center" justify="flex-end">
           <Action>

app/scenes/Starred.js

@@ -1,12 +1,13 @@
 // @flow
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
-import { NewDocumentIcon } from 'outline-icons';
+import { NewDocumentIcon, StarredIcon } from 'outline-icons';
 
 import CenteredContent from 'components/CenteredContent';
 import { ListPlaceholder } from 'components/LoadingPlaceholder';
 import Empty from 'components/Empty';
 import PageTitle from 'components/PageTitle';
+import Heading from 'components/Heading';
 import DocumentList from 'components/DocumentList';
 import NewDocumentMenu from 'menus/NewDocumentMenu';
 import Actions, { Action } from 'components/Actions';
@@ -30,9 +31,9 @@ class Starred extends React.Component<Props> {
     return (
       <CenteredContent column auto>
         <PageTitle title="Starred" />
-        <h1>Starred</h1>
+        <Heading>Starred</Heading>
         {showLoading && <ListPlaceholder />}
-        {showEmpty && <Empty>No starred documents yet.</Empty>}
+        {showEmpty && <Empty>You’ve not starred any documents yet.</Empty>}
         <DocumentList documents={starred} />
         <Actions align="center" justify="flex-end">
           <Action>