feat(footer): add footer

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

+import React from 'react'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+import { ActionLink, Row, Text } from './'
+
+const Footer = () => (
+  <Root alignItems="center" justify="center">
+    <ActionLink to="https://hindawi.com">Hindawi</ActionLink>
+    <ActionLink ml={4} to="https://www.hindawi.com/privacy/">
+      Privacy Policy
+    </ActionLink>
+    <ActionLink ml={4} to="https://www.hindawi.com/terms/">
+      Terms of Service
+    </ActionLink>
+    <Text ml={4} secondary>
+      {`Support: `}
+      <ActionLink to="https://hindawi.com">bca@hindawi.com</ActionLink>
+    </Text>
+  </Root>
+)
+
+export default Footer
+
+const Root = styled(Row)`
+  background-color: ${th('colorBackground')};
+  border-top: 1px solid ${th('colorFurniture')};
+  height: calc(${th('gridUnit')} * 5);
+
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+  z-index: ${th('appBar.zIndex')};
+`

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

@@ -18,6 +18,7 @@ export { default as DragHandle } from './DragHandle'
 export { default as DownloadZipFiles } from './DownloadZipFiles'
 export { default as FileItem } from './File'
 export { default as FileSection } from './FileSection'
+export { default as Footer } from './Footer'
 export { default as IconButton } from './IconButton'
 export { default as IconCard } from './IconCard'
 export { default as IconTooltip } from './IconTooltip'

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

 import React, { Fragment } from 'react'
-import { isEmpty, get, last } from 'lodash'
 import styled from 'styled-components'
+import { isEmpty, get, last } from 'lodash'
 import {
   Text,
   RemoteOpener,
@@ -9,6 +9,7 @@ import {
   ManuscriptMetadata,
   ManuscriptDetailsTop,
   ManuscriptEicDecision,
+  paddingHelper,
 } from 'pubsweet-component-faraday-ui'
 
 const eicDecisions = [
@@ -41,7 +42,7 @@ const ManuscriptLayout = ({
   isFetching,
   formValues,
 }) => (
-  <Root>
+  <Root pb={1}>
     {!isEmpty(collection) && !isEmpty(fragment) ? (
       <RemoteOpener>
         {(expanded, toggle) => (
@@ -112,5 +113,6 @@ export default ManuscriptLayout
 const Root = styled.div`
   overflow-y: auto;
   min-height: 50vh;
+  ${paddingHelper};
 `
 // #endregion

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

@@ -56,7 +56,7 @@ export default compose(
 
 // #region styles
 const Root = styled.div`
-  height: calc(100vh - ${th('gridUnit')} * 21);
+  max-height: calc(100vh - ${th('gridUnit')} * 23);
   overflow-y: auto;
   padding-right: ${th('gridUnit')};
   overflow-x: hidden;

packages/xpub-faraday/app/FaradayApp.js

@@ -12,6 +12,7 @@ import {
   AppBar,
   AppBarMenu,
   AutosaveIndicator,
+  Footer,
 } from 'pubsweet-component-faraday-ui'
 import { userNotConfirmed } from 'pubsweet-component-faraday-selectors'
 import { createDraftSubmission } from 'pubsweet-component-wizard/src/redux/conversion'
@@ -55,6 +56,7 @@ const App = ({
     >
       {children}
     </MainContainer>
+    <Footer />
   </Root>
 )
 
@@ -91,21 +93,25 @@ const Root = styled.div`
 const appBarPaddingHelper = props =>
   props.canCreateDraft
     ? css`
-        padding: calc(${th('appBar.height')} + ${th('gridUnit')})
-          calc(${th('gridUnit')} * 12) calc(${th('gridUnit')} * 2);
+        padding-top: calc(${th('appBar.height')});
+        padding-right: calc(${th('gridUnit')} * 12);
+        padding-left: calc(${th('gridUnit')} * 12);
+        padding-bottom: calc(${th('gridUnit')} * 5);
 
         @media (max-width: 1200px) {
-          padding: calc(${th('appBar.height')} + ${th('gridUnit')})
-            calc(${th('gridUnit')} * 2) calc(${th('gridUnit')} * 2);
+          padding-right: calc(${th('gridUnit')} * 2);
+          padding-left: calc(${th('gridUnit')} * 2);
         }
       `
     : css`
-        padding: calc(${th('appBar.height')} + ${th('gridUnit')} * 4)
-          calc(${th('gridUnit')} * 12) calc(${th('gridUnit')} * 2);
+        padding-top: calc(${th('appBar.height')} + ${th('gridUnit')} * 3);
+        padding-right: calc(${th('gridUnit')} * 12);
+        padding-left: calc(${th('gridUnit')} * 12);
+        padding-bottom: calc(${th('gridUnit')} * 5);
 
         @media (max-width: 1200px) {
-          padding: calc(${th('appBar.height')} + ${th('gridUnit')} * 4)
-            calc(${th('gridUnit')} * 2) calc(${th('gridUnit')} * 2);
+          padding-right: calc(${th('gridUnit')} * 2);
+          padding-left: calc(${th('gridUnit')} * 2);
         }
       `