Fix about dialog close button style (#7380)

* 01 fix about dialog style * 02 fix guide for new dialog
haiwen · Jan 17, 2025 · 7d4a9f4 · 7d4a9f4
1 parent cf4856d
commit 7d4a9f4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/frontend/src/components/dialog/about-dialog.js b/frontend/src/components/dialog/about-dialog.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody } from 'reactstrap';
 import { gettext, lang, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, seafileVersion, additionalAboutDialogLinks, aboutDialogCustomHtml } from '../../utils/constants';
+import '../../css/seahub-modal-header.css';
 
 const propTypes = {
   onCloseAboutDialog: PropTypes.func.isRequired,
@@ -27,7 +28,11 @@ class AboutDialog extends React.Component {
       return (
         <Modal isOpen={true} toggle={toggleDialog}>
           <ModalBody>
-            <button type="button" className="close" onClick={toggleDialog}><span aria-hidden="true">×</span></button>
+            <button type="button" className="close seahub-modal-btn p-0" aria-label={gettext('Close')} onClick={toggleDialog}>
+              <span className="seahub-modal-btn-inner">
+                <i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
+              </span>
+            </button>
             <div className="about-content" dangerouslySetInnerHTML={{ __html: aboutDialogCustomHtml }}></div>
           </ModalBody>
         </Modal>
@@ -36,7 +41,11 @@ class AboutDialog extends React.Component {
       return (
         <Modal isOpen={true} toggle={toggleDialog}>
           <ModalBody>
-            <button type="button" className="close" onClick={toggleDialog}><span aria-hidden="true">×</span></button>
+            <button type="button" className="close seahub-modal-btn p-0" aria-label={gettext('Close')} onClick={toggleDialog}>
+              <span className="seahub-modal-btn-inner">
+                <i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
+              </span>
+            </button>
             <div className="about-content">
               <p><img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" /></p>
               <p>{gettext('Server Version: ')}{seafileVersion}<br />© {(new Date()).getFullYear()} {gettext('Seafile')}</p>

diff --git a/frontend/src/components/dialog/guide-for-new-dialog.js b/frontend/src/components/dialog/guide-for-new-dialog.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody } from 'reactstrap';
 import { gettext, mediaUrl, siteName, canAddRepo } from '../../utils/constants';
+import '../../css/seahub-modal-header.css';
 
 const propTypes = {
   toggleDialog: PropTypes.func.isRequired
@@ -17,7 +18,11 @@ class GuideForNewDialog extends React.Component {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalBody>
-          <button type="button" className="close text-gray" onClick={this.toggle}><span aria-hidden="true">×</span></button>
+          <button type="button" className="close seahub-modal-btn p-0" aria-label={gettext('Close')} onClick={this.toggle}>
+            <span className="seahub-modal-btn-inner">
+              <i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
+            </span>
+          </button>
           <div className="p-2 text-center">
             <img src={`${mediaUrl}img/welcome.png`} width="408" alt="" />
             <h3 id="dialogTitle" className="mt-6 mb-4">{gettext('Welcome to {site_name_placeholder}').replace('{site_name_placeholder}', siteName)}</h3>

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