y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Hover state of close icon

Browse Source
This commit is contained in:
Maciek Głowacki 2020-09-28 18:54:53 +02:00
parent c1cf27d828
commit 45a226b4b8
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/CourseCard.tsx
View File

@ -5,7 +5,7 @@ import { Course, Group } from '../types/index';
import { coursesContext } from '../contexts/CoursesProvider'; import { coursesContext } from '../contexts/CoursesProvider';
import styled from 'styled-components'; import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import CloseIcon from '../assets/close.svg'; import { ReactComponent as CloseIcon } from '../assets/close.svg';
interface ClassExandIconProps { interface ClassExandIconProps {
isSelected: boolean; isSelected: boolean;
@ -24,7 +24,7 @@ const CourseStyled = styled.div`
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
align-items: stretch; align-items: stretch;
position:relative; position: relative;
`; `;
const CourseNameStyled = styled.div` const CourseNameStyled = styled.div`
@ -69,14 +69,14 @@ const useStyles = makeStyles({
}, },
}); });
const DeleteFromBasketIcon = styled.img` const DeleteFromBasketIcon = styled(CloseIcon)`
width: 20px; width: 20px;
cursor: pointer; cursor: pointer;
position:absolute; position: absolute;
left:235px; left: 235px;
top:5px; top: -10px;
:hover{ &:hover {
color:red; fill: #d3d3d3;
} }
`; `;
@ -94,7 +94,7 @@ export const CourseCard = ({ course }: CourseCardProps) => {
return ( return (
<CourseStyled> <CourseStyled>
<DeleteFromBasketIcon alt="close" src={CloseIcon} onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon> <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
<CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled> <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit> <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{course.groups.map((group, index) => ( {course.groups.map((group, index) => (