updates Icon with HighlightWrapper
This commit is contained in:
parent
6d5ae6010f
commit
3cd2789dc9
|
@ -62,3 +62,11 @@ export const FlexWrapper = styled.div`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const HighLightWrapper = styled.div`
|
||||||
|
&:hover {
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 5px;
|
||||||
|
`;
|
||||||
|
|
|
@ -1,18 +1,21 @@
|
||||||
|
import { HighLightWrapper } from 'components/Container';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
export default function DateIcon(props) {
|
export default function CrossIcon(props) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<HighLightWrapper>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<svg
|
||||||
height={props.height}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox={props.viewBox}
|
height={props.height}
|
||||||
width={props.width}>
|
viewBox={props.viewBox}
|
||||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
width={props.width}>
|
||||||
</svg>
|
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
||||||
|
</svg>
|
||||||
|
</HighLightWrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
DateIcon.defaultProps = {
|
CrossIcon.defaultProps = {
|
||||||
height: 24,
|
height: 24,
|
||||||
width: 24,
|
width: 24,
|
||||||
viewBox: '0 0 24 24',
|
viewBox: '0 0 24 24',
|
||||||
|
|
|
@ -1,15 +1,18 @@
|
||||||
|
import { HighLightWrapper } from 'components/Container';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
export default function AddIcon(props) {
|
export default function AddIcon(props) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<HighLightWrapper>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<svg
|
||||||
height={props.height}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox={props.viewBox}
|
height={props.height}
|
||||||
width={props.width}
|
viewBox={props.viewBox}
|
||||||
fill="currentColor">
|
width={props.width}
|
||||||
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
|
fill="currentColor">
|
||||||
</svg>
|
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
|
||||||
|
</svg>
|
||||||
|
</HighLightWrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,18 @@
|
||||||
|
import { HighLightWrapper } from 'components/Container';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
export default function TickIcon(props) {
|
export default function TickIcon(props) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<HighLightWrapper>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<svg
|
||||||
height={props.height}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox={props.viewBox}
|
height={props.height}
|
||||||
width={props.width}
|
viewBox={props.viewBox}
|
||||||
fill="currentColor">
|
width={props.width}
|
||||||
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
|
fill="currentColor">
|
||||||
</svg>
|
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
|
||||||
|
</svg>
|
||||||
|
</HighLightWrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue