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 207332a7..9c11b92c 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 1aba0317..83cf8a4a 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>
         );
     }