Add vertical line.

Adjust font size.

src/client/js/components/TopOfTableContents.jsx

@@ -52,24 +52,27 @@ const TopOfTableContents = (props) => {
   return (
     <>
       <div className="top-of-table-contents d-flex align-items-center pb-1 ">
-        <button type="button" className="bg-transparent border-0" 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" onClick={() => openPageAccessoriesModal('recentChanges')}>
-          <RecentChangesIcon />
-        </button>
-
-        <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('attachment')}>
-          <AttachmentIcon />
-        </button>
-        {/* [TODO: setting Footprints' icon by GW-3308] */}
+        <div className="icon-button-box pr-2 mr-2">
+
+          <button type="button" className="bg-transparent border-0" 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" onClick={() => openPageAccessoriesModal('recentChanges')}>
+            <RecentChangesIcon />
+          </button>
+
+          <button type="button" className="bg-transparent border-0 " onClick={() => openPageAccessoriesModal('attachment')}>
+            <AttachmentIcon />
+          </button>
+
+        </div>
         <div
-          className="justify-content-end"
+          className=""
           id="seen-user-list"
           data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
           data-sum-of-seen-users="{{ page.seenUsers.length|default(0) }}"

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

@@ -21,8 +21,8 @@ const SeenUserList = (props) => {
   const { pageContainer } = props;
   return (
     <div>
-      <Button id="SeenUserPopover" type="button" className="btn btn-seen-user-lists border-0 px-1 py-0 bg-transparent">
-        <span className="mr-2 footstamp-icon"><FootstampIcon /></span>
+      <Button id="SeenUserPopover" type="button" className="btn btn-seen-user-list 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>
       <Popover placement="bottom" isOpen={popoverOpen} target="SeenUserPopover" toggle={toggle} trigger="legacy">

src/client/styles/scss/_layout.scss

@@ -142,6 +142,7 @@ body {
   }
 }
 
+// seirisitenai
 .grw-page-accessories-modal {
   .table-top-icon {
     width: 20px;
@@ -155,12 +156,22 @@ body {
     width: 16px;
     height: 16px;
   }
+  .seen-user-count {
+    font-size: 12px;
+    font-weight: bolder;
+  }
 }
 
-.btn-seen-user-lists {
+.btn-seen-user-list {
   white-space: nowrap;
 }
 
 .seen-user-popover {
   max-width: 200px;
 }
+
+.top-of-table-contents {
+  .icon-button-box {
+    border-right: 1px solid;
+  }
+}

src/client/styles/scss/_layout_growi.scss

@@ -14,7 +14,8 @@
 
       .liker-user-count,
       .seen-user-count {
-        font-weight: bold;
+        font-size: 12px;
+        font-weight: bolder;
       }
     }
     .cls-1 {

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

@@ -251,7 +251,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
   .table-top-icon {
     fill: $color-link;
   }
-  .btn.btn-seen-user-lists {
+  .btn.btn-seen-user-list {
     color: $color-seen-user;
     &:active {
       color: $color-seen-user;
@@ -453,3 +453,14 @@ mark.rbt-highlight-text {
 .bg-box {
   background-color: $bgcolor-global;
 }
+
+// aaaaaaaaaaaaaaaaaa
+.top-of-table-contents {
+  .icon-button-box {
+    border-color: $bordercolor-nav-tabs;
+  }
+
+  .seen-user-popover {
+    background-color: red;
+  }
+}