Commit ee5011a3 authored by Audrey Hamelers's avatar Audrey Hamelers

christmas notification

parent c9239a6a
Pipeline #13407 failed with stages
in 26 seconds
import React from 'react'
import { Field } from 'formik'
import { isEmpty } from 'lodash'
import { ErrorText, H1, Link, Button, TextField, Checkbox } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import {
ErrorText,
H1,
Link,
Button,
TextField,
Checkbox,
Icon,
} from '@pubsweet/ui'
import { th, lighten } from '@pubsweet/ui-toolkit'
import styled from 'styled-components'
import { Page, Notification } from '../ui'
import SignInFooter from '../SignInFooter'
......@@ -24,6 +32,18 @@ const PasswordField = styled.div`
max-width: 500px;
`
const Christmas = styled(Notification)`
background-color: ${lighten('colorWarning', 70)};
div {
display: flex;
align-items: flex-start;
.text {
margin-left: 8px;
}
}
`
const Container = styled.form`
margin: 0 0;
max-width: 350px;
......@@ -64,10 +84,20 @@ class Login extends React.Component {
<Page>
<H1>Sign in with your Europe PMC plus account</H1>
{!isEmpty(errors) && <Notification type="error">{errors}</Notification>}
<Notification type="info">
The Europe PMC plus website has recently been upgraded. Please use the
email address associated with your account to log in.
</Notification>
<Christmas>
<Icon color="green" size={2.5}>
gift
</Icon>
<Icon color="#a80202" size={2.5}>
gift
</Icon>
<span className="text">
Please note that the Helpdesk will be unavailable from Wednesday, 25
December to Tuesday 2 January. Any calls or e-mails will be saved
and responded to on our return. Happy Holidays from the Europe PMC
team.{' '}
</span>
</Christmas>
<Container onSubmit={handleSubmit}>
<Field component={EmailInput} name="email" />
<PasswordField>
......
......@@ -77,9 +77,11 @@ const NotifIcon = {
const Notification = ({ children, type, className, ...props }) => (
<Container className={`${className || ''} ${type}`} {...props}>
<Icon color="currentColor" size={2}>
{NotifIcon[type]}
</Icon>
{NotifIcon[type] && (
<Icon color="currentColor" size={2}>
{NotifIcon[type]}
</Icon>
)}
<div>{children}</div>
</Container>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment