From 17c7110d5a83ccadc81eaef56892d3f5947fca6c Mon Sep 17 00:00:00 2001
From: Tania Fecheta <tania.fecheta@thinslices.com>
Date: Thu, 29 Nov 2018 17:42:02 +0200
Subject: [PATCH] style(passwordConfirmation): allign the form
---
.../component-faraday-ui/src/PasswordConfirmation.js | 1 -
packages/component-faraday-ui/src/ShadowedBox.js | 11 ++++++++---
.../src/components/SignUp/SignUpInvitationForm.js | 9 ++++++++-
.../src/components/UserProfile/ChangePasswordPage.js | 8 +++++++-
4 files changed, 23 insertions(+), 6 deletions(-)
diff --git a/packages/component-faraday-ui/src/PasswordConfirmation.js b/packages/component-faraday-ui/src/PasswordConfirmation.js
index a1feeff45..6d9012c15 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 62de72cb0..f30f7ef8a 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 4cc2f6fb9..bc87c2226 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 46d38fdc8..a715a46f2 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>
--
GitLab