From e0d8ae05d36c9dcab07179d85b4773bb66079a7e Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Fri, 8 Feb 2019 13:06:43 +0200
Subject: [PATCH 1/4] Use Ant's Button component on users list page

---
 client/app/assets/less/ant.less               |  6 ++++++
 client/app/assets/less/inc/ant-variables.less | 10 +++++++---
 client/app/pages/users/UsersList.jsx          | 17 +++++++----------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less
index d2fd4a9581..ba6c873770 100644
--- a/client/app/assets/less/ant.less
+++ b/client/app/assets/less/ant.less
@@ -47,6 +47,12 @@
   z-index: 1050;
 }
 
+// Button overrides
+
+.@{btn-prefix-cls} {
+  transition: none;
+}
+
 // Fix ant input number showing duplicate arrows
 .ant-input-number-input::-webkit-outer-spin-button,
 .ant-input-number-input::-webkit-inner-spin-button {
diff --git a/client/app/assets/less/inc/ant-variables.less b/client/app/assets/less/inc/ant-variables.less
index 1376bc58ab..4e86e0b8b2 100644
--- a/client/app/assets/less/inc/ant-variables.less
+++ b/client/app/assets/less/inc/ant-variables.less
@@ -1,7 +1,6 @@
 /* --------------------------------------------------------
     Colors
 -----------------------------------------------------------*/
-
 @lightblue:                             #03A9F4;
 @primary-color:                        #2196F3;
 
@@ -36,9 +35,15 @@
 
 
 /* --------------------------------------------------------
-    Pagination
+    Button
 -----------------------------------------------------------*/
+@btn-danger-bg: fade(@redash-gray, 10%);
+@btn-danger-border: fade(@redash-gray, 15%);
 
+
+/* --------------------------------------------------------
+    Pagination
+-----------------------------------------------------------*/
 @pagination-item-size: 33px;
 @pagination-font-family: @redash-font;
 @pagination-font-weight-active: normal;
@@ -55,7 +60,6 @@
 /* --------------------------------------------------------
     Table
 -----------------------------------------------------------*/
-
 @table-border-radius-base: 0;
 @table-header-color: #333;
 @table-header-bg: fade(@redash-gray, 3%);
diff --git a/client/app/pages/users/UsersList.jsx b/client/app/pages/users/UsersList.jsx
index 7d6af18a1f..503a4441b5 100644
--- a/client/app/pages/users/UsersList.jsx
+++ b/client/app/pages/users/UsersList.jsx
@@ -2,8 +2,8 @@ import { map } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
-import classNames from 'classnames';
 
+import Button from 'antd/lib/button';
 import { Paginator } from '@/components/Paginator';
 import DynamicComponent from '@/components/DynamicComponent';
 
@@ -27,13 +27,13 @@ function UsersListActions({ user, actions }) {
   const { enableUser, disableUser, deleteUser } = actions;
   if (user.is_invitation_pending) {
     return (
-      <button type="button" className="btn btn-default btn-block" onClick={event => deleteUser(event, user)}>Delete</button>
+      <Button type="danger" className="w-100" onClick={event => deleteUser(event, user)} htmlType="button">Delete</Button>
     );
   }
   return user.is_disabled ? (
-    <button type="button" className="btn btn-primary btn-block" onClick={event => enableUser(event, user)}>Enable</button>
+    <Button type="primary" className="w-100" onClick={event => enableUser(event, user)} htmlType="button">Enable</Button>
   ) : (
-    <button type="button" className="btn btn-default btn-block" onClick={event => disableUser(event, user)}>Disable</button>
+    <Button className="w-100" onClick={event => disableUser(event, user)} htmlType="button">Disable</Button>
   );
 }
 
@@ -120,14 +120,11 @@ class UsersList extends React.Component {
       return null;
     }
     return (
-      <div className="m-b-10">
-        <a
-          href="users/new"
-          className={classNames('btn', 'btn-default', 'm-b-10', { disabled: !policy.isCreateUserEnabled() })}
-        >
+      <div className="m-b-15">
+        <Button type="primary" disabled={!policy.isCreateUserEnabled()} href="users/new" htmlType="button">
           <i className="fa fa-plus m-r-5" />
           New User
-        </a>
+        </Button>
         <DynamicComponent name="UsersListExtra" />
       </div>
     );

From 565b66627f99c3d497e2a49dc7969d868573941d Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Fri, 8 Feb 2019 17:07:13 +0200
Subject: [PATCH 2/4] Tweak animations

---
 client/app/assets/less/ant.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less
index ba6c873770..71cbd96c9a 100644
--- a/client/app/assets/less/ant.less
+++ b/client/app/assets/less/ant.less
@@ -50,7 +50,7 @@
 // Button overrides
 
 .@{btn-prefix-cls} {
-  transition: none;
+  transition-duration: 80ms;
 }
 
 // Fix ant input number showing duplicate arrows
@@ -152,7 +152,7 @@
 .@{table-prefix-cls} {
   color: inherit;
 
-  * {
+  tr, th, td {
     transition: none !important;
   }
 

From 3194096a87f4a7d8a1c28b0932155ca1093068f7 Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Fri, 8 Feb 2019 17:15:43 +0200
Subject: [PATCH 3/4] Remove unnecessary attributes

---
 client/app/pages/users/UsersList.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/app/pages/users/UsersList.jsx b/client/app/pages/users/UsersList.jsx
index 503a4441b5..2508a490cf 100644
--- a/client/app/pages/users/UsersList.jsx
+++ b/client/app/pages/users/UsersList.jsx
@@ -27,13 +27,13 @@ function UsersListActions({ user, actions }) {
   const { enableUser, disableUser, deleteUser } = actions;
   if (user.is_invitation_pending) {
     return (
-      <Button type="danger" className="w-100" onClick={event => deleteUser(event, user)} htmlType="button">Delete</Button>
+      <Button type="danger" className="w-100" onClick={event => deleteUser(event, user)}>Delete</Button>
     );
   }
   return user.is_disabled ? (
-    <Button type="primary" className="w-100" onClick={event => enableUser(event, user)} htmlType="button">Enable</Button>
+    <Button type="primary" className="w-100" onClick={event => enableUser(event, user)}>Enable</Button>
   ) : (
-    <Button className="w-100" onClick={event => disableUser(event, user)} htmlType="button">Disable</Button>
+    <Button className="w-100" onClick={event => disableUser(event, user)}>Disable</Button>
   );
 }
 
@@ -121,7 +121,7 @@ class UsersList extends React.Component {
     }
     return (
       <div className="m-b-15">
-        <Button type="primary" disabled={!policy.isCreateUserEnabled()} href="users/new" htmlType="button">
+        <Button type="primary" disabled={!policy.isCreateUserEnabled()} href="users/new">
           <i className="fa fa-plus m-r-5" />
           New User
         </Button>

From 50cfcac0bf7fa9e0c92f1faef1294f3b55310307 Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Fri, 8 Feb 2019 17:33:32 +0200
Subject: [PATCH 4/4] Tweak animations once more

---
 client/app/assets/less/ant.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less
index 71cbd96c9a..7b57053282 100644
--- a/client/app/assets/less/ant.less
+++ b/client/app/assets/less/ant.less
@@ -50,7 +50,7 @@
 // Button overrides
 
 .@{btn-prefix-cls} {
-  transition-duration: 80ms;
+  transition-duration: 150ms;
 }
 
 // Fix ant input number showing duplicate arrows