small design fixes

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>

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>

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;

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;

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>