From 348ada2272acc8d105742b0f0b12872dd9e295f7 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <hamelers@ebi.ac.uk>
Date: Mon, 21 Jan 2019 14:59:34 +0000
Subject: [PATCH] small design fixes
---
app/components/SignInFooter.jsx | 8 ++--
app/components/UserAccount.jsx | 44 +++++++++++--------
app/components/login/Login.jsx | 2 +
app/components/ui/molecules/SearchSelect.jsx | 2 +-
.../upload-files/UploadFileListItem.jsx | 4 +-
5 files changed, 34 insertions(+), 26 deletions(-)
diff --git a/app/components/SignInFooter.jsx b/app/components/SignInFooter.jsx
index fc86fa57a..6d8df8e80 100644
--- a/app/components/SignInFooter.jsx
+++ b/app/components/SignInFooter.jsx
@@ -8,12 +8,12 @@ const SignInFooter = () => (
<ul>
<li>
See the Europe PMC Plus <Link to="/user-guide">User Guide</Link> for
- more information
+ more information.
</li>
<li>
- Contact the Europe PMC helpdesk at
- <A href="mailto:helpdesk@europepmc.org"> helpdesk@europepmc.org</A>
- or +441223 494118.
+ {`Contact the Europe PMC helpdesk at `}
+ <A href="mailto:helpdesk@europepmc.org">helpdesk@europepmc.org</A>
+ {` or +44 1223 494118.`}
</li>
</ul>
</div>
diff --git a/app/components/UserAccount.jsx b/app/components/UserAccount.jsx
index 8900a40ef..35bd95dfa 100644
--- a/app/components/UserAccount.jsx
+++ b/app/components/UserAccount.jsx
@@ -38,34 +38,36 @@ const PasswordField = styled.div`
const SignIn = styled.div`
font-size: ${th('fontSizeBaseSmall')};
`
+const Notice = styled.p`
+ margin: -${th('gridUnit')} 0 0;
+ text-indent: calc(3 * ${th('gridUnit')});
+`
-const TitleInput = props => <TextField label="Title" {...props.field} />
+const TitleInput = props => (
+ <TextField label="Title (optional)" {...props.field} />
+)
const GivenNamesInput = props => (
<TextField
invalidTest={props.invalidTest}
- label="Given name(s) or initials *"
+ label="Given name(s) or initials"
{...props.field}
/>
)
const SurnameInput = props => (
- <TextField
- invalidTest={props.invalidTest}
- label="Surname *"
- {...props.field}
- />
+ <TextField invalidTest={props.invalidTest} label="Surname" {...props.field} />
)
const EmailInput = props => (
<TextField
invalidTest={props.invalidTest}
- label="Email address *"
+ label="Email address"
{...props.field}
/>
)
const PasswordInput = props => (
<TextField
invalidTest={props.invalidTest}
- label="Password (at least 8 characters) *"
+ label="Password"
{...props.field}
type="password"
/>
@@ -73,14 +75,14 @@ const PasswordInput = props => (
const PlainPasswordInput = props => (
<TextField
invalidTest={props.invalidTest}
- label="Password (at least 8 characters) *"
+ label="Password (at least 8 characters)"
{...props.field}
/>
)
const ConfirmPasswordInput = props => (
<TextField
invalidTest={props.invalidTest}
- label="Confirm password *"
+ label="Confirm password"
{...props.field}
type="password"
/>
@@ -197,15 +199,19 @@ class UserAccount extends React.Component {
<div className="accept">
<Checkbox
checked={this.state.accept}
- label="I have read and accept the privacy notice for Europe PMC’s Advanced User Services"
+ label="I have read and accept the privacy notice."
onChange={() => this.toggleAccept()}
/>
- <Link
- target="_blank"
- to="//www.ebi.ac.uk/data-protection/privacy-notice/europe-pmc-plus"
- >
- Europe PMC’s Advanced User Services Privacy Notice
- </Link>
+ <Notice>
+ {`See `}
+ <Link
+ target="_blank"
+ to="//www.ebi.ac.uk/data-protection/privacy-notice/europe-pmc-plus"
+ >
+ Privacy notice
+ </Link>
+ {` for Europe PMC’s Advanced User Services.`}
+ </Notice>
</div>
<p>
<Button
@@ -229,7 +235,7 @@ class UserAccount extends React.Component {
<div>
<SignIn>
Already have a Europe PMC Plus account?{' '}
- <Link to="/login">Login.</Link>
+ <Link to="/login">Sign in.</Link>
</SignIn>
<SignInFooter />
</div>
diff --git a/app/components/login/Login.jsx b/app/components/login/Login.jsx
index c843e88e1..8b0f4f4fc 100644
--- a/app/components/login/Login.jsx
+++ b/app/components/login/Login.jsx
@@ -17,9 +17,11 @@ import SignInFooter from '../SignInFooter'
const Signup = styled.p`
font-size: ${th('fontSizeBaseSmall')};
+ margin-bottom: 0;
`
const ResetPassword = styled.p`
font-size: ${th('fontSizeBaseSmall')};
+ margin-top: 0;
`
const ShowPassword = styled(Checkbox)`
position: absolute;
diff --git a/app/components/ui/molecules/SearchSelect.jsx b/app/components/ui/molecules/SearchSelect.jsx
index 9b59f71f1..b7580cb74 100755
--- a/app/components/ui/molecules/SearchSelect.jsx
+++ b/app/components/ui/molecules/SearchSelect.jsx
@@ -106,7 +106,7 @@ const SearchInput = styled.input`
}
`
const DropdownIcon = styled(Icon)`
- border: ${th('borderWidth')} ${th('borderStyle')} ${borderColor};
+ border-left: ${th('borderWidth')} ${th('borderStyle')} ${borderColor};
background-color: ${th('colorBackgroundHue')};
height: calc((${th('gridUnit')} * 6) - (${th('borderWidth')} * 2));
display: inline-flex;
diff --git a/app/components/upload-files/UploadFileListItem.jsx b/app/components/upload-files/UploadFileListItem.jsx
index 1bd243ada..e84709b08 100755
--- a/app/components/upload-files/UploadFileListItem.jsx
+++ b/app/components/upload-files/UploadFileListItem.jsx
@@ -234,7 +234,7 @@ class UploadFileListItem extends React.Component {
})
}
return (
- <div>
+ <React.Fragment>
<Select
icon="chevron_down"
invalidTest={!this.state.type}
@@ -263,7 +263,7 @@ class UploadFileListItem extends React.Component {
placeholder="F1, S1, Fig. 1"
value={this.state.label || ''}
/>
- </div>
+ </React.Fragment>
)
}}
</Mutation>
--
GitLab