Removed the `grw-table-top-icons` class.

src/client/js/components/TopOfTableContents.jsx

@@ -52,25 +52,23 @@ const TopOfTableContents = (props) => {
   return (
     <>
       <div className="top-of-table-contents d-flex align-items-center pb-1 ">
-        <div className=" pr-2 mr-2 grw-table-top-icons">
 
-          <button type="button" className="bg-transparent border-0 " onClick={() => openPageAccessoriesModal('pageList')}>
-            <PageListIcon />
-          </button>
+        <button type="button" className="bg-transparent border-0 grw-pagelist-icon" onClick={() => openPageAccessoriesModal('pageList')}>
+          <PageListIcon />
+        </button>
 
-          <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('timeLine')}>
-            <TimeLineIcon />
-          </button>
+        <button type="button" className="bg-transparent border-0 grw-timeline-icon" onClick={() => openPageAccessoriesModal('timeLine')}>
+          <TimeLineIcon />
+        </button>
 
-          <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('recentChanges')}>
-            <RecentChangesIcon />
-          </button>
+        <button type="button" className="bg-transparent border-0 grw-recentchanges-icon" onClick={() => openPageAccessoriesModal('recentChanges')}>
+          <RecentChangesIcon />
+        </button>
 
-          <button type="button" className="bg-transparent border-0 " onClick={() => openPageAccessoriesModal('attachment')}>
-            <AttachmentIcon />
-          </button>
+        <button type="button" className="bg-transparent border-0 grw-attachment-icon" onClick={() => openPageAccessoriesModal('attachment')}>
+          <AttachmentIcon />
+        </button>
 
-        </div>
         <div
           id="seen-user-list"
           data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"

src/client/js/components/User/SeenUserList.jsx

@@ -20,8 +20,8 @@ const SeenUserList = (props) => {
   const toggle = () => setPopoverOpen(!popoverOpen);
   const { pageContainer } = props;
   return (
-    <div>
-      <Button id="SeenUserPopover" type="button" className="btn btn-seen-user-list border-0 px-2 py-0 bg-transparent">
+    <div className="btn-seen-user-list pl-2 ml-2">
+      <Button id="SeenUserPopover" type="button" className="btn border-0 px-2 py-0 bg-transparent">
         <span className="mr-1 footstamp-icon"><FootstampIcon /></span>
         <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>
       </Button>

src/client/styles/scss/_layout.scss

@@ -145,7 +145,10 @@ body {
 .top-of-table-contents {
   flex-wrap: wrap;
 
-  .grw-table-top-icons {
+  .grw-pagelist-icon,
+  .grw-timeline-icon,
+  .grw-recentchanges-icon,
+  .grw-attachment-icon {
     svg {
       width: 16px;
       height: 16px;
@@ -156,11 +159,11 @@ body {
     font-size: 12px;
     font-weight: bolder;
   }
-  .grw-table-top-icons {
-    border-right: 1px solid;
-  }
   .btn-seen-user-list {
-    white-space: nowrap;
+    border-left: 1px solid;
+    .btn {
+      white-space: nowrap;
+    }
   }
 
   .seen-user-popover {

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

@@ -248,23 +248,27 @@ pre:not(.hljs):not(.CodeMirror-line) {
 
 .top-of-table-contents {
   border-color: $bordercolor-nav-tabs;
-  .grw-table-top-icons {
-    border-color: $bordercolor-nav-tabs;
-  }
-  .grw-table-top-icons {
+
+  .grw-pagelist-icon,
+  .grw-timeline-icon,
+  .grw-recentchanges-icon,
+  .grw-attachment-icon {
     fill: $color-link;
   }
-  .btn.btn-seen-user-list {
-    color: $color-seen-user;
-    &:active {
+  .btn-seen-user-list {
+    border-color: $bordercolor-nav-tabs;
+    .btn {
       color: $color-seen-user;
-    }
-    &:focus {
-      outline: none;
-      box-shadow: none;
-    }
-    .footstamp-icon {
-      fill: $color-seen-user;
+      &:active {
+        color: $color-seen-user;
+      }
+      &:focus {
+        outline: none;
+        box-shadow: none;
+      }
+      .footstamp-icon {
+        fill: $color-seen-user;
+      }
     }
   }
 }