style(dashboard): show authors SA CA

packages/components-faraday/src/components/Dashboard/DashboardCard.js

@@ -9,12 +9,14 @@ import {
   withModal,
   ConfirmationModal,
 } from 'pubsweet-component-modal/src/components'
+import AuthorsWithTooltip from 'pubsweet-component-manuscript/src/molecules/AuthorsWithTooltip'
+// import { AuthorsWithTooltip } from '@pubsweet/ui'
 
 import ZipFiles from './ZipFiles'
 import { InviteReviewers } from '../Reviewers/'
 import { selectInvitation } from '../../redux/reviewers'
 import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils'
-import { AuthorTooltip, ReviewerDecision, HandlingEditorSection } from './'
+import { ReviewerDecision, HandlingEditorSection } from './'
 
 import { ReviewerBreakdown } from '../Invitations'
 
@@ -113,40 +115,7 @@ const DashboardCard = ({
       {project.status && (
         <DetailsView>
           <Top>
-            <AuthorList>
-              {project.authors.map(
-                (
-                  {
-                    affiliation,
-                    firstName,
-                    lastName,
-                    email,
-                    userId,
-                    isSubmitting,
-                    isCorresponding,
-                  },
-                  index,
-                  arr,
-                ) => (
-                  <AuthorTooltip
-                    affiliation={affiliation}
-                    authorName={`${firstName || ''} ${lastName || ''}`}
-                    currentUser={currentUser}
-                    email={email}
-                    isCorresponding={isCorresponding}
-                    isSubmitting={isSubmitting}
-                    key={userId}
-                  >
-                    <Author>
-                      <AuthorName>{`${firstName} ${lastName}`}</AuthorName>
-                      {isSubmitting && <AuthorStatus>SA</AuthorStatus>}
-                      {isCorresponding && <AuthorStatus>CA</AuthorStatus>}
-                      {arr.length - 1 === index ? '' : ','}
-                    </Author>
-                  </AuthorTooltip>
-                ),
-              )}
-            </AuthorList>
+            <AuthorsWithTooltip authors={project.authors} />
           </Top>
           <Bottom>
             <LeftDetails flex={4}>
@@ -236,32 +205,6 @@ const ReviewerText = styled.div`
   text-transform: uppercase;
 `
 
-const AuthorList = styled.span`
-  ${defaultText};
-  text-align: left;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-`
-
-const AuthorName = styled.span`
-  text-decoration: underline;
-  padding-left: 2px;
-  cursor: default;
-`
-const Author = styled.div`
-  padding-right: ${th('subGridUnit')};
-`
-
-const AuthorStatus = styled.span`
-  border: ${th('borderDefault')};
-  ${defaultText};
-  text-align: center;
-  text-transform: uppercase;
-  padding: 0 2px;
-  margin-left: 4px;
-`
-
 const ActionButtons = styled(Button)`
   ${defaultText};
   align-items: center;