- Moved the modal layout to `_page_accessaries_modal.scss`.

- Changed the icon size specification method.
- Delete unnecessary description.

src/client/js/components/PageAccessoriesModal.jsx

@@ -41,12 +41,12 @@ const PageAccessoriesModal = (props) => {
         className="grw-page-accessories-modal"
       >
         <ModalBody>
-          <Nav className="nav-title border-bottom">
+          <Nav className="nav-title border-bottom grw-modal-head-icons">
             <NavItem className={`nav-link ${props.activeTab === 'pageList' && 'active'}`}>
               <NavLink
                 onClick={() => { switchTabHandler('pageList') }}
               >
-                <div className="grw-modal-head-icons"><PageListIcon /></div>
+                <PageListIcon />
                 { t('page_list') }
               </NavLink>
             </NavItem>
@@ -54,7 +54,7 @@ const PageAccessoriesModal = (props) => {
               <NavLink
                 onClick={() => { switchTabHandler('timeLine') }}
               >
-                <div className="grw-modal-head-icons"><TimeLineIcon /></div>
+                <TimeLineIcon />
                 { t('Timeline View') }
               </NavLink>
             </NavItem>
@@ -62,7 +62,7 @@ const PageAccessoriesModal = (props) => {
               <NavLink
                 onClick={() => { switchTabHandler('recentChanges') }}
               >
-                <div className="grw-modal-head-icons"><RecentChangesIcon /></div>
+                <RecentChangesIcon />
                 { t('History') }
               </NavLink>
             </NavItem>
@@ -70,7 +70,7 @@ const PageAccessoriesModal = (props) => {
               <NavLink
                 onClick={() => { switchTabHandler('attachment') }}
               >
-                <div className="grw-modal-head-icons"><AttachmentIcon /></div>
+                <AttachmentIcon />
                 { t('attachment_data') }
               </NavLink>
             </NavItem>

src/client/js/components/TopOfTableContents.jsx

@@ -52,30 +52,22 @@ const TopOfTableContents = (props) => {
   return (
     <>
       <div className="top-of-table-contents d-flex align-items-center pb-1 ">
-        <div className="icon-button-box pr-2 mr-2">
+        <div className=" pr-2 mr-2 grw-table-top-icons">
 
-          <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('pageList')}>
-            <div className="grw-table-top-icons ">
-              <PageListIcon />
-            </div>
+          <button type="button" className="bg-transparent border-0 " onClick={() => openPageAccessoriesModal('pageList')}>
+            <PageListIcon />
           </button>
 
           <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('timeLine')}>
-            <div className="grw-table-top-icons ">
-              <TimeLineIcon />
-            </div>
+            <TimeLineIcon />
           </button>
 
           <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('recentChanges')}>
-            <div className="grw-table-top-icons ">
-              <RecentChangesIcon />
-            </div>
+            <RecentChangesIcon />
           </button>
 
           <button type="button" className="bg-transparent border-0 " onClick={() => openPageAccessoriesModal('attachment')}>
-            <div className="grw-table-top-icons ">
-              <AttachmentIcon />
-            </div>
+            <AttachmentIcon />
           </button>
 
         </div>

src/client/styles/scss/_layout.scss

@@ -142,19 +142,21 @@ body {
   }
 }
 
-.grw-table-top-icons {
-  width: 16px;
-  height: 16px;
-}
-
 .top-of-table-contents {
   flex-wrap: wrap;
 
+  .grw-table-top-icons {
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
   .seen-user-count {
     font-size: 12px;
     font-weight: bolder;
   }
-  .icon-button-box {
+  .grw-table-top-icons {
     border-right: 1px solid;
   }
   .btn-seen-user-list {

src/client/styles/scss/_layout_growi.scss

@@ -23,12 +23,6 @@
     }
   }
 
-  .grw-page-accessories-modal {
-    .grw-table-top-icons {
-      margin-right: 5px;
-    }
-  }
-
   .revision-toc {
     position: sticky;
     // growisubnavigation + grw-navbar-boder

src/client/styles/scss/_page_accessaries_modal.scss

@@ -1,6 +1,9 @@
 .grw-page-accessories-modal {
   .grw-modal-head-icons {
-    width: 20px;
-    height: 20px;
+    svg {
+      width: 20px;
+      height: 20px;
+      margin-right: 5px;
+    }
   }
 }

src/client/styles/scss/style-app.scss

@@ -60,6 +60,7 @@
 @import 'staff_credit';
 @import 'waves';
 @import 'wiki';
+@import 'page_accessaries_modal';
 
 /*
  * for Guest User Mode

src/client/styles/scss/theme/_apply-colors.scss

@@ -248,7 +248,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
 
 .top-of-table-contents {
   border-color: $bordercolor-nav-tabs;
-  .icon-button-box {
+  .grw-table-top-icons {
     border-color: $bordercolor-nav-tabs;
   }
   .grw-table-top-icons {