diff --git a/packages/component-faraday-ui/src/PasswordConfirmation.js b/packages/component-faraday-ui/src/PasswordConfirmation.js index a1feeff455dcadbe01b87edc3bb14140789d5813..6d9012c1589ed2caf44721027475d1e24525a29f 100644 --- a/packages/component-faraday-ui/src/PasswordConfirmation.js +++ b/packages/component-faraday-ui/src/PasswordConfirmation.js @@ -49,7 +49,6 @@ const PasswordConfirmation = ({ <ValidatedField component={PasswordField} name="confirmPassword" - // name="confirmNewPassword" validate={[required]} /> </Item> diff --git a/packages/component-faraday-ui/src/ShadowedBox.js b/packages/component-faraday-ui/src/ShadowedBox.js index 62de72cb0638cd9e3f95d112c6559ddf6709b792..f30f7ef8a6e2d26597b9ce402ec378c83672d54d 100644 --- a/packages/component-faraday-ui/src/ShadowedBox.js +++ b/packages/component-faraday-ui/src/ShadowedBox.js @@ -3,24 +3,29 @@ import { H2 } from '@pubsweet/ui' import styled, { css } from 'styled-components' import { th } from '@pubsweet/ui-toolkit' -import { marginHelper } from './' +import { marginHelper, paddingHelper } from './' const width = props => css` width: calc(${th('gridUnit')} * ${get(props, 'width', 50)}); ` -export default styled.div` +export default styled.div.attrs({ + pt: props => get(props, 'pt', 2), + pr: props => get(props, 'pr', 2), + pb: props => get(props, 'pb', 2), + pl: props => get(props, 'pl', 2), +})` background-color: ${th('colorBackgroundHue')}; border-radius: ${th('borderRadius')}; box-shadow: ${th('boxShadow')}; display: flex; flex-direction: column; - padding: calc(${th('gridUnit')} * 2); position: ${props => get(props, 'position', 'initial')}; ${width}; ${marginHelper}; + ${paddingHelper}; ${H2} { text-align: center; diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js index 4cc2f6fb9e630290800cba3f97877c5cb5b3bc11..bc87c22263ce048c3d4d0bd7c4381221b8d2f609 100644 --- a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js +++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js @@ -5,6 +5,13 @@ import { Text, ShadowedBox } from 'pubsweet-component-faraday-ui' import Step0 from './SignUpStep0' import Step1 from './SignUpStep1' +const containerPadding = { + pt: 4, + pb: 4, + pl: 4, + pr: 4, +} + const SignUpInvitation = ({ type, step, @@ -18,7 +25,7 @@ const SignUpInvitation = ({ initialValues, title = 'Add New Account Details', }) => ( - <ShadowedBox center mb={3} mt={10}> + <ShadowedBox center mb={3} mt={10} {...containerPadding}> <H2 mb={step === 0 ? 0 : 2}>{title}</H2> {error && <Text error>Token expired or Something went wrong.</Text>} {step === 0 && ( diff --git a/packages/components-faraday/src/components/UserProfile/ChangePasswordPage.js b/packages/components-faraday/src/components/UserProfile/ChangePasswordPage.js index 46d38fdc89277d0ad4564ff16bf25ec9b31fe072..a715a46f2b7b712b345ae99c5365deed42b741ff 100644 --- a/packages/components-faraday/src/components/UserProfile/ChangePasswordPage.js +++ b/packages/components-faraday/src/components/UserProfile/ChangePasswordPage.js @@ -21,8 +21,14 @@ import { const PasswordField = input => <TextField {...input} type="password" /> +const containerPadding = { + pt: 4, + pb: 4, + pl: 4, + pr: 4, +} const ChangePassword = ({ history, handleSubmit, error }) => ( - <ShadowedBox center mt={10}> + <ShadowedBox center mt={10} {...containerPadding}> <H2>Change Password</H2> <Row mb={2} mt={3}> <Item vertical>