change notification popover icon style

Author: Michael18811380328

src/NotificationPopover/index.css

@@ -23,20 +23,9 @@
   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;
 }
 
 .notification-container .notification-body {

src/NotificationPopover/index.js

@@ -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 &&