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

packages/components-faraday/src/components/AuthorList/Author.js

@@ -30,12 +30,12 @@ export default ({
         <ButtonContainer>
           {!isSubmitting && (
             <ClickableIcon onClick={removeAuthor(email)} title="Delete author">
-              <Icon size={18}>trash</Icon>
+              <Icon size={3}>trash</Icon>
             </ClickableIcon>
           )}
           {editedAuthor < 0 && (
             <ClickableIcon onClick={setAuthorEdit(index)} title="Edit author">
-              <Icon size={18}>edit-2</Icon>
+              <Icon size={3}>edit-2</Icon>
             </ClickableIcon>
           )}
         </ButtonContainer>

packages/components-faraday/src/components/AuthorList/AuthorAdder.js

@@ -60,7 +60,7 @@ const AuthorAdder = ({
               Save
             </Button>
           ) : (
-            <Spinner />
+            <Spinner size={3} />
           )}
         </ButtonsContainer>
       </FormBody>

packages/components-faraday/src/components/AuthorList/AuthorEditor.js

@@ -51,14 +51,14 @@ const AuthorEdit = ({
 
       <ButtonsContainer>
         <ClickableIcon onClick={setAuthorEdit(-1)}>
-          <Icon size={18}>x-circle</Icon>
+          <Icon size={3}>x-circle</Icon>
         </ClickableIcon>
         {!isFetching ? (
           <ClickableIcon onClick={handleSubmit}>
-            <Icon size={18}>check-circle</Icon>
+            <Icon size={3}>check-circle</Icon>
           </ClickableIcon>
         ) : (
-          <Spinner />
+          <Spinner size={3} />
         )}
       </ButtonsContainer>
     </Header>

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

@@ -38,11 +38,11 @@ export const Label = ({ label, value }) => (
 
 export const DragHandle = withTheme(({ theme }) => (
   <DragHandleRoot>
-    <Icon color={theme.colorFurniture}>chevron_up</Icon>
-    <Icon color={theme.colorFurniture} size={16}>
+    <Icon color={theme.colorPrimary}>chevron_up</Icon>
+    <Icon color={theme.colorPrimary} size={3}>
       menu
     </Icon>
-    <Icon color={theme.colorFurniture}>chevron_down</Icon>
+    <Icon color={theme.colorPrimary}>chevron_down</Icon>
   </DragHandleRoot>
 ))
 

packages/components-faraday/src/components/Files/FileItem.js

 import React from 'react'
 import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
 
 const parseFileSize = size => {
   const kbSize = size / 1000
@@ -24,9 +24,10 @@ const FileItem = ({
   id,
   removeFile,
   previewFile,
+  theme,
   ...rest
 }) => (
-  <Root>
+  <Root data-test={`file-${id}`}>
     {dragHandle}
     <Info>
       <span>{name}</span>
@@ -34,16 +35,20 @@ const FileItem = ({
     </Info>
     <Buttons>
       <button onClick={previewFile(id)}>
-        <Icon color="#666">eye</Icon>
+        <Icon color={theme.colorPrimary} size={3}>
+          eye
+        </Icon>
       </button>
       <button onClick={removeFile(id)} title="Delete">
-        <Icon color="#666">trash-2</Icon>
+        <Icon color={theme.colorPrimary} size={3}>
+          trash-2
+        </Icon>
       </button>
     </Buttons>
   </Root>
 )
 
-export default FileItem
+export default withTheme(FileItem)
 
 // #region styles
 const Root = styled.div`

packages/components-faraday/src/components/Files/FileSection.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { Icon } from '@pubsweet/ui'
+import { Icon, Spinner, th } from '@pubsweet/ui'
 import styled, { withTheme } from 'styled-components'
 import { DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { compose, getContext, withHandlers, withState } from 'recompose'
-import {
-  SortableList,
-  Spinner,
-} from 'pubsweet-components-faraday/src/components'
+import { SortableList } from 'pubsweet-components-faraday/src/components'
 
 import FileItem from './FileItem'
 import FilePicker from './FilePicker'
 
 const DragHandle = withTheme(({ theme }) => (
   <Handle>
-    <Icon color={theme.colorBorder} size={14}>
+    <Icon color={theme.colorPrimary} size={3}>
       chevron_up
     </Icon>
-    <Icon color={theme.colorBorder} size={10}>
+    <Icon color={theme.colorPrimary} size={3}>
       menu
     </Icon>
-    <Icon color={theme.colorBorder} size={14}>
+    <Icon color={theme.colorPrimary} size={3}>
       chevron_down
     </Icon>
   </Handle>
@@ -198,15 +195,15 @@ export default compose(
 
 // #region styles
 const Error = styled.span`
-  color: ${({ theme }) => theme.colorError};
-  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
-  margin-right: 5px;
+  color: ${th('colorError')};
+  font-size: ${th('fontSizeBaseSmall')};
+  margin-right: ${th('subGridUnit')};
 `
 
 const UploadButton = styled.div`
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
-  margin-left: 5px;
+  margin-left: ${th('subGridUnit')};
 `
 
 const PickerContainer = styled.div`
@@ -216,7 +213,7 @@ const PickerContainer = styled.div`
 `
 
 const Title = styled.span`
-  margin: 5px;
+  margin: ${th('subGridUnit')};
   text-transform: uppercase;
 `
 
@@ -227,7 +224,7 @@ const Header = styled.div`
 `
 
 const DropSection = styled.div`
-  border: ${({ theme }) => theme.borderDefault};
+  border: ${th('borderDefault')};
   border-top: ${({ isFirst, theme }) =>
     isFirst ? theme.borderDefault : 'none'};
   border-bottom: ${({ isLast, theme }) =>
@@ -236,18 +233,21 @@ const DropSection = styled.div`
     over ? theme.colorSecondary : theme.backgroundColorReverse};
   display: flex;
   flex-direction: column;
-  padding: 5px;
+  padding: ${th('subGridUnit')};
 `
 
 const Handle = styled.div`
   align-items: center;
-  border-right: ${({ theme }) => theme.borderDefault};
+  border-right: ${th('borderDefault')};
   cursor: move;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-right: 10px;
-  padding: 3px;
+  margin-right: calc(${th('subGridUnit')}*2);
+  padding: calc(${th('subGridUnit')}/2);
+  span {
+    padding: 0;
+  }
 `
 
 const InfoContainer = styled.div`
@@ -255,11 +255,11 @@ const InfoContainer = styled.div`
   display: flex;
   height: 60px;
   justify-content: center;
-  margin: 10px 0;
+  margin: calc(${th('subGridUnit')}*2) 0;
 
   span {
-    color: ${({ theme }) => theme.colorTextPlaceholder};
-    font-size: ${({ theme }) => theme.themefontSizeBaseSmall};
+    color: ${th('colorTextPlaceholder')};
+    font-size: ${th('fontSizeBaseSmall')};
   }
 `
 // #endregion

packages/components-faraday/src/components/Steps/Steps.js

 import React from 'react'
 import PropTypes from 'prop-types'
+import { th } from '@pubsweet/ui'
 import styled, { css } from 'styled-components'
 import { compose, withHandlers, setDisplayName } from 'recompose'
 
 const Separator = styled.div`
-  background-color: #000;
+  background-color: ${th('colorPrimary')};
   flex: 1;
   height: 2px;
 `
 
 const StyledStep = styled.div`
   align-items: center;
-  border: 2px solid #000;
+  border: ${th('borderDefault')};
   border-radius: 50%;
   display: flex;
-  height: 16px;
   justify-content: center;
   position: relative;
-  width: 16px;
+  height: calc(${th('subGridUnit')} * 3);
+  width: calc(${th('subGridUnit')} * 3);
 `
 
 const bulletStyle = css`
-  background-color: #000;
+  background-color: ${th('colorPrimary')};
   border-radius: 50%;
-  height: 10px;
-  width: 10px;
+  height: calc(${th('subGridUnit')} * 2);
+  width: calc(${th('subGridUnit')} * 2);
 `
 
 const Bullet = styled.div`
@@ -34,16 +35,17 @@ const Bullet = styled.div`
 const Success = styled.div`
   ${bulletStyle};
   align-items: center;
-  color: #fff;
+  color: ${th('colorBackground')};
   display: flex;
-  font-size: 12px;
-  height: 18px;
+  font-size: ${th('fontSizeBaseSmall')};
+  height: ${th('fontSizeBase')};
   justify-content: center;
-  width: 18px;
+  width: ${th('fontSizeBase')};
 `
 
 const StepTitle = styled.span`
-  font-size: 0.9em;
+  font-size: ${th('fontSizeBaseSmall')};
+  line-height: ${th('fontSizeBaseSmall')};
   left: -45px;
   position: absolute;
   text-align: center;

packages/xpub-faraday/app/config/journal/submit-wizard.js

 import React from 'react'
 import styled from 'styled-components'
 import uploadFileFn from 'xpub-upload'
-import { TitleEditor } from 'xpub-edit'
+import { AbstractEditor, TitleEditor } from 'xpub-edit'
 import { Menu, YesOrNo, TextField } from '@pubsweet/ui'
 import { required, minChars, minSize } from 'xpub-validators'
 import {
@@ -142,7 +142,7 @@ export default {
         },
         {
           fieldId: 'metadata.abstract',
-          renderComponent: TitleEditor,
+          renderComponent: AbstractEditor,
           title: 'Abstract',
           placeholder: 'Write an abstract',
           validate: [requiredBasedOnType],

packages/xpub-faraday/package.json

@@ -27,7 +27,7 @@
     "pubsweet": "^1.1.1",
     "pubsweet-client": "^2.2.2",
     "pubsweet-component-invite": "^0.0.1",
-    "pubsweet-component-login": "^1.0.1",
+    "pubsweet-component-login": "^1.1.0",
     "pubsweet-component-signup": "^1.0.0",
     "pubsweet-component-xpub-manuscript": "^0.0.3",
     "pubsweet-server": "^1.0.1",

yarn.lock

@@ -8102,12 +8102,11 @@ pubsweet-client@^2.2.2:
     styled-components "^2.4.0"
     styled-normalize "^3.0.1"
 
-pubsweet-component-login@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/pubsweet-component-login/-/pubsweet-component-login-1.0.1.tgz#49ca1dd02cd56e4169af875465a655ee88736989"
+pubsweet-component-login@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pubsweet-component-login/-/pubsweet-component-login-1.1.0.tgz#037b666863ae44c5fcde0d4b02e23b8a53f0d104"
   dependencies:
     prop-types "^15.5.10"
-    react-bootstrap "^0.32.0"
     react-redux "^5.0.6"
     react-router-dom "^4.2.2"
     react-router-redux "^5.0.0-alpha.9"