Merge branch 'develop' of gitlab.coko.foundation:xpub/xpub-faraday into develop

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

 import React from 'react'
-import { th, Icon } from '@pubsweet/ui'
+import { get } from 'lodash'
+import { connect } from 'react-redux'
 import styled from 'styled-components'
+import { th, Icon } from '@pubsweet/ui'
+import { compose, withProps } from 'recompose'
 import ZipFiles from 'pubsweet-components-faraday/src/components/Files/ZipFiles'
 import { Recommendation } from 'pubsweet-components-faraday/src/components/MakeRecommendation'
 
 import { MakeDecision } from './'
 
-const SideBarActions = ({ project, version, currentUserIs }) => (
+const SideBarActions = ({
+  project,
+  version,
+  currentUserIs,
+  canMakeRecommendation,
+}) => (
   <Root>
     {currentUserIs('adminEiC') && <MakeDecision />}
-    {currentUserIs('isHE') && (
+    {canMakeRecommendation && (
       <Recommendation
         collectionId={project.id}
         fragmentId={version.id}
@@ -28,7 +36,27 @@ const SideBarActions = ({ project, version, currentUserIs }) => (
   </Root>
 )
 
-export default SideBarActions
+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(
+  connect((state, { project }) => ({
+    isHEToManuscript: isHEToManuscript(state, project.id),
+  })),
+  withProps(({ isHEToManuscript, project }) => ({
+    canMakeRecommendation:
+      isHEToManuscript && get(project, 'status') === 'reviewCompleted',
+  })),
+)(SideBarActions)
 
 // #region styled-components
 const Root = styled.div`

packages/components-faraday/src/components/MakeRecommendation/StepTwo.js

@@ -93,7 +93,10 @@ const StepTwo = ({
         </CustomRow>
         <CustomRow>
           <RowItem vertical>
-            <Label>REASON & DETAILS</Label>
+            <Label>
+              REASON & DETAILS
+              <SubLabel>Required</SubLabel>
+            </Label>
             <ValidatedField
               component={input => <Textarea {...input} />}
               name="revision.reason"
@@ -110,12 +113,12 @@ const StepTwo = ({
           </Row>
         ) : (
           <Fragment>
-            <CustomRow>
-              <RowItem>
-                <Label>INTERNAL NOTE</Label>
-              </RowItem>
-              <RowItem>
-                <HintText>Not shared with author</HintText>
+            <CustomRow withMargin>
+              <RowItem flex={2}>
+                <Label>
+                  INTERNAL NOTE
+                  <SubLabel>Not shared with author</SubLabel>
+                </Label>
               </RowItem>
               <CustomRowItem onClick={removeNote}>
                 <IconButton>
@@ -127,7 +130,7 @@ const StepTwo = ({
             <CustomRow>
               <RowItem>
                 <ValidatedField
-                  component={input => <Textarea {...input} />}
+                  component={input => <Textarea {...input} height={70} />}
                   name="revision.internal-note"
                 />
               </RowItem>
@@ -179,6 +182,13 @@ const defaultText = css`
   font-size: ${th('fontSizeBaseSmall')};
 `
 
+const SubLabel = styled.span`
+  ${defaultText};
+  font-style: oblique;
+  margin-left: ${th('subGridUnit')};
+  text-transform: capitalize;
+`
+
 const TextButton = styled.span`
   ${defaultText};
   cursor: pointer;
@@ -202,6 +212,6 @@ const CustomRowItem = RowItem.extend`
 `
 
 const CustomRow = Row.extend`
-  margin: ${th('subGridUnit')} 0;
+  margin: ${({ withMargin }) => `${withMargin ? 6 : 0}px 0px`};
 `
 // #endregion

packages/components-faraday/src/components/SignUp/SignUpStep0.js

@@ -12,7 +12,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
   !isUndefined(initialValues) ? (
     <FormContainer onSubmit={handleSubmit}>
       <Row>
-        <RowItem>
+        <RowItem vertical>
           <Label> First name* </Label>
           <ValidatedField
             component={TextField}
@@ -20,7 +20,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
             validate={[required]}
           />
         </RowItem>
-        <RowItem>
+        <RowItem vertical>
           <Label> Last name* </Label>
           <ValidatedField
             component={TextField}
@@ -30,7 +30,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
         </RowItem>
       </Row>
       <Row>
-        <RowItem>
+        <RowItem vertical>
           <Label> Affiliation* </Label>
           <ValidatedField
             component={TextField}
@@ -39,7 +39,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
           />
         </RowItem>
 
-        <RowItem>
+        <RowItem vertical>
           <Label> Title* </Label>
           <ValidatedField
             component={input => <Menu {...input} options={journal.title} />}

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

@@ -7,8 +7,8 @@ export const RootContainer = styled.div`
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 550px;
-  min-width: 450px;
+  max-width: 600px;
+  min-width: 500px;
   padding: calc(${th('subGridUnit')} * 2) calc(${th('subGridUnit')} * 4);
 `
 
@@ -51,11 +51,14 @@ export const RowItem = styled.div`
   flex: ${({ flex }) => flex || 1};
   flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
   justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
+  margin: 0 ${th('subGridUnit')};
 `
 
 export const Label = styled.div`
+  color: ${th('colorPrimary')};
   font-family: ${th('fontReading')};
   font-size: ${th('fontSizeBaseSmall')};
+  margin: ${th('subGridUnit')} 0;
   text-transform: uppercase;
 `
 
@@ -68,13 +71,22 @@ export const Err = styled.span`
 `
 
 export const Textarea = styled.textarea`
+  border: ${th('borderDefault')};
   border-color: ${({ hasError }) =>
     hasError ? th('colorError') : th('colorPrimary')};
   font-size: ${th('fontSizeBaseSmall')};
   font-family: ${th('fontWriting')};
   padding: calc(${th('subGridUnit')}*2);
+  outline: none;
   transition: all 300ms linear;
-  width: 400px;
+
+  width: ${({ width }) => `${width || 500}px`};
+  height: ${({ height }) => `${height || 150}px`};
+
+  &:active,
+  &:focus {
+    border-color: #54a5fa;
+  }
 
   &:read-only {
     background-color: ${th('colorBackgroundHue')};