fix fb

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.module.scss

@@ -3,12 +3,6 @@
 // == Colors
 @include bs.color-mode(light) {
   .pagetree-item :global {
-    li:hover {
-      background-color: var(--grw-primary-100);
-    }
-    li.active {
-      background-color: var(--grw-primary-100)
-    }
     .list-group-item-action {
       .btn-page-item-control {
         --bs-btn-bg: transparent;
@@ -21,12 +15,6 @@
 
 @include bs.color-mode(dark) {
   .pagetree-item :global {
-    li:hover {
-      background-color: var(--grw-primary-800);
-    }
-    li.active {
-      background-color: var(--grw-primary-800)
-    }
     .list-group-item-action {
       .btn-page-item-control {
         --bs-btn-bg: transparent;

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -17,8 +17,9 @@ import type { IPageForItem } from '~/interfaces/page';
 import { mutatePageTree, useSWRxPageChildren } from '~/stores/page-listing';
 import loggerFactory from '~/utils/logger';
 
+import type { ItemNode } from '../../TreeItem';
 import {
-  SimpleItem, useNewPageInput, ItemNode, type TreeItemProps,
+  SimpleItem, useNewPageInput, type TreeItemProps,
 } from '../../TreeItem';
 
 import { Ellipsis } from './Ellipsis';
@@ -166,7 +167,7 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
 
   const itemRef = (c) => { drag(c); drop(c) };
 
-  const mainClassName = `pagetree-item ${styles['pagetree-item']} ${isOver ? 'grw-pagetree-is-over' : ''} ${shouldHide ? 'd-none' : ''}`;
+  const mainClassName = `${styles['pagetree-item']} ${isOver ? 'grw-pagetree-is-over' : ''} ${shouldHide ? 'd-none' : ''}`;
 
   const { Input: NewPageInput, CreateButton: NewPageCreateButton } = useNewPageInput();
 

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

@@ -188,7 +188,7 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
       <li
         ref={itemRef}
         role="button"
-        className={`list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center text-muted ${page.isTarget ? 'active' : ''}`}
+        className={`list-group-item border-0 py-0 pr-3 d-flex align-items-center text-muted ${page.isTarget ? 'active' : 'list-group-item-action'}`}
         id={page.isTarget ? 'grw-pagetree-current-page-item' : `grw-pagetree-list-${page._id}`}
         onClick={itemClickHandler}
       >

apps/app/src/styles/molecules/_list-group-item.scss

@@ -5,10 +5,20 @@
     --bs-list-group-action-hover-bg: var(--grw-primary-100);
     --bs-list-group-action-active-bg: var(--grw-primary-200);
   }
+
+  .list-group-item {
+    --bs-list-group-active-bg: var(--grw-primary-100);
+  }
 }
+
 @include bs.color-mode(dark) {
   .list-group-item-action {
     --bs-list-group-action-hover-bg: var(--grw-primary-800);
     --bs-list-group-action-active-bg: var(--grw-primary-700);
   }
+
+  .list-group-item {
+    --bs-list-group-active-bg: var(--grw-primary-800);
+  }
+
 }