WIP

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

@@ -78,17 +78,20 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   return (
     <div className="grw-pagetree-item-wrapper">
-      <div style={opacityStyle} className="grw-pagetree-item">
+      <div style={opacityStyle} className="grw-pagetree-item row">
         <button
           type="button"
-          className={`grw-pagetree-button d-inline-block mr-1 ${buttonClass}`}
+          className={`grw-pagetree-button col-1 btn mr-1 align-middle ${buttonClass}`}
           onClick={onClickLoadChildren}
         >
-          <i className="fa fa-caret-right"></i>
+          <i className="icon-control-play"></i>
         </button>
-        <a href={page._id} className="d-inline-block">
-          <p className="grw-pagetree-title">{nodePath.basename(page.path as string) || '/'}</p>
+        <a href={page._id} className="grw-pagetree-title col">
+          <p className="my-auto">{nodePath.basename(page.path as string) || '/'}</p>
         </a>
+        <div className="grw-pagetree-control col-3 align-middle">
+          Control
+        </div>
       </div>
       {
         isOpen && hasChildren() && currentChildren.map(node => (

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

@@ -85,7 +85,7 @@ const ItemsTree: FC = () => {
 
   const isOpen = true;
   return (
-    <div className="grw-page-tree">
+    <div className="grw-pagetree">
       <Item key={(initialNode as ItemNode).page.path} itemNode={(initialNode as ItemNode)} isOpen={isOpen} />
     </div>
   );

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

@@ -6,8 +6,6 @@
 
   .grw-pagetree-item-wrapper {
     .grw-pagetree-item {
-      // display: flex;
-      // padding: 5px;
     }
 
     .grw-pagetree-item {
@@ -16,6 +14,8 @@
       }
 
       .grw-pagetree-button {
+        background-color: transparent;
+
         &.rotate {
           transform: rotate(90deg);
         }
@@ -25,8 +25,7 @@
         font-size: medium;
       }
 
-      .grw-pagetree-controll {
-        display: none;
+      .grw-pagetree-control {
         &:hover {
           display: inline-block;
         }