tidy up styles

apps/app/src/components/ItemsTree/ItemsTree.module.scss

@@ -1,104 +1,71 @@
-@use '~/styles/mixins' as *;
-$grw-sidebar-content-header-height: 58px;
-$grw-sidebar-content-footer-height: 50px;
-$grw-pagetree-item-padding-left: 10px;
-$grw-pagetree-item-container-height: 40px;
+@use './items-tree-variables';
 
-.grw-items-tree {
-
-  .grw-pagetree-item-skeleton-text {
-    @include grw-skeleton-text($font-size:16px, $line-height:$grw-pagetree-item-container-height);
-    padding-left: 12px;
-  }
-
-  .grw-pagetree-item-skeleton-text-child {
-    @extend .grw-pagetree-item-skeleton-text;
-    padding-left: 12px + $grw-pagetree-item-padding-left;
+// fix height
+.items-tree :global {
+  li {
+    height: items-tree-variables.$list-item-height;
   }
+}
 
-  :global {
-
-    .list-group-item {
-      .grw-pagetree-triangle-btn {
-        border: 0;
-        transition: all 0.2s ease-out;
-        transform: rotate(0deg);
-
-        &.grw-pagetree-open {
-          transform: rotate(90deg);
-        }
-      }
-
-      .grw-pagetree-title-anchor {
-        width: 100%;
-        overflow: hidden;
-        text-decoration: none;
-      }
 
-    }
+// fix padding-left
+.items-tree {
 
-    .grw-pagetree-item-container {
-      .grw-triangle-container {
-        min-width: 35px;
-        height: $grw-pagetree-item-container-height;
-      }
-    }
-  }
   &:global{
     // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
-    > .grw-pagetree-item-container {
+    > .tree-item-layout {
       > .list-group-item {
         padding-left: 0;
       }
-      > .grw-pagetree-item-children {
-        > .grw-pagetree-item-container {
+      > .tree-item-layout-children {
+        > .tree-item-layout {
           > .list-group-item {
-            padding-left: $grw-pagetree-item-padding-left;
+            padding-left: items-tree-variables.$list-item-padding-left;
           }
-          > .grw-pagetree-item-children {
-            > .grw-pagetree-item-container {
+          > .tree-item-layout-children {
+            > .tree-item-layout {
               > .list-group-item {
-                padding-left: $grw-pagetree-item-padding-left * 2;
+                padding-left: items-tree-variables.$list-item-padding-left * 2;
               }
-              > .grw-pagetree-item-children {
-                > .grw-pagetree-item-container {
+              > .tree-item-layout-children {
+                > .tree-item-layout {
                   > .list-group-item {
-                    padding-left: $grw-pagetree-item-padding-left * 3;
+                    padding-left: items-tree-variables.$list-item-padding-left * 3;
                   }
-                  > .grw-pagetree-item-children {
-                    > .grw-pagetree-item-container {
+                  > .tree-item-layout-children {
+                    > .tree-item-layout {
                       > .list-group-item {
-                        padding-left: $grw-pagetree-item-padding-left * 4;
+                        padding-left: items-tree-variables.$list-item-padding-left * 4;
                       }
-                      > .grw-pagetree-item-children {
-                        > .grw-pagetree-item-container {
+                      > .tree-item-layout-children {
+                        > .tree-item-layout {
                           > .list-group-item {
-                            padding-left: $grw-pagetree-item-padding-left * 5;
+                            padding-left: items-tree-variables.$list-item-padding-left * 5;
                           }
-                          > .grw-pagetree-item-children {
-                            > .grw-pagetree-item-container {
+                          > .tree-item-layout-children {
+                            > .tree-item-layout {
                               > .list-group-item {
-                                padding-left: $grw-pagetree-item-padding-left * 6;
+                                padding-left: items-tree-variables.$list-item-padding-left * 6;
                               }
-                              > .grw-pagetree-item-children {
-                                > .grw-pagetree-item-container {
+                              > .tree-item-layout-children {
+                                > .tree-item-layout {
                                   > .list-group-item {
-                                    padding-left: $grw-pagetree-item-padding-left * 7;
+                                    padding-left: items-tree-variables.$list-item-padding-left * 7;
                                   }
-                                  > .grw-pagetree-item-children {
-                                    > .grw-pagetree-item-container {
+                                  > .tree-item-layout-children {
+                                    > .tree-item-layout {
                                       > .list-group-item {
-                                        padding-left: $grw-pagetree-item-padding-left * 8;
+                                        padding-left: items-tree-variables.$list-item-padding-left * 8;
                                       }
-                                      > .grw-pagetree-item-children {
-                                        > .grw-pagetree-item-container {
+                                      > .tree-item-layout-children {
+                                        > .tree-item-layout {
                                           > .list-group-item {
-                                            padding-left: $grw-pagetree-item-padding-left * 9;
+                                            padding-left: items-tree-variables.$list-item-padding-left * 9;
                                           }
-                                          .grw-pagetree-item-children {
-                                            > .grw-pagetree-item-container {
+                                          .tree-item-layout-children {
+                                            > .tree-item-layout {
                                               > .list-group-item {
-                                                padding-left: $grw-pagetree-item-padding-left * 10;
+                                                padding-left: items-tree-variables.$list-item-padding-left * 10;
                                               }
                                             }
                                           }
@@ -123,10 +90,3 @@ $grw-pagetree-item-container-height: 40px;
     }
   }
 }
-
-
-.grw-pagetree :global {
-  .grw-pagetree-triangle-btn {
-    --btn-color: var(--bs-tertiary-color);
-  }
-}

apps/app/src/components/ItemsTree/ItemsTree.tsx

@@ -32,7 +32,7 @@ import ItemsTreeContentSkeleton from './ItemsTreeContentSkeleton';
 
 import styles from './ItemsTree.module.scss';
 
-const moduleClass = styles['grw-items-tree'] ?? '';
+const moduleClass = styles['items-tree'] ?? '';
 
 const logger = loggerFactory('growi:cli:ItemsTree');
 

apps/app/src/components/ItemsTree/_items-tree-variables.scss

@@ -0,0 +1,2 @@
+$list-item-height: 40px;
+$list-item-padding-left: 10px;

apps/app/src/components/TreeItem/SimpleItemContent.module.scss

@@ -0,0 +1,7 @@
+.simple-item-content :global {
+  .grw-page-title-anchor {
+    width: 100%;
+    overflow: hidden;
+    text-decoration: none;
+  }
+}

apps/app/src/components/TreeItem/SimpleItemContent.tsx

@@ -6,6 +6,10 @@ import { UncontrolledTooltip } from 'reactstrap';
 import type { IPageForItem } from '~/interfaces/page';
 import { shouldRecoverPagePaths } from '~/utils/page-operation';
 
+import styles from './SimpleItemContent.module.scss';
+
+const moduleClass = styles['simple-item-content'] ?? '';
+
 
 export const SimpleItemContent = ({ page }: { page: IPageForItem }): JSX.Element => {
   const { t } = useTranslation();
@@ -16,7 +20,7 @@ export const SimpleItemContent = ({ page }: { page: IPageForItem }): JSX.Element
 
   return (
     <div
-      className="flex-grow-1 d-flex align-items-center pe-none"
+      className={`${moduleClass} flex-grow-1 d-flex align-items-center pe-none`}
       style={{ minWidth: 0 }}
     >
       {shouldShowAttentionIcon && (
@@ -28,9 +32,9 @@ export const SimpleItemContent = ({ page }: { page: IPageForItem }): JSX.Element
         </>
       )}
       {page != null && page.path != null && page._id != null && (
-        <div className="grw-pagetree-title-anchor flex-grow-1">
+        <div className="grw-page-title-anchor flex-grow-1">
           <div className="d-flex align-items-center">
-            <span className={`text-truncate me-1 ${page.isEmpty && 'grw-sidebar-text-muted'}`}>{pageName}</span>
+            <span className={`text-truncate me-1 ${page.isEmpty && 'opacity-75'}`}>{pageName}</span>
             { page.wip && (
               <span className="wip-page-badge badge rounded-pill me-1 text-bg-secondary">WIP</span>
             )}

apps/app/src/components/TreeItem/TreeItemLayout.module.scss

@@ -1,3 +1,5 @@
+@use '../ItemsTree/items-tree-variables';
+
 // show / hide on hover
 .tree-item-layout {
   :global {
@@ -13,3 +15,22 @@
     }
   }
 }
+
+// btn-triangle
+.tree-item-layout :global {
+  .btn-triangle-container {
+    min-width: 35px;
+  }
+
+  .btn-triangle {
+    --bs-btn-color: var(--bs-tertiary-color);
+
+    border: 0;
+    transition: all 0.2s ease-out;
+    transform: rotate(0deg);
+
+    &.open {
+      transform: rotate(90deg);
+    }
+  }
+}

apps/app/src/components/TreeItem/TreeItemLayout.tsx

@@ -144,23 +144,23 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
 
   return (
     <div
-      id={`pagetree-item-${page._id}`}
+      id={`tree-item-layout-${page._id}`}
       data-testid="grw-pagetree-item-container"
-      className={`grw-pagetree-item-container ${moduleClass} ${mainClassName}`}
+      className={`tree-item-layout ${moduleClass} ${mainClassName}`}
     >
       <li
         ref={itemRef}
         role="button"
-        className={`list-group-item border-0 py-0 pr-3 d-flex align-items-center text-muted rounded-1 ${page.isTarget ? 'active' : 'list-group-item-action'}`}
+        className={`list-group-item border-0 py-0 pr-3 d-flex align-items-center rounded-1 ${page.isTarget ? 'active' : 'list-group-item-action'}`}
         id={page.isTarget ? 'grw-pagetree-current-page-item' : `grw-pagetree-list-${page._id}`}
         onClick={itemClickHandler}
       >
 
-        <div className="grw-triangle-container d-flex justify-content-center">
+        <div className="btn-triangle-container d-flex justify-content-center">
           {hasDescendants && (
             <button
               type="button"
-              className={`grw-pagetree-triangle-btn btn p-0 ${isOpen ? 'grw-pagetree-open' : ''}`}
+              className={`btn btn-triangle p-0 ${isOpen ? 'open' : ''}`}
               onClick={onClickLoadChildren}
             >
               <div className="d-flex justify-content-center">
@@ -212,7 +212,7 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
           };
 
           return (
-            <div key={node.page._id} className="grw-pagetree-item-children">
+            <div key={node.page._id} className="tree-item-layout-children">
               <ItemClassFixed {...itemProps} />
 
               {NextToChildrenComponents?.map((NextToChildrenContent, index) => (