refactoring btn-page-item-control style with button-outline-variant

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

@@ -404,8 +404,9 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     >
       <li
         ref={(c) => { drag(c); drop(c) }}
-        className={`list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
-        id={page.isTarget ? 'grw-pagetree-is-target' : `grw-pagetree-list-${page._id}`}
+        className={`list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center
+        ${page.isTarget ? 'grw-pagetree-current-page-item' : ''}`}
+        id={page.isTarget ? 'grw-pagetree-current-page-item' : `grw-pagetree-list-${page._id}`}
       >
         <div className="grw-triangle-container d-flex justify-content-center">
           {hasDescendants && (

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

@@ -103,7 +103,7 @@ const SCROLL_OFFSET_TOP = window.innerHeight / 2;
 
 const scrollTargetItem = () => {
   const scrollElement = document.getElementById('grw-sidebar-contents-scroll-target');
-  const target = document.getElementById('grw-pagetree-is-target');
+  const target = document.getElementById('grw-pagetree-current-page-item');
   if (scrollElement != null && target != null) {
     smoothScrollIntoView(target, SCROLL_OFFSET_TOP, scrollElement);
   }

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

@@ -296,6 +296,19 @@ ul.pagination {
   }
 }
 
+// Page Management Dropdown icon
+.btn.btn-page-item-control {
+  @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
+  @include hover() {
+    background-color: $gray-600;
+  }
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: $gray-200;
+  }
+  box-shadow: none !important;
+}
+
 /*
  * Popover
  */

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

@@ -191,6 +191,18 @@ $border-color: $border-color-global;
   }
 }
 
+.btn.btn-page-item-control {
+  @include button-outline-variant($gray-500, $primary, rgba($color-link, 0.2), transparent);
+  @include hover() {
+    background-color: lighten($primary, 58%);
+  }
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: $primary;
+  }
+  box-shadow: none !important;
+}
+
 /*
  * GROWI page list
  */

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

@@ -710,18 +710,6 @@ mark.rbt-highlight-text {
   }
 }
 
-// Page Management Dropdown icon
-.btn-page-item-control {
-  color: $gray-500;
-  &:hover,
-  &:focus {
-    background-color: rgba($color-link, 0.15);
-  }
-  &:active {
-    background-color: rgba($color-link, 0.2);
-  }
-}
-
 /*
   Slack Integration
 */