dtable-ui-component 6.0.122 → 6.0.123-xhn.2

package/lib/AsyncUserSelect/index.js

@@ -211,9 +211,9 @@ const AsyncUserSelect = _ref => {
         target: selectorRef.current,
         hideArrow: true,
         fade: false,
-        className: "dtable-ui-user-select-popover",
+        className: "dtable-ui-user-select-popover seatable-popover",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "dtable-ui-user-select-container",
+          className: "dtable-ui-user-select-container dtable-popover-container",
           ref: userSelectContainerRef,
           onMouseDown: e => e.stopPropagation(),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -72,7 +72,7 @@ function ColorPickerPortal(_ref) {
   }, [target, scrollContainerId, throttleDelay, updatePosition]);
   if (!target) return null;
   return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "dtable-color-picker-portal",
+    className: "dtable-color-picker-portal dtable-popover-container",
     style: {
       position: 'fixed',
       zIndex: '1049',

package/lib/DTableColorPicker/index.css

@@ -2,12 +2,14 @@
   width: 240px;
   height: 370px;
   background-color: #fff;
-  border-radius: 3px;
   z-index: 100;
   padding: 0.75rem;
   line-height: 16px;
   position: absolute;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 4px;
+  margin-top: 8px;  
+	border: 1px solid #eee !important;
+	border-radius: 8px !important;
+	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1) !important;
 }
 
 .dtable-color-picker .chrome-picker {

package/lib/DTableCommonAddTool/index.css

@@ -4,11 +4,11 @@
   height: 40px;
   font-size: 14px;
   font-weight: 500;
-  border-top: 1px solid #dedede;
+  border-top: 1px solid #eee;
   background: #fff;
   padding: 0 1rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
   position: relative;
 }
 

package/lib/DTableCustomFooter/index.css

@@ -4,9 +4,9 @@
   align-items: center;
   justify-content: flex-end;
   padding: 0.75rem;
-  border-top: 1px solid rgba(0, 40, 100, 0.12);
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border: 1px solid #eee !important;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
 }
 
 .dtable-custom-footer>* {

package/lib/DTableFiltersPopover/index.css

@@ -29,8 +29,8 @@
   font-weight: 500;
   background: #fff;
   color: #666;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
   position: relative;
 }
 

package/lib/DTablePopover/index.js

@@ -70,11 +70,12 @@ class DTablePopover extends _react.default.Component {
       fade: false,
       hideArrow: hideArrow,
       innerClassName: innerClassName,
-      className: popoverClassName,
+      className: "seatable-popover ".concat(popoverClassName),
       modifiers: modifiers,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: ref => this.dtablePopoverRef = ref,
         onClick: this.onPopoverInsideClick,
+        className: "dtable-popover-container",
         children: this.props.children
       })
     });

package/lib/DTableSwitch/index.css

@@ -32,7 +32,6 @@
   transform: scale(.8);
   display: inline-block;
   line-height: 24px;
-  margin-right: 8px;
 }
 
 .dtable-switch.sm .custom-switch .dtable-font.dtable-icon-use-help {

package/lib/ImagePreviewerLightbox/index.js

@@ -127,7 +127,7 @@ function ImagePreviewerLightbox(props) {
     downloadImageTip: (0, _lang.getLocale)('Download_image'),
     preLineMetadaTip: (0, _lang.getLocale)('Pre_Line'),
     nextLineMetadaTip: (0, _lang.getLocale)('Next_Line'),
-    closeMetadataTip: (0, _lang.getLocale)('Close')
+    closeTip: (0, _lang.getLocale)('Close')
   });
 }
 var _default = exports.default = ImagePreviewerLightbox;

package/lib/NotificationPopover/index.css

@@ -5,11 +5,11 @@
 .notification-container {
   position: absolute;
   background: #fff;
-  width: 320px;
+  width: 400px;
   right: -10px;
   top: -1px;
-  border-radius: 3px;
-  box-shadow: 0 0 5px #ccc;
+  border-radius: 8px;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, .1);
 }
 
 .notification-container .notification-header {
@@ -17,7 +17,7 @@
   align-items: center;
   justify-content: center;
   height: 50px;
-  border-bottom: 1px solid #ededed;
+  border-bottom: 1px solid #eee;
   font-size: 16px;
   font-weight: 600;
   position: relative;
@@ -161,14 +161,10 @@
 
 .notification-body .notification-footer {
   height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f9f9f9;
-  cursor: pointer;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-  border-top: 1px solid #ededed;
+  border-top: 1px solid #eee !important;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  background: #fff;
 }
 
 .notification-body .notification-footer:hover {

package/lib/NotificationPopover/index.js

@@ -56,7 +56,7 @@ class NotificationPopover extends _react.default.Component {
       hideArrow: true,
       placement: "bottom",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "notification-container",
+        className: "notification-container dtable-popover-container",
         ref: ref => this.notificationContainerRef = ref,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "notification-header",
@@ -87,8 +87,8 @@ class NotificationPopover extends _react.default.Component {
               ref: ref => this.notificationsWrapperRef = ref,
               children: this.props.children
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "notification-footer",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "notification-footer border-0 bg-transparent d-block w-100",
             onClick: this.onNotificationDialogToggle,
             children: footerText
           })]

package/lib/SelectOptionGroup/index.css

@@ -7,11 +7,11 @@
   min-width: 100%;
   max-width: 15rem;
   padding: 0.5rem 0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background: #fff;
-  border: 1px solid rgba(0, 40, 100, 0.12);
-  border-radius: 3px;
   z-index: 10001;
+  border: 1px solid #eee !important;
+	border-radius: 8px !important;
+	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1) !important;
 }
 
 .option-group .option-group-search {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.122",
+  "version": "6.0.123xhn.2",
   "main": "./lib/index.js",
   "dependencies": {
-    "@seafile/react-image-lightbox": "^5.0.9",
+    "@seafile/react-image-lightbox": "5.0.9",
     "@seafile/seafile-calendar": "^1.0.10",
     "@seafile/seafile-editor": "^3.0.34",
     "classnames": "~2.5.*",