Fixed icon class name

-"Pagelist" → "page-list"
-"Timeline" → "time-line"
-"Recentchanges" → "recent-changes"

Corrected the icon class name in `TopOfTableContants`
-"grw-xxx-icon" → "btn-xxx-icon"

src/client/js/components/PageAccessoriesModal.jsx

@@ -42,7 +42,7 @@ const PageAccessoriesModal = (props) => {
       >
         <ModalBody>
           <Nav className="nav-title border-bottom">
-            <NavItem className={`nav-link grw-pagelist-icon ${props.activeTab === 'pageList' && 'active'}`}>
+            <NavItem className={`nav-link grw-page-list-icon ${props.activeTab === 'pageList' && 'active'}`}>
               <NavLink
                 onClick={() => { switchTabHandler('pageList') }}
               >
@@ -50,7 +50,7 @@ const PageAccessoriesModal = (props) => {
                 { t('page_list') }
               </NavLink>
             </NavItem>
-            <NavItem className={`nav-link grw-timeline-icon ${props.activeTab === 'timeLine' && 'active'}`}>
+            <NavItem className={`nav-link grw-time-line-icon ${props.activeTab === 'timeLine' && 'active'}`}>
               <NavLink
                 onClick={() => { switchTabHandler('timeLine') }}
               >
@@ -58,7 +58,7 @@ const PageAccessoriesModal = (props) => {
                 { t('Timeline View') }
               </NavLink>
             </NavItem>
-            <NavItem className={`nav-link grw-recentchanges-icon ${props.activeTab === 'recentChanges' && 'active'}`}>
+            <NavItem className={`nav-link grw-recent-changes-icon ${props.activeTab === 'recentChanges' && 'active'}`}>
               <NavLink
                 onClick={() => { switchTabHandler('recentChanges') }}
               >

src/client/js/components/TopOfTableContents.jsx

@@ -53,19 +53,19 @@ const TopOfTableContents = (props) => {
     <>
       <div className="top-of-table-contents d-flex align-items-center pb-1 ">
 
-        <button type="button" className="bg-transparent border-0 grw-pagelist-icon" onClick={() => openPageAccessoriesModal('pageList')}>
+        <button type="button" className="bg-transparent border-0 btn-page-list-icon" onClick={() => openPageAccessoriesModal('pageList')}>
           <PageListIcon />
         </button>
 
-        <button type="button" className="bg-transparent border-0 grw-timeline-icon" onClick={() => openPageAccessoriesModal('timeLine')}>
+        <button type="button" className="bg-transparent border-0 btn-time-line-icon" onClick={() => openPageAccessoriesModal('timeLine')}>
           <TimeLineIcon />
         </button>
 
-        <button type="button" className="bg-transparent border-0 grw-recentchanges-icon" onClick={() => openPageAccessoriesModal('recentChanges')}>
+        <button type="button" className="bg-transparent border-0 btn-recent-changes-icon" onClick={() => openPageAccessoriesModal('recentChanges')}>
           <RecentChangesIcon />
         </button>
 
-        <button type="button" className="bg-transparent border-0 grw-attachment-icon" onClick={() => openPageAccessoriesModal('attachment')}>
+        <button type="button" className="bg-transparent border-0 btn-attachment-icon" onClick={() => openPageAccessoriesModal('attachment')}>
           <AttachmentIcon />
         </button>
 

src/client/styles/scss/_layout.scss

@@ -145,10 +145,10 @@ body {
 .top-of-table-contents {
   flex-wrap: wrap;
 
-  .grw-pagelist-icon,
-  .grw-timeline-icon,
-  .grw-recentchanges-icon,
-  .grw-attachment-icon {
+  .btn-page-list-icon,
+  .btn-time-line-icon,
+  .btn-recent-changes-icon,
+  .btn-attachment-icon {
     svg {
       width: 16px;
       height: 16px;

src/client/styles/scss/_page_accessaries_modal.scss

@@ -1,7 +1,7 @@
 .grw-page-accessories-modal {
-  .grw-pagelist-icon,
-  .grw-timeline-icon,
-  .grw-recentchanges-icon,
+  .grw-page-list-icon,
+  .grw-time-line-icon,
+  .grw-recent-changes-icon,
   .grw-attachment-icon {
     svg {
       width: 20px;

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

@@ -249,10 +249,10 @@ pre:not(.hljs):not(.CodeMirror-line) {
 .top-of-table-contents {
   border-color: $bordercolor-nav-tabs;
 
-  .grw-pagelist-icon,
-  .grw-timeline-icon,
-  .grw-recentchanges-icon,
-  .grw-attachment-icon {
+  .btn-page-list-icon,
+  .btn-time-line-icon,
+  .btn-recent-changes-icon,
+  .btn-attachment-icon {
     fill: $color-link;
   }
   .btn-seen-user-list {
@@ -277,9 +277,9 @@ pre:not(.hljs):not(.CodeMirror-line) {
   .nav-title {
     color: $color-link;
   }
-  .grw-pagelist-icon,
-  .grw-timeline-icon,
-  .grw-recentchanges-icon,
+  .grw-page-list-icon,
+  .grw-time-line-icon,
+  .grw-recent-changes-icon,
   .grw-attachment-icon {
     fill: $color-link;
   }