static/er2_eofDB/js/components/Project.tsx
| @@ -4,6 +4,8 @@ |
| import Checkbox from '@material-ui/core/Checkbox' |
| import { MonitoringStationType, ProjectType, ManageProjectsType } from '../reducers/manageProjects' |
| import { onSelectProject } from '../actions' |
| +import { Typography } from '@material-ui/core' |
| +import { faAlignCenter } from '@fortawesome/free-solid-svg-icons' |
| |
| |
| interface State { |
| @@ -23,27 +25,35 @@ |
| |
| export const Project = (props: PropsType) => { |
| |
| - const { project } = props |
| - const dispatch = useDispatch() |
| + const { project } = props |
| + const dispatch = useDispatch() |
| |
| - return ( |
| - <div |
| - style={{ |
| - backgroundColor: 'rgba(173, 216, 230, 0.2)', |
| - color: 'black', |
| - padding: '2px 10px' }} |
| - onClick={(event) => { |
| - dispatch(onSelectProject(project)) |
| - event.stopPropagation() |
| - }} |
| - > |
| - <FormControlLabel |
| - checked={project.selected} |
| - onFocus={e => e.stopPropagation()} |
| - control={<Checkbox />} |
| - label={project.title} |
| - /> |
| - </div>) |
| + return ( |
| + <div |
| + style={{ |
| + backgroundColor: 'rgba(173, 216, 230, 0.2)', |
| + color: 'black', |
| + padding: '2px 10px', |
| + cursor:'pointer', |
| + display: 'flex' }} |
| + onClick={(event) => { |
| + dispatch(onSelectProject(project)) |
| + event.stopPropagation() |
| + }} |
| + > |
| + <Checkbox |
| + checked={project.selected} |
| + onFocus={e => e.stopPropagation()} |
| + /> |
| + <Typography style={{ |
| + display: 'flex', |
| + alignItems: 'center', |
| + fontSize: 17, |
| + }}> |
| + {project.title} |
| + </Typography> |
| + </div>) |
| + |
| |
| } |
| |