apply color

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

@@ -5,7 +5,6 @@ const TriangleIcon = (): JSX.Element => (
     <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)"
-      fill="#bcbcbc"
     />
   </svg>
 );

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

@@ -185,7 +185,9 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
           className={`grw-pagetree-button btn ${buttonClass}`}
           onClick={onClickLoadChildren}
         >
-          <TriangleIcon />
+          <div className="grw-triangle-icon">
+            <TriangleIcon />
+          </div>
         </button>
         <a href={page._id} className="grw-pagetree-title-anchor flex-grow-1">
           <p className="grw-pagetree-title m-auto">{nodePath.basename(page.path as string) || '/'}</p>

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

@@ -522,8 +522,10 @@ body.on-edit {
 }
 
 /*
- * Preview for editing /Sidebar
+ * Sidebar
  */
+
+//  Preview for editing /Sidebar
 body.pathname-sidebar {
   .page-editor-preview-body {
     color: $color-sidebar-context;
@@ -531,6 +533,13 @@ body.pathname-sidebar {
   }
 }
 
+// Pagetree
+.grw-triangle-icon {
+  svg {
+    fill: $gray-400;
+  }
+}
+
 /*
  * GROWI Grid Edit Modal
  */