2 files changed, 8 insertions, 10 deletions

diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss
index 74fbfbb2c..cb1e11780 100644
--- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss
+++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss
@@ -1,15 +1,15 @@
-@import '../NewLightboxStyles.scss';
+@use '../NewLightboxStyles.scss' as newstyles;
 
 .newLightboxButtonMeny-container {
     width: 100vw;
     height: 100vh;
-  
+
     &.dark {
-      background: $black;
+        background: newstyles.$black;
     }
-  
+
     &.light,
     &.default {
-      background: $white;
+        background: newstyles.$white;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
index 3eb99f47a..8115bafbf 100644
--- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
+++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { action } from 'mobx';
 import * as React from 'react';
 import { Doc } from '../../../../fields/Doc';
@@ -35,10 +33,10 @@ export function ButtonMenu() {
             <div
                 className="newLightboxView-penBtn"
                 title="toggle pen annotation"
-                style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }}
+                style={{ background: Doc.ActiveTool === InkTool.Ink ? 'white' : undefined }}
                 onClick={e => {
                     e.stopPropagation();
-                    Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
+                    Doc.ActiveTool = Doc.ActiveTool === InkTool.Ink ? InkTool.None : InkTool.Ink;
                 }}
             />
             <div