fix: replace Unicode arrows with SVG (#6574)

* replace Unicode arrows with SVG * smaller triangles * inline SVG into CSS as data URI Co-authored-by: Soroush <[email protected]> Co-authored-by: Chris Whitten <[email protected]>
microsoft · Mar 31, 2021 · fe3c266 · fe3c266
1 parent 447fa7b
commit fe3c266
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
@@ -27,7 +27,9 @@ const summaryStyle = (depth: number, isActive: boolean, isOpen: boolean) => css`
     background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20};
   }
   background: ${isActive ? NeutralColors.gray30 : NeutralColors.white};
-  ${isOpen ? 'list-style-type: "⏷";' : 'list-style-type: "⏵";'}
+  ${isOpen
+    ? `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;' d='M 0 8 H 16 L 8 16 L 0 8'/%3E%3C/svg%3E");`
+    : `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;' d='M 8 0 V 16 L 16 8 L 8 0'/%3E%3C/svg%3E");`}
 `;
 
 const nodeStyle = css`