rename class

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

@@ -215,8 +215,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   return (
     <>
-      <div className={`hogehoge ${isOver ? 'grw-pagetree-is-over' : ''}`}>
-
+      <div className={`grw-pagetree-item-container ${isOver ? 'grw-pagetree-is-over' : ''}`}>
         <div
           ref={(c) => { drag(c); drop(c) }}
           className={`grw-pagetree-item d-flex align-items-center pr-1 ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
@@ -258,7 +257,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
         )}
         {
           isOpen && hasChildren() && currentChildren.map(node => (
-            <div key={node.page._id} className="grw-pagetree-item-container">
+            <div key={node.page._id} className="grw-pagetree-item-children">
               <Item
                 isEnableActions={isEnableActions}
                 itemNode={node}

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

@@ -46,54 +46,54 @@ $grw-pagetree-item-padding-left: 10px;
   }
 
   // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
-  > .hogehoge {
-    > .grw-pagetree-item-container {
-      > .hogehoge {
+  > .grw-pagetree-item-container {
+    > .grw-pagetree-item-children {
+      > .grw-pagetree-item-container {
         > .grw-pagetree-item {
           padding-left: $grw-pagetree-item-padding-left;
         }
-        > .grw-pagetree-item-container {
-          > .hogehoge {
+        > .grw-pagetree-item-children {
+          > .grw-pagetree-item-container {
             > .grw-pagetree-item {
               padding-left: $grw-pagetree-item-padding-left * 2;
             }
-            > .grw-pagetree-item-container {
-              > .hogehoge {
+            > .grw-pagetree-item-children {
+              > .grw-pagetree-item-container {
                 > .grw-pagetree-item {
                   padding-left: $grw-pagetree-item-padding-left * 3;
                 }
-                > .grw-pagetree-item-container {
-                  > .hogehoge {
+                > .grw-pagetree-item-children {
+                  > .grw-pagetree-item-container {
                     > .grw-pagetree-item {
                       padding-left: $grw-pagetree-item-padding-left * 4;
                     }
-                    > .grw-pagetree-item-container {
-                      > .hogehoge {
+                    > .grw-pagetree-item-children {
+                      > .grw-pagetree-item-container {
                         > .grw-pagetree-item {
                           padding-left: $grw-pagetree-item-padding-left * 5;
                         }
-                        > .grw-pagetree-item-container {
-                          > .hogehoge {
+                        > .grw-pagetree-item-children {
+                          > .grw-pagetree-item-container {
                             > .grw-pagetree-item {
                               padding-left: $grw-pagetree-item-padding-left * 6;
                             }
-                            > .grw-pagetree-item-container {
-                              > .hogehoge {
+                            > .grw-pagetree-item-children {
+                              > .grw-pagetree-item-container {
                                 > .grw-pagetree-item {
                                   padding-left: $grw-pagetree-item-padding-left * 7;
                                 }
-                                > .grw-pagetree-item-container {
-                                  > .hogehoge {
+                                > .grw-pagetree-item-children {
+                                  > .grw-pagetree-item-container {
                                     > .grw-pagetree-item {
                                       padding-left: $grw-pagetree-item-padding-left * 8;
                                     }
-                                    > .grw-pagetree-item-container {
-                                      > .hogehoge {
+                                    > .grw-pagetree-item-children {
+                                      > .grw-pagetree-item-container {
                                         > .grw-pagetree-item {
                                           padding-left: $grw-pagetree-item-padding-left * 9;
                                         }
-                                        .grw-pagetree-item-container {
-                                          > .hogehoge {
+                                        .grw-pagetree-item-children {
+                                          > .grw-pagetree-item-container {
                                             > .grw-pagetree-item {
                                               padding-left: $grw-pagetree-item-padding-left * 10;
                                             }