Rewrite some styles to classes.

src/client/js/components/PageAccessoriesModal.jsx

@@ -106,7 +106,7 @@ const PageAccessoriesModal = (props) => {
           <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,6 +115,7 @@ const PageAccessoriesModal = (props) => {
               );
             })}
             <Button
+              className="my-auto ml-auto mr-3"
               close
               onClick={closeModalHandler}
             />

src/client/styles/scss/_page_accessaries_modal.scss

@@ -3,21 +3,11 @@
     flex-wrap: nowrap;
 
     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;