seatable · gzcqqqqqqqq1 · Jun 10, 2026 · Jun 29, 2026 · Jun 29, 2026 · Jun 30, 2026
diff --git a/src/app.css b/src/app.css
@@ -21,9 +21,9 @@
 }
 
 .plugin-map-dialog-en .full-screen-active {
-  background-color: #e0e0e0;
-  border-radius: 2px;
-  color: #404040;
+  background-color: var(--bs-btn-background-hover);
+  border-radius: 4px;
+  color: var(--bs-icon-color) !important;
 }
 
 .plugin-map-dialog-en .dtable-map-plugin-title .modal-title {
@@ -63,14 +63,14 @@
   width: 24px;
   height: 24px;
   font-size: 16px;
-  color: #000;
-  opacity: .5;
+  color: var(--bs-icon-color);
   text-align: center;
   cursor: pointer;
+  border-radius: 4px;
 }
 
 .plugin-map-dialog-en .dtable-map-plugin-title .map-operator:hover {
-  opacity: .75;
+  background-color: var(--bs-btn-background-hover);
 }
 
 .plugin-map-dialog-en .btn-margin-right {
@@ -123,15 +123,6 @@
   font-weight: 700;
 }
 
-.plugin-map-dialog-en .dtable-plugin-location-settings-header .dtable-icon-x:hover {
-  opacity: .8;
-}
-
-.plugin-map-dialog-en .location-settings-header-container .dtable-font {
-  color: #000;
-  opacity: 0.5;
-}
-
 .plugin-map-dialog-en .setting-header-title {
   font-weight: 600;
 }

diff --git a/src/components/dialog/new-view-dialog.js b/src/components/dialog/new-view-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalBody, ModalHeader, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
 import intl from 'react-intl-universal';
+import { DTableModalHeader } from 'dtable-ui-component';
 
 const propTypes = {
   onNewViewConfirm: PropTypes.func,
@@ -44,7 +45,7 @@ class NewViewDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{intl.get('New_view')}</ModalHeader>
+        <DTableModalHeader toggle={this.toggle}>{intl.get('New_view')}</DTableModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>

diff --git a/src/components/dialog/rename-view-dialog.js b/src/components/dialog/rename-view-dialog.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { Modal, ModalBody, ModalHeader, ModalFooter, Form, FormGroup, Label, Input, Button, Alert } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Button, Alert } from 'reactstrap';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
+import { DTableModalHeader } from 'dtable-ui-component';
 
 const propTypes = {
   viewName: PropTypes.string,
@@ -54,7 +55,7 @@ class RenameViewDialog extends Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{intl.get('Rename_view')}</ModalHeader>
+        <DTableModalHeader toggle={this.toggle}>{intl.get('Rename_view')}</DTableModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>

diff --git a/src/components/formatter/enlarge-formatter-widgets/file-enlarge-formatter.js b/src/components/formatter/enlarge-formatter-widgets/file-enlarge-formatter.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Modal, ModalBody } from 'reactstrap';
 import intl from 'react-intl-universal';
 import PropTypes from 'prop-types';
-import { FileItemFormatter, ModalHeader } from 'dtable-ui-component';
+import { FileItemFormatter, DTableModalHeader } from 'dtable-ui-component';
 import { bytesToSize } from '../../../utils/common-utils';
 
 import '../../../assets/css/file-enlarge-formatter.css';
@@ -25,7 +25,7 @@ class FileEnlargeFormatter extends Component {
 
     return (
       <Modal isOpen={true} toggle={this.toggle} className="file-enlarge-formatter-dialog">
-        <ModalHeader toggle={this.toggle}>{intl.get('All_files')}</ModalHeader>
+        <DTableModalHeader toggle={this.toggle}>{intl.get('All_files')}</DTableModalHeader>
         <ModalBody style={{ padding: 0 }} className="file-enlarge-formatter-body">
           {Array.isArray(value) && value.length > 0 && value.map((item, index) => {
             const { url, type, size, name } = item;
@@ -46,7 +46,7 @@ class FileEnlargeFormatter extends Component {
                   }
                 </div>
                 {(type === 'file' && url.indexOf('seafile-connector') === -1) && (
-                  <div className="enlarge-file-item-operation" onClick={(event) => this.downloadFile(event, url)}>
+                  <div className="enlarge-file-item-operation seatable-icon-btn" onClick={(event) => this.downloadFile(event, url)}>
                     <i className="dtable-font dtable-icon-download file-download-icon"></i>
                   </div>
                 )}

diff --git a/src/components/location-detail-list.js b/src/components/location-detail-list.js
@@ -131,7 +131,9 @@ class LocationDetailList extends React.Component {
             <span className="location-detail-address" title={address}>{address}</span>
             <span className="locatuon-detail-records">{(rows.length + ' ' + intl.get('Records'))}</span>
           </div>
-          <i className={`dtable-font dtable-icon-${isWillHide ? 'up' : 'down'} change-detail-height`} onClick={this.onChangeDeitailHeight}></i>
+          <span className='seatable-icon-btn'>
+            <i className={`dtable-font dtable-icon-${isWillHide ? 'up' : 'down'} change-detail-height`} onClick={this.onChangeDeitailHeight}/>
+          </span>
         </div>
         <div className={classnames(
           'location-detail-container',

diff --git a/src/components/location-settings.js b/src/components/location-settings.js
@@ -123,7 +123,9 @@ class LocationSettings extends Component {
         <div className="dtable-plugin-location-settings-header">
           <div className="location-settings-header-container align-items-center">
             <h3 className="m-0 setting-header-title h5">{intl.get('Settings')}</h3>
-            <i className="dtable-font dtable-icon-x" onClick={onHideMapSettings}></i>
+            <span className='seatable-icon-btn'>
+              <i className="dtable-font dtable-icon-x" onClick={onHideMapSettings}/>
+            </span>
           </div>
         </div>
         <div className="dtable-plugin-location-settings-parameter">

diff --git a/src/components/view-tabs.js b/src/components/view-tabs.js
@@ -360,20 +360,20 @@ class ViewTabs extends Component {
           {this.renderTabs()}
         </div>
         {(!isMobile && (canScrollPrev || canScrollNext)) &&
-          <div className={tabStyles['views-scroll-control']}>
-            <span
-              className={`${tabStyles['scroll-control-btn']} ${tabStyles['scroll-prev']} ${canScrollPrev && tabStyles['scroll-active']}`}
-              onClick={this.onScrollWithControl.bind(this, SCROLL_TYPE.PREV)}
-            >
-              <i className={`dtable-font dtable-icon-left-slide ${tabStyles['btn-scroll-icon']}`} />
-            </span>
-            <span
-              className={`${tabStyles['scroll-control-btn']} ${tabStyles['scroll-next']} ${canScrollNext && tabStyles['scroll-active']}`}
-              onClick={this.onScrollWithControl.bind(this, SCROLL_TYPE.NEXT)}
-            >
-              <i className={`dtable-font dtable-icon-right-slide ${tabStyles['btn-scroll-icon']}`} />
-            </span>
-          </div>
+        <div className={tabStyles['views-scroll-control']}>
+          <span
+            className={`seatable-icon-btn ${tabStyles['scroll-control-btn']} ${tabStyles['scroll-prev']} ${ tabStyles['scroll-active']}`}
+            onClick={this.onScrollWithControl.bind(this, SCROLL_TYPE.PREV)}
+          >
+            <i className={`dtable-font dtable-icon-left-slide ${tabStyles['btn-scroll-icon']}`} />
+          </span>
+          <span
+            className={`seatable-icon-btn ${tabStyles['scroll-control-btn']} ${tabStyles['scroll-next']} ${canScrollNext && tabStyles['scroll-active']}`}
+            onClick={this.onScrollWithControl.bind(this, SCROLL_TYPE.NEXT)}
+          >
+            <i className={`dtable-font dtable-icon-right-slide ${tabStyles['btn-scroll-icon']}`} />
+          </span>
+        </div>
         }
         <div className={tabStyles['btn-add-view']} key={'btn-add-view'} onClick={this.onNewViewToggle}>
           <i className={`${tabStyles['add-map-view-icon']} dtable-font dtable-icon-add-table`}></i>

diff --git a/src/css/view-tabs.module.css b/src/css/view-tabs.module.css
@@ -90,42 +90,32 @@
 }
 
 .views-scroll-control .btn-scroll-icon {
-  color: #c2c2c2;
   font-size: 12px;
   line-height: 24px;
 }
 
-.views-scroll-control .scroll-active .btn-scroll-icon {
-  color: #8c8c8c;
-}
-
-.views-scroll-control .scroll-active:hover .btn-scroll-icon {
-  color: #000;
-  opacity: .75;
-}
-
 .btn-add-view { 
   display: flex;
   align-items: center;
   width: 24px;
   height: 100%; 
+  margin-left: 4px;
 }
 
 .add-map-view-icon {
   height: 24px;
   width: 24px;
-  margin-left: 4px;
   text-align: center;
   cursor: pointer;
-  color: #000;
-  opacity: .5;
+  color: var(--bs-icon-color);
   font-size: 14px;
   font-weight: 500;
   line-height: 24px;
+  border-radius: 4px;
 }
 
 .add-map-view-icon:hover {
-  opacity: .75;
+  background-color: var(--bs-btn-background-hover);
 }
 
 .view-item .view-item-content:hover {