diff --git a/.dockerignore b/.dockerignore index 21bbccd4cfd9cafb1f89b7d06d8a72cc22b4d1b7..6e094f43da8346f17b328cf0fa502ea23a573d7f 100644 --- a/.dockerignore +++ b/.dockerignore @@ -3,3 +3,4 @@ packages/*/node_modules packages/**/*.env packages/**/.env packages/**/config/local*.* +packages/xpub-faraday/now diff --git a/packages/component-submit/src/components/SubmitPage.js b/packages/component-submit/src/components/SubmitPage.js index 9b75840b64bbef630ac9b773896454b17f32b25b..05ea2453e3bc1b6dc878c3c8beebe25066c43b30 100644 --- a/packages/component-submit/src/components/SubmitPage.js +++ b/packages/component-submit/src/components/SubmitPage.js @@ -9,8 +9,6 @@ import { selectCollection, selectFragment } from 'xpub-selectors' import Submit from './Submit' const onSubmit = (values, dispatch, { history, project, version }) => - // console.log('submit', values) - dispatch( actions.updateFragment(project, { id: version.id, diff --git a/packages/components-faraday/src/components/AppBar/AppBar.js b/packages/components-faraday/src/components/AppBar/AppBar.js index 6487709111b0448388cafc40e44c0647dbbfbe59..a8161513b9a708c9c157fbd7d47f22077dadbc40 100644 --- a/packages/components-faraday/src/components/AppBar/AppBar.js +++ b/packages/components-faraday/src/components/AppBar/AppBar.js @@ -2,7 +2,7 @@ import React from 'react' import { get } from 'lodash' import { Icon } from '@pubsweet/ui' import { connect } from 'react-redux' -import styled from 'styled-components' +import styled, { withTheme } from 'styled-components' import { withRouter } from 'react-router-dom' import { withState, withHandlers, compose } from 'recompose' @@ -14,6 +14,7 @@ const AppBar = ({ goTo, currentUser, onLogoutClick, + theme, }) => ( <Root> {React.cloneElement(brand, { @@ -22,11 +23,11 @@ const AppBar = ({ {user && ( <User> <div onClick={toggleMenu}> - <Icon color="#667080">user</Icon> + <Icon color={theme.colorPrimary}>user</Icon> <span> {get(user, 'firstName') || get(user, 'username') || 'User'} </span> - <Icon color="#667080">chevron-down</Icon> + <Icon color={theme.colorPrimary}>chevron-down</Icon> </div> {expanded && ( <Dropdown> @@ -48,10 +49,11 @@ const AppBar = ({ // #region styled-components const Root = styled.div` align-items: center; - box-shadow: 0 1px 0 0 #667080; + box-shadow: ${props => props.theme.dropShadow}; + font-family: ${props => props.theme.fontInterface}; display: flex; justify-content: space-between; - height: 60px; + height: 40px; padding: 10px 20px; ` @@ -59,7 +61,7 @@ const User = styled.div` align-items: center; display: flex; justify-content: space-between; - height: 80px; + height: 40px; position: relative; > div:first-child { @@ -69,37 +71,38 @@ const User = styled.div` } & span { - color: #667080; - font-family: Helvetica; - font-size: 16px; + color: ${props => props.theme.colorPrimary}; + font-family: ${props => props.theme.fontHeading}; + font-size: ${props => props.theme.fontSizeBase}; margin-left: 10px; } ` const Dropdown = styled.div` - background-color: #fff; - border: 1px solid #667080; + background-color: ${props => props.theme.backgroundColor || '#fff'}; + border: ${({ theme }) => + `${theme.borderWidth} ${theme.borderStyle} ${theme.colorFurniture}`}; position: absolute; min-width: 150px; right: 0; - top: 80px; + top: 50px; z-index: 10; ` const DropdownOption = styled.div` align-items: center; - color: #667080; + color: ${props => props.theme.colorPrimary}; cursor: pointer; display: flex; justify-content: flex-start; height: 34px; - font-family: Helvetica; - font-size: 14px; - line-height: 2.43; - padding-left: 15px; + font-family: ${props => props.theme.fontInterface}; + font-size: ${props => props.theme.fontSizeBaseSmall}; + line-height: ${props => props.theme.fontLineHeight}; + padding: 0 15px; &:hover { - background-color: #d8d8d8; + background-color: ${props => props.theme.colorTextReverse || '#d8d8d8'}; } ` @@ -115,6 +118,7 @@ const ToggleOverlay = styled.div` export default compose( withRouter, + withTheme, connect(state => ({ currentUser: get(state, 'currentUser.user'), })), diff --git a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js index a229db588ca6dff1839081c6c2d0536b466a613f..2c96b13ca6dadb09192d6e2d3826d54ccb0c99ad 100644 --- a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js +++ b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js @@ -1,20 +1,27 @@ -import React from 'react' -import { compose } from 'recompose' +import React, { Fragment } from 'react' +import { pick } from 'lodash' import { Icon } from '@pubsweet/ui' import { connect } from 'react-redux' import styled from 'styled-components' -import { reduxForm } from 'redux-form' +import { compose, withHandlers, withProps } from 'recompose' +import { reduxForm, Field, change as changeForm } from 'redux-form' import countries from './countries' import { Spinner } from '../UIComponents' import { getAuthorFetching } from '../../redux/authors' import { ValidatedTextField, MenuItem } from './FormItems' -const emailRegex = new RegExp(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/) +const emailRegex = new RegExp( + /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i, //eslint-disable-line +) const emailValidator = value => emailRegex.test(value) ? undefined : 'Invalid email' +const renderCheckbox = ({ input }) => ( + <input checked={input.value} type="checkbox" {...input} /> +) + const AuthorEdit = ({ isFetching, setAuthorEdit, @@ -23,19 +30,23 @@ const AuthorEdit = ({ index, isSubmitting, isCorresponding, - setAsCorresponding, email, + changeCorresponding, }) => ( <Root> <Header> <TitleContainer> <span>{parseAuthorType(isSubmitting, isCorresponding, index)}</span> - <input - checked={isCorresponding} - onChange={setAsCorresponding(email)} - type="checkbox" - /> - <label>Corresponding</label> + {!isSubmitting && ( + <Fragment> + <Field + component={renderCheckbox} + name="edit.isCorresponding" + onChange={changeCorresponding(email)} + /> + <label>Corresponding</label> + </Fragment> + )} </TitleContainer> <ButtonsContainer> @@ -76,9 +87,34 @@ const AuthorEdit = ({ ) export default compose( - connect(state => ({ - isFetching: getAuthorFetching(state), + connect( + state => ({ + isFetching: getAuthorFetching(state), + }), + { changeForm }, + ), + withProps(props => ({ + initialValues: { + edit: pick(props, [ + 'isCorresponding', + 'firstName', + 'lastName', + 'middleName', + 'email', + 'affiliation', + 'country', + ]), + }, })), + withHandlers({ + changeCorresponding: ({ changeForm, setAsCorresponding }) => email => ( + evt, + newValue, + ) => { + setAsCorresponding(email)() + changeForm('edit', 'edit.isCorresponding', newValue) + }, + }), reduxForm({ form: 'edit', onSubmit: ( @@ -113,7 +149,6 @@ const TitleContainer = styled.div` font-family: Helvetica; font-size: 14px; font-weight: 600; - margin-right: 20px; text-align: left; } diff --git a/packages/components-faraday/src/components/AuthorList/AuthorList.js b/packages/components-faraday/src/components/AuthorList/AuthorList.js index cb70a7af07386608e5d61b0a53c68fdfd2e3fea2..76d504e8422ae749f454ab140913c01c3d15c4b5 100644 --- a/packages/components-faraday/src/components/AuthorList/AuthorList.js +++ b/packages/components-faraday/src/components/AuthorList/AuthorList.js @@ -124,10 +124,15 @@ export default compose( setFormAuthors(newAuthors) }, setAsCorresponding: ({ authors, setFormAuthors }) => authorEmail => () => { - const newAuthors = authors.map(a => ({ - ...a, - isCorresponding: a.isSubmitting || a.email === authorEmail, - })) + const newAuthors = authors.map( + a => + a.email === authorEmail + ? { + ...a, + isCorresponding: !a.isCorresponding, + } + : { ...a, isCorresponding: false }, + ) setFormAuthors(newAuthors) }, }), diff --git a/packages/components-faraday/src/components/AuthorList/FormItems.js b/packages/components-faraday/src/components/AuthorList/FormItems.js index 183fcebcf18d6532ee00a0096fd98de30aee3bec..440860bad801b3898b51cc715b9952ac4e3ac107 100644 --- a/packages/components-faraday/src/components/AuthorList/FormItems.js +++ b/packages/components-faraday/src/components/AuthorList/FormItems.js @@ -52,7 +52,7 @@ const LabelContainer = styled.div` display: flex; flex-direction: column; margin: 5px; - width: ${({ width }) => `${width || 225}px`}; + width: ${({ width }) => `${width || 175}px`}; span:first-child { font-size: 14px; diff --git a/packages/components-faraday/src/components/AuthorList/FormItems.local.scss b/packages/components-faraday/src/components/AuthorList/FormItems.local.scss index 1a2e5c0fece6c01f212a10b11d0039241e8f6a08..32f8b5a088539b63a97c02402affc2fac1e8d073 100644 --- a/packages/components-faraday/src/components/AuthorList/FormItems.local.scss +++ b/packages/components-faraday/src/components/AuthorList/FormItems.local.scss @@ -1,6 +1,5 @@ .validated-text { flex: 1; - margin-right: 20px; } .label { diff --git a/packages/components-faraday/src/components/Files/FileSection.js b/packages/components-faraday/src/components/Files/FileSection.js index b885046f2bb6c37c43569d7d419bf430edf1ce23..0e112c42aa858dfebd5b746ccb19f10f1dc2d7cf 100644 --- a/packages/components-faraday/src/components/Files/FileSection.js +++ b/packages/components-faraday/src/components/Files/FileSection.js @@ -174,11 +174,11 @@ export default compose( if ( allowedFileExtensions && - allowedFileExtensions.includes(fileExtention) + !allowedFileExtensions.includes(fileExtention) ) { - addFile(file) - } else { setError('Invalid file type.') + } else { + addFile(file) } }, }, diff --git a/packages/xpub-faraday/.gitignore b/packages/xpub-faraday/.gitignore index 451370b4294d3ed649754d600992fc73291385d3..1de1bbd859923d9c460f843d5327fa43753f681f 100644 --- a/packages/xpub-faraday/.gitignore +++ b/packages/xpub-faraday/.gitignore @@ -6,3 +6,4 @@ uploads/ .env.* .env config/local*.* +now/ diff --git a/packages/xpub-faraday/Dockerfile b/packages/xpub-faraday/Dockerfile deleted file mode 100644 index d2f06537103fbb7d1ad09b9c2fc7cfe947ba77fd..0000000000000000000000000000000000000000 --- a/packages/xpub-faraday/Dockerfile +++ /dev/null @@ -1 +0,0 @@ -FROM bogdandev/xpub-faraday:21.02 \ No newline at end of file diff --git a/packages/xpub-faraday/app/app.js b/packages/xpub-faraday/app/app.js index fb7eae11ea0bf59533f689f99ac71e48b38a0ed4..4a6c03720c936c324a9f67daca494762e561b946 100644 --- a/packages/xpub-faraday/app/app.js +++ b/packages/xpub-faraday/app/app.js @@ -3,16 +3,16 @@ import ReactDOM from 'react-dom' import { AppContainer } from 'react-hot-loader' import createHistory from 'history/createBrowserHistory' -import { configureStore, Root } from 'pubsweet-client' -import { JournalProvider } from 'xpub-journal' import 'xpub-theme' +import { JournalProvider } from 'xpub-journal' +import { configureStore, Root } from 'pubsweet-client' +import theme from './theme' import * as journal from './config/journal' import Routes from './routes' const history = createHistory() const store = configureStore(history, {}) -const theme = {} const render = () => { ReactDOM.render( diff --git a/packages/xpub-faraday/app/theme.js b/packages/xpub-faraday/app/theme.js new file mode 100644 index 0000000000000000000000000000000000000000..3692e4300448b60bcf0da8976645121a53019285 --- /dev/null +++ b/packages/xpub-faraday/app/theme.js @@ -0,0 +1,42 @@ +const theme = { + colorPrimary: '#667080', // Indicates a primary call to action + colorSecondary: '#d8d8d8', // Default color for non-primary actions + colorFurniture: '#cccccc', // Meant to be applied to elements that indicate content division + colorBorder: '#aaaaaa', // For borders around form elements + colorBackgroundHue: '#f1f1f1', // Used to create a discrete contrast the default background color + colorSuccess: '#005500', // Used to indicate a successful validation state + colorError: '#b50000', // Used to indicate an error in validation + colorText: '#333333', // Default font color + colorTextReverse: '#ffffff', // Reverse font color + colorTextPlaceholder: '#595959', // Used for text field placeholders + + fontInterface: 'Noto Sans', // Used for user interface elements by default + fontHeading: 'Noto Sans', // Used for headings + fontReading: 'Noto Serif', // Main reading text + fontWriting: 'Ubuntu Mono', // Font used for writing + fontSizeBase: '18px', // Default font size + fontSizeBaseSmall: '14px', // Smaller variation of fontSizeBase + fontSizeHeading1: '36px', // Size for Heading 1 + fontSizeHeading2: '36px', // Size for Heading 2 + fontSizeHeading3: '29px', // Size for Heading 3 + fontSizeHeading4: '26px', // Size for Heading 4 + fontSizeHeading5: '23px', // Size for Heading 5 + fontSizeHeading6: '20px', // Size for Heading 6 + fontLineHeight: '32px', // Default line height + + gridUnit: '32px', // Base interface space measurement used by elements and typography + + borderRadius: '2px', // Radius value applied to borders throughout the user interface + borderWidth: '1px', // Width value applied to borders + borderStyle: 'solid', // Style applied to borders (eg. solid, dashed) + + dropShadow: '0 1px 0 0 #667080', // Default shadow that is applied to elements that float (eg. tooltips, modals) + + backgroundColor: '#f6f6f6', + + transitionDuration: '1.5s', // How long transitions should last + transitionTimingFunction: 'linear', // Which function should be applied to transitions (eg. easein) + transitionDelay: '0s', // How long transitions should be delayed before they begin +} + +export default theme diff --git a/packages/xpub-faraday/config/default.js b/packages/xpub-faraday/config/default.js index fd1592d877fbab18168c974cf4fe37cba7fd327c..1feaba3a707492ad71eb9e9d9f0690e28dea87a6 100644 --- a/packages/xpub-faraday/config/default.js +++ b/packages/xpub-faraday/config/default.js @@ -5,6 +5,14 @@ const components = require('./components.json') const logger = require('winston') const environment = process.env.NODE_ENV || 'development' +const getInviteUrl = () => { + if (process.env.PUBSWEET_INVITE_PASSWORD_RESET_URL) { + return process.env.PUBSWEET_INVITE_PASSWORD_RESET_URL + } else if (process.env.NOW_URL) { + return `${process.env.NOW_URL}/invite` + } + return 'http://localhost:3000/invite' +} module.exports = { authsome: { @@ -26,7 +34,7 @@ module.exports = { 'pubsweet-client': { API_ENDPOINT: '/api', 'login-redirect': '/', - 'redux-log': true, + 'redux-log': false, theme: process.env.PUBSWEET_THEME, }, 'mail-transport': { @@ -62,9 +70,7 @@ module.exports = { // sender: process.env.EMAIL_SENDER, // }, 'invite-reset-password': { - url: - process.env.PUBSWEET_INVITE_PASSWORD_RESET_URL || - 'http://localhost:3000/invite', + url: getInviteUrl(), }, roles: { global: ['admin', 'editorInChief', 'author'], diff --git a/packages/xpub-theme/package-lock.json b/packages/xpub-theme/package-lock.json new file mode 100644 index 0000000000000000000000000000000000000000..35f40248731ed3650228777441348637ad6b910f --- /dev/null +++ b/packages/xpub-theme/package-lock.json @@ -0,0 +1,23 @@ +{ + "name": "xpub-theme", + "version": "0.0.2", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "typeface-noto-sans": { + "version": "0.0.54", + "resolved": "https://registry.npmjs.org/typeface-noto-sans/-/typeface-noto-sans-0.0.54.tgz", + "integrity": "sha512-wV2BNwFuSOYaz96gk5fDuD0RB4pPKKgQvvM9ep6jWRUTqPuND+fM4wz0xAqxopTYeZ/sVunyFIc3iCq7gMbULQ==" + }, + "typeface-noto-serif": { + "version": "0.0.54", + "resolved": "https://registry.npmjs.org/typeface-noto-serif/-/typeface-noto-serif-0.0.54.tgz", + "integrity": "sha512-GqplhQuONaGlWpeW4DZoMv64EKqwaLsTR9QCguV/zORZATEUxHvozvL4rudatCIu9lSnIgV5MrE/ZJhrscPHOg==" + }, + "typeface-ubuntu-mono": { + "version": "0.0.54", + "resolved": "https://registry.npmjs.org/typeface-ubuntu-mono/-/typeface-ubuntu-mono-0.0.54.tgz", + "integrity": "sha512-hwfEPLzA3f/q8RowZlW6Mmvqe8yffYk7vlwzia+n7xVjY16C2UvWWPCgGMXUbUIgFZIeqA5OvFwUjDMzi95wRw==" + } + } +} diff --git a/packages/xpub-theme/package.json b/packages/xpub-theme/package.json index 020ef8be49e83a59f9e6226274376dbf87bae138..09f65f7170ceb528bb9a335f5ad3dd38b276dff8 100644 --- a/packages/xpub-theme/package.json +++ b/packages/xpub-theme/package.json @@ -10,6 +10,9 @@ "typeface-fira-mono": "^0.0.43", "typeface-fira-sans": "^0.0.43", "typeface-fira-sans-condensed": "^0.0.43", + "typeface-noto-sans": "0.0.54", + "typeface-noto-serif": "0.0.54", + "typeface-ubuntu-mono": "0.0.54", "typeface-vollkorn": "^0.0.43" }, "dependencies_disabled": { diff --git a/packages/xpub-theme/src/index.js b/packages/xpub-theme/src/index.js index 744b5c4f484e4eee63895bc0fa22d22d262e02bb..23b9e81968da1866d06f556ee84331506b8aff39 100644 --- a/packages/xpub-theme/src/index.js +++ b/packages/xpub-theme/src/index.js @@ -1,3 +1,7 @@ import '@pubsweet/theme' +import 'typeface-noto-sans' +import 'typeface-noto-serif' +import 'typeface-ubuntu-mono' + import './variables.css' diff --git a/packages/xpub-theme/src/variables.css b/packages/xpub-theme/src/variables.css index d97db81f492ba6a103f3f74bd2f88d2ce31136dd..bda25b46931ef31ac565e0a4aefa205db73f6866 100644 --- a/packages/xpub-theme/src/variables.css +++ b/packages/xpub-theme/src/variables.css @@ -1,4 +1,13 @@ :root { --font-author: 'Vollkorn', serif; --font-reviewer: 'Kocourier Prime Sans', monospace; + + /* brand colors */ + --color-primary: #418b34; + + /* colors for interactions */ + --color-danger: #ff2d1a; + --color-warning: #ee7600; + --color-valid: #00bf05; + --color-pending: #aaa; }