reorganize classes

src/client/js/components/TopOfTableContents.jsx

@@ -33,7 +33,7 @@ const TopOfTableContents = (props) => {
       <div className="top-of-table-contents d-flex align-items-end pb-1">
         <button
           type="button"
-          className="bg-transparent border-0 btn-page-list-icon"
+          className="btn btn-link grw-btn-top-of-table"
           onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('pagelist')}
         >
           <PageListIcon />
@@ -41,7 +41,7 @@ const TopOfTableContents = (props) => {
 
         <button
           type="button"
-          className="bg-transparent border-0 btn-time-line-icon"
+          className="btn btn-link grw-btn-top-of-table"
           onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('timeline')}
         >
           <TimeLineIcon />
@@ -49,7 +49,7 @@ const TopOfTableContents = (props) => {
 
         <button
           type="button"
-          className="bg-transparent border-0 btn-recent-changes-icon"
+          className="btn btn-link grw-btn-top-of-table"
           onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('page-history')}
         >
           <RecentChangesIcon />
@@ -57,7 +57,7 @@ const TopOfTableContents = (props) => {
 
         <button
           type="button"
-          className="bg-transparent border-0 btn-attachment-icon"
+          className="btn btn-link grw-btn-top-of-table"
           onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('attachment')}
         >
           <AttachmentIcon />

src/client/styles/scss/_layout.scss

@@ -32,30 +32,6 @@ body {
   margin-top: 1rem;
 }
 
-.revision-toc {
-  // to get on the Attachment row
-  z-index: 1;
-  overflow: hidden;
-  font-size: 0.9em;
-
-  .revision-toc-content {
-    padding: 10px;
-
-    > ul {
-      padding-left: 0;
-      ul {
-        padding-left: 1em;
-      }
-    }
-
-    // first level of li
-    > ul > li {
-      padding: 5px;
-      margin: 4px 4px 4px 17px;
-    }
-  }
-}
-
 .grw-fab {
   position: fixed;
   right: 1.5rem;
@@ -141,32 +117,3 @@ body {
     margin-left: 0.5em;
   }
 }
-
-.top-of-table-contents {
-  flex-wrap: wrap;
-
-  .btn-page-list-icon,
-  .btn-time-line-icon,
-  .btn-recent-changes-icon,
-  .btn-attachment-icon {
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  .seen-user-count {
-    font-size: 12px;
-    font-weight: bolder;
-  }
-  .btn-seen-user-list {
-    border-left: 1px solid;
-    .btn {
-      white-space: nowrap;
-    }
-  }
-
-  .seen-user-popover {
-    max-width: 200px;
-  }
-}

src/client/styles/scss/_toc.scss

@@ -0,0 +1,50 @@
+.top-of-table-contents {
+  flex-wrap: wrap;
+
+  .grw-btn-top-of-table {
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .seen-user-count {
+    font-size: 12px;
+    font-weight: bolder;
+  }
+  .grw-seen-user-list {
+    border-left: 1px solid;
+
+    .btn {
+      white-space: nowrap;
+    }
+  }
+
+  .seen-user-popover {
+    max-width: 200px;
+  }
+}
+
+.revision-toc {
+  // to get on the Attachment row
+  z-index: 1;
+  overflow: hidden;
+  font-size: 0.9em;
+
+  .revision-toc-content {
+    padding: 10px;
+
+    > ul {
+      padding-left: 0;
+      ul {
+        padding-left: 1em;
+      }
+    }
+
+    // first level of li
+    > ul > li {
+      padding: 5px;
+      margin: 4px 4px 4px 17px;
+    }
+  }
+}

src/client/styles/scss/style-app.scss

@@ -54,6 +54,7 @@
 @import 'sidebar';
 @import 'subnav';
 @import 'tag';
+@import 'toc';
 @import 'user';
 @import 'user_growi';
 @import 'staff_credit';