mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Rotate file upload icon instead of switching icon.
This commit is contained in:
parent
98e0edd331
commit
e8a111e6bc
2 changed files with 14 additions and 8 deletions
|
@ -1,6 +1,7 @@
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
rotate?: string;
|
||||||
type?: "default" | "circle";
|
type?: "default" | "circle";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -22,6 +23,10 @@ export default styled.div<Props>`
|
||||||
color: ${normal};
|
color: ${normal};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transition: 0.2s ease transform;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
fill: ${hover};
|
fill: ${hover};
|
||||||
color: ${hover};
|
color: ${hover};
|
||||||
|
@ -43,4 +48,10 @@ export default styled.div<Props>`
|
||||||
background-color: var(--primary-header);
|
background-color: var(--primary-header);
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
|
|
||||||
|
${(props) => props.rotate && css`
|
||||||
|
svg {
|
||||||
|
transform: rotateZ(${props.rotate});
|
||||||
|
}
|
||||||
|
` }
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -276,14 +276,9 @@ export function FileUploader(props: Props) {
|
||||||
if (uploading) return cancel();
|
if (uploading) return cancel();
|
||||||
if (attached) return remove();
|
if (attached) return remove();
|
||||||
onClick();
|
onClick();
|
||||||
}}>
|
}}
|
||||||
{uploading ? (
|
rotate={uploading || attached ? '45deg' : undefined}>
|
||||||
<XCircle size={size} />
|
<Plus size={size} />
|
||||||
) : attached ? (
|
|
||||||
<X size={size} />
|
|
||||||
) : (
|
|
||||||
<Plus size={size} />
|
|
||||||
)}
|
|
||||||
</IconButton>
|
</IconButton>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue