From e8a111e6bc7f762178fa36a00a1437e846d29f45 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Tue, 6 Jul 2021 11:52:07 +0100
Subject: [PATCH] Rotate file upload icon instead of switching icon.
---
src/components/ui/IconButton.tsx | 11 +++++++++++
src/context/revoltjs/FileUploads.tsx | 11 +++--------
2 files changed, 14 insertions(+), 8 deletions(-)
diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx
index 207332a..9c11b92 100644
--- a/src/components/ui/IconButton.tsx
+++ b/src/components/ui/IconButton.tsx
@@ -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});
+ }
+ ` }
`;
diff --git a/src/context/revoltjs/FileUploads.tsx b/src/context/revoltjs/FileUploads.tsx
index 1aba031..83cf8a4 100644
--- a/src/context/revoltjs/FileUploads.tsx
+++ b/src/context/revoltjs/FileUploads.tsx
@@ -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>
);
}
--
GitLab