beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

updates Icon with HighlightWrapper

Browse source
This commit is contained in:
Abhinav 2021-10-29 16:53:10 +05:30
parent 6d5ae6010f
commit 3cd2789dc9
4 changed files with 42 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/Container.ts
View file

@ -62,3 +62,11 @@ export const FlexWrapper = styled.div`
text-align: center;
justify-content: center;
`;
export const HighLightWrapper = styled.div`
&:hover {
background-color: #555;
}
border-radius: 50%;
padding: 5px;
`;

21
src/components/icons/CrossIcon.tsx
View file

@ -1,18 +1,21 @@
import { HighLightWrapper } from 'components/Container';
import React from 'react';
export default function DateIcon(props) {
export default function CrossIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}>
<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>
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}>
<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,
width: 24,
viewBox: '0 0 24 24',

19
src/components/icons/EditIcon.tsx
View file

@ -1,15 +1,18 @@
import { HighLightWrapper } from 'components/Container';
import React from 'react';
export default function AddIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}
fill="currentColor">
<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>
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}
fill="currentColor">
<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>
);
}

19
src/components/icons/TickIcon.tsx
View file

@ -1,15 +1,18 @@
import { HighLightWrapper } from 'components/Container';
import React from 'react';
export default function TickIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}
fill="currentColor">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
</svg>
<HighLightWrapper>
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}
fill="currentColor">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
</svg>
</HighLightWrapper>
);
}