Merge pull request #349 from seatable/change-notification-popover-icon-style

change notification popover icon style

Author: Michael18811380328

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.45",
+  "version": "6.0.46",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",
     "@seafile/seafile-calendar": "0.0.31",
-    "@seafile/seafile-editor": "~2.0.6",
+    "@seafile/seafile-editor": "~2.0.12",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",
     "dtable-utils": "~5.0.22",
@@ -50,7 +50,7 @@
     "lib",
     "es",
     "index.js",
-    "packagge.json"
+    "package.json"
   ],
   "browserslist": {
     "production": [

package.json

@@ -23,20 +23,10 @@
   position: relative;
 }
 
-.notification-container .notification-header .notification-close-icon {
+.notification-container .notification-header .seatable-icon-btn {
   position: absolute;
   right: 14px;
-  height: 24px;
-  width: 24px;
-  text-align: center;
-  cursor: pointer;
-  color: #000;
-  opacity: 0.5;
-  font-weight: 700;
-}
-
-.notification-container .notification-header .notification-close-icon:hover {
-  opacity: 0.75;
+  font-weight: normal;
 }
 
 .notification-container .notification-body {

src/NotificationPopover/index.css

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from 'reactstrap';
+import IconButton from '../IconButton';
+
 import './index.css';
 
 export default class NotificationPopover extends React.Component {
@@ -72,7 +74,7 @@ export default class NotificationPopover extends React.Component {
         <div className="notification-container" ref={ref => this.notificationContainerRef = ref}>
           <div className="notification-header">
             {headerText}
-            <span className="dtable-font dtable-icon-x notification-close-icon" onClick={this.props.onNotificationListToggle}></span>
+            <IconButton icon="x" onClick={this.props.onNotificationListToggle} />
           </div>
           <div className="notification-body">
             {this.props.enableWeixin &&