using mixin for light theme

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

@@ -217,7 +217,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     <div className={`grw-pagetree-item-container ${isOver ? 'grw-pagetree-is-over' : ''}`}>
       <li
         ref={(c) => { drag(c); drop(c) }}
-        className={`list-group-item border-0 py-1 d-flex align-items-center  ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
+        className={`list-group-item list-group-item-action border-0 py-1 d-flex align-items-center  ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
       >
         <button
           type="button"

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -170,32 +170,7 @@ $border-color: $border-color-global;
 
   // Pagetree
   .grw-pagetree {
-    .grw-pagetree-is-over {
-      background: $bgcolor-list-hover;
-    }
-    .list-group-item {
-      &.grw-pagetree-is-target {
-        background: $bgcolor-list-hover;
-      }
-
-      .grw-pagetree-count {
-        background: $bgcolor-sidebar-list-group;
-      }
-
-      .grw-pagetree-button {
-        &:not(:hover) {
-          svg {
-            fill: $gray-400;
-          }
-        }
-      }
-      &:hover {
-        background: $bgcolor-list-hover;
-      }
-      &:active {
-        background: $bgcolor-list-active;
-      }
-    }
+    @include override-list-group-item-for-pagetree($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, red);
   }
 }
 

packages/app/src/styles/theme/mixins/_list-group.scss

@@ -17,3 +17,44 @@
     }
   }
 }
+
+@mixin override-list-group-item-for-pagetree(
+  $color,
+  $bgcolor,
+  $color-hover: $color,
+  $bgcolor-hover: $bgcolor,
+  $color-active: $color,
+  $bgcolor-active: $bgcolor
+) {
+  .grw-pagetree-is-over {
+    background: $bgcolor-hover;
+  }
+  .list-group-item {
+    color: $color;
+    background-color: transparent;
+    border-color: $border-color-global;
+
+    &.grw-pagetree-is-target {
+      background: $bgcolor-hover;
+    }
+    .grw-pagetree-count {
+      background: $bgcolor;
+    }
+    .grw-pagetree-button {
+      &:not(:hover) {
+        svg {
+          fill: $gray-400;
+        }
+      }
+    }
+
+    &.list-group-item-action {
+      &:hover {
+        background-color: $bgcolor-hover;
+      }
+      &.active {
+        background-color: $bgcolor-active;
+      }
+    }
+  }
+}