feat: use Heading consistently

app/components/AdminPage.js

@@ -81,7 +81,7 @@ const AdminPage = ({ children, history, match }) => {
 
   // Get the current user every 5 seconds (this includes authorization info)
   const { loading, error, data } = useQuery(GET_CURRENT_USER, {
-    pollInterval: 5000,
+    pollInterval: 30000,
     notifyOnNetworkStatusChange: true,
     fetchPolicy: 'network-only',
     // TODO: useCallback used because of bug: https://github.com/apollographql/apollo-client/issues/6301
@@ -133,7 +133,7 @@ const AdminPage = ({ children, history, match }) => {
   }
 
   if (currentUser && currentUser.admin) {
-    links.push({ link: '/journal/admin/teams', name: 'Teams', icon: 'grid' })
+    // links.push({ link: '/journal/admin/teams', name: 'Teams', icon: 'grid' })
     links.push({ link: formBuilderLink, name: 'Forms', icon: 'check-square' })
     links.push({ link: '/journal/admin/users', name: 'Users', icon: 'users' })
     links.push({

app/components/component-dashboard/src/components/sections/OwnerItem.js

@@ -33,7 +33,6 @@ const OwnerItem = ({ version, journals, deleteManuscript }) => {
       <div>
         {' '}
         <StatusBadge minimal status={version.status} />
-        {JSON.stringify(version._currentRoles)}
         <VersionTitle version={version} />
       </div>
       {actions}

app/components/component-manuscripts/src/Manuscripts.jsx

@@ -8,7 +8,7 @@ import {
   Table,
   Header,
   Content,
-  PageHeading,
+  Heading,
   Carets,
   CaretUp,
   CaretDown,
@@ -106,7 +106,7 @@ const Manuscripts = () => {
 
   return (
     <Container>
-      <PageHeading level={1}>Manuscripts</PageHeading>
+      <Heading>Manuscripts</Heading>
       <Content>
         <Table>
           <Header>

app/components/component-manuscripts/src/style.js

@@ -13,7 +13,7 @@ export {
   Table,
   Header,
   Content,
-  PageHeading,
+  Heading,
   Carets,
   CaretUp,
   CaretDown,

app/components/component-review/src/components/ReviewersPage.js

@@ -99,10 +99,6 @@ const query = gql`
       }
     }
 
-    teams {
-      ${teamFields}
-    }
-
     manuscript(id: $id) {
       ${fragmentFields}
     }
@@ -114,7 +110,37 @@ const ReviewersPage = ({ match, history }) => {
     variables: { id: match.params.version },
   })
 
-  const [addReviewer] = useMutation(addReviewerMutation)
+  const [addReviewer] = useMutation(addReviewerMutation, {
+    update: (cache, { data: { addReviewer } }) => {
+      cache.modify({
+        id: cache.identify({
+          __typename: addReviewer.object.objectType,
+          id: addReviewer.object.objectId,
+        }),
+        fields: {
+          teams(existingTeamRefs = []) {
+            const newTeamRef = cache.writeFragment({
+              data: addReviewer,
+              fragment: gql`
+                fragment NewTeam on Team {
+                  id
+                  role
+                  members {
+                    id
+                    user {
+                      id
+                    }
+                  }
+                }
+              `,
+            })
+
+            return [...existingTeamRefs, newTeamRef]
+          },
+        },
+      })
+    },
+  })
   const [removeReviewer] = useMutation(removeReviewerMutation)
 
   if (loading) {
@@ -122,14 +148,9 @@ const ReviewersPage = ({ match, history }) => {
   }
   if (error) return error
 
-  const { manuscript, teams, users } = data
+  const { manuscript, users } = data
   const reviewersTeam =
-    teams.find(
-      team =>
-        team.role === 'reviewer' &&
-        team.object.objectId === manuscript.id &&
-        team.object.objectType === 'Manuscript',
-    ) || {}
+    manuscript.teams.find(team => team.role === 'reviewer') || {}
 
   const reviewers = reviewersTeam.members || []
   return (

app/components/component-review/src/components/reviewers/ReviewerForm.js

@@ -28,6 +28,7 @@ const ReviewerInput = ({
 }) => (
   <Select
     {...field}
+    aria-label="Invite reviewers"
     getOptionLabel={option => option.defaultIdentity?.name}
     getOptionValue={option => option.id}
     onChange={user => {

app/components/component-review/src/components/reviewers/Reviewers.js

@@ -72,7 +72,7 @@ const Reviewers = ({
         <Title>Reviewer status</Title>
       </SectionHeader>
       <SectionRow>
-        {reviewers && (
+        {reviewers && reviewers.length ? (
           <ReviewersList>
             {reviewers.map(reviewer => (
               <Reviewer>
@@ -96,6 +96,8 @@ const Reviewers = ({
               </Reviewer>
             ))}
           </ReviewersList>
+        ) : (
+          <p>No reviewers have been invited yet</p>
         )}
       </SectionRow>
     </SectionContent>

app/components/component-submit/src/components/NewSubmissionPage.jsx

 import React from 'react'
 import { ApolloConsumer } from '@apollo/client'
 import config from 'config'
-import { Container, Content, UploadContainer, PageHeading } from '../style'
+import { Container, Content, UploadContainer, Heading } from '../style'
 import UploadManuscript from './UploadManuscript'
 import useCurrentUser from '../../../../hooks/useCurrentUser'
 
@@ -17,7 +17,7 @@ const Dashboard = props => {
 
   return (
     <Container>
-      <PageHeading level={1}>New submission</PageHeading>
+      <Heading>New submission</Heading>
       <Content>
         <UploadContainer>
           <ApolloConsumer>

app/components/component-submit/src/style.js

 import styled from 'styled-components'
 import { th, grid } from '@pubsweet/ui-toolkit'
 
-export { Container, Content, PageHeading } from '../../shared'
+export { Container, Content, Heading } from '../../shared'
 
 export const Heading1 = styled.h1`
   margin: 0 0 calc(${th('gridUnit')} * 3);
@@ -34,6 +34,7 @@ export const SubNote = styled.span`
 `
 
 export const UploadContainer = styled.div`
+  margin-top: ${grid(2)};
   padding: ${grid(3)};
   text-align: center;
 `

app/components/component-users-manager/src/UsersManager.jsx

@@ -8,7 +8,7 @@ import {
   Container,
   Table,
   Header,
-  PageHeading,
+  Heading,
   Content,
   Spinner,
   Pagination,
@@ -98,7 +98,7 @@ const UsersManager = () => {
 
   return (
     <Container>
-      <PageHeading level={1}>Users</PageHeading>
+      <Heading>Users</Heading>
       <Content>
         <Table>
           <Header>

app/components/component-users-manager/src/style.js

@@ -14,7 +14,7 @@ export {
   Table,
   Header,
   Content,
-  PageHeading,
+  Heading,
   Carets,
   CaretUp,
   CaretDown,

app/components/shared/General.js

@@ -3,7 +3,7 @@ import { grid, th } from '@pubsweet/ui-toolkit'
 
 export const Section = styled.div`
   padding: ${grid(2)} ${grid(3)};
-  margin-top: ${grid(3)};
+  margin-top: ${grid(2)};
   &:not(:last-of-type) {
     margin-bottom: ${grid(6)};
   }

app/components/shared/Table.jsx

 import styled from 'styled-components'
-import { Heading } from '@pubsweet/ui'
 import { th, grid } from '@pubsweet/ui-toolkit'
 
 export const Table = styled.table`
+  margin-top: ${grid(2)};
   width: 100%;
   border-radius: ${th('borderRadius')};
   border-collapse: collapse;
@@ -13,11 +13,6 @@ export const Table = styled.table`
   }
 `
 
-export const PageHeading = styled(Heading)`
-  color: ${th('colorText')};
-  margin-bottom: 1rem;
-`
-
 export const Header = styled.thead`
   text-align: left;
   font-variant: all-small-caps;

app/theme/elements/TextField.js

 import { css } from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
+import { th, grid } from '@pubsweet/ui-toolkit'
 
 export default {
   // TODO
@@ -31,7 +31,6 @@ export default {
       }
     }};
     outline: 0;
-    padding: 0 0 0 2px;
     transition: ${th('transitionDuration')} ${th('transitionTimingFunction')};
 
     &:focus {
@@ -44,4 +43,8 @@ export default {
       line-height: ${th('lineHeightBaseSmall')};
     }
   `,
+
+  Label: css`
+    margin-bottom: ${grid(1)};
+  `,
 }