Members -> People

Update help text throughout settings area
Add details on authentication method

app/components/Sidebar/Settings.js

@@ -59,8 +59,8 @@ class SettingsSidebar extends React.Component<Props> {
                   Details
                 </SidebarLink>
               )}
-              <SidebarLink to="/settings/members" icon={<UserIcon />}>
-                Members
+              <SidebarLink to="/settings/people" icon={<UserIcon />}>
+                People
               </SidebarLink>
               <SidebarLink to="/settings/shares" icon={<LinkIcon />}>
                 Share Links

app/index.js

@@ -22,7 +22,7 @@ import Document from 'scenes/Document';
 import Search from 'scenes/Search';
 import Settings from 'scenes/Settings';
 import Details from 'scenes/Settings/Details';
-import Members from 'scenes/Settings/Members';
+import People from 'scenes/Settings/People';
 import Slack from 'scenes/Settings/Slack';
 import Shares from 'scenes/Settings/Shares';
 import Tokens from 'scenes/Settings/Tokens';
@@ -73,11 +73,7 @@ if (element) {
                         path="/settings/details"
                         component={Details}
                       />
-                      <Route
-                        exact
-                        path="/settings/members"
-                        component={Members}
-                      />
+                      <Route exact path="/settings/people" component={People} />
                       <Route exact path="/settings/shares" component={Shares} />
                       <Route exact path="/settings/tokens" component={Tokens} />
                       <Route

app/scenes/Settings/Details.js

@@ -12,6 +12,7 @@ import Input, { LabelText } from 'components/Input';
 import Button from 'components/Button';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
+import HelpText from 'components/HelpText';
 import Flex from 'shared/components/Flex';
 
 type Props = {
@@ -72,6 +73,19 @@ class Details extends React.Component<Props> {
       <CenteredContent>
         <PageTitle title="Details" />
         <h1>Details</h1>
+        {team.slackConnected && (
+          <HelpText>
+            This team is connected to a <strong>Slack</strong> team. Your
+            colleagues can join by signing in with their Slack account details.
+          </HelpText>
+        )}
+        {team.googleConnected && (
+          <HelpText>
+            This team is connected to a <strong>Google</strong> domain. Your
+            colleagues can join by signing in with their Google account.
+          </HelpText>
+        )}
+
         <ProfilePicture column>
           <LabelText>Logo</LabelText>
           <AvatarContainer>

app/scenes/Settings/People.js

@@ -7,6 +7,7 @@ import AuthStore from 'stores/AuthStore';
 import UsersStore from 'stores/UsersStore';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
+import HelpText from 'components/HelpText';
 import UserListItem from './components/UserListItem';
 import List from 'components/List';
 
@@ -16,7 +17,7 @@ type Props = {
 };
 
 @observer
-class Members extends React.Component<Props> {
+class People extends React.Component<Props> {
   componentDidMount() {
     this.props.users.fetchPage({ limit: 100 });
   }
@@ -28,8 +29,13 @@ class Members extends React.Component<Props> {
 
     return (
       <CenteredContent>
-        <PageTitle title="Members" />
-        <h1>Members</h1>
+        <PageTitle title="People" />
+        <h1>People</h1>
+        <HelpText>
+          Everyone that has signed in to your Outline appears here. It's
+          possible that there are other people who have access but haven't
+          signed in yet.
+        </HelpText>
 
         <List>
           {users.data.map(user => (
@@ -45,4 +51,4 @@ class Members extends React.Component<Props> {
   }
 }
 
-export default inject('auth', 'users')(Members);
+export default inject('auth', 'users')(People);

app/scenes/Settings/Shares.js

@@ -7,6 +7,7 @@ import ShareListItem from './components/ShareListItem';
 import List from 'components/List';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
+import HelpText from 'components/HelpText';
 
 type Props = {
   shares: SharesStore,
@@ -25,6 +26,12 @@ class Shares extends React.Component<Props> {
       <CenteredContent>
         <PageTitle title="Share Links" />
         <h1>Share Links</h1>
+        <HelpText>
+          Documents that have been shared appear below. Anyone that has the link
+          can access a read-only version of the document until the link has been
+          revoked.
+        </HelpText>
+
         <List>
           {shares.orderedData.map(share => (
             <ShareListItem key={share.id} share={share} />

app/scenes/Settings/Tokens.js

@@ -45,8 +45,9 @@ class Tokens extends React.Component<Props> {
         <h1>API Tokens</h1>
 
         <HelpText>
-          You can create unlimited personal API tokens to hack on your wiki.
-          Learn more in the <Link to="/developers">API documentation</Link>.
+          You can create an unlimited amount of personal API tokens to hack on
+          Outline. For more details about the API take a look at the{' '}
+          <Link to="/developers">developer documentation</Link>.
         </HelpText>
 
         {hasApiKeys && (

app/types/index.js

@@ -28,6 +28,8 @@ export type Team = {
   id: string,
   name: string,
   avatarUrl: string,
+  slackConnected: boolean,
+  googleConnected: boolean,
 };
 
 export type NavigationNode = {

server/presenters/team.js

@@ -9,6 +9,8 @@ function present(ctx: Object, team: Team) {
     name: team.name,
     avatarUrl:
       team.avatarUrl || (team.slackData ? team.slackData.image_88 : null),
+    slackConnected: !!team.slackId,
+    googleConnected: !!team.googleId,
   };
 }