update button-ui

src/components/add-new-column.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-import styles from '../css/plugin-layout.module.css';
+import { Button } from 'reactstrap';
 
 class AddColumn extends React.Component {
 
@@ -21,10 +21,10 @@ class AddColumn extends React.Component {
     const {readonly} = this.props;
 
     return (
-      <button onClick={this.addColumn} className={`border-0 p-0 ${styles['add-column']} plugin-deduplicate-btn-add-column ${readonly ? 'readonly' : ''}`}>
-        <span className={`dtable-font dtable-icon-add-table mr-1 ${styles['add-column-icon']}`}></span>
+      <Button onClick={this.addColumn} color='filled' disabled={readonly}>
+        <span className='dtable-font dtable-icon-add-table'></span>
         <span>{intl.get('Add_new_column')}</span>
-      </button>
+      </Button>
     );
   }
 }

src/components/deduplication-columns.js

@@ -22,11 +22,14 @@ class DeDuplicationColumns extends React.Component {
               onChange={(option) => this.onSelectChange(option, index)}
             />
           </div>
-          <button type="button"
+          <span 
             aria-label={intl.get('Delete')}
             title={intl.get('Delete')}
             onClick={() => this.deleteColumn(index)}
-            className={`border-0 p-0 ml-2 dtable-font dtable-icon-fork-number ${styles['column-delete-icon']}`}></button>
+            className='seatable-icon-btn ml-2 mt-1'
+          >
+            <span className={`dtable-font dtable-icon-fork-number ${styles['column-delete-icon']}`}/>
+          </span>
         </div>
       );
     });

src/components/delete-component.js

@@ -23,7 +23,9 @@ class DeleteRowDropdownMenu extends React.Component {
     return(
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} style={this.props.style || {}} className="align-middle">
         <DropdownToggle tag="span" data-toggle="dropdown" aria-expanded={this.state.isItemMenuShow}>
-          <i className={'dtable-font dtable-icon-more-level delete-row-font ' + styles['more-level-font']}></i>
+          <span className='seatable-icon-btn'>
+            <i className={'dtable-font dtable-icon-more-level delete-row-font ' + styles['more-level-font']}></i>
+          </span>
         </DropdownToggle>
         <DropdownMenu right={true}>
           <DropdownItem onClick={this.props.onDeleteRow}>

src/components/detail-duplication-dialog.js

@@ -336,14 +336,18 @@ class DetailDuplicationDialog extends React.Component {
               <Button
                 className={`border-0 p-0 seatable-text-orange ${styles['records-op-btn']}`}
                 onClick={this.onDeleteSelectedRows}
+                color='light'
+                size='sm'
               >
                 {intl.get('Delete')}
               </Button>
             }
             {selectedItem.rows.length > 0 &&
               <Button
-                className={`border-0 p-0 ml-2 seatable-text-orange ${styles['records-op-btn']}`}
+                className='ml-2'
                 onClick={this.toggleShowCheckboxes}
+                color='light'
+                size='sm'
               >
                 {isCheckboxesShown ? intl.get('Cancel') : intl.get('Select')}
               </Button>

src/css/plugin-layout.module.css

@@ -169,10 +169,10 @@
   top: 10px;
   width: 20px;
   height: 20px;
-  border-radius: 2px;
-  font-size: 10px;
+  border-radius: 4px;
+  font-size: 12px;
   line-height: 20px;
-  color: #bdbdbd;
+  color: #666;
   text-align: center;
 }
 
@@ -182,15 +182,15 @@
 }
 
 .scroll-arrow-active:hover {
-  background: #f0f0f0;
+  background: rgba(0, 0, 0, 0.04);
 }
 
 .scroll-left {
-  left: 3px;
+  left: 4px;
 }
 
 .scroll-right {
-  right: 3px;
+  right: 4px;
 }
 
 .column-name-list {
@@ -328,10 +328,6 @@
   cursor: pointer;
 }
 
-.more-level-font:hover {
-  color: #191919;
-}
-
 .selected-cell::after {
   content: '';
   position: absolute;
@@ -429,10 +425,6 @@
   cursor: pointer;
 }
 
-.column-delete-icon:hover {
-  color: #212529;
-}
-
 .column-delete-icon:focus {
   outline: none;
 }