fb

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -33,14 +33,14 @@ const ItemContol: FC = () => {
         className="btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management py-0"
         data-toggle="dropdown"
       >
-        <i className="fa fa-ellipsis-v text-muted"></i>
+        <i className="icon-options-vertical text-muted"></i>
       </button>
       <button
         type="button"
         className="btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management py-0"
         data-toggle="dropdown"
       >
-        <i className="fa fa-plus-circle text-muted"></i>
+        <i className="icon-plus text-muted"></i>
       </button>
     </>
   );
@@ -49,7 +49,7 @@ const ItemContol: FC = () => {
 const ItemCount: FC = () => {
   return (
     <>
-      <span className="badge badge-pill badge-light">
+      <span className="grw-pagetree-count badge badge-pill badge-light">
         10
       </span>
     </>
@@ -117,13 +117,13 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
         >
           <i className="icon-control-play"></i>
         </button>
-        <a href={page._id} className="flex-grow-1">
+        <a href={page._id} className="grw-pagetree-title-anchor flex-grow-1">
           <p className="grw-pagetree-title m-auto">{nodePath.basename(page.path as string) || '/'}</p>
         </a>
-        <div className="grw-pagetree-count">
+        <div className="grw-pagetree-count-wrapper">
           <ItemCount />
         </div>
-        <div className="grw-pagetree-control">
+        <div className="grw-pagetree-control d-none">
           <ItemContol />
         </div>
       </div>

packages/app/src/styles/_page-tree.scss

@@ -9,7 +9,7 @@
       opacity: 0.7;
 
       .grw-pagetree-control {
-        display: flex;
+        display: flex !important;
       }
 
       .grw-pagetree-count {
@@ -25,7 +25,7 @@
       }
     }
 
-    a {
+    .grw-pagetree-title-anchor {
       width: 100%;
       overflow: hidden;
 
@@ -36,18 +36,14 @@
       }
     }
 
-    .grw-pagetree-control {
-      display: none;
-    }
-
-    .grw-pagetree-count {
+    .grw-pagetree-count-wrapper {
       display: inline-block;
 
       &:hover {
         display: none;
       }
 
-      span {
+      .grw-pagetree-count {
         padding: 0.3rem 1rem;
       }
     }