create RecentlyCreatedIcon

public/images/icons/grwicon-recently-created.svg

@@ -1,11 +0,0 @@
-<svg　xmlns="http://www.w3.org/2000/svg" width="20" height="20"　viewBox="0 0 20 20">
-<defs>
-<style></style>
-</defs>
-  <g transform="translate(-921.906 192.966)">
-   <rect width="20" height="20" transform="translate(921.906 -192.966)" fill="none"/>
-   <path d="M933.752-189.286l.022-.009a3.3,3.3,0,0,1,1.556.927,2.991,2.991,0,0,1,.505.679,3.659,3.659,0,0,1,.265.572c.038.126.069.245.091.356l-.911.9a6.484,6.484,0,0,1,1.086-.1c.177,0,.35.013.523.027.573-.571.93-.928,1.043-1.047a2.94,2.94,0,0,0,.959-2.086,2.854,2.854,0,0,0-1.008-1.986,3.3,3.3,0,0,0-.9-.629,2.344,2.344,0,0,0-.986-.215,2.836,2.836,0,0,0-2.053.91q-.3.28-10.478,10.478a.656.656,0,0,0-.149.232q-.066.28-1.391,4.651a.529.529,0,0,0,.149.546c.036.032.084.073.1.086a.937.937,0,0,0,.124.057.585.585,0,0,0,.3-.007q3.493-1.147,4.57-1.461a.549.549,0,0,0,.124-.048.517.517,0,0,0,.108-.083q.958-.952,2.5-2.483a2.017,2.017,0,0,0,.035-.513,6.356,6.356,0,0,1,.107-1.143l-2.558,2.531a4.537,4.537,0,0,0-.91-1.357,4.672,4.672,0,0,0-1.556-1.043Zm.975-.953.033-.032a2.254,2.254,0,0,1,.207-.183,2.379,2.379,0,0,1,.447-.248,1.51,1.51,0,0,1,.637-.149,1.418,1.418,0,0,1,.587.133,1.937,1.937,0,0,1,.555.4,2.714,2.714,0,0,1,.5.629,1.266,1.266,0,0,1,.173.612,1.926,1.926,0,0,1-.661,1.289.052.052,0,0,1-.016.033l-.033.032-.048.049a4.42,4.42,0,0,0-.96-1.507,4.709,4.709,0,0,0-1.473-1.011Zm-9.692,13.375-1.794.6q.148-.5.546-1.73t.511-1.648a3.4,3.4,0,0,1,1.521.926,3.151,3.151,0,0,1,.8,1.324q-.333.118-1.582.53Z"/>
-   <path d="M938.7-176.431a.5.5,0,0,1-.359-.151l-2.276-2.355a.5.5,0,0,1-.14-.347v-3.425a.5.5,0,0,1,.5-.5h0a.5.5,0,0,1,.5.5h0v3.225l2.135,2.209a.5.5,0,0,1-.011.7h0A.49.49,0,0,1,938.7-176.431Z"/>
-   <path d="M936.422-185.009a5.49,5.49,0,0,0-5.484,5.484,5.487,5.487,0,0,0,5.484,5.484,5.491,5.491,0,0,0,5.484-5.484A5.491,5.491,0,0,0,936.422-185.009Zm0,9.97a4.487,4.487,0,0,1-4.487-4.487,4.486,4.486,0,0,1,4.487-4.486,4.486,4.486,0,0,1,4.487,4.486A4.487,4.487,0,0,1,936.422-175.039Z"/>
-  </g>
-</svg>

src/client/js/components/Icons/RecentlyCreatedIcon.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+const RecentlyCreatedIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+  >
+
+    <g transform="translate(-921.906 192.966)">
+
+      <rect
+        width="20"
+        height="20"
+        transform="translate(921.906 -192.966)"
+        fill="none"
+      />
+      <path
+        d="M933.752-189.286l.022-.009a3.3,3.3,0,0,1,1.556.927,2.991,2.991,0,0,1,.505.679,3.659,3.659,0,0,1,
+        .265.572c.038.126.069.245.091.356l-.911.9a6.484,6.484,0,0,1,1.086-.1c.177,0,.35.013.523.027.573-.571.93-.928,1.043-1.047a2.94,
+        2.94,0,0,0,.959-2.086,2.854,2.854,0,0,0-1.008-1.986,3.3,3.3,0,0,0-.9-.629,2.344,2.344,0,0,0-.986-.215,
+        2.836,2.836,0,0,0-2.053.91q-.3.28-10.478,10.478a.656.656,0,0,0-.149.232q-.066.28-1.391,4.651a.529.529,0,0,0,
+        .149.546c.036.032.084.073.1.086a.937.937,0,0,0,.124.057.585.585,0,0,0,.3-.007q3.493-1.147,4.57-1.461a.549.549,0,0,0,.124-.048.517.517,
+        0,0,0,.108-.083q.958-.952,2.5-2.483a2.017,2.017,0,0,0,.035-.513,6.356,6.356,0,0,1,.107-1.143l-2.558,2.531a4.537,4.537,0,0,0-.91-1.357,
+        4.672,4.672,0,0,0-1.556-1.043Zm.975-.953.033-.032a2.254,2.254,0,0,1,.207-.183,2.379,2.379,0,0,1,.447-.248,1.51,1.51,0,0,1,.637-.149,
+        1.418,1.418,0,0,1,.587.133,1.937,1.937,0,0,1,.555.4,2.714,2.714,0,0,1,.5.629,1.266,1.266,0,0,1,.173.612,1.926,1.926,0,0,1-.661,1.289.052.052,
+        0,0,1-.016.033l-.033.032-.048.049a4.42,4.42,0,0,0-.96-1.507,4.709,4.709,0,0,0-1.473-1.011Zm-9.692,13.375-1.794.6q.148-.5.546-1.73t.511-1.648a3.4,
+        3.4,0,0,1,1.521.926,3.151,3.151,0,0,1,.8,1.324q-.333.118-1.582.53Z"
+        className="group1"
+      />
+      <path
+        d="M938.7-176.431a.5.5,0,0,1-.359-.151l-2.276-2.355a.5.5,0,0,1-.14-.347v-3.425a.5.5,0,0,1,.5-.5h0a.5.5,0,0,1,.5.5h0v3.225l2.135
+        ,2.209a.5.5,0,0,1-.011.7h0A.49.49,0,0,1,938.7-176.431Z"
+        className="group1"
+      />
+      <path
+        d="M936.422-185.009a5.49,5.49,0,0,0-5.484,5.484,5.487,5.487,0,0,0,5.484,5.484,5.491,5.491,0,0,0,5.484-5.484A5.491,5.491,0,0,0,
+        936.422-185.009Zm0,9.97a4.487,4.487,0,0,1-4.487-4.487,4.486,4.486,0,0,1,4.487-4.486,4.486,4.486,0,0,1,4.487,4.486A4.487,
+        4.487,0,0,1,936.422-175.039Z"
+        className="group1"
+      />
+    </g>
+  </svg>
+);
+
+export default RecentlyCreatedIcon;

src/client/js/components/TableOfContents.jsx

@@ -11,6 +11,8 @@ import { withUnstatedContainers } from './UnstatedUtils';
 import TopOfTableContents from './TopOfTableContents';
 import StickyStretchableScroller from './StickyStretchableScroller';
 
+import RecentlyCreatedIcon from './Icons/RecentlyCreatedIcon';
+
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:TableOfContents');
 
@@ -51,7 +53,7 @@ const TableOfContents = (props) => {
         <div
           id="revision-toc-content"
           className="revision-toc-content top-of-table-contents"
-        // eslint-disable-next-line react/no-danger
+         // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
           __html: tocHtml,
         }}
@@ -59,14 +61,12 @@ const TableOfContents = (props) => {
       </StickyStretchableScroller>
 
       <div className="mt-3 d-flex justify-content-around">
-
         <a className="btn btn-outline-secondary btn-sm" href="#">
-          <i className="icon-star"></i>
+          <i className="mr-2 icon-star"></i>
           <span>Bookmarks</span>
         </a>
-
         <a className="btn btn-outline-secondary btn-sm" href="#">
-          <i className="icon-clock"></i>
+          <i className="recently-created mr-2"><RecentlyCreatedIcon /></i>
           <span>Recently Created</span>
         </a>
 

src/client/styles/scss/_toc.scss

@@ -47,3 +47,10 @@
     }
   }
 }
+
+.recently-created {
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}