[UI/UX Improvement] Use Ant's Button component on users list page (#3416

)
getredash · Feb 8, 2019 · e21bbcc · e21bbcc
1 parent 23f5dde
commit e21bbcc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git 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-duration: 150ms;
+}
+
 // Fix ant input number showing duplicate arrows
 .ant-input-number-input::-webkit-outer-spin-button,
 .ant-input-number-input::-webkit-inner-spin-button {
@@ -146,7 +152,7 @@
 .@{table-prefix-cls} {
   color: inherit;
 
-  * {
+  tr, th, td {
     transition: none !important;
   }
 

diff --git 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
@@ -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)}>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)}>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)}>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">
           <i className="fa fa-plus m-r-5" />
           New User
-        </a>
+        </Button>
         <DynamicComponent name="UsersListExtra" />
       </div>
     );