diff --git a/packages/component-email-templating/src/templates/partials/footer.hbs b/packages/component-email-templating/src/templates/partials/footer.hbs
index 0d98f51235e0705078ac8f637f149f8019ed94d3..13045bee06e111036a100f7e3e200d1f0e987ea4 100644
--- a/packages/component-email-templating/src/templates/partials/footer.hbs
+++ b/packages/component-email-templating/src/templates/partials/footer.hbs
@@ -1,7 +1,8 @@
 <div data-role="module-unsubscribe" class="module unsubscribe-css__unsubscribe___2CDlR" role="module" data-type="unsubscribe"
   style="color:#444444;font-size:12px;line-height:20px;padding:16px 16px 16px 16px;text-align:center">
   <p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:20px;text-align:left">
-    This email was sent to {{toEmail}}. You have received this email in regards to the account creation, submission, or peer review process of a paper submitted to a journal published by {{ publisher }}.
+    This email was sent to <span class="footer-link">{{toEmail}}</span>. You have received this email in regards to the account creation, submission, or
+    peer review process of a paper submitted to a journal published by {{ publisher }}.
   </p>
   <div class="Unsubscribe--addressLine">
     <p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:20px;text-align:left">
diff --git a/packages/component-email-templating/src/templates/partials/invButtons.hbs b/packages/component-email-templating/src/templates/partials/invButtons.hbs
index 5c5041dec3a973c019e5743106826fa11137c14e..7611dc03e966d4e9146cda5bd9b6a535b17ace3d 100644
--- a/packages/component-email-templating/src/templates/partials/invButtons.hbs
+++ b/packages/component-email-templating/src/templates/partials/invButtons.hbs
@@ -1,5 +1,5 @@
-<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns" data-version="2"
-  style="padding:20px 0px 20px 0px;background-color:#ffffff;box-sizing:border-box;" bgcolor="#ffffff">
+<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns"
+  data-version="2" style="padding:0px 0px 0px 0px;box-sizing:border-box;" bgcolor="">
   <tr role='module-content'>
     <td height="100%" valign="top">
       <!--[if (gte mso 9)|(IE)]>
@@ -12,23 +12,23 @@
       <td width="300.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
     <![endif]-->
 
-      <table width="300.000" style="width:300.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;" cellpadding="0"
-        cellspacing="0" align="left" border="0" bgcolor="#ffffff" class="column column-0 of-2
+      <table width="300.000" style="width:300.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
+        cellpadding="0" cellspacing="0" align="left" border="0" bgcolor="" class="column column-0 of-2
                   empty">
         <tr>
           <td style="padding:0px;margin:0px;border-spacing:0;">
-            <table border="0" cellPadding="0" cellSpacing="0" class="module" data-role="module-button" data-type="button" role="module"
-              style="table-layout:fixed" width="100%">
+            <table border="0" cellPadding="0" cellSpacing="0" class="module" data-role="module-button" data-type="button"
+              role="module" style="table-layout:fixed" width="100%">
               <tbody>
                 <tr>
-                  <td align="center" class="outer-td" style="padding:0px 0px 0px 0px">
-                    <table border="0" cellPadding="0" cellSpacing="0" class="button-css__deep-table___2OZyb wrapper-mobile" style="text-align:center">
+                  <td align="center" class="outer-td" style="padding:0px 0px 0px 50px">
+                    <table border="0" cellPadding="0" cellSpacing="0" class="button-css__deep-table___2OZyb wrapper-mobile"
+                      style="text-align:center">
                       <tbody>
                         <tr>
-                          <td align="center" bgcolor="#0d78f2" class="inner-td" style="border-radius:6px;font-size:16px;text-align:center;background-color:inherit">
-                            <a style="background-color:#0d78f2;border:1px solid #333333;border-color:#0d78f2;border-radius:0px;border-width:1px;color:#ffffff;display:inline-block;font-family:arial,helvetica,sans-serif;font-size:16px;font-weight:normal;letter-spacing:0px;line-height:16px;padding:12px 18px 12px 18px;text-align:center;text-decoration:none"
-                              href="{{ agreeLink }}" target="_blank">AGREE</a>
-                          </td>
+                          <td align="center" bgcolor="#f6f6f6" class="inner-td" style="border-radius:6px;font-size:16px;text-align:center;background-color:inherit"><a
+                              style="background-color:#f6f6f6;border:1px solid #333333;border-color:#586971;border-radius:5px;border-width:2px;color:#586971;display:inline-block;font-family:arial,helvetica,sans-serif;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:15px;padding:12px 18px 12px 18px;text-align:center;text-decoration:none;width:172px"
+                              href="{{ declineLink }} " target="_blank">DECLINE</a></td>
                         </tr>
                       </tbody>
                     </table>
@@ -47,23 +47,23 @@
       <td width="300.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
     <![endif]-->
 
-      <table width="300.000" style="width:300.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;" cellpadding="0"
-        cellspacing="0" align="left" border="0" bgcolor="#ffffff" class="column column-1 of-2
+      <table width="300.000" style="width:300.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
+        cellpadding="0" cellspacing="0" align="left" border="0" bgcolor="" class="column column-1 of-2
                   empty">
         <tr>
           <td style="padding:0px;margin:0px;border-spacing:0;">
-            <table border="0" cellPadding="0" cellSpacing="0" class="module" data-role="module-button" data-type="button" role="module"
-              style="table-layout:fixed" width="100%">
+            <table border="0" cellPadding="0" cellSpacing="0" class="module" data-role="module-button" data-type="button"
+              role="module" style="table-layout:fixed" width="100%">
               <tbody>
                 <tr>
-                  <td align="center" class="outer-td" style="padding:0px 0px 0px 0px">
-                    <table border="0" cellPadding="0" cellSpacing="0" class="button-css__deep-table___2OZyb wrapper-mobile" style="text-align:center">
+                  <td align="center" class="outer-td" style="padding:0px 50px 0px 0px">
+                    <table border="0" cellPadding="0" cellSpacing="0" class="button-css__deep-table___2OZyb wrapper-mobile"
+                      style="text-align:center">
                       <tbody>
                         <tr>
-                          <td align="center" bgcolor="#e4dfdf" class="inner-td" style="border-radius:6px;font-size:16px;text-align:center;background-color:inherit">
-                            <a style="background-color:#e4dfdf;border:1px solid #333333;border-color:#E4DFDF;border-radius:0px;border-width:1px;color:#302e2e;display:inline-block;font-family:arial,helvetica,sans-serif;font-size:16px;font-weight:normal;letter-spacing:0px;line-height:16px;padding:12px 18px 12px 18px;text-align:center;text-decoration:none"
-                              href="{{ declineLink }}" target="_blank">DECLINE</a>
-                          </td>
+                          <td align="center" bgcolor="#63a945" class="inner-td" style="border-radius:6px;font-size:16px;text-align:center;background-color:inherit"><a
+                              style="background-color:#63a945;border:1px solid #333333;border-color:#63A945;border-radius:5px;border-width:2px;color:#f6f6f6;display:inline-block;font-family:arial,helvetica,sans-serif;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:15px;padding:12px 18px 12px 18px;text-align:center;text-decoration:none;width:172px"
+                              href="{{ agreeLink }}" target="_blank">AGREE</a></td>
                         </tr>
                       </tbody>
                     </table>
@@ -85,4 +85,18 @@
             <![endif]-->
     </td>
   </tr>
+</table>
+
+<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+  <tr>
+    <td style="padding:8px 50px 32px 50px;line-height:20px;text-align:inherit;" height="100%" valign="top" bgcolor="">
+      <div>
+        <div>
+          <div>
+            <div style="text-align: center;" tabindex="1"><span style="font-size:12px;">{{ subText }}</span></div>
+          </div>
+        </div>
+      </div>
+    </td>
+  </tr>
 </table>
\ No newline at end of file
diff --git a/packages/component-email-templating/src/templates/partials/invHeader.hbs b/packages/component-email-templating/src/templates/partials/invHeader.hbs
index d90452b5565a3191d2add9aeb6e97a4d9a50ae03..d01a40ad4f0645427c966da91a011dbf8ea226a1 100644
--- a/packages/component-email-templating/src/templates/partials/invHeader.hbs
+++ b/packages/component-email-templating/src/templates/partials/invHeader.hbs
@@ -37,7 +37,7 @@
     }
 
     body a {
-      color: #0D78F2;
+      color: #007e92;
       text-decoration: none;
     }
 
@@ -71,30 +71,41 @@
       width: 25%;
     }
 
+    .footer-link a {
+      color: #444444;
+      text-decoration: none;
+    }
+
     @media screen and (max-width:480px) {
+
       .preheader .rightColumnContent,
       .footer .rightColumnContent {
         text-align: left !important;
       }
+
       .preheader .rightColumnContent div,
       .preheader .rightColumnContent span,
       .footer .rightColumnContent div,
       .footer .rightColumnContent span {
         text-align: left !important;
       }
+
       .preheader .rightColumnContent,
       .preheader .leftColumnContent {
         font-size: 80% !important;
         padding: 5px 0;
       }
+
       table.wrapper-mobile {
         width: 100% !important;
         table-layout: fixed;
       }
+
       img.max-width {
         height: auto !important;
         max-width: 480px !important;
       }
+
       a.bulletproof-button {
         display: block !important;
         width: auto !important;
@@ -102,9 +113,11 @@
         padding-left: 0 !important;
         padding-right: 0 !important;
       }
+
       .columns {
         width: 100% !important;
       }
+
       .column {
         display: block !important;
         width: 100% !important;
@@ -126,7 +139,8 @@
       <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#F4F4F4">
         <tr>
           <td valign="top" bgcolor="#F4F4F4" width="100%">
-            <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
+            <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0"
+              border="0">
               <tr>
                 <td width="100%">
                   <table width="100%" cellpadding="0" cellspacing="0" border="0">
@@ -136,26 +150,21 @@
                           <center>
                           <table><tr><td width="600">
                           <![endif]-->
-                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
+                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;"
+                          align="center">
                           <tr>
-                            <td role="modules-container" style="padding: 0px 0px 0px 0px; color: #626262; text-align: left;" bgcolor="#F4F4F4" width="100%"
-                              align="left">
-
-                              <table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0"
-                                width="100%" style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
-                                <tr>
-                                  <td role="module-content">
-                                    <p>new invitation</p>
-                                  </td>
-                                </tr>
-                              </table>
+                            <td role="modules-container" style="padding: 0px 0px 0px 0px; color: #626262; text-align: left;"
+                              bgcolor="#F4F4F4" width="100%" align="left">
 
-                              <table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+                              <table class="wrapper" role="module" data-type="image" border="0" cellpadding="0"
+                                cellspacing="0" width="100%" style="table-layout: fixed;">
                                 <tr>
-                                  <td style="font-size:6px;line-height:10px;padding:20px 0px 20px 0px;" valign="top" align="center">
-                                    <img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:10% !important;width:10%;height:auto !important;"
-                                      src="{{ logo }}"
-                                      alt="" width="60">
+                                  <td style="font-size:6px;line-height:10px;padding:32px 0px 24px 0px;" valign="top"
+                                    align="center">
+                                    <a href="{{ logoLink }}">
+                                      <img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:10% !important;width:10%;height:auto !important;"
+                                        src="{{ logo }}" alt="Hindawi Logo" width="60">
+                                    </a>
                                   </td>
                                 </tr>
                               </table>
\ No newline at end of file
diff --git a/packages/component-email-templating/src/templates/partials/invLowerContent.hbs b/packages/component-email-templating/src/templates/partials/invLowerContent.hbs
index 0fae75fbf7b61ff6975a08ce97b119d32e066354..285fed1eec228b0e279e265666c6e2f81d604a7b 100644
--- a/packages/component-email-templating/src/templates/partials/invLowerContent.hbs
+++ b/packages/component-email-templating/src/templates/partials/invLowerContent.hbs
@@ -1,16 +1,20 @@
+{{#unless resend }}
+{{> invManuscriptData }}
+{{/unless}}
+
 <table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
   <tr>
-    <td style="padding:30px 23px 0px 23px;background-color:#ffffff;" height="100%" valign="top" bgcolor="#ffffff">
-      <p data-pm-slice="1 1 []">&nbsp;</p>
-
-      {{#unless resend }}
-        {{> invManuscriptData }}
-      {{/unless}}
-      <p data-pm-slice="1 1 []">{{{ lowerContent }}}</p>
-
-      <p>&nbsp;</p>
-      {{> signature }}
-      <div style="text-align: center;">&nbsp;</div>
+    <td style="padding:0px 50px 0px 50px;line-height:18px;text-align:inherit;" height="100%" valign="top" bgcolor="">
+      <div>
+        <span style="font-size:14px;">
+          <span style="color:#242424;">
+            {{{ lowerContent }}}
+            {{ lowerContentLink }}
+          </span>
+        </span>
+      </div>
+      <div>&nbsp;</div>
+      {{> signature}}
     </td>
   </tr>
 </table>
\ No newline at end of file
diff --git a/packages/component-email-templating/src/templates/partials/invManuscriptData.hbs b/packages/component-email-templating/src/templates/partials/invManuscriptData.hbs
index 36d60dbe2943b37e8ef7ba15031256728b8f409b..5df28e45b5d75ace4217faa4e43b38074ed445c0 100644
--- a/packages/component-email-templating/src/templates/partials/invManuscriptData.hbs
+++ b/packages/component-email-templating/src/templates/partials/invManuscriptData.hbs
@@ -1,15 +1,62 @@
-<p data-pm-slice="1 1 []">{{ manuscriptText }}</p>
-<p>&nbsp;</p>
-<h2>{{ title }}</h2>
-<p>&nbsp;</p>
-<h4>
-  <span style="font-family:arial,helvetica,sans-serif;">{{ authorsList }}</span>
-</h4>
-<p>
-  <br />
-  <em>
-    <span style="font-family:arial,helvetica,sans-serif;">{{{abstract}}}</span>
-  </em>
-</p>
-
-<p>&nbsp;</p>
\ No newline at end of file
+<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns"
+  data-version="2" style="padding:0px 34px 17px 34px;box-sizing:border-box;" bgcolor="">
+  <tr role='module-content'>
+    <td height="100%" valign="top">
+      <!--[if (gte mso 9)|(IE)]>
+              <center>
+                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing:0;border-collapse:collapse;table-layout: fixed;" >
+                  <tr>
+            <![endif]-->
+
+      <!--[if (gte mso 9)|(IE)]>
+      <td width="532.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
+    <![endif]-->
+
+      <table width="532.000" style="width:532.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
+        cellpadding="0" cellspacing="0" align="left" border="0" bgcolor="" class="column column-0 of-1
+                  empty">
+        <tr>
+          <td style="padding:0px;margin:0px;border-spacing:0;">
+
+            <table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%"
+              style="table-layout: fixed;">
+              <tr>
+                <td style="box-shadow: 0px 1px 2px 1px #dbdbdb;background-color:#ffffff;padding:16px 16px 16px 16px;line-height:20px;text-align:inherit;border-radius:3px;"
+                  height="100%" valign="top" bgcolor="#ffffff">
+                  <div><span style="font-size:18px;font-weight:600;"><span style="color:#007e92;">{{ title }}</span></span></div>
+
+                  <div>&nbsp;</div>
+
+                  <div>
+                    <div>
+                      <div>
+                        <div>
+                          <p tabindex="1"><span style="color:#242424;"><span style="font-size:14px;">{{ authorsList }}</span></span></p>
+
+                          <p tabindex="1">&nbsp;</p>
+
+                          <p tabindex="1"><span style="color:#242424;"><span style="font-size:14px;">{{ abstract }}</span></span></p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                </td>
+              </tr>
+            </table>
+
+          </td>
+        </tr>
+      </table>
+
+      <!--[if (gte mso 9)|(IE)]>
+      </td>
+    <![endif]-->
+      <!--[if (gte mso 9)|(IE)]>
+                  <tr>
+                </table>
+              </center>
+            <![endif]-->
+    </td>
+  </tr>
+</table>
\ No newline at end of file
diff --git a/packages/component-email-templating/src/templates/partials/invUpperContent.hbs b/packages/component-email-templating/src/templates/partials/invUpperContent.hbs
index 2b9dc858cbc000c6aff38dc4905fe8eb40474101..eb2df55d33e780cd4e899d1fe18bde78db05e9be 100644
--- a/packages/component-email-templating/src/templates/partials/invUpperContent.hbs
+++ b/packages/component-email-templating/src/templates/partials/invUpperContent.hbs
@@ -1,13 +1,21 @@
 <table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
   <tr>
-    <td style="padding:30px 23px 20px 23px;background-color:#ffffff;" height="100%" valign="top" bgcolor="#ffffff">
+    <td style="padding:0px 50px 32px 50px;line-height:18px;" height="100%" valign="top" bgcolor="">
       <div>
-        <p data-pm-slice="1 1 []">Dear Dr. {{ toUserName }},</p>
+        <div data-pm-slice="1 1 []"><span style="color:#242424;"><span style="font-size:14px;">
+              Dear Dr. {{ toUserName}},<br>
 
-        <p>&nbsp;</p>
-        <p>{{{ upperContent }}}</p>
-      </div>
+              <div data-pm-slice="1 1 []">&nbsp;</div>
 
+              <div data-pm-slice="1 1 []">
+                <span style="color:#242424;">
+                  <span style="font-size:14px;">
+                    {{{ upperContent }}}
+                    {{{ manuscriptText }}}
+                  </span>
+                </span>
+              </div>
+        </div>
     </td>
   </tr>
 </table>
\ No newline at end of file
diff --git a/packages/component-email-templating/src/templates/partials/signature.hbs b/packages/component-email-templating/src/templates/partials/signature.hbs
index eec0831b8cdc1d3835c9852b1d79c04a8dcce891..4f618fdf6dec8e467624c1255a5b93c874295c48 100644
--- a/packages/component-email-templating/src/templates/partials/signature.hbs
+++ b/packages/component-email-templating/src/templates/partials/signature.hbs
@@ -1,4 +1,5 @@
-<p>Kind regards,
-  <br /> {{ signatureName }}
-  <br /> {{ signatureJournal }}
-</p>
\ No newline at end of file
+<div><span style="font-size:14px;"><span style="color:#242424;">Kind regards,</span></span></div>
+
+<div><span style="font-size:14px;"><span style="color:#242424;">{{ signatureName }}</span></span></div>
+
+<div><span style="font-size:14px;"><span style="color:#242424;">{{ signatureJournal }}</span></span></div>
\ No newline at end of file
diff --git a/packages/component-faraday-selectors/src/index.js b/packages/component-faraday-selectors/src/index.js
index efeb000e0dedeafcf3483df439aa5db903974977..4357f212f14943d1af421790b2f6f225affa8072 100644
--- a/packages/component-faraday-selectors/src/index.js
+++ b/packages/component-faraday-selectors/src/index.js
@@ -1,5 +1,5 @@
 import { selectCurrentUser } from 'xpub-selectors'
-import { get, has, last, chain, some } from 'lodash'
+import { get, has, last, chain, some, isEmpty } from 'lodash'
 
 export const isHEToManuscript = (state, collectionId = '') => {
   const { id = '', isAccepted = false } = chain(state)
@@ -181,6 +181,20 @@ export const canViewEditorialComments = (
   )
 }
 
+const cannotViewResponseFromAuthorStatuses = ['reviewersInvited']
+export const canViewResponseFromAuthor = (state, collection, fragmentId) => {
+  const authorResponseToRevisonRequest = getFragmentAuthorResponse(
+    state,
+    fragmentId,
+  )
+  return (
+    !isEmpty(authorResponseToRevisonRequest) &&
+    !cannotViewResponseFromAuthorStatuses.includes(
+      get(collection, 'status', 'draft'),
+    )
+  )
+}
+
 export const getUserToken = ({ currentUser }) =>
   get(currentUser, 'user.token', '')
 
@@ -251,13 +265,10 @@ export const canMakeRevision = (state, collection = {}, fragment = {}) => {
   )
 }
 
-export const currentUserIsAuthor = (state, id) => {
-  const permissions = getUserPermissions(state)
-
-  return permissions
-    .filter(f => f.role === 'author')
-    .map(p => p.objectId)
-    .includes(id)
+export const currentUserIsAuthor = (state, fragmentId) => {
+  const { id: userId } = selectCurrentUser(state)
+  const authors = get(state, `fragments.${fragmentId}.authors`, [])
+  return !!authors.find(a => a.id === userId)
 }
 
 export const getUserPermissions = ({ teams = [] }) =>
@@ -367,13 +378,17 @@ export const getInvitationsWithReviewersForFragment = (state, fragmentId) =>
 
 export const canMakeHERecommendation = (state, { collection, statuses }) => {
   const validHE = isHEToManuscript(state, get(collection, 'id', ''))
+  if (!validHE) return false
+
   const statusImportance = get(
     statuses,
     `${get(collection, 'status', 'draft')}.importance`,
     1,
   )
 
-  return statusImportance > 1 && statusImportance < 9 && validHE
+  if (!(statusImportance > 1 && statusImportance < 10)) return false
+
+  return true
 }
 
 export const getFragmentAuthorResponse = (state, fragmentId) =>
@@ -387,6 +402,7 @@ export const getFragmentReviewerRecommendations = (state, fragmentId) =>
   getFragmentRecommendations(state, fragmentId).filter(
     r => r.recommendationType === 'review',
   )
+
 const getFragmentEditorialComments = (state, fragmentId) =>
   getFragmentRecommendations(state, fragmentId).filter(
     r => r.recommendationType === 'editorRecommendation',
diff --git a/packages/component-faraday-ui/src/contextualBoxes/HERecommendation.js b/packages/component-faraday-ui/src/contextualBoxes/HERecommendation.js
index 877243b16fc5e34b2cc9b4ccb2593124c031624e..69f2a7b7f2164e0086292d91dfdc1b458621409a 100644
--- a/packages/component-faraday-ui/src/contextualBoxes/HERecommendation.js
+++ b/packages/component-faraday-ui/src/contextualBoxes/HERecommendation.js
@@ -46,6 +46,31 @@ const options = [
   },
 ]
 
+const optionsWhereHECanOnlyReject = [
+  'reviewersInvited',
+  'underReview',
+  'revisionRequested',
+]
+
+const showHEOptions = ({
+  collection,
+  hasReviewerReports,
+  fragment,
+  options,
+  optionsWhereHECanOnlyReject,
+}) => {
+  const { status, fragments } = collection
+  const { invitations } = fragment
+  if (optionsWhereHECanOnlyReject.includes(status)) {
+    return [options[1]]
+  } else if (!hasReviewerReports && fragments.length === 1) {
+    return tail(options)
+  } else if (invitations === []) {
+    return [options[1]]
+  }
+  return options
+}
+
 const parseFormValues = ({ recommendation, ...rest }) => {
   const comments = Object.entries(rest).map(([key, value]) => ({
     content: value,
@@ -65,6 +90,8 @@ const HERecommendation = ({
   handleSubmit,
   hasReviewerReports,
   highlight,
+  collection,
+  fragment,
 }) => (
   <ContextualBox
     highlight={highlight}
@@ -82,7 +109,13 @@ const HERecommendation = ({
           <ValidatedField
             component={input => (
               <Menu
-                options={hasReviewerReports ? options : tail(options)}
+                options={showHEOptions({
+                  collection,
+                  hasReviewerReports,
+                  fragment,
+                  options,
+                  optionsWhereHECanOnlyReject,
+                })}
                 {...input}
               />
             )}
diff --git a/packages/component-invite/src/routes/fragmentsInvitations/emails/emailCopy.js b/packages/component-invite/src/routes/fragmentsInvitations/emails/emailCopy.js
index 4fa53bc160427549bbb802337156979db82669f1..980728e6a79260e8b0a6b73014f0cf9d8ea1dde6 100644
--- a/packages/component-invite/src/routes/fragmentsInvitations/emails/emailCopy.js
+++ b/packages/component-invite/src/routes/fragmentsInvitations/emails/emailCopy.js
@@ -8,22 +8,22 @@ const getEmailCopy = ({
   expectedDate,
   targetUserName,
 }) => {
-  let upperContent, manuscriptText, lowerContent, paragraph
+  let upperContent, manuscriptText, subText, lowerContent, paragraph
   let hasLink = true
   let resend = false
   switch (emailType) {
     case 'reviewer-invitation':
-      upperContent = `${titleText}, has been submitted to ${journalName} for consideration.
+      upperContent = `${titleText}, has been submitted to ${journalName} for consideration.<div>&nbsp;</div>
         As the Academic Editor handling the manuscript, I would be delighted if you would agree to review it and let me know whether you feel it is suitable for publication.`
-      manuscriptText = `If you are able to review the manuscript, I would be grateful if you could submit your
-        report by ${expectedDate}.
-        The manuscript's abstract and author information is below to help you decide. Once you have agreed to review, you will be able to download the full article PDF.`
+      manuscriptText = `If you are able to review the manuscript, I would be grateful if you could <strong>submit your
+        report by ${expectedDate}</strong>.`
+      subText = `The manuscript's abstract and author information is below to help you decide. Once you have agreed to review, you will be able to download the full article PDF.`
       lowerContent = `If a potential conflict of interest exists between yourself and either the authors or
         the subject of the manuscript, please decline to handle the manuscript. If a conflict
         becomes apparent during the review process, please let me know at the earliest possible
         opportunity. For more information about our conflicts of interest policies, please
         see:
-        <a href="https://www.hindawi.com/ethics/#coi">https://www.hindawi.com/ethics/#coi</a>.<br/><br/>`
+        <a style="color:#007e92; text-decoration: none;" href="https://www.hindawi.com/ethics/#coi">https://www.hindawi.com/ethics/#coi</a>.`
       break
     case 'reviewer-resend-invitation':
       resend = true
@@ -64,6 +64,7 @@ const getEmailCopy = ({
     resend,
     hasLink,
     paragraph,
+    subText,
     upperContent,
     lowerContent,
     manuscriptText,
diff --git a/packages/component-invite/src/routes/fragmentsInvitations/emails/invitations.js b/packages/component-invite/src/routes/fragmentsInvitations/emails/invitations.js
index a857bab3b04539463ac7d766a012012b22c8ec0e..e7f45f12db4bb38c1ecf5e20874601872162be9b 100644
--- a/packages/component-invite/src/routes/fragmentsInvitations/emails/invitations.js
+++ b/packages/component-invite/src/routes/fragmentsInvitations/emails/invitations.js
@@ -72,7 +72,7 @@ module.exports = {
 
     let daysExpected = 14
     let emailType = 'reviewer-invitation'
-    let titleText = `A manuscript titled "${title}" by ${authorName} et al.`
+    let titleText = `A manuscript titled <strong>"${title}"</strong> by <strong>${authorName}</strong> et al.`
 
     if (resend) {
       emailType = 'reviewer-resend-invitation'
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index 6d08c78bb1b32a5c536ab1b63b3a1807ab241799..f47d2b1db70a6490611df692ced8a250a9b598cf 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -137,7 +137,7 @@ const ManuscriptLayout = ({
           />
         )}
 
-        {get(authorResponseToRevisonRequest, 'content', false) && (
+        {get(currentUser, 'permissions.canViewResponseFromAuthor', false) && (
           <ResponseToRevisionRequest
             authorReply={get(authorResponseToRevisonRequest, 'content', '')}
             expanded={responseToRevisionRequest}
@@ -226,10 +226,11 @@ const ManuscriptLayout = ({
           )}
 
         {isLatestVersion &&
-          get(currentUser, 'permissions.canMakeHERecommendation', false) &&
-          reviewerRecommendations.length > 0 && (
+          get(currentUser, 'permissions.canMakeHERecommendation', false) && (
             <HERecommendation
+              collection={collection}
               formValues={get(formValues, 'editorialRecommendation', {})}
+              fragment={fragment}
               hasReviewerReports={reviewerRecommendations.length > 0}
               highlight={reviewerRecommendations.length > 0}
               modalKey="heRecommendation"
diff --git a/packages/component-manuscript/src/components/ManuscriptPage.js b/packages/component-manuscript/src/components/ManuscriptPage.js
index 685daeab9d5d245ca9caa4f966bebe64aab6adf7..030805e20e8baeb68ab9919f3cf34379c392ca51 100644
--- a/packages/component-manuscript/src/components/ManuscriptPage.js
+++ b/packages/component-manuscript/src/components/ManuscriptPage.js
@@ -40,6 +40,7 @@ import {
   isHEToManuscript,
   canSubmitRevision,
   canEditManuscript,
+  getVersionOptions,
   canInviteReviewers,
   pendingHEInvitation,
   currentUserIsReviewer,
@@ -48,6 +49,7 @@ import {
   canViewReviewersDetails,
   canViewEditorialComments,
   pendingReviewerInvitation,
+  canViewResponseFromAuthor,
   getFragmentAuthorResponse,
   canOverrideTechnicalChecks,
   authorCanViewReportsDetails,
@@ -56,7 +58,6 @@ import {
   canAuthorViewEditorialComments,
   getFragmentReviewerRecommendations,
   getInvitationsWithReviewersForFragment,
-  getVersionOptions,
 } from 'pubsweet-component-faraday-selectors'
 import {
   handleError,
@@ -198,6 +199,11 @@ export default compose(
             collection,
             match.params.version,
           ),
+          canViewResponseFromAuthor: canViewResponseFromAuthor(
+            state,
+            collection,
+            match.params.version,
+          ),
         },
       },
       isFetchingData: {
diff --git a/packages/component-manuscript/src/components/ReviewsAndReports.js b/packages/component-manuscript/src/components/ReviewsAndReports.js
deleted file mode 100644
index d2efda6e7b5bca2101fa9f7b0dfdbbb7e7a9c8c9..0000000000000000000000000000000000000000
--- a/packages/component-manuscript/src/components/ReviewsAndReports.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { Fragment } from 'react'
-import { head, get } from 'lodash'
-import { connect } from 'react-redux'
-import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
-import { withRouter } from 'react-router-dom'
-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 {
-  selectReviewers,
-  currentUserIsReviewer,
-  getCollectionReviewers,
-  selectFetchingReviewers,
-} from 'pubsweet-components-faraday/src/redux/reviewers'
-import { selectReviewRecommendations } from 'pubsweet-components-faraday/src/redux/recommendations'
-import {
-  canViewReports,
-  currentUserIsAuthor,
-} from 'pubsweet-component-faraday-selectors'
-
-import { Tabs, Expandable } from '../molecules'
-import { ReviewReportCard, ReviewerReportForm, ReviewReportsList } from './'
-
-const getTabSections = (collectionId, reviewers, recommendations = []) => [
-  {
-    key: 1,
-    label: 'Reviewers Details',
-    content: (
-      <ReviewersDetailsList collectionId={collectionId} reviewers={reviewers} />
-    ),
-  },
-  {
-    key: 2,
-    label: 'Reviewer Reports',
-    content: <ReviewReportsList recommendations={recommendations} showBorder />,
-  },
-]
-
-const ReviewsAndReports = ({
-  project,
-  version,
-  isAuthor,
-  isReviewer,
-  mappedReviewers,
-  mappedRecommendations,
-  canViewReports,
-  reviewerRecommendation,
-  recommendations = [],
-}) => (
-  <Fragment>
-    {canViewReports && (
-      <Root id="reviews-and-reports">
-        <Expandable
-          label="Reviewers & Reports"
-          rightHTML={
-            <ReviewerBreakdown
-              collectionId={project.id}
-              versionId={version.id}
-            />
-          }
-          startExpanded
-        >
-          <Tabs
-            activeKey={1}
-            sections={getTabSections(
-              project.id,
-              mappedReviewers(),
-              mappedRecommendations(),
-            )}
-          />
-        </Expandable>
-      </Root>
-    )}
-    {isReviewer && (
-      <Root id="reviewer-report">
-        <Expandable label="Your Report" startExpanded>
-          {get(reviewerRecommendation, 'submittedOn') ? (
-            <ReviewReportCard report={reviewerRecommendation} />
-          ) : (
-            <ReviewerReportForm
-              modalKey={`review-${project.id}`}
-              project={project}
-              review={reviewerRecommendation}
-              version={version}
-            />
-          )}
-        </Expandable>
-      </Root>
-    )}
-    {isAuthor &&
-      !!recommendations.length && (
-        <Root id="review-reports">
-          <Expandable label="Reports" startExpanded>
-            <ReviewReportsList recommendations={recommendations} showBorder />
-          </Expandable>
-        </Root>
-      )}
-  </Fragment>
-)
-
-export default compose(
-  withRouter,
-  connect(
-    (state, { project, version }) => ({
-      reviewers: selectReviewers(state),
-      fetchingReviewers: selectFetchingReviewers(state),
-      isReviewer: currentUserIsReviewer(state, version.id),
-      isAuthor: currentUserIsAuthor(state, version.id),
-      recommendations: selectReviewRecommendations(state, version.id),
-      canViewReports: canViewReports(state, project.id),
-    }),
-    { getCollectionReviewers },
-  ),
-  withHandlers({
-    getReviewers: ({ project, version, getCollectionReviewers }) => () => {
-      getCollectionReviewers(project.id, version.id)
-    },
-    mappedRecommendations: ({ recommendations, reviewers }) => () =>
-      recommendations.filter(r => r.submittedOn).map(r => ({
-        ...r,
-        user: reviewers.find(user => user.userId === r.userId),
-      })),
-    mappedReviewers: ({ recommendations, reviewers }) => () =>
-      reviewers.map(r => ({
-        ...r,
-        review: recommendations.find(rec => rec.userId === r.userId),
-      })),
-  }),
-  withProps(({ recommendations = [] }) => ({
-    review: head(recommendations),
-    report: head(recommendations.filter(r => r.submittedOn)),
-    reviewerRecommendation: head(recommendations),
-  })),
-  lifecycle({
-    componentDidMount() {
-      const { getReviewers, canViewReports } = this.props
-      canViewReports && getReviewers()
-    },
-    componentWillReceiveProps(nextProps) {
-      const { match, canViewReports, getReviewers } = this.props
-      const version = get(match, 'params.version')
-      const nextVersion = get(nextProps, 'match.params.version')
-      if (version !== nextVersion) {
-        canViewReports && getReviewers()
-      }
-    },
-  }),
-)(ReviewsAndReports)
-
-// #region styled-components
-const Root = styled.div`
-  background-color: ${th('colorBackground')};
-  margin-top: calc(${th('subGridUnit')} * 2);
-  transition: height 0.3s;
-`
-// #endregion
diff --git a/packages/component-manuscript/src/components/index.js b/packages/component-manuscript/src/components/index.js
index 66110b8f2c43889c5e29cf262f7c92649f0d6434..1afadcd39c73e96ab282ac07a1ca105b73d5e575 100644
--- a/packages/component-manuscript/src/components/index.js
+++ b/packages/component-manuscript/src/components/index.js
@@ -7,7 +7,6 @@ export { default as EditorialComment } from './EditorialComment'
 export { default as ReviewReportCard } from './ReviewReportCard'
 export { default as ManuscriptLayout } from './ManuscriptLayout'
 export { default as ManuscriptVersion } from './ManuscriptVersion'
-export { default as ReviewsAndReports } from './ReviewsAndReports'
 export { default as EditorialComments } from './EditorialComments'
 export { default as ReviewReportsList } from './ReviewReportsList'
 export { default as ReviewerReportForm } from './ReviewerReportForm'
diff --git a/packages/xpub-faraday/app/config/journal/metadata.js b/packages/xpub-faraday/app/config/journal/metadata.js
index 53b24176cff0e81615316cbebe0bb48aedfdac6d..f9aaac8bdc6300c762bf2aebaaa036ca1118a4d8 100644
--- a/packages/xpub-faraday/app/config/journal/metadata.js
+++ b/packages/xpub-faraday/app/config/journal/metadata.js
@@ -15,11 +15,11 @@ module.exports = {
   },
   emailData: {
     logo:
-      'https://marketing-image-production.s3.amazonaws.com/uploads/bb39b20cf15e52c1c0933676e25f2b2402737c6560b8098c204ad6932b84eb2058804376dbc4db138c7a21dcaed9325bde36185648afac5bc97e3d73d4e12718.png',
+      'https://marketing-image-production.s3.amazonaws.com/uploads/8b619585c638a71cd1b893af6b223ecc6d309d35d3f6f38693c3da85a8de453126f41fab7c69550b6dece236c1914a140738f210ba6cc73d7616b310bf943243.png',
     ctaColor: '#63a945',
     logoLink: 'https://hindawi.com',
     privacy:
-      'Hindawi respects your right to privacy. Please see our <a href="https://www.hindawi.com/privacy/">privacy policy</a> for information on how we store, process, and safeguard your data.',
+      'Hindawi respects your right to privacy. Please see our <a style="color: #007e92; text-decoration: none;" href="https://www.hindawi.com/privacy/">privacy policy</a> for information on how we store, process, and safeguard your data.',
     address:
       'Hindawi Limited, 3rd Floor, Adam House, 1 Fitzroy Square, London, W1T 5HF, United Kingdom',
     publisher: 'Hindawi Limited',