chore(dashboard): various improvements

packages/components-faraday/src/components/AuthorList/FormItems.js

 import React from 'react'
 import { required } from 'xpub-validators'
-import styled, { withTheme, css } from 'styled-components'
-import { TextField, Menu, ValidatedField, Icon } from '@pubsweet/ui'
+import styled, { css } from 'styled-components'
+import { TextField, Menu, ValidatedField, Icon, th } from '@pubsweet/ui'
 
 export const ValidatedTextField = ({
   label,
@@ -36,21 +36,21 @@ export const Label = ({ label, value }) => (
   </LabelRoot>
 )
 
-export const DragHandle = withTheme(({ theme }) => (
+export const DragHandle = () => (
   <DragHandleRoot>
-    <Icon color={theme.colorPrimary}>chevron_up</Icon>
-    <Icon color={theme.colorPrimary} size={3}>
+    <Icon primary>chevron_up</Icon>
+    <Icon primary size={3}>
       menu
     </Icon>
-    <Icon color={theme.colorPrimary}>chevron_down</Icon>
+    <Icon primary>chevron_down</Icon>
   </DragHandleRoot>
-))
+)
 
 // #region styled-components
 const defaultText = css`
-  color: ${({ theme }) => theme.colorText};
-  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
-  font-family: ${({ theme }) => theme.fontReading};
+  color: ${th('colorText')};
+  font-size: ${th('fontSizeBaseSmall')};
+  font-family: ${th('fontReading')};
 `
 
 const ValidatedTextFieldRoot = styled.div`
@@ -70,7 +70,7 @@ const StyledLabel = styled.span`
 
 const DragHandleRoot = styled.div`
   align-items: center;
-  border-right: ${({ theme }) => theme.borderDefault};
+  border-right: ${th('borderDefault')};
   cursor: move;
   display: flex;
   flex-direction: column;
@@ -81,7 +81,7 @@ const LabelRoot = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  margin: 5px;
+  margin: ${th('subGridUnit')};
   width: ${({ width }) => `${width || 150}px`};
 
   span:first-child {

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

 import React from 'react'
 import { get } from 'lodash'
-import { Icon } from '@pubsweet/ui'
-import styled, { css, withTheme } from 'styled-components'
+import { Icon, th } from '@pubsweet/ui'
+import styled, { css } from 'styled-components'
 
-const AbstractModal = ({ metadata, hideModal, theme }) => (
+const AbstractModal = ({ metadata, hideModal }) => (
   <Root>
     <CloseIcon onClick={hideModal}>
-      <Icon color={theme.colorPrimary}>x</Icon>
+      <Icon primary>x</Icon>
     </CloseIcon>
     <Title dangerouslySetInnerHTML={{ __html: get(metadata, 'title') }} />
     <Subtitle>Abstract</Subtitle>
@@ -14,28 +14,29 @@ const AbstractModal = ({ metadata, hideModal, theme }) => (
   </Root>
 )
 
-export default withTheme(AbstractModal)
+export default AbstractModal
 
 // #region styled-components
 const defaultText = css`
-  color: ${({ theme }) => theme.colorText};
-  font-family: ${({ theme }) => theme.fontReading};
-  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+  color: ${th('colorText')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
 `
 
 const Root = styled.div`
-  background-color: ${({ theme }) => theme.backgroundColor};
-  padding: 50px 32px 32px 32px;
-  border: ${({ theme }) => theme.borderDefault};
-  position: relative;
-  width: 600px;
+  background-color: ${th('backgroundColor')};
+  border: ${th('borderDefault')};
   max-height: 500px;
+  padding: ${th('gridUnit')};
+  padding-top: calc(${th('gridUnit')} * 2);
+  position: relative;
   overflow-y: scroll;
+  width: 600px;
 `
 
 const Title = styled.div`
   ${defaultText};
-  font-size: ${({ theme }) => theme.fontSizeBase};
+  font-size: ${th('fontSizeBase')};
   text-align: left;
 `
 
@@ -43,21 +44,21 @@ const Subtitle = styled.div`
   ${defaultText};
   font-weight: bold;
   line-height: 1.57;
-  margin-bottom: 8px;
+  margin-bottom: ${th('subGridUnit')};
   text-align: left;
 `
 
 const Content = styled.div`
   ${defaultText};
   line-height: 1.57;
-  margin-top: 10px;
+  margin-top: calc(${th('subGridUnit')} * 2);
   text-align: left;
 `
 
 const CloseIcon = styled.div`
   cursor: pointer;
   position: absolute;
-  top: 5px;
-  right: 5px;
+  top: ${th('subGridUnit')};
+  right: ${th('subGridUnit')};
 `
 // #endregion

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

@@ -4,14 +4,14 @@ import React from 'react'
 import { get } from 'lodash'
 import { compose } from 'recompose'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { actions } from 'pubsweet-client'
 import { th, Icon, Spinner } from '@pubsweet/ui'
-import styled, { withTheme } from 'styled-components'
 
 import {
-  selectHandlingEditors,
   selectFetching,
   assignHandlingEditor,
+  selectHandlingEditors,
 } from '../../redux/editors'
 
 class AssignHEModal extends React.Component {
@@ -34,21 +34,21 @@ class AssignHEModal extends React.Component {
 
   assignEditor = email => () => {
     const {
-      assignHandlingEditor,
-      collectionId,
       showModal,
       hideModal,
+      collectionId,
       setModalError,
       getCollections,
+      assignHandlingEditor,
     } = this.props
     assignHandlingEditor(email, collectionId).then(
       () => {
         getCollections()
         hideModal()
         showModal({
+          cancelText: 'OK',
           type: 'confirmation',
           title: 'Assignation Sent',
-          cancelText: 'OK',
         })
       },
       e => {
@@ -61,12 +61,12 @@ class AssignHEModal extends React.Component {
 
   render() {
     const { searchInput } = this.state
-    const { editors, hideModal, theme, isFetching } = this.props
+    const { editors, hideModal, isFetching } = this.props
     const filteredEditors = this.filterEditors(editors)
     return (
       <RootModal>
         <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
-          <Icon color={theme.colorPrimary}>x</Icon>
+          <Icon primary>x</Icon>
         </CloseIcon>
         <ModalTitle>Assign Handling Editor</ModalTitle>
         <ModalHeader>
@@ -118,11 +118,10 @@ export default compose(
     }),
     {
       assignHandlingEditor,
-      updateCollection: actions.updateCollection,
       getCollections: actions.getCollections,
+      updateCollection: actions.updateCollection,
     },
   ),
-  withTheme,
 )(AssignHEModal)
 
 // #region styled-components
@@ -141,8 +140,8 @@ const SubtitleRow = styled.div`
 const CloseIcon = styled.div`
   cursor: pointer;
   position: absolute;
-  top: 5px;
-  right: 5px;
+  top: ${th('subGridUnit')};
+  right: ${th('subGridUnit')};
 `
 
 const EditorDetails = styled.div`

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

 import React from 'react'
-import { Button } from '@pubsweet/ui'
 import styled from 'styled-components'
+import { Button, th } from '@pubsweet/ui'
 import { compose, withHandlers } from 'recompose'
 
-import DashboardItems from './DashboardItems'
-import DashboardFilters from './DashboardFilters'
+import { DashboardItems, DashboardFilters } from './'
 
 const Dashboard = ({
-  createDraftSubmission,
-  currentUser,
-  dashboard,
-  deleteProject,
   filters,
   getItems,
+  dashboard,
+  currentUser,
+  filterItems,
+  filterValues,
+  deleteProject,
   getFilterOptions,
   changeFilterValue,
-  filterValues,
-  filterItems,
   showAbstractModal,
+  createDraftSubmission,
   ...rest
 }) => (
   <Root>
@@ -55,10 +54,10 @@ export default compose(
     },
     getItems: ({
       filters,
-      filterValues = {},
-      currentUser,
       dashboard,
+      currentUser,
       filterItems,
+      filterValues = {},
     }) => () =>
       filterItems(dashboard.all).sort((a, b) => {
         if (filterValues.order === 'newest') return a.created - b.created < 0
@@ -68,7 +67,6 @@ export default compose(
 )(Dashboard)
 
 // #region styles
-
 const Root = styled.div`
   display: flex;
   flex-direction: column;
@@ -82,7 +80,7 @@ const Header = styled.div`
 `
 
 const Heading = styled.div`
-  color: ${({ theme }) => theme.colorPrimary};
+  color: ${th('colorPrimary')};
   font-size: 1.6em;
   text-transform: uppercase;
 `
@@ -90,5 +88,4 @@ const Heading = styled.div`
 const HeaderButtons = styled.div`
   display: flex;
 `
-
 // #endregion

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

@@ -167,18 +167,6 @@ const DashboardCard = ({
   ) : null
 }
 
-// const isHEToManuscript = (state, collectionId) => {
-//   const currentUserId = get(state, 'currentUser.user.id')
-//   const collections = get(state, 'collections') || []
-//   const collection = collections.find(c => c.id === collectionId) || {}
-//   const collectionInvitations = get(collection, 'invitations') || []
-//   const userInvitation = collectionInvitations.find(
-//     i => i.role === 'handlingEditor' && i.userId === currentUserId,
-//   )
-
-//   return userInvitation ? userInvitation.isAccepted : false
-// }
-
 export default compose(
   getContext({ journal: PropTypes.object, currentUser: PropTypes.object }),
   withTheme,
@@ -209,8 +197,8 @@ export default compose(
       project,
     }) => () => {
       showModal({
-        title: 'Are you sure you want to delete this submission?',
         confirmText: 'Delete',
+        title: 'Are you sure you want to delete this submission?',
         onConfirm: () => {
           deleteProject(project).then(hideModal, e => {
             setModalError(
@@ -243,25 +231,25 @@ const ActionButtons = 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);
 `
 
 const LeftDetails = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  align-items: center;
   flex: ${({ flex }) => flex || 1};
   flex-wrap: wrap;
 `
 
 const RightDetails = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  align-items: center;
   flex: ${({ flex }) => flex || 1};
   flex-wrap: wrap;
 `
@@ -285,7 +273,7 @@ const ListView = styled.div`
 
 const ManuscriptId = styled.div`
   ${defaultText};
-  margin-right: 8px;
+  margin-right: ${th('subGridUnit')};
   text-align: left;
   text-transform: uppercase;
   white-space: nowrap;
@@ -297,7 +285,7 @@ const Details = styled.div`
   cursor: pointer;
   display: flex;
   ${defaultText};
-  margin-left: 16px;
+  margin-left: calc(${th('subGridUnit')} * 2);
   text-decoration: underline;
   text-align: center;
   text-transform: uppercase;
@@ -306,7 +294,7 @@ const Details = styled.div`
 
 const ClickableIcon = styled.div`
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  margin: 0 7px;
+  margin: 0 ${th('subGridUnit')};
 
   svg {
     stroke: ${({ disabled, theme }) =>
@@ -320,7 +308,7 @@ const Card = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  margin-bottom: 10px;
+  margin-bottom: calc(${th('subGridUnit')} * 2);
   background-color: ${th('backgroundColorReverse')};
 `
 
@@ -328,31 +316,32 @@ const Top = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 10px;
+  padding: calc(${th('subGridUnit')} * 2);
   width: 100%;
   box-sizing: border-box;
   flex-wrap: wrap;
 `
 const Bottom = styled.div`
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  padding: 0 10px 10px 10px;
-  width: 100%;
-  box-sizing: border-box;
-  justify-content: space-between;
   flex-wrap: wrap;
+  justify-content: space-between;
+  padding: calc(${th('subGridUnit')} * 2);
+  padding-top: 0;
+  width: 100%;
 `
 
 const ManuscriptType = styled.div`
   ${defaultText};
-  padding: 6px 4px;
-  margin-left: 10px;
+  flex: 1;
+  margin-left: calc(${th('subGridUnit')} * 2);
+  padding: ${th('subGridUnit')} calc(${th('subGridUnit')} / 2);
   text-align: right;
   text-transform: capitalize;
   text-overflow: ellipsis;
-  white-space: nowrap;
   overflow: hidden;
-  flex: 1;
+  white-space: nowrap;
 `
 
 const Title = styled.div`
@@ -383,5 +372,4 @@ const DateField = styled.span`
   margin: 0 ${th('subGridUnit')};
   text-align: left;
 `
-
 // #endregion

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

 import React from 'react'
+import styled from 'styled-components'
 import { Menu, th } from '@pubsweet/ui'
 import { compose, withHandlers } from 'recompose'
-import styled from 'styled-components'
 
 const DashboardFilters = ({
   view,
   status,
-  createdAt,
   listView,
-  changeFilter,
+  createdAt,
   changeSort,
+  changeFilter,
   getFilterOptions,
   changeFilterValue,
 }) => (
@@ -59,8 +59,8 @@ const Root = styled.div`
   color: ${th('colorPrimary')};
   display: flex;
   justify-content: space-between;
-  margin: calc(${th('subGridUnit')}*2) 0;
-  padding-bottom: calc(${th('subGridUnit')}*2);
+  margin: calc(${th('subGridUnit')} * 2) 0;
+  padding-bottom: calc(${th('subGridUnit')} * 2);
 `
 
 const FiltersContainer = styled.div`
@@ -78,7 +78,7 @@ const FilterGroup = styled.div`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
-  margin-left: calc(${th('subGridUnit')}*2);
+  margin-left: calc(${th('subGridUnit')} * 2);
 `
 
 // #endregion

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

@@ -8,8 +8,8 @@ const DashboardItem = withVersion(Item)
 
 const DashboardItems = ({
   list,
-  listView = true,
   deleteProject,
+  listView = true,
   showAbstractModal,
 }) => (
   <div>
@@ -36,7 +36,6 @@ const DashboardItems = ({
 export default DashboardItems
 
 // #region styles
-
 const Empty = styled.div`
   display: flex;
   justify-content: center;
@@ -45,5 +44,4 @@ const Empty = styled.div`
 const Section = styled.div`
   margin: 0.5em 0;
 `
-
 // #endregion

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

@@ -9,7 +9,7 @@ import { compose, withContext } from 'recompose'
 import { newestFirst, selectCurrentUser } from 'xpub-selectors'
 import { createDraftSubmission } from 'pubsweet-component-wizard/src/redux/conversion'
 
-import Dashboard from './Dashboard'
+import { Dashboard } from './'
 import withFilters from './withFilters'
 import { getHandlingEditors } from '../../redux/editors'
 

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

@@ -3,29 +3,28 @@ import { get } from 'lodash'
 import { connect } from 'react-redux'
 import { actions } from 'pubsweet-client'
 import { Icon, Button, th } from '@pubsweet/ui'
+import styled, { css } from 'styled-components'
 import { compose, withHandlers } from 'recompose'
-import styled, { css, withTheme } from 'styled-components'
 import {
   withModal,
-  ConfirmationModal,
   SuccessModal,
+  ConfirmationModal,
 } from 'pubsweet-component-modal/src/components'
 
 import { handleError } from './../utils'
 import {
+  selectFetching,
   revokeHandlingEditor,
   assignHandlingEditor,
-  selectFetching,
 } from '../../redux/editors'
 
 import HEModal from './AssignHEModal'
 
 const EditorInChiefActions = ({
   project,
-  theme,
-  getHandlingEditor,
-  showConfirmModal,
   showHEModal,
+  showConfirmModal,
+  getHandlingEditor,
 }) => {
   const handlingEditor = getHandlingEditor()
   const isAccepted = get(handlingEditor, 'isAccepted')
@@ -40,10 +39,10 @@ const EditorInChiefActions = ({
             <HEName>{get(handlingEditor, 'name')}</HEName>
             <HEActions data-test="eic-after-assign">
               <div onClick={showConfirmModal('resend')}>
-                <Icon color={theme.colorPrimary}>refresh-cw</Icon>
+                <Icon primary>refresh-cw</Icon>
               </div>
               <div onClick={showConfirmModal('cancel')}>
-                <Icon color={theme.colorPrimary}>x-circle</Icon>
+                <Icon primary>x-circle</Icon>
               </div>
             </HEActions>
           </HEActions>
@@ -73,7 +72,6 @@ export default compose(
     assignHandlingEditor,
     getCollections: actions.getCollections,
   }),
-  withTheme,
   withModal({
     modalKey: 'confirmHE',
     modalComponent: CardModal,
@@ -83,14 +81,14 @@ export default compose(
   }),
   withHandlers({
     showConfirmModal: ({
-      showModal,
       project,
-      revokeHandlingEditor,
-      assignHandlingEditor,
-      getHandlingEditor,
+      showModal,
       hideModal,
       setModalError,
       getCollections,
+      getHandlingEditor,
+      revokeHandlingEditor,
+      assignHandlingEditor,
     }) => actionType => {
       const editor = get(project, 'handlingEditor')
       const invitation = project.invitations.find(i => i.userId === editor.id)
@@ -170,9 +168,9 @@ const HEActions = styled.div`
 const AssignButton = styled(Button)`
   ${defaultText};
   align-items: center;
-  color: ${th('colorTextReverse')};
   background-color: ${th('colorPrimary')};
-  height: calc(${th('subGridUnit')}*5);
+  color: ${th('colorTextReverse')};
+  height: calc(${th('subGridUnit')} * 5);
   text-align: center;
   text-transform: uppercase;
 `

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

@@ -62,12 +62,12 @@ export default compose(
   }),
   withHandlers({
     showHEModal: ({
-      currentUser,
+      project,
       showModal,
       hideModal,
-      project,
-      getCollections,
+      currentUser,
       setModalError,
+      getCollections,
     }) => modalType => {
       const invitation = project.invitations.find(
         i => i.userId === currentUser.id,
@@ -119,7 +119,7 @@ const DecisionButton = styled(Button)`
     primary ? th('colorTextReverse') : th('colorPrimary')};
   background-color: ${({ primary }) =>
     primary ? th('colorPrimary') : th('backgroundColorReverse')};
-  height: calc(${th('subGridUnit')}*5);
+  height: calc(${th('subGridUnit')} * 5);
   text-align: center;
 `
 
@@ -128,8 +128,8 @@ const DeclineRoot = styled.div`
   background-color: ${th('backgroundColor')};
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   height: calc(${th('gridUnit')} * 13);
+  justify-content: space-between;
   padding: calc(${th('subGridUnit')} * 7);
   width: calc(${th('gridUnit')} * 24);
 
@@ -137,7 +137,7 @@ const DeclineRoot = styled.div`
     color: ${th('colorPrimary')};
     font-size: ${th('fontSizeHeading5')};
     font-family: ${th('fontHeading')};
-    margin-bottom: 25px;
+    margin-bottom: ${th('gridUnit')};
   }
 
   & textarea {

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

 import React from 'react'
-import { th } from '@pubsweet/ui'
 import { get } from 'lodash'
+import { th } from '@pubsweet/ui'
 import styled, { css } from 'styled-components'
 import { EditorInChiefActions, HandlingEditorActions } from './'
 

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

@@ -85,12 +85,12 @@ const defaultText = css`
 
 const DecisionButton = styled(Button)`
   ${defaultText};
-  align-items: center;
-  color: ${({ primary }) =>
-    primary ? th('colorTextReverse') : th('colorPrimary')});
+  align-items: center;  
   background-color: ${({ primary }) =>
     primary ? th('colorPrimary') : th('backgroundColorReverse')};
-  height: calc(${th('subGridUnit')}*5);
+  color: ${({ primary }) =>
+    primary ? th('colorTextReverse') : th('colorPrimary')});
+  height: calc(${th('subGridUnit')} * 5);
   text-align: center;
 `
 // #endregion

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

 import DashboardPage from './DashboardPage'
 
+export { default as Dashboard } from './Dashboard'
+export { default as AbstractModal } from './AbstractModal'
 export { default as AuthorTooltip } from './AuthorTooltip'
+export { default as DashboardCard } from './DashboardCard'
+export { default as DashboardItems } from './DashboardItems'
 export { default as ReviewerDecision } from './ReviewerDecision'
+export { default as DashboardFilters } from './DashboardFilters'
 export { default as EditorInChiefActions } from './EditorInChiefActions'
 export { default as HandlingEditorActions } from './HandlingEditorActions'
 export { default as HandlingEditorSection } from './HandlingEditorSection'