Merge pull request #5522 from weseek/imprv/90334-mixin-button-outline-variant

imprv: 90334 apply btn-page-item-control to button-outline-variant

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

@@ -397,8 +397,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/styles/theme/_apply-colors-dark.scss

@@ -296,6 +296,18 @@ ul.pagination {
   }
 }
 
+.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, lighten($primary, 52%), 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
 */

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

@@ -35,7 +35,7 @@
     background-color: transparent;
     border-color: $border-color-global;
 
-    &.grw-pagetree-is-target {
+    &.grw-pagetree-current-page-item {
       background: $bgcolor-hover;
     }
     .grw-pagetree-button {