Merge branch 'imprv/83039-triangle-icon' into imprv/83044-hover-page-tree

# Conflicts:
#	packages/app/src/styles/theme/_apply-colors.scss

packages/app/src/components/Icons/TriangleIcon.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 
 const TriangleIcon = (): JSX.Element => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
-    <path
-      d="M5.2,1.067a1,1,0,0,1,1.6,0l4,5.333A1,1,0,0,1,10,8H2a1,1,0,0,1-.8-1.6Z"
-      transform="translate(12 8) rotate(180)"
-    />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+  >
+    <g transform="translate(18194 -6790)">
+      <rect width="12" height="12" transform="translate(-18194 6790)" fill="none" />
+      <path d="M5.2,1.067a1,1,0,0,1,1.6,0l4,5.333A1,1,0,0,1,10,8H2a1,1,0,0,1-.8-1.6Z" transform="translate(-18183 6790) rotate(90)" />
+    </g>
   </svg>
 );
 

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

@@ -535,19 +535,18 @@ body.pathname-sidebar {
 
 // Pagetree
 .grw-pagetree {
-  .grw-triangle-icon {
-    svg {
-      fill: $gray-400;
-    }
-  }
-
   .grw-pagetree-item {
+    .grw-triangle-icon {
+      svg {
+        fill: $gray-400;
+      }
+    }
     // TODO: apply variable to　these bg-color  for each theme by 83526
     &:hover {
-      background: #e0e6f7;
+      background: lighten($primary, 65%);
     }
     &:active {
-      background: #ccd5f1;
+      background: lighten($primary, 72%);
     }
   }
 }