chore(manuscript): various coding style improvements

packages/component-manuscript/src/atoms/index.js

@@ -28,8 +28,8 @@ const Container = styled.div`
 `
 
 const SideBar = styled.div`
-  flex: ${({ flex }) => flex || 1};
   background-color: ${th('colorBackground')};
+  flex: ${({ flex }) => flex || 1};
   padding: ${th('subGridUnit')};
 `
 
@@ -50,7 +50,7 @@ const BreadCrumbs = styled.div`
     
     &:after {
       content: '>';
-      padding: 0 calc(${th('subGridUnit')}*2);
+      padding: 0 calc(${th('subGridUnit')} * 2);
     }
 
     &:last-child {
@@ -73,30 +73,30 @@ const ManuscriptId = styled.div`
 `
 
 const LeftDetails = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  align-items: center;
   flex: ${({ flex }) => flex || 1};
 `
 
 const RightDetails = styled.div`
+  align-items: center;
   display: flex;
+  flex: ${({ flex }) => flex || 1};
   flex-direction: row;
   justify-content: flex-end;
-  align-items: center;
-  flex: ${({ flex }) => flex || 1};
 `
 
 const StatusLabel = styled.div`
-  border: ${th('borderDefault')};
   ${defaultText};
+  border: ${th('borderDefault')};
+  color: ${th('colorPrimary')};
   font-weight: bold;
   padding: 0 0.5em;
   text-align: left;
   text-transform: capitalize;
   line-height: 1.5;
-  color: ${th('colorPrimary')};
 `
 
 const DateField = styled.span`
@@ -105,18 +105,18 @@ const DateField = styled.span`
   text-align: left;
 `
 const Row = styled.div`
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 100%;
-  box-sizing: border-box;
   flex-wrap: wrap;
 `
 
 const ManuscriptType = styled.div`
   ${defaultText};
   padding: ${th('subGridUnit')};
-  margin-left: calc(${th('subGridUnit')}*2);
+  margin-left: calc(${th('subGridUnit')} * 2);
   text-align: right;
   text-transform: capitalize;
   text-overflow: ellipsis;
@@ -126,7 +126,7 @@ const ManuscriptType = styled.div`
 
 const ManuscriptHeader = styled.div`
   border-bottom: ${th('borderDefault')};
-  padding-bottom: calc(${th('subGridUnit')}*2);
+  padding-bottom: calc(${th('subGridUnit')} * 2);
 `
 
 const ModalRoot = styled.form`
@@ -152,9 +152,9 @@ const ActionButton = styled(Button)`
   background-color: ${th('colorPrimary')};
   color: ${th('colorTextReverse')};
   display: flex;
-  padding: 4px 8px;
+  height: calc(${th('subGridUnit')} * 5);
+  padding: calc(${th('subGridUnit')} / 2) ${th('subGridUnit')};
   text-align: center;
-  height: calc(${th('subGridUnit')}*5);
   text-transform: uppercase;
 `
 
@@ -196,24 +196,24 @@ const ButtonsContainer = styled.div`
 `
 
 export {
+  Row,
   Root,
-  BreadCrumbs,
-  Header,
   Title,
-  ManuscriptId,
-  ManuscriptType,
-  Container,
+  Header,
   SideBar,
+  CloseIcon,
+  ModalRoot,
+  Container,
+  DateField,
+  ModalTitle,
+  StatusLabel,
+  BreadCrumbs,
   LeftDetails,
+  ActionButton,
+  ManuscriptId,
   RightDetails,
-  StatusLabel,
-  DateField,
-  Row,
+  ManuscriptType,
   ManuscriptHeader,
-  ModalRoot,
-  ActionButton,
-  CloseIcon,
-  ModalTitle,
   CustomRadioGroup,
   SpinnerContainer,
   ButtonsContainer,

packages/component-manuscript/src/components/Authors.js

@@ -5,10 +5,10 @@ import styled from 'styled-components'
 const TR = ({
   name,
   email,
+  index,
   affiliation,
   isSubmitting,
   isCorresponding,
-  index,
 }) => (
   <Row>
     <td width="20">{index + 1}</td>
@@ -36,12 +36,12 @@ const Authors = ({ authors }) => (
         (
           {
             userId,
-            firstName = '',
-            lastName = '',
             email = '',
+            isSubmitting,
+            lastName = '',
+            firstName = '',
             affiliation = '',
             isCorresponding,
-            isSubmitting,
           },
           index,
         ) => (
@@ -68,7 +68,7 @@ const Row = styled.tr`
   color: ${th('colorPrimary')};
   font-family: ${th('fontReading')};
   font-size: ${th('fontSizeBaseSmall')};
-  height: 40px;
+  height: calc(${th('subGridUnit')} * 7);
   text-align: left;
   td:first-child {
     font-weight: bold;
@@ -86,10 +86,10 @@ const AuthorStatus = styled.span`
   border: ${th('borderDefault')};
   font-family: ${th('fontReading')};
   font-size: ${th('fontSizeBaseSmall')};
+  margin-left: ${th('subGridUnit')};
+  padding: 0 calc(${th('subGridUnit')} / 2);
   text-align: center;
   text-transform: uppercase;
-  padding: 0 2px;
-  margin-left: 4px;
 `
 
 const Table = styled.table`
@@ -103,9 +103,8 @@ const Table = styled.table`
     font-family: ${th('fontReading')};
     font-size: ${th('fontSizeBaseSmall')};
     font-weight: bold;
-    height: 40px;
+    height: calc(${th('subGridUnit')} * 7);
     text-align: left;
   }
 `
-
 // #endregion

packages/component-manuscript/src/components/Files.js

 import React, { Fragment } from 'react'
-import styled, { css } from 'styled-components'
 import { th } from '@pubsweet/ui'
+import styled, { css } from 'styled-components'
 
 import { FileItem } from 'pubsweet-components-faraday/src/components/Files'
 
@@ -60,8 +60,8 @@ const Header = styled.div`
   flex-direction: row;
 
   & span {
-    margin-right: ${th('subGridUnit')};
     ${defaultText};
+    margin-right: ${th('subGridUnit')};
     margin-top: ${th('subGridUnit')};
     text-transform: uppercase;
   }

packages/component-manuscript/src/components/MakeDecision.js

@@ -3,33 +3,32 @@ import { get } from 'lodash'
 import { connect } from 'react-redux'
 import { AbstractEditor } from 'xpub-edit'
 import { required } from 'xpub-validators'
-import { withTheme } from 'styled-components'
 import { compose, withHandlers } from 'recompose'
 import { withModal } from 'pubsweet-component-modal/src/components'
 import {
   Icon,
-  RadioGroup,
-  ValidatedField,
-  Spinner,
   Button,
+  Spinner,
   ErrorText,
+  RadioGroup,
+  ValidatedField,
 } from '@pubsweet/ui'
 import {
   reduxForm,
-  change as changeForm,
-  getFormValues,
   isSubmitting,
+  getFormValues,
+  change as changeForm,
 } from 'redux-form'
 
 import {
+  Row,
   ModalRoot,
-  ActionButton,
   CloseIcon,
   ModalTitle,
+  ActionButton,
   CustomRadioGroup,
   ButtonsContainer,
   SpinnerContainer,
-  Row,
 } from '../atoms'
 
 const options = [
@@ -48,7 +47,7 @@ const options = [
 ]
 
 const MakeDecision = ({ showDecisionModal }) => (
-  <ActionButton onClick={showDecisionModal}> Make Decision </ActionButton>
+  <ActionButton onClick={showDecisionModal}>Make Decision</ActionButton>
 )
 
 // To be removed
@@ -57,12 +56,11 @@ const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 const DecisionModal = compose(
   connect(
     state => ({
-      decision: get(getFormValues('makeDecision')(state), 'decision'),
       isSubmitting: isSubmitting('makeDecision')(state),
+      decision: get(getFormValues('makeDecision')(state), 'decision'),
     }),
     { changeForm, getFormValues },
   ),
-  withTheme,
   reduxForm({
     form: 'makeDecision',
     onSubmit: (values, dispatch, { isSubmitting }) =>
@@ -78,7 +76,6 @@ const DecisionModal = compose(
   }),
 )(
   ({
-    theme,
     error,
     decision,
     hideModal,
@@ -88,7 +85,7 @@ const DecisionModal = compose(
   }) => (
     <ModalRoot>
       <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
-        <Icon color={theme.colorPrimary}>x</Icon>
+        <Icon primary>x</Icon>
       </CloseIcon>
 
       <ModalTitle>Manuscript Decision</ModalTitle>

packages/component-manuscript/src/components/ManuscriptDetails.js

@@ -4,7 +4,7 @@ import { th } from '@pubsweet/ui'
 import styled from 'styled-components'
 
 import { Authors, Files } from './'
-import Expandable from '../molecules/Expandable'
+import { Expandable } from '../molecules/'
 
 const ManuscriptDetails = ({
   collection: { authors = [] },

packages/component-manuscript/src/components/ManuscriptHeader.js

@@ -3,18 +3,18 @@ import { get } from 'lodash'
 // import { AuthorsWithTooltip } from '@pubsweet/ui'
 
 import {
+  Row,
   Title,
+  DateField,
   LeftDetails,
-  RightDetails,
-  Row,
   StatusLabel,
-  DateField,
+  RightDetails,
   ManuscriptType,
   ManuscriptHeader,
 } from '../atoms'
 
-import { parseVersion, parseJournalIssue, mapStatusToLabel } from './utils'
 import AuthorsWithTooltip from '../molecules/AuthorsWithTooltip'
+import { parseVersion, parseJournalIssue, mapStatusToLabel } from './utils'
 
 const ManuscriptDetails = ({ version, project, journal }) => {
   const { submitted, title, type } = parseVersion(version)

packages/component-manuscript/src/components/ManuscriptLayout.js

@@ -5,30 +5,30 @@ import ManuscriptHeader from './ManuscriptHeader'
 import ManuscriptVersion from './ManuscriptVersion'
 import {
   Root,
-  BreadCrumbs,
   Header,
-  ManuscriptId,
-  Container,
   SideBar,
+  Container,
   LeftDetails,
+  BreadCrumbs,
+  ManuscriptId,
   RightDetails,
 } from '../atoms'
 import {
-  ManuscriptDetails,
-  SideBarActions,
   SideBarRoles,
+  SideBarActions,
   ReviewsAndReports,
+  ManuscriptDetails,
 } from './'
 
 const ManuscriptLayout = ({
-  project = {},
-  version = {},
   journal,
   history,
   currentUser,
   currentUserIs,
   editorInChief,
   updateManuscript,
+  project = {},
+  version = {},
 }) => (
   <Root>
     {!isEmpty(project) && !isEmpty(version) ? (

packages/component-manuscript/src/components/ManuscriptPage.js

 import { connect } from 'react-redux'
+import { head, get } from 'lodash'
 import { actions } from 'pubsweet-client'
 import { ConnectPage } from 'xpub-connect'
 import { withJournal } from 'xpub-journal'
 import { replace } from 'react-router-redux'
 import { withRouter } from 'react-router-dom'
-import { head, get } from 'lodash'
 import {
-  selectCurrentUser,
-  selectCollection,
   selectFragment,
+  selectCollection,
+  selectCurrentUser,
 } from 'xpub-selectors'
 import { get as apiGet } from 'pubsweet-client/src/helpers/api'
 import { compose, lifecycle, withHandlers, withState } from 'recompose'
@@ -37,15 +37,15 @@ export default compose(
     (state, { match }) => ({
       currentUser: selectCurrentUser(state),
       handlingEditors: selectHandlingEditors(state),
-      project: selectCollection(state, match.params.project),
       version: selectFragment(state, match.params.version),
+      project: selectCollection(state, match.params.project),
     }),
     {
-      reviewerDecision,
       replace,
-      updateVersion: actions.updateFragment,
       getSignedUrl,
+      reviewerDecision,
       getCollection: actions.getCollection,
+      updateVersion: actions.updateFragment,
     },
   ),
   ConnectPage(({ currentUser, handlingEditors, project }) => {
@@ -90,12 +90,12 @@ export default compose(
   lifecycle({
     componentDidMount() {
       const {
-        reviewerDecision,
+        match,
         replace,
         location,
-        match,
-        setEditorInChief,
         getCollection,
+        reviewerDecision,
+        setEditorInChief,
       } = this.props
       const collectionId = match.params.project
       const { agree, invitationId } = parseSearchParams(location.search)

packages/component-manuscript/src/components/ManuscriptVersion.js

@@ -3,8 +3,8 @@ import { get } from 'lodash'
 import { Menu } from '@pubsweet/ui'
 import { compose } from 'recompose'
 import { connect } from 'react-redux'
-import { selectFragments } from 'xpub-selectors'
 import { withRouter } from 'react-router-dom'
+import { selectFragments } from 'xpub-selectors'
 
 import { parseVersionOptions } from './utils'
 

packages/component-manuscript/src/components/ReviewReportCard.js

 import React, { Fragment } from 'react'
 import moment from 'moment'
-import { get, isEmpty } from 'lodash'
 import { th } from '@pubsweet/ui'
 import { compose } from 'recompose'
+import { get, isEmpty } from 'lodash'
 import { withJournal } from 'xpub-journal'
 import styled, { css } from 'styled-components'
 import { FileItem } from 'pubsweet-components-faraday/src/components/Files'
 
-import ShowMore from './ShowMore'
+import { ShowMore } from './'
 
 const ReviewReportCard = ({
   i = 0,

packages/component-manuscript/src/components/ReviewerReportForm.js

 import React, { Fragment } from 'react'
-import { isEmpty, merge } from 'lodash'
 import { connect } from 'react-redux'
-import { required } from 'xpub-validators'
+import { isEmpty, merge } from 'lodash'
 import { withJournal } from 'xpub-journal'
+import { required } from 'xpub-validators'
 import styled, { css } from 'styled-components'
 import {
   th,
@@ -56,15 +56,15 @@ const guidelinesLink =
 
 const ReviewerReportForm = ({
   addFile,
+  fileError,
   removeFile,
-  review = {},
+  changeField,
   errorRequest,
   isSubmitting,
-  changeField,
   handleSubmit,
-  formValues = {},
   fileFetching,
-  fileError,
+  review = {},
+  formValues = {},
   journal: { recommendations },
 }) => (
   <Root>
@@ -201,8 +201,8 @@ const ReviewerReportForm = ({
 
 const ModalWrapper = compose(
   connect(state => ({
-    fetching: selectFetching(state),
     modalError: selectError(state),
+    fetching: selectFetching(state),
   })),
 )(({ fetching, ...rest }) => (
   <ConfirmationModal {...rest} isFetching={fetching} />
@@ -212,20 +212,20 @@ export default compose(
   withJournal,
   connect(
     state => ({
-      formValues: getFormValues('reviewerReport')(state),
-      isSubmitting: isSubmitting('reviewerReport')(state),
+      fileError: getFileError(state),
       errorRequest: selectError(state),
       fileFetching: getRequestStatus(state),
-      fileError: getFileError(state),
+      formValues: getFormValues('reviewerReport')(state),
+      isSubmitting: isSubmitting('reviewerReport')(state),
     }),
     {
+      uploadFile,
+      deleteFile,
       changeForm,
+      getSignedUrl,
       getFormValues,
       createRecommendation,
       updateRecommendation,
-      uploadFile,
-      deleteFile,
-      getSignedUrl,
     },
   ),
   withProps(({ review = {}, formValues = {} }) => ({
@@ -265,10 +265,10 @@ export default compose(
   }),
   reduxForm({
     form: 'reviewerReport',
-    enableReinitialize: true,
-    keepDirtyOnReinitialize: true,
     onChange: onReviewChange,
     onSubmit: onReviewSubmit,
+    enableReinitialize: true,
+    keepDirtyOnReinitialize: true,
   }),
 )(ReviewerReportForm)
 
@@ -299,35 +299,36 @@ const Label = styled.div`
 
 const ActionText = styled.span`
   ${defaultText};
-  text-decoration: underline;
   cursor: pointer;
   margin-left: ${({ left }) => left || 0}px;
+  text-decoration: underline;
 `
 
 const ActionTextIcon = styled(ActionText)`
-  display: flex;
   align-items: center;
+  display: flex;
 `
 const ActionLink = styled.a`
   ${defaultText};
 `
 
 const Textarea = styled.textarea`
-  width: 100%;
-  padding: calc(${th('subGridUnit')}*2);
-  font-size: ${th('fontSizeBaseSmall')};
-  font-family: ${th('fontWriting')};
   border-color: ${({ hasError }) =>
     hasError ? th('colorError') : th('colorPrimary')};
+  font-size: ${th('fontSizeBaseSmall')};
+  font-family: ${th('fontWriting')};
+  padding: calc(${th('subGridUnit')} * 2);
   transition: all 300ms linear;
+  width: 100%;
+
   &:read-only {
     background-color: ${th('colorBackgroundHue')};
   }
 `
 
 const Spacing = styled.div`
-  margin-top: ${th('gridUnit')};
   flex: 1;
+  margin-top: ${th('gridUnit')};
 `
 
 const FullWidth = styled.div`
@@ -338,14 +339,14 @@ const FullWidth = styled.div`
 `
 
 const Row = styled.div`
+  ${defaultText};
+  align-items: center;
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  align-items: center;
   flex: 1;
-  box-sizing: border-box;
   flex-wrap: wrap;
   justify-content: ${({ left }) => (left ? 'left' : 'space-between')};
-  ${defaultText};
 `
 
 const ActionButton = styled(Button)`
@@ -354,9 +355,9 @@ const ActionButton = styled(Button)`
   background-color: ${th('colorPrimary')};
   color: ${th('colorTextReverse')};
   display: flex;
-  padding: 4px 8px;
+  padding: calc(${th('subGridUnit')} / 2) calc(${th('subGridUnit')});
   text-align: center;
-  height: calc(${th('subGridUnit')}*5);
+  height: calc(${th('subGridUnit')} * 5);
   text-transform: uppercase;
 `
 // #endregion

packages/component-manuscript/src/components/ReviewsAndReports.js

@@ -6,18 +6,16 @@ import styled from 'styled-components'
 import { compose, withHandlers, lifecycle, withProps } from 'recompose'
 import { ReviewerBreakdown } from 'pubsweet-components-faraday/src/components/Invitations'
 import ReviewersDetailsList from 'pubsweet-components-faraday/src/components/Reviewers/ReviewersDetailsList'
-import ReviewerReportForm from 'pubsweet-component-manuscript/src/components/ReviewerReportForm'
-import ReviewReportCard from 'pubsweet-component-manuscript/src/components/ReviewReportCard'
 import {
   selectReviewers,
-  selectFetchingReviewers,
-  getCollectionReviewers,
   currentUserIsReviewer,
+  getCollectionReviewers,
+  selectFetchingReviewers,
 } from 'pubsweet-components-faraday/src/redux/reviewers'
 import { selectRecommendations } from 'pubsweet-components-faraday/src/redux/recommendations'
 
-import Tabs from '../molecules/Tabs'
-import Expandable from '../molecules/Expandable'
+import { Tabs, Expandable } from '../molecules'
+import { ReviewReportCard, ReviewerReportForm } from './'
 
 const getTabSections = (collectionId, reviewers, recommendations = []) => [
   {
@@ -45,16 +43,16 @@ const getTabSections = (collectionId, reviewers, recommendations = []) => [
 ]
 
 const ReviewsAndReports = ({
+  report,
   project,
   version,
-  reviewers = [],
-  recommendations = [],
   isReviewer,
   currentUserIs,
-  report,
-  review = {},
-  mappedRecommendations,
   mappedReviewers,
+  mappedRecommendations,
+  review = {},
+  reviewers = [],
+  recommendations = [],
 }) => (
   <Fragment>
     {currentUserIs('staff') && (
@@ -125,8 +123,8 @@ export default compose(
       })),
   }),
   withProps(({ recommendations = [] }) => ({
-    report: head(recommendations.filter(r => r.submittedOn)),
     review: head(recommendations),
+    report: head(recommendations.filter(r => r.submittedOn)),
   })),
   lifecycle({
     componentDidMount() {
@@ -137,12 +135,10 @@ export default compose(
 )(ReviewsAndReports)
 
 // #region styled-components
-
 const Root = styled.div`
   background-color: ${th('colorBackground')};
   border: ${th('borderDefault')};
   margin-top: calc(${th('subGridUnit')} * 2);
   transition: height 0.3s;
 `
-
 // #endregion

packages/component-manuscript/src/components/ShowMore.js

@@ -86,5 +86,4 @@ const Control = styled.label`
     opacity: 0.7;
   }
 `
-
 // #endregion

packages/component-manuscript/src/components/SideBarRoles.js

@@ -27,7 +27,7 @@ const defaultText = css`
 const Root = styled.div`
   display: flex;
   flex-direction: column;
-  padding: calc(${th('subGridUnit')}*3) ${th('subGridUnit')};
+  padding: calc(${th('subGridUnit')} * 3) ${th('subGridUnit')};
 `
 const Text = styled.div`
   ${defaultText};
@@ -43,7 +43,7 @@ const Row = styled.div`
   display: flex;
   justify-content: space-between;
   line-height: 1.5;
-  margin-bottom: calc(${th('subGridUnit')}*2);
+  margin-bottom: calc(${th('subGridUnit')} * 2);
   div {
     justify-content: space-between;
   }
@@ -52,16 +52,15 @@ const Row = styled.div`
       align-items: center;
       background-color: ${th('colorBackground')};
       color: ${th('colorText')};
-      padding: 4px 8px;
+      height: calc(${th('subGridUnit')} * 5);
+      margin: 0;
+      padding: calc(${th('subGridUnit')} / 2) ${th('subGridUnit')};
       text-align: center;
-      height: calc(${th('subGridUnit')}*5);
       text-transform: uppercase;
-      margin: 0;
     }
     &:last-child {
       margin: 0 0 0 ${th('subGridUnit')};
     }
   }
 `
-
 // #endregion

packages/component-manuscript/src/components/index.js

 export { default as Files } from './Files'
 export { default as Authors } from './Authors'
+export { default as ShowMore } from './ShowMore'
+export { default as MakeDecision } from './MakeDecision'
+export { default as SideBarRoles } from './SideBarRoles'
 export { default as ManuscriptPage } from './ManuscriptPage'
-export { default as ManuscriptDetails } from './ManuscriptDetails'
 export { default as SideBarActions } from './SideBarActions'
-export { default as SideBarRoles } from './SideBarRoles'
-export { default as MakeDecision } from './MakeDecision'
+export { default as ReviewReportCard } from './ReviewReportCard'
+export { default as ManuscriptHeader } from './ManuscriptHeader'
+export { default as ManuscriptLayout } from './ManuscriptLayout'
+export { default as ManuscriptDetails } from './ManuscriptDetails'
+export { default as ManuscriptVersion } from './ManuscriptVersion'
 export { default as ReviewsAndReports } from './ReviewsAndReports'
+export { default as ReviewerReportForm } from './ReviewerReportForm'

packages/component-manuscript/src/components/utils.js

@@ -47,12 +47,12 @@ export const mapStatusToLabel = ({ visibleStatus, status }) => {
 }
 
 export const parseVersion = version => ({
-  author: parseAuthor(version),
+  type: parseType(version),
   title: parseTitle(version),
+  author: parseAuthor(version),
+  version: get(version, 'version'),
   submitted: parseSubmissionDate(version),
-  type: parseType(version),
   abstract: get(version, 'metadata.abstract'),
-  version: get(version, 'version'),
 })
 
 export const parseJournalIssue = (journal, metadata) =>

packages/component-manuscript/src/molecules/AuthorsWithTooltip.js

@@ -5,12 +5,12 @@ import { Tooltip } from 'react-tippy'
 import styled, { ThemeProvider, withTheme, css } from 'styled-components'
 
 const DefaultTooltip = ({
-  authorName,
+  theme,
   email,
+  authorName,
   affiliation,
   isSubmitting,
   isCorresponding,
-  theme,
 }) => (
   <ThemeProvider theme={theme}>
     <TooltipRoot>
@@ -31,12 +31,12 @@ const DefaultTooltip = ({
 )
 
 const DefaultLabel = ({
-  firstName,
+  arr,
+  index,
   lastName,
+  firstName,
   isSubmitting,
   isCorresponding,
-  arr,
-  index,
 }) => (
   <Author>
     <AuthorName>{`${firstName} ${lastName}`}</AuthorName>
@@ -64,13 +64,13 @@ const AuthorsWithTooltip = ({
     {authors.map(
       (
         {
-          affiliation = '',
-          firstName = '',
-          lastName = '',
-          email = '',
           userId,
           isSubmitting,
           isCorresponding,
+          email = '',
+          lastName = '',
+          firstName = '',
+          affiliation = '',
           ...rest
         },
         index,
@@ -109,16 +109,16 @@ const defaultText = css`
 
 const AuthorList = styled.span`
   ${defaultText};
-  text-align: left;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
+  text-align: left;
 `
 
 const AuthorName = styled.span`
-  text-decoration: underline;
-  padding-left: 2px;
   cursor: default;
+  padding-left: calc(${th('subGridUnit')} / 3);
+  text-decoration: underline;
 `
 const Author = styled.div`
   padding-right: ${th('subGridUnit')};
@@ -127,10 +127,10 @@ const Author = styled.div`
 const AuthorStatus = styled.span`
   border: ${th('borderDefault')};
   ${defaultText};
+  margin-left: ${th('subGridUnit')};
+  padding: 0 calc(${th('subGridUnit')} / 3);
   text-align: center;
   text-transform: uppercase;
-  padding: 0 2px;
-  margin-left: 4px;
 `
 
 const TooltipRoot = styled.div`
@@ -138,7 +138,7 @@ const TooltipRoot = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: calc(${th('subGridUnit')}*2);
+  padding: calc(${th('subGridUnit')} * 2);
 `
 
 const TooltipRow = styled.div`

packages/component-manuscript/src/molecules/index.js

+export { default as Tabs } from './Tabs'
+export { default as Expandable } from './Expandable'
+export { default as AuthorsWithTooltip } from './AuthorsWithTooltip'