Change modal header button style (#7271)

* 01 remove useless package

* 02 change modal header icons

frontend/src/css/lib-content-view.css

@@ -342,39 +342,8 @@
   max-width: calc(100% - 260px);
 }
 
-.custom-modal .modal-header .search {
-  position: absolute;
-  top: 16px;
-  right: 48px;
-  color: #000;
-  opacity: 0.5;
-}
-
-.custom-modal .modal-header .close {
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  right: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  line-height: 12px;
-  color: #666 !important;
-  opacity: 1;
-}
-
-.custom-modal .modal-header .search:hover,
-.custom-modal .modal-header .close:hover {
-  cursor: pointer;
-  border-radius: 3px;
-  opacity: 0.75;
-}
-
-.custom-modal .modal-header .close span {
-  width: 16px;
-  height: 16px;
+.custom-modal .modal-header .header-buttons .seahub-modal-btn {
+  padding: 14px 12px;
 }
 
 .custom-modal .modal-content {
@@ -509,20 +478,3 @@
   flex-shrink: 0;
   margin-left: 10px;
 }
-
-.comment-close-icon {
-  height: 24px;
-  width: 24px;
-  text-align: center;
-}
-
-.comment-close-icon {
-  cursor: pointer;
-  color: #000;
-  opacity: 0.5;
-  font-weight: 700;
-}
-
-.comment-close-icon:hover {
-  opacity: 0.75;
-}

frontend/src/css/seahub-modal-header.css

@@ -1,23 +1,23 @@
-.modal-header .seahub-modal-close.close {
+.modal-header .seahub-modal-btn.close {
   padding: 14px 16px;
   opacity: 1;
 }
 
-.modal-header .seahub-modal-close.close:not(:disabled):not(.disabled):hover {
+.modal-header .seahub-modal-btn.close:not(:disabled):not(.disabled):hover {
   opacity: 1;
 }
 
-.modal-header .seahub-modal-close .seahub-modal-close-inner {
+.modal-header .seahub-modal-btn .seahub-modal-btn-inner {
   display: inline-block;
   width: 28px;
   height: 28px;
   border-radius: 3px;
 }
 
-.modal-header .seahub-modal-close .seahub-modal-close-inner:hover {
+.modal-header .seahub-modal-btn .seahub-modal-btn-inner:hover {
   background-color: #efefef;
 }
 
-.modal-header .seahub-modal-close .seahub-modal-close-inner .sf3-font {
+.modal-header .seahub-modal-btn .seahub-modal-btn-inner .sf3-font {
   color: #666;
 }

frontend/src/css/user-notifications.css

@@ -12,6 +12,10 @@
   display: flex;
 }
 
+.notification-header-close .seahub-modal-btn {
+  padding: 14px 12px;
+}
+
 .notification-header-close .notification-dropdown-toggle {
   display: flex;
   justify-content: center;
@@ -20,31 +24,6 @@
   width: 24px
 }
 
-.notification-header-close .item-dropdown-icon,
-.notification-header-close .notification-close-icon {
-  height: 24px;
-  width: 24px;
-  cursor: pointer;
-  color: #000;
-  opacity: 0.5;
-}
-
-.notification-header-close .notification-close-icon:hover,
-.notification-header-close .item-dropdown-icon:hover {
-  color: #000;
-  opacity: 0.75;
-}
-
-/* The icon "..." do not need to be bold */
-.notification-header-close .item-dropdown-icon {
-  font-weight: 400;
-}
-
-/* The icon 'x' needs to be bold */
-.notification-header-close .notification-close-icon {
-  font-weight: 700;
-}
-
 .notification-header-close .dropdown-menu {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }

frontend/src/css/wiki-trash-dialog.css

@@ -17,17 +17,6 @@
   padding: 0 0.5rem;
 }
 
-.trash-dialog .modal-header .trash-dialog-close-icon {
-  color: #000;
-  opacity: 0.5;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.trash-dialog .modal-header .trash-dialog-close-icon:hover {
-  opacity: 0.75;
-}
-
 .trash-dialog .modal-body {
   height: 500px;
   overflow-y: auto;