Merge pull request #8013 from weseek/support/129075-close-button

support: Bootstrap v5 braking changes Close button

apps/app/src/components/DescendantsPageListModal.module.scss

@@ -1,6 +1,6 @@
 .grw-descendants-page-list-modal :global {
   .modal-header {
-    button.close {
+    button.btn-close {
       margin: auto 0rem auto auto;
     }
   }

apps/app/src/components/PageAccessoriesModal/PageAccessoriesModal.module.scss

@@ -1,6 +1,6 @@
 .grw-page-accessories-modal :global {
   .modal-header {
-    button.close {
+    button.btn-close {
       margin: auto 0rem auto auto;
     }
   }

apps/app/src/components/PagePresentationModal.module.scss

@@ -16,7 +16,7 @@
     z-index: 110; // over ".reveal .slides"
   }
 
-  .close {
+  .btn-close {
     display: inline-block;
     width: 3rem;
     height: 3rem;

apps/app/src/components/PagePresentationModal.tsx

@@ -67,12 +67,14 @@ const PagePresentationModal = (): JSX.Element => {
       className={`grw-presentation-modal ${styles['grw-presentation-modal']}`}
     >
       <div className="grw-presentation-controls d-flex">
-        <button className="close btn-fullscreen" type="button" aria-label="fullscreen" onClick={toggleFullscreenHandler}>
-          <i className={`${fullscreen.active ? 'icon-size-actual' : 'icon-size-fullscreen'}`} aria-hidden></i>
-        </button>
-        <button className="close btn-close" type="button" aria-label="close" onClick={closeHandler}>
-          <i className="ti ti-close" aria-hidden></i>
+        <button
+          className={`btn ${fullscreen.active ? 'icon-size-actual' : 'icon-size-fullscreen'}`}
+          type="button"
+          aria-label="fullscreen"
+          onClick={toggleFullscreenHandler}
+        >
         </button>
+        <button className="btn-close" type="button" aria-label="Close" onClick={closeHandler}></button>
       </div>
       <ModalBody className="modal-body d-flex justify-content-center align-items-center">
         { rendererOptions != null && (

apps/app/src/features/questionnaire/client/components/QuestionnaireToast.tsx

@@ -72,9 +72,7 @@ const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JS
     <div className={`toast ${isOpen ? 'show' : 'hide'}`}>
       <div className="toast-header bg-primary">
         <strong className="mr-auto text-light">{questionnaireOrderShortTitle}</strong>
-        <button type="button" className="ml-2 mb-1 close" onClick={closeBtnClickHandler}>
-          <span aria-hidden="true" className="text-light">&times;</span>
-        </button>
+        <button type="button" className="ml-2 mb-1 btn-close" onClick={closeBtnClickHandler} aria-label="Close"></button>
       </div>
       <div className="toast-body bg-light text-dark d-flex justify-content-end">
         <button type="button" className="btn btn-secondary mr-3" onClick={answerBtnClickHandler}>{t('questionnaire.answer')}</button>

apps/app/src/styles/_override-rbt.scss

@@ -9,8 +9,10 @@
   }
 }
 
+// TODO: check padding when upgrade react-bootstrap-typeahead v6
+// https://redmine.weseek.co.jp/issues/129103
 .rbt-input-wrapper {
-  .close.rbt-close {
+  .btn-close.rbt-close {
     // default bootstrap .close has padding 0
     padding: 3px 7px;
   }

apps/app/src/styles/theme/apply-colors.scss

@@ -340,7 +340,7 @@ ul.pagination {
     .modal-title {
       color: $color-modal-header;
     }
-    .close {
+    .btn-close {
       color: $color-modal-header;
       opacity: 0.5;
 
@@ -361,7 +361,7 @@ ul.pagination {
 
 .grw-page-accessories-modal,.grw-descendants-page-list-modal {
   .modal-header {
-    .close {
+    .btn-close {
       color: #{hsl.contrast(var(--bgcolor-global))};
     }
   }