Enable the close button.

Deleted the test description.

src/client/js/components/PageAccessoriesModal.jsx

@@ -2,7 +2,7 @@ import React 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';
@@ -95,61 +95,61 @@ const PageAccessoriesModal = (props) => {
       <Modal size="xl" isOpen={props.isOpen} toggle={closeModalHandler} className="grw-page-accessories-modal">
         <ModalBody>
           <Nav className="nav-title" id="nav-title">
-            <div className="aaaaaaaaaa">
-              <NavItem type="button" className={`nav-link ${activeTab === 'pagelist' && 'active'}`}>
-                <NavLink
-                  onClick={() => {
-                    switchActiveTab('pagelist');
-                  }}
-                >
-                  <PageListIcon />
-                  {t('page_list')}
-                </NavLink>
-              </NavItem>
-              <NavItem type="button" className={`nav-link ${activeTab === 'timeline' && 'active'}`}>
-                <NavLink
-                  onClick={() => {
-                    switchActiveTab('timeline');
-                  }}
-                >
-                  <TimeLineIcon />
-                  {t('Timeline View')}
-                </NavLink>
-              </NavItem>
-              <NavItem type="button" className={`nav-link ${activeTab === 'page-history' && 'active'}`}>
-                <NavLink
-                  onClick={() => {
-                    switchActiveTab('page-history');
-                  }}
-                >
-                  <RecentChangesIcon />
-                  {t('History')}
-                </NavLink>
-              </NavItem>
-              <NavItem type="button" className={`nav-link ${activeTab === 'attachment' && 'active'}`}>
-                <NavLink
-                  onClick={() => {
-                    switchActiveTab('attachment');
-                  }}
-                >
-                  <AttachmentIcon />
-                  {t('attachment_data')}
-                </NavLink>
-              </NavItem>
-              <NavItem type="button" className={`nav-link ${activeTab === 'share-link' && 'active'}`}>
-                <NavLink
-                  onClick={() => {
-                    switchActiveTab('share-link');
-                  }}
-                >
-                  <ShareLinkIcon />
-                  {t('share_links.share_link_management')}
-                </NavLink>
-              </NavItem>
-            </div>
-            <button type="button" className="close " data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
-            </button>
+            <NavItem type="button" className={`nav-link ${activeTab === 'pagelist' && 'active'}`}>
+              <NavLink
+                onClick={() => {
+                  switchActiveTab('pagelist');
+                }}
+              >
+                <PageListIcon />
+                {t('page_list')}
+              </NavLink>
+            </NavItem>
+            <NavItem type="button" className={`nav-link ${activeTab === 'timeline' && 'active'}`}>
+              <NavLink
+                onClick={() => {
+                  switchActiveTab('timeline');
+                }}
+              >
+                <TimeLineIcon />
+                {t('Timeline View')}
+              </NavLink>
+            </NavItem>
+            <NavItem type="button" className={`nav-link ${activeTab === 'page-history' && 'active'}`}>
+              <NavLink
+                onClick={() => {
+                  switchActiveTab('page-history');
+                }}
+              >
+                <RecentChangesIcon />
+                {t('History')}
+              </NavLink>
+            </NavItem>
+            <NavItem type="button" className={`nav-link ${activeTab === 'attachment' && 'active'}`}>
+              <NavLink
+                onClick={() => {
+                  switchActiveTab('attachment');
+                }}
+              >
+                <AttachmentIcon />
+                {t('attachment_data')}
+              </NavLink>
+            </NavItem>
+            <NavItem type="button" className={`nav-link ${activeTab === 'share-link' && 'active'}`}>
+              <NavLink
+                onClick={() => {
+                  switchActiveTab('share-link');
+                }}
+              >
+                <ShareLinkIcon />
+                {t('share_links.share_link_management')}
+              </NavLink>
+            </NavItem>
+
+            <Button
+              close
+              onClick={closeModalHandler}
+            />
           </Nav>
           <hr id="grw-nav-slide-hr" className="my-0"></hr>
           <div className="page-list-container-create">

src/client/styles/scss/_page_accessaries_modal.scss

@@ -1,19 +1,12 @@
 .grw-page-accessories-modal {
   .nav-title {
     flex-wrap: nowrap;
-    .aaaaaaaaaa {
-      li {
-        display: inline;
-      }
-      margin-right: auto;
+
+    li {
+      display: inline;
     }
-    //flex-wrap: wrap;
-    //position: relative;
     .close {
-      //padding: 0rem 1.5rem;
-      //position: absolute;
-      // auto on the left force icon to the right even when there is no .modal-title
-      margin: auto 1.5rem;
+      margin: auto 1.5rem auto auto;
     }
   }