-Moved thickness and type specifications to _page_accessaries_modal.scss.

-grw-page-accessories-modal in _layout_growi.scss {The following contentMoved to _page_accessaries_modal.scss.
-In PageAccessoriesModal.jsx, added p-0 to modal body and removed this description.

src/client/js/components/PageAccessoriesModal.jsx

@@ -102,7 +102,7 @@ const PageAccessoriesModal = (props) => {
   return (
     <React.Fragment>
       <Modal size="xl" isOpen={props.isOpen} toggle={closeModalHandler} className="grw-page-accessories-modal">
-        <ModalBody>
+        <ModalBody className="p-0">
           <Nav className="nav-title" id="nav-title">
             {Object.entries(navTabMapping).map(([key, value]) => {
               return (
@@ -114,14 +114,13 @@ const PageAccessoriesModal = (props) => {
                 </NavItem>
               );
             })}
-
             <Button
               close
               onClick={closeModalHandler}
             />
-
           </Nav>
           <hr id="grw-nav-slide-hr" className="my-0" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
+          <hr className="modal-split-hr m-0" />
           <TabContent activeTab={activeTab}>
             <TabPane tabId="pagelist">
               {pageAccessoriesContainer.state.activeComponents.has('pagelist') && <PageList />}

src/client/styles/scss/_layout_growi.scss

@@ -23,29 +23,6 @@
     }
   }
 
-  .grw-page-accessories-modal {
-    .modal-body {
-      padding: 0rem;
-    }
-    .nav-title {
-      //li.button etc
-      li.nav-link {
-        padding: 0rem;
-        a.nav-link {
-          padding: 1rem 1.5rem;
-        }
-      }
-    }
-    .table-top-icon {
-      margin-right: 5px;
-    }
-
-    #grw-nav-slide-hr {
-      border-top: 0rem;
-      transition: 0.3s ease-in-out;
-    }
-  }
-
   .revision-toc {
     position: sticky;
     // growisubnavigation + grw-navbar-boder

src/client/styles/scss/_page_accessaries_modal.scss

@@ -4,15 +4,51 @@
 
     li {
       display: inline;
+
+      padding: 0rem;
+      a.nav-link {
+        padding: 1rem 1.5rem;
+      }
     }
     .close {
       margin: auto 1.5rem auto auto;
     }
   }
+  .table-top-icon {
+    margin-right: 5px;
+  }
 
+  #grw-nav-slide-hr {
+    border-top: 0rem;
+    border-bottom: 3px solid;
+    transition: 0.3s ease-in-out;
+  }
   .nav-link svg {
     width: 17px;
     height: 17px;
     margin-right: 5px;
   }
 }
+
+// .grw-page-accessories-modal {
+//   // .modal-body {
+//   //   padding: 0rem;
+//   // }
+//   .nav-title {
+
+//     li.nav-link {
+//       padding: 0rem;
+//       a.nav-link {
+//         padding: 1rem 1.5rem;
+//       }
+//     }
+//   }
+//   .table-top-icon {
+//     margin-right: 5px;
+//   }
+
+//   #grw-nav-slide-hr {
+//     border-top: 0rem;
+//     transition: 0.3s ease-in-out;
+//   }
+// }

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

@@ -287,12 +287,12 @@ pre:not(.hljs):not(.CodeMirror-line) {
   .nav-link svg {
     fill: $color-link;
   }
-  .page-list-container-create {
-    border-top: 1px solid $bordercolor-nav-tabs;
+  .modal-split-hr {
+    background-color: $bordercolor-nav-tabs;
   }
 
   #grw-nav-slide-hr {
-    border-bottom: 3px solid $color-link;
+    border-color: $color-link;
   }
 }