1 files changed, 14 insertions, 4 deletions
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index e87d2046b..daa2c152a 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -4,6 +4,8 @@ import { observer } from 'mobx-react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { UndoManager } from '../util/UndoManager';
+import { Doc } from '../../fields/Doc';
+import { StrCast } from '../../fields/Types';
 
 export interface OriginalMenuProps {
     description: string;
@@ -40,10 +42,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
     handleEvent = async (e: React.MouseEvent<HTMLDivElement>) => {
         if ('event' in this.props) {
             this.props.closeMenu?.();
-            let batch: UndoManager.Batch | undefined;
-            if (this.props.undoable !== false) {
-                batch = UndoManager.StartBatch(`Context menu event: ${this.props.description}`);
-            }
+            const batch = this.props.undoable !== false ? UndoManager.StartBatch(`Click Menu item: ${this.props.description}`) : undefined;
             await this.props.event({ x: e.clientX, y: e.clientY });
             batch?.end();
         }
@@ -93,6 +92,11 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
                         </span>
                     ) : null}
                     <div className="contextMenu-description">{this.props.description.replace(':', '')}</div>
+                    <div className={`contextMenu-item-background`}
+                        style={{
+                            background: StrCast(Doc.UserDoc().userColor)
+                        }}
+                    />
                 </div>
             );
         } else if ('subitems' in this.props) {
@@ -106,6 +110,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
                     style={{
                         marginLeft: window.innerHeight - this._overPosX - 50 > 0 ? '90%' : '20%',
                         marginTop,
+                        background: StrCast(Doc.UserDoc().userBackgroundColor)
                     }}>
                     {this._items.map(prop => (
                         <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />
@@ -136,6 +141,11 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
                         {this.props.description}
                         <FontAwesomeIcon icon={'angle-right'} size="lg" style={{ position: 'absolute', right: '10px' }} />
                     </div>
+                    <div className={`contextMenu-item-background`}
+                        style={{
+                            background: StrCast(Doc.UserDoc().userColor)
+                        }}
+                    />
                     {submenu}
                 </div>
             );