feat(details): add preview file

packages/component-faraday-ui/src/ManuscriptDetailsTop.js

 import React from 'react'
+import { get } from 'lodash'
 import {
   Row,
   Item,
+  Text,
   ActionLink,
   IconButton,
   DownloadZipFiles,
+  PreviewFile,
   ManuscriptVersion,
-  Text,
 } from 'pubsweet-component-faraday-ui'
 import { DateParser } from '@pubsweet/ui'
 
-const ManuscriptDetailsTop = ({ history, collection = {}, fragment = {} }) => (
+const ManuscriptDetailsTop = ({
+  history,
+  getSignedUrl,
+  collection = {},
+  fragment = {},
+}) => (
   <Row alignItems="center" mb={1}>
-    <Item alignItems="center" justify="flex-start">
+    <Item justify="flex-start">
       <ActionLink icon="arrow-left" onClick={() => history.push('/')}>
         Dashboard
       </ActionLink>
     </Item>
-    <Item alignItems="center" justify="flex-end">
+    <Item justify="flex-end">
+      <PreviewFile
+        file={get(fragment, 'files.manuscripts[0]', {})}
+        getSignedUrl={getSignedUrl}
+      />
       <DownloadZipFiles
         archiveName={`ID-${collection.customId}`}
         collectionId={collection.id}
         fragmentId={fragment.id}
       >
-        <IconButton icon="download" />
+        <IconButton icon="download" iconSize={2} mr={3} secondary />
       </DownloadZipFiles>
       <DateParser durationThreshold={0} timestamp={fragment.submitted || ''}>
         {timestamp => <Text mr={1}>Updated on {timestamp}</Text>}

packages/component-faraday-ui/src/PreviewFile.js

+import React, { Fragment } from 'react'
+import { last } from 'lodash'
+import { withProps, withHandlers, compose } from 'recompose'
+
+import { IconButton } from './'
+import { withFilePreview } from './helpers'
+
+const hasPreview = (name = '') => {
+  const extension = last(name.split('.')).toLocaleLowerCase()
+  return ['pdf', 'png', 'jpg'].includes(extension)
+}
+
+const PreviewFile = ({ onPreview, hasPreview }) => (
+  <Fragment>
+    {hasPreview && (
+      <IconButton
+        icon="eye"
+        iconSize={2}
+        ml={1}
+        mr={1}
+        onClick={onPreview}
+        secondary
+      />
+    )}
+  </Fragment>
+)
+
+export default compose(
+  withFilePreview,
+  withProps(({ file: { name } }) => ({
+    hasPreview: hasPreview(name),
+  })),
+  withHandlers({
+    onPreview: ({ previewFile, file }) => () => {
+      typeof previewFile === 'function' && previewFile(file)
+    },
+  }),
+)(PreviewFile)

packages/component-faraday-ui/src/PreviewFile.md

+Preview file in browser if possible
+
+```js
+const file = {};
+
+<PreviewFile file={file} />
+```

packages/component-faraday-ui/src/gridItems/Item.js

@@ -11,6 +11,7 @@ export default styled.div.attrs({
   flex: ${({ flex }) => (isNumber(flex) ? flex : 1)};
   flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
   justify-content: ${({ justify }) => justify || 'initial'};
-  align-items: ${({ alignItems }) => alignItems || 'flex-start'};
+  align-items: ${({ alignItems }) => alignItems || 'center'};
+
   ${marginHelper};
 `

packages/component-faraday-ui/src/index.js

@@ -21,6 +21,7 @@ export { default as Tag } from './Tag'
 export { default as Text } from './Text'
 export { default as WizardAuthors } from './WizardAuthors'
 export { default as WizardFiles } from './WizardFiles'
+export { default as PreviewFile } from './PreviewFile'
 export { default as DownloadZipFiles } from './DownloadZipFiles'
 
 // Manuscript Details

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

@@ -6,6 +6,7 @@ import { Text, ManuscriptDetailsTop, Row } from 'pubsweet-component-faraday-ui'
 const ManuscriptLayout = ({
   journal,
   history,
+  getSignedUrl,
   currentUser,
   editorInChief,
   canMakeRevision,
@@ -20,6 +21,7 @@ const ManuscriptLayout = ({
         <ManuscriptDetailsTop
           collection={project}
           fragment={version}
+          getSignedUrl={getSignedUrl}
           history={history}
         />
         <Row justify="flex-start">Aici header</Row>

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

@@ -12,7 +12,7 @@ const DashboardFilters = ({
     <Text mr={1} pb={1} secondary>
       Filters
     </Text>
-    <Item flex={0} mr={1} vertical>
+    <Item alignItems="flex-start" flex={0} mr={1} vertical>
       <Label>Priority</Label>
       <Menu
         inline
@@ -21,7 +21,7 @@ const DashboardFilters = ({
         value={getDefaultFilterValue('priority')}
       />
     </Item>
-    <Item flex={0} vertical>
+    <Item alignItems="flex-start" flex={0} vertical>
       <Label>Order</Label>
       <Menu
         inline