Fix drag icon for view layout

app/client/components/ViewLayout.css

@@ -24,21 +24,6 @@
   background-color: var(--grist-theme-widget-bg, white);
 }
 
-/* TODO should be switched to use new icon */
-.viewsection_drag_indicator {
-  visibility: hidden;
-  top: 1px;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  padding: 0px;
-}
-
-.viewsection_title:hover .viewsection_drag_indicator.layout_grabbable {
-  visibility: visible;
-  z-index: 100;   /* ensure it's above the resizer line, since it's hard to grab otherwise */
-}
-
 .viewsection_btn {
   display: inline-block;
   padding: 0px 4px;

app/client/components/ViewLayout.ts

@@ -15,7 +15,7 @@ import {reportError} from 'app/client/models/errors';
 import {filterBar} from 'app/client/ui/FilterBar';
 import {viewSectionMenu} from 'app/client/ui/ViewSectionMenu';
 import {buildWidgetTitle} from 'app/client/ui/WidgetTitle';
-import {isNarrowScreenObs, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
+import {isNarrowScreenObs, colors, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
 import {mod} from 'app/common/gutil';
@@ -294,7 +294,8 @@ export function buildViewSectionDom(options: {
     dom.cls('active_section', vs.hasFocus),
     dom.cls('active_section--no-indicator', !focusable),
     dom.maybe<BaseView|null>((use) => use(vs.viewInstance), (viewInstance) => dom('div.viewsection_title.flexhbox',
-      dom('span.viewsection_drag_indicator.glyphicon.glyphicon-option-vertical',
+      cssDragIcon('DragDrop',
+        dom.cls("viewsection_drag_indicator"),
         // Makes element grabbable only if grist is not readonly.
         dom.cls('layout_grabbable', (use) => !use(gristDoc.isReadonlyKo)),
         !draggable ? dom.style("visibility", "hidden") : null
@@ -416,6 +417,18 @@ const cssLayoutBox = styled('div', `
   }
 `);
 
+// z-index ensure it's above the resizer line, since it's hard to grab otherwise
+const cssDragIcon = styled(icon, `
+  visibility: hidden;
+  --icon-color: ${colors.slate};
+  top: -1px;
+  z-index: 100;
+
+  .viewsection_title:hover &.layout_grabbable {
+    visibility: visible;
+  }
+`);
+
 // This class is added while sections are being resized (or otherwise edited), to ensure that the
 // content of the section (such as an iframe) doesn't interfere with mouse drag-related events.
 // (It assumes that contained elements do not set pointer-events to another value; if that were