cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 07:02:10 -05:00
Code Issues Projects Releases Packages Wiki Activity

Rotate file upload icon instead of switching icon.

Browse source
This commit is contained in:
Paul 2021-07-06 11:52:07 +01:00
parent 98e0edd331
commit e8a111e6bc
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/ui/IconButton.tsx
View file

@ -1,6 +1,7 @@
import styled, { css } from "styled-components";
interface Props {
rotate?: string;
type?: "default" | "circle";
}
@ -22,6 +23,10 @@ export default styled.div<Props>`
color: ${normal};
}
svg {
transition: 0.2s ease transform;
}
&:hover {
fill: ${hover};
color: ${hover};
@ -43,4 +48,10 @@ export default styled.div<Props>`
background-color: var(--primary-header);
}
`}
${(props) => props.rotate && css`
svg {
transform: rotateZ(${props.rotate});
}
` }
`;

11
src/context/revoltjs/FileUploads.tsx
View file

@ -276,14 +276,9 @@ export function FileUploader(props: Props) {
if (uploading) return cancel();
if (attached) return remove();
onClick();
}}>
{uploading ? (
<XCircle size={size} />
) : attached ? (
<X size={size} />
) : (
<Plus size={size} />
)}
}}
rotate={uploading || attached ? '45deg' : undefined}>
<Plus size={size} />
</IconButton>
);
}