update ui

src/CollapsibleSettingLayout/index.jsx

@@ -15,7 +15,9 @@ const CollapsibleSettingLayout = (props) => {
         onClick={() => setIsShowSettings(!isShowSettings)}
       >
         <span className="collapsible-setting-layout-title">{title}</span>
-        <i className={`dtable-font dtable-icon-right${isShowSettings ? ' dtable-icon-spin' : ''}`}></i>
+        <span className="seatable-icon-btn">
+          <i className={`dtable-font dtable-icon-right${isShowSettings ? ' dtable-icon-spin' : ''}`}/>
+        </span>
       </div>
       {isShowSettings && <div className="collapsible-setting-layout-body mt-3 pl-2">{children || ''}</div>}
     </div>

src/DTableModalHeader/index.css

@@ -0,0 +1,4 @@
+.modal-close-btn {
+  font-size: 16px;
+  font-weight: 700;
+}

src/DTableModalHeader/index.js

@@ -2,9 +2,11 @@ import React from 'react';
 import { ModalHeader } from 'reactstrap';
 import IconButton from '../IconButton';
 
+import './index.css';
+
 const DTableModalHeader = ({ children, ...props }) => {
   const customCloseBtn = (
-    <IconButton icon="x" aria-label="Close" onClick={props.toggle}/>
+    <IconButton icon="x" aria-label="Close" onClick={props.toggle} className='modal-close-btn'/>
   );
   return (
     <ModalHeader {...props} close={customCloseBtn}>

src/DTableRadioGroup/index.jsx

@@ -83,7 +83,7 @@ class DTableRadioGroup extends React.Component {
               </div>
             );
           })}
-          <span className='radio-group-slider btn btn-primary' ref={ref => this.slider = ref}></span>
+          <span className='radio-group-slider btn btn-primary btn-sm' ref={ref => this.slider = ref}></span>
         </div>
       </div>
     );

src/IconButton/index.css

@@ -0,0 +1,3 @@
+.icon-button .seatable-icon {
+  font-size: 16px;
+}

src/IconButton/index.js

@@ -2,10 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
+import './index.css';
+
 const IconButton = ({ disabled, className, icon, children, ...otherProperties }) => {
   return (
     <div
-      className={classnames('seatable-icon-btn', className, { 'disabled': disabled })}
+      className={classnames('seatable-icon-btn icon-button', className, { 'disabled': disabled })}
       {...otherProperties}
     >
       {icon && (<i className={classnames('seatable-icon dtable-font', `dtable-icon-${icon}`)} aria-hidden="true"></i>)}