refactor(theme): add theme to wizard WIP

packages/component-wizard/src/components/AutosaveIndicator.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { compose, withProps } from 'recompose'
 // import { Icon, Spinner } from '@pubsweet/ui'
 import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
 import { getFormValues } from 'redux-form'
 
 import Spinner from 'pubsweet-components-faraday/src/components/UIComponents/Spinner'
@@ -23,6 +23,7 @@ const Indicator = ({
   errorText = 'Changes not saved',
   successText,
   autosave: { isFetching, error, lastUpdate },
+  theme,
 }) =>
   isVisibile ? (
     <Root>
@@ -46,11 +47,11 @@ const Indicator = ({
         error && (
           <AutoSaveContainer>
             <IconContainer>
-              <Icon color="var(--color-danger)" size={16}>
+              <Icon color={theme.colorError} size={16}>
                 alert-triangle
               </Icon>
             </IconContainer>
-            <Info error="var(--color-danger)" title={error}>
+            <Info error={theme.colorError} title={error}>
               {errorText}
             </Info>
           </AutoSaveContainer>
@@ -66,8 +67,10 @@ export default compose(
   withProps(({ autosave: { isFetching, error, lastUpdate }, form }) => ({
     isVisibile: form && Boolean(isFetching || lastUpdate || error),
   })),
+  withTheme,
 )(Indicator)
 
+// #region styles
 const Root = styled.div`
   align-items: center;
   display: flex;
@@ -88,3 +91,4 @@ const Info = styled.span`
   margin-left: 5px;
   color: ${({ error }) => error || ''};
 `
+// #endregion

packages/component-wizard/src/components/WizardStep.js

@@ -84,28 +84,32 @@ export default ({
     <AutosaveIndicator />
   </Root>
 )
-
+// #region styles
 const Root = styled.div`
   align-items: stretch;
-  border: 1px solid var(--color-pending);
+  border: ${({ theme }) => theme.borderDefault};
+  border-radius: ${({ theme }) => theme.borderRadius};
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  padding: 0 20px;
   width: ${({ width }) => width || '700px'};
+  background-color: ${({ theme }) => theme.colorTextReverse};
 `
 
 const FormContainer = styled.form`
   display: flex;
   flex-direction: column;
+  padding: 20px 40px;
 `
-const Title = styled.h3`
+const Title = styled.h5`
   align-self: center;
+  font-size: ${({ theme }) => theme.fontSizeHeading5};
+  margin-bottom: 10px;
 `
 
 const Subtitle = styled.div`
   align-self: center;
-  margin-bottom: 25px;
+  margin-bottom: 30px;
 `
 
 const ButtonContainer = styled.div`
@@ -113,7 +117,7 @@ const ButtonContainer = styled.div`
   align-self: center;
   display: flex;
   justify-content: space-around;
-  margin: 15px 0;
+  margin: 40px 0 20px;
   width: ${({ width }) => width || '400px'};
 `
 
@@ -128,3 +132,4 @@ const ModalContainer = styled.div`
   right: 0;
   top: 0;
 `
+// #endregion

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

 import React from 'react'
+import styled from 'styled-components'
+import uploadFileFn from 'xpub-upload'
 import { AbstractEditor, TitleEditor } from 'xpub-edit'
 import { Menu, CheckboxGroup, YesOrNo, TextField } from '@pubsweet/ui'
-import uploadFileFn from 'xpub-upload'
 import { required, minChars, minSize } from 'xpub-validators'
 import { AuthorList, Files } from 'pubsweet-components-faraday/src/components'
 
@@ -18,22 +19,29 @@ import {
 const min3Chars = minChars(3)
 const declarationsMinSize = minSize(declarations.options.length)
 
+// #region styles
+const StyledLabel = styled.label`
+  display: inline-block;
+  font-weight: bold;
+  margin-bottom: ${({ margin }) => margin || '5px'};
+  margin-top: ${({ margin }) => margin || '5px'};
+`
+
+const StyledSpacing = styled.div`
+  width: 100%;
+  height: 15px;
+`
+// #endregion
+
 const yesNoWithLabel = ({ label, ...rest }) => (
   <div>
-    <label style={{ display: 'inline-block', marginBottom: 5, marginTop: 5 }}>
-      {label}
-    </label>
+    <StyledLabel>{label}</StyledLabel>
     <YesOrNo {...rest} />
   </div>
 )
-const Spacing = () => <div style={{ width: '100%', height: '15px' }} />
-const Label = ({ label }) => (
-  <label
-    style={{ display: 'inline-block', marginTop: '15px', marginBottom: '5px' }}
-  >
-    <b>{label}</b>
-  </label>
-)
+const Spacing = () => <StyledSpacing />
+const Label = ({ label }) => <StyledLabel margin="15px">{label}</StyledLabel>
+
 const journal = {
   label: 'Hindawi Faraday',
   value: 'hindawi-faraday',
@@ -69,6 +77,10 @@ export default {
           value: journal.value,
           validate: [required],
         },
+        {
+          fieldId: 'spacing-journal',
+          renderComponent: Spacing,
+        },
         {
           fieldId: 'label-Issue',
           renderComponent: Label,
@@ -100,7 +112,7 @@ export default {
       label: 'Manuscript & Authors Details',
       title: '3. Manuscript & Authors Details',
       subtitle:
-        'Please provide the details of all the authors of this manuscript....',
+        'Please provide the details of all the authors of this manuscript, in the order that they appear on the manuscript. Your details are already pre-filled since, in order tu submit a manuscript you must be one of the authors',
       children: [
         {
           fieldId: 'metadata.title',