feat(details): add sidebar info

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

@@ -30,7 +30,7 @@ const Container = styled.div`
 const SideBar = styled.div`
   flex: ${({ flex }) => flex || 1};
   background-color: ${th('colorBackground')};
-  padding: 0 ${th('subGridUnit')};
+  padding: ${th('subGridUnit')};
 `
 
 const Header = styled.div`

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

@@ -12,7 +12,7 @@ import {
   LeftDetails,
   RightDetails,
 } from '../atoms'
-import { ManuscriptDetails } from './'
+import { ManuscriptDetails, SideBarActions, SideBarRoles } from './'
 
 const ManuscriptLayout = ({
   currentUser,
@@ -45,7 +45,10 @@ const ManuscriptLayout = ({
         previewFile={previewFile}
       />
     </Container>
-    <SideBar flex={1}>Sidebar</SideBar>
+    <SideBar flex={1}>
+      <SideBarActions project={project} version={version} />
+      <SideBarRoles project={project} version={version} />
+    </SideBar>
   </Root>
 )
 

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

+import React from 'react'
+import { th, Button, Icon } from '@pubsweet/ui'
+import styled, { css } from 'styled-components'
+
+import ZipFiles from 'pubsweet-components-faraday/src/components/Dashboard/ZipFiles'
+
+const SideBarActions = ({ project, version }) => (
+  <Root>
+    <ActionButton> Make Decision </ActionButton>
+    <ZipFiles archiveName={`ID-${project.customId}`} fragmentId={version.id}>
+      <ClickableIcon>
+        <Icon>download</Icon>
+      </ClickableIcon>
+    </ZipFiles>
+  </Root>
+)
+
+export default SideBarActions
+
+// #region styled-components
+const defaultText = css`
+  color: ${th('colorText')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
+const Root = styled.div`
+  border-bottom: ${th('borderDefault')};
+  display: flex;
+  justify-content: space-between;
+  padding: ${th('subGridUnit')};
+`
+const ActionButton = styled(Button)`
+  ${defaultText};
+  align-items: center;
+  background-color: ${th('colorPrimary')};
+  color: ${th('colorTextReverse')};
+  display: flex;
+  padding: 4px 8px;
+  text-align: center;
+  height: calc(${th('subGridUnit')}*5);
+  text-transform: uppercase;
+`
+const ClickableIcon = styled.div`
+  margin: 0 ${th('subGridUnit')};
+  &:hover {
+    opacity: 0.7;
+  }
+`
+// #endregion

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

+import React from 'react'
+import { th, Button } from '@pubsweet/ui'
+import { get } from 'lodash'
+import styled, { css } from 'styled-components'
+
+const getHE = project => {
+  const heName = get(project, 'handlingEditor.name')
+
+  if (heName) {
+    return <Name> {heName} </Name>
+  }
+  return <ActionButton>Assign</ActionButton>
+}
+
+const SideBarRoles = ({ project }) => (
+  <Root>
+    <Row>
+      <Text>Editor in Chief</Text>
+      <Name>John Snow</Name>
+    </Row>
+    <Row>
+      <Text>Handling Editor</Text>
+      {getHE(project)}
+    </Row>
+  </Root>
+)
+
+export default SideBarRoles
+
+// #region styled-components
+const defaultText = css`
+  color: ${th('colorText')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: calc(${th('subGridUnit')}*3) ${th('subGridUnit')};
+`
+const Text = styled.div`
+  ${defaultText};
+  text-transform: uppercase;
+`
+
+const Name = styled.div`
+  ${defaultText};
+  text-decoration: underline;
+`
+
+const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+const ActionButton = styled(Button)`
+  ${defaultText};
+  align-items: center;
+  background-color: ${th('colorBackground')};
+  padding: 4px 8px;
+  text-align: center;
+  height: calc(${th('subGridUnit')}*5);
+  text-transform: uppercase;
+  margin: 0;
+`
+// #endregion

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

@@ -3,3 +3,5 @@ export { default as Authors } from './Authors'
 export { default as Expandable } from './Expandable'
 export { default as ManuscriptPage } from './ManuscriptPage'
 export { default as ManuscriptDetails } from './ManuscriptDetails'
+export { default as SideBarActions } from './SideBarActions'
+export { default as SideBarRoles } from './SideBarRoles'