Change modal icon size specification.

src/client/js/components/PageAccessoriesModal.jsx

@@ -46,7 +46,7 @@ const PageAccessoriesModal = (props) => {
               <NavLink
                 onClick={() => { switchTabHandler('pageList') }}
               >
-                <svg width="20px" height="20px"><PageListIcon /></svg>
+                <div className="grw-modal-head-icons"><PageListIcon /></div>
                 { t('page_list') }
               </NavLink>
             </NavItem>
@@ -54,7 +54,7 @@ const PageAccessoriesModal = (props) => {
               <NavLink
                 onClick={() => { switchTabHandler('timeLine') }}
               >
-                <TimeLineIcon />
+                <div className="grw-modal-head-icons"><TimeLineIcon /></div>
                 { t('Timeline View') }
               </NavLink>
             </NavItem>
@@ -62,7 +62,7 @@ const PageAccessoriesModal = (props) => {
               <NavLink
                 onClick={() => { switchTabHandler('recentChanges') }}
               >
-                <RecentChangesIcon />
+                <div className="grw-modal-head-icons"><RecentChangesIcon /></div>
                 { t('History') }
               </NavLink>
             </NavItem>
@@ -70,7 +70,7 @@ const PageAccessoriesModal = (props) => {
               <NavLink
                 onClick={() => { switchTabHandler('attachment') }}
               >
-                <AttachmentIcon />
+                <div className="grw-modal-head-icons"><AttachmentIcon /></div>
                 { t('attachment_data') }
               </NavLink>
             </NavItem>

src/client/js/components/TopOfTableContents.jsx

@@ -55,19 +55,27 @@ const TopOfTableContents = (props) => {
         <div className="icon-button-box pr-2 mr-2">
 
           <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('pageList')}>
-            <PageListIcon />
+            <div className="grw-table-top-icons ">
+              <PageListIcon />
+            </div>
           </button>
 
-          <button type="button" className="grw-table-top-icons bg-transparent border-0" onClick={() => openPageAccessoriesModal('timeLine')}>
-            <TimeLineIcon />
+          <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('timeLine')}>
+            <div className="grw-table-top-icons ">
+              <TimeLineIcon />
+            </div>
           </button>
 
-          <button type="button" className="grw-table-top-icons bg-transparent border-0" onClick={() => openPageAccessoriesModal('recentChanges')}>
-            <RecentChangesIcon />
+          <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('recentChanges')}>
+            <div className="grw-table-top-icons ">
+              <RecentChangesIcon />
+            </div>
           </button>
 
-          <button type="button" className="grw-table-top-icons bg-transparent border-0 " onClick={() => openPageAccessoriesModal('attachment')}>
-            <AttachmentIcon />
+          <button type="button" className="bg-transparent border-0 " onClick={() => openPageAccessoriesModal('attachment')}>
+            <div className="grw-table-top-icons ">
+              <AttachmentIcon />
+            </div>
           </button>
 
         </div>

src/client/styles/scss/_layout.scss

@@ -20,11 +20,9 @@ body {
 }
 
 .grw-page-accessories-modal {
-  .grw-table-top-icons {
-    .svg.g {
-      width: 20px;
-      height: 20px;
-    }
+  .grw-modal-head-icons {
+    width: 20px;
+    height: 20px;
   }
 }
 
@@ -151,13 +149,14 @@ body {
   }
 }
 
+.grw-table-top-icons {
+  width: 16px;
+  height: 16px;
+}
+
 .top-of-table-contents {
   flex-wrap: wrap;
 
-  .grw-table-top-icons {
-    width: 16px;
-    height: 16px;
-  }
   .seen-user-count {
     font-size: 12px;
     font-weight: bolder;

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

@@ -273,7 +273,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
   .nav-title {
     color: $color-link;
   }
-  .grw-table-top-icons {
+  .grw-modal-head-icons {
     fill: $color-link;
   }
   .active {