From 1a7f9091b4fc41eac6d5cc1b71d1dbe61f5d7f0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 26 Feb 2021 07:51:03 +0100
Subject: [PATCH] Animate icon size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/structures/_RoomView.scss       | 12 ++++++++++++
 src/components/views/rooms/AuxPanel.tsx | 10 +++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 28d8d1e196..d5caee5e8b 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -36,10 +36,22 @@ limitations under the License.
     z-index: 3000;
 
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 
+@keyframes mx_RoomView_fileDropTarget_image_animation {
+  from {width: 0px;}
+  to {width: 32px;}
+}
+
+.mx_RoomView_fileDropTarget_image {
+    animation: mx_RoomView_fileDropTarget_image_animation;
+    animation-duration: 0.5s;
+    margin-bottom: 16px;
+}
+
 .mx_RoomView_auxPanel {
     min-width: 0px;
     width: 100%;
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index 59ea8e237a..b3ef8c3cc8 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -153,11 +153,11 @@ export default class AuxPanel extends React.Component<IProps, IState> {
         if (this.props.draggingFile) {
             fileDropTarget = (
                 <div className="mx_RoomView_fileDropTarget">
-                    <div title={_t("Drop File Here")}>
-                        <img src={require( "../../../../res/img/upload-big.svg")} />
-                        <br />
-                        { _t("Drop file here to upload") }
-                    </div>
+                    <img
+                        src={require( "../../../../res/img/upload-big.svg")}
+                        className="mx_RoomView_fileDropTarget_image"
+                    />
+                    { _t("Drop file here to upload") }
                 </div>
             );
         }