1 files changed, 26 insertions, 16 deletions
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index d15ab749c..eb1030eec 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,26 +1,28 @@
-import * as React from 'react';
-import { observable, action, runInAction, makeObservable } from 'mobx';
-import { observer } from 'mobx-react';
+/* eslint-disable react/jsx-props-no-spreading */
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, makeObservable, observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { SnappingManager } from '../util/SnappingManager';
 import { UndoManager } from '../util/UndoManager';
-import { SettingsManager } from '../util/SettingsManager';
 import { ObservableReactComponent } from './ObservableReactComponent';
 
 export interface OriginalMenuProps {
     description: string;
     event: (stuff?: any) => void;
     undoable?: boolean;
-    icon: IconProp | JSX.Element; //maybe should be optional (icon?)
+    icon: IconProp | JSX.Element; // maybe should be optional (icon?)
     closeMenu?: () => void;
 }
 
 export interface SubmenuProps {
     description: string;
+    // eslint-disable-next-line no-use-before-define
     subitems: ContextMenuProps[];
     noexpand?: boolean;
     addDivider?: boolean;
-    icon: IconProp; //maybe should be optional (icon?)
+    icon: IconProp; // maybe should be optional (icon?)
     closeMenu?: () => void;
 }
 
@@ -37,7 +39,9 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
     }
 
     componentDidMount() {
-        runInAction(() => (this._items.length = 0));
+        runInAction(() => {
+            this._items.length = 0;
+        });
         if ((this._props as SubmenuProps)?.subitems) {
             (this._props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i)));
         }
@@ -67,7 +71,9 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
         this._overPosY = e.clientY;
         this._overPosX = e.clientX;
         this.currentTimeout = setTimeout(
-            action(() => (this.overItem = true)),
+            action(() => {
+                this.overItem = true;
+            }),
             ContextMenuItem.timeout
         );
     };
@@ -81,7 +87,9 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
             return;
         }
         this.currentTimeout = setTimeout(
-            action(() => (this.overItem = false)),
+            action(() => {
+                this.overItem = false;
+            }),
             ContextMenuItem.timeout
         );
     };
@@ -97,14 +105,15 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
                     {this._props.icon ? <span className="contextMenu-item-icon-background">{this.isJSXElement(this._props.icon) ? this._props.icon : <FontAwesomeIcon icon={this._props.icon} size="sm" />}</span> : null}
                     <div className="contextMenu-description">{this._props.description.replace(':', '')}</div>
                     <div
-                        className={`contextMenu-item-background`}
+                        className="contextMenu-item-background"
                         style={{
-                            background: SettingsManager.userColor,
+                            background: SnappingManager.userColor,
                         }}
                     />
                 </div>
             );
-        } else if ('subitems' in this._props) {
+        }
+        if ('subitems' in this._props) {
             const where = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? 'flex-start' : this._overPosY > (window.innerHeight * 2) / 3 ? 'flex-end' : 'center';
             const marginTop = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? '20px' : this._overPosY > (window.innerHeight * 2) / 3 ? '-20px' : '';
 
@@ -115,7 +124,7 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
                     style={{
                         marginLeft: window.innerWidth - this._overPosX - 50 > 0 ? '90%' : '20%',
                         marginTop,
-                        background: SettingsManager.userBackgroundColor,
+                        background: SnappingManager.userBackgroundColor,
                     }}>
                     {this._items.map(prop => (
                         <ContextMenuItem {...prop} key={prop.description} closeMenu={this._props.closeMenu} />
@@ -144,17 +153,18 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
                     ) : null}
                     <div className="contextMenu-description" onMouseEnter={this.onPointerEnter} style={{ alignItems: 'center', alignSelf: 'center' }}>
                         {this._props.description}
-                        <FontAwesomeIcon icon={'angle-right'} size="lg" style={{ position: 'absolute', right: '10px' }} />
+                        <FontAwesomeIcon icon="angle-right" size="lg" style={{ position: 'absolute', right: '10px' }} />
                     </div>
                     <div
-                        className={`contextMenu-item-background`}
+                        className="contextMenu-item-background"
                         style={{
-                            background: SettingsManager.userColor,
+                            background: SnappingManager.userColor,
                         }}
                     />
                     {submenu}
                 </div>
             );
         }
+        return null;
     }
 }