Merge pull request #2791 from weseek/feat/gw-3842-adjust-modalheader-margin

Feat/gw 3842 adjust modalheader margin

src/client/js/components/PageAccessoriesModal.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  Modal, ModalBody, Nav, NavItem, NavLink, TabContent, TabPane,
+  Button, Modal, ModalBody, Nav, NavItem, NavLink, TabContent, TabPane,
 } from 'reactstrap';
 
 import { withTranslation } from 'react-i18next';
@@ -103,11 +103,11 @@ const PageAccessoriesModal = (props) => {
     <React.Fragment>
       <Modal size="xl" isOpen={props.isOpen} toggle={closeModalHandler} className="grw-page-accessories-modal">
         {/* [TODO: insert a modal header and move nav tabs there  by gw-3890] */}
-        <ModalBody className="overflow-auto grw-modal-body-style">
+        <ModalBody className="overflow-auto grw-modal-body-style p-0">
           <Nav className="nav-title" id="nav-title">
             {Object.entries(navTabMapping).map(([key, value]) => {
               return (
-                <NavItem key={key} type="button" className={`nav-link ${activeTab === key && 'active'}`}>
+                <NavItem key={key} type="button" className={`p-0 nav-link ${activeTab === key && 'active'}`}>
                   <NavLink onClick={() => { switchActiveTab(key) }}>
                     {value.icon}
                     {t(value.i18n)}
@@ -115,8 +115,14 @@ const PageAccessoriesModal = (props) => {
                 </NavItem>
               );
             })}
+            <Button
+              className="my-auto ml-auto mr-3"
+              close
+              onClick={closeModalHandler}
+            />
           </Nav>
-          <hr id="grw-nav-slide-hr" className="my-0" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
+          <hr className="my-0 grw-nav-slide-hr" 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,16 +23,6 @@
     }
   }
 
-  .grw-page-accessories-modal {
-    .table-top-icon {
-      margin-right: 5px;
-    }
-
-    #grw-nav-slide-hr {
-      transition: 0.3s ease-in-out;
-    }
-  }
-
   .revision-toc {
     position: sticky;
     // growisubnavigation + grw-navbar-boder

src/client/styles/scss/_page_accessaries_modal.scss

@@ -1,7 +1,21 @@
 .grw-page-accessories-modal {
+  .nav-title {
+    flex-wrap: nowrap;
+
+    li {
+      a.nav-link {
+        padding: 1rem 1.5rem;
+      }
+    }
+  }
+  .grw-nav-slide-hr {
+    border-top: 0rem;
+    border-bottom: 3px solid;
+    transition: 0.3s ease-in-out;
+  }
   .nav-link svg {
-    width: 20px;
-    height: 20px;
+    width: 17px;
+    height: 17px;
     margin-right: 5px;
   }
 

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

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