From d55d3658f08563daa8ccf1511dd4f67423f2f8fd Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Thu, 18 Jan 2018 18:08:18 +0000
Subject: [PATCH] Use classNames instead of inline `style`

Theres no benefit to using inline styles
---
 src/components/views/rooms/DNDRoomTile.js       | 17 +++++++++--------
 .../matrix-react-sdk/views/rooms/_RoomTile.scss |  9 +++++++++
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/views/rooms/DNDRoomTile.js b/src/components/views/rooms/DNDRoomTile.js
index 1adb2a79a..129e3f459 100644
--- a/src/components/views/rooms/DNDRoomTile.js
+++ b/src/components/views/rooms/DNDRoomTile.js
@@ -18,18 +18,19 @@ import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import RoomTile from 'matrix-react-sdk/lib/components/views/rooms/RoomTile';
 
+import classNames from 'classnames';
+
 export default class DNDRoomTile extends React.Component {
     constructor() {
         super();
-        this.getStyle = this.getStyle.bind(this);
+        this.getClassName = this.getClassName.bind(this);
     }
 
-    getStyle(isDragging) {
-        const result = {
-            transform: isDragging ? "scale(1.05, 1.05)" : "none",
-            transition: "transform 0.2s",
-        };
-        return result;
+    getClassName(isDragging) {
+        return classNames({
+            "mx_DNDRoomTile": true,
+            "mx_DNDRoomTile_dragging": isDragging,
+        });
     }
 
     render() {
@@ -49,7 +50,7 @@ export default class DNDRoomTile extends React.Component {
                                 {...provided.draggableProps}
                                 {...provided.dragHandleProps}
                             >
-                                <div style={this.getStyle(snapshot.isDragging)}>
+                                <div className={this.getClassName(snapshot.isDragging)}>
                                     <RoomTile {...props} />
                                 </div>
                             </div>
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
index c9e7022e2..a59cd3e80 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
@@ -157,6 +157,15 @@ limitations under the License.
     background-color: $roomtile-selected-bg-color;
 }
 
+.mx_DNDRoomTile {
+    transform: none;
+    transition: transform 0.2s;
+}
+
+.mx_DNDRoomTile_dragging {
+    transform: scale(1.05, 1.05);
+}
+
 .mx_RoomTile:focus {
     filter: none ! important;
     background-color: $roomtile-focused-bg-color;