Commit 252c381a authored by Aanand Prasad's avatar Aanand Prasad

style: convert last parts of component-review to styled components

We're still using react-select for now
parent 6b0091f4
Pipeline #4751 failed with stages
in 5 minutes and 12 seconds
import React from 'react'
import styled from 'styled-components'
import { map } from 'lodash'
import Moment from 'react-moment'
import { Avatar, Button } from '@pubsweet/ui'
import classes from './Reviewer.local.scss'
const Root = styled.div`
font-family: var(--font-reviewer);
margin-right: var(--sub-grid-unit);
padding: var(--sub-grid-unit);
`
const Event = styled.div`
font-size: var(--font-size-base-small);
`
const ordinalLetter = ordinal =>
ordinal ? String.fromCharCode(96 + ordinal) : null
const Reviewer = ({ reviewer, removeReviewer }) => (
<div className={classes.root}>
<Root>
<Avatar
height={70}
reviewerLetter={ordinalLetter(reviewer._reviewer.ordinal)}
status={reviewer.status}
width={100}
/>
<div className={classes.name}>{reviewer._user.username}</div>
<div>
{reviewer._user ? reviewer._user.username : reviewer._reviewer.user}
</div>
<div>
{map(reviewer.events, (event, key) => (
<div className={classes.date} key={`${key}-${event}`}>
<Event key={`${key}-${event}`}>
{key} on <Moment format="YYYY-MM-DD">{event}</Moment>
</div>
</Event>
))}
</div>
{reviewer.status === 'Pending' && (
<Button onClick={removeReviewer}>x</Button>
)}
</div>
</Root>
)
export default Reviewer
.root {
color: #333;
display: inline-block;
font-family: var(--font-reviewer);
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
}
.name {
color: current-color;
font-family: var(--font-interface);
font-size: 18px;
font-weight: 600;
}
.fullname {
color: current-color;
font-size: 1.3em;
font-style: italic;
font-weight: bold;
margin-top: 0.2em;
}
.date {
color: current-color;
font-family: var(--font-interface);
font-size: 0.9em;
font-style: italic;
margin-left: 0.1em;
margin-top: 0.4em;
}
.root button {
margin-top: 1em;
}
......@@ -4,7 +4,6 @@ import { Field } from 'redux-form'
import { Button } from '@pubsweet/ui'
import { required } from 'xpub-validators'
import 'react-select/dist/react-select.css'
import classes from './ReviewerForm.local.scss'
const OptionRenderer = option => (
<div>
......@@ -40,11 +39,9 @@ const ReviewerForm = ({
validate={required}
/>
<div className={classes.actions}>
<Button disabled={!valid} primary type="submit">
Invite reviewer
</Button>
</div>
<Button disabled={!valid} primary type="submit">
Invite reviewer
</Button>
</form>
)
......
.actions {
color: red;
margin-top: 10px;
}
.root {
background: red;
}
// look at http://agutoli.github.io/ and https://www.npmjs.com/package/react-styled-select as an alternative for react-select
import React from 'react'
import classes from './Reviewers.local.scss'
import styled from 'styled-components'
const Root = styled.div`
display: flex;
margin-top: var(--grid-unit);
`
const Form = styled.div``
const ReviewersList = styled.div`
display: flex;
flex-wrap: wrap;
`
const Reviewers = ({
ReviewerForm,
......@@ -9,23 +19,23 @@ const Reviewers = ({
reviewers,
reviewerUsers,
}) => (
<div className={classes.root}>
<div className={classes.form}>
<Root>
<Form>
<ReviewerForm
project={project}
reviewerUsers={reviewerUsers}
version={version}
/>
</div>
</Form>
{reviewers && (
<div className={classes.reviewers}>
<ReviewersList>
{reviewers.map(reviewer => (
<Reviewer key={reviewer.id} project={project} reviewer={reviewer} />
))}
</div>
</ReviewersList>
)}
</div>
</Root>
)
export default Reviewers
.root {
display: flex;
}
.form {
width: 30ch;
}
.reviewers {
display: flex;
flex: 1;
flex-wrap: wrap;
padding: 20px;
}
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