Merge branch 'master' into sophie-ai-images

1 files changed, 6 insertions, 5 deletions

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index c7616a9ba..bbbad3690 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -22,6 +22,7 @@ import { DocumentViewProps } from './nodes/DocumentView';
 import { FieldViewProps } from './nodes/FieldView';
 import { KeyValueBox } from './nodes/KeyValueBox';
 import { SliderBox } from './nodes/SliderBox';
+import { BsArrowDown, BsArrowUp, BsArrowDownUp } from 'react-icons/bs'
 import './StyleProvider.scss';
 import React = require('react');
 
@@ -109,11 +110,11 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             }
             return Doc.toIcon(doc, isEmpty ? undefined : isOpen);
         case StyleProp.TreeViewSortings:
-            const allSorts: { [key: string]: { color: string; label: string } | undefined } = {};
-            allSorts[TreeSort.Down] = { color: 'blue', label: '↓' };
-            allSorts[TreeSort.Up] = { color: 'crimson', label: '↑' };
-            if (doc?._type_collection === CollectionViewType.Freeform) allSorts[TreeSort.Zindex] = { color: 'green', label: 'z' };
-            allSorts[TreeSort.None] = { color: 'darkgray', label: '\u00A0\u00A0\u00A0' };
+            const allSorts: { [key: string]: { color: string; icon: JSX.Element | string } | undefined } = {};
+            allSorts[TreeSort.Down] = { color: Colors.MEDIUM_BLUE, icon: <BsArrowDown/> };
+            allSorts[TreeSort.Up] = { color: 'crimson', icon: <BsArrowUp/> };
+            if (doc?._type_collection === CollectionViewType.Freeform) allSorts[TreeSort.Zindex] = { color: 'green', icon: 'Z' };
+            allSorts[TreeSort.None] = { color: 'darkgray', icon: <BsArrowDownUp/> };
             return allSorts;
         case StyleProp.Highlighting:
             if (doc && (Doc.IsSystem(doc) || doc.type === DocumentType.FONTICON)) return undefined;