Hover state of close icon
This commit is contained in:
parent
c1cf27d828
commit
45a226b4b8
@ -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;
|
||||||
@ -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) => (
|
||||||
|
Loading…
Reference in New Issue
Block a user