From b2dfd90a63f1b7c00f698949dbd41ef6b54b8462 Mon Sep 17 00:00:00 2001
From: Kris McGinnes <kmcginnes@me.com>
Date: Mon, 9 Sep 2024 12:10:15 -0500
Subject: [PATCH 1/2] Fix context menu styles

---
 .../components/CollapsedActions.styles.ts     |  2 +-
 .../components/CollapsedActions.tsx           |  4 +--
 .../internalComponents/ContextMenu.styles.ts  |  2 +-
 .../internalComponents/ContextMenu.tsx        | 32 +++++++++----------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.styles.ts b/packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.styles.ts
index b276c44ff..b12e91289 100644
--- a/packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.styles.ts
+++ b/packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.styles.ts
@@ -8,7 +8,7 @@ const defaultStyles: ThemeStyleFn = ({ theme, isDarkTheme }) => css`
     margin: 0;
     border-radius: ${theme.shape.borderRadius};
 
-    .list-item {
+    .collapsed-action-list-item {
       border-radius: ${theme.shape.borderRadius};
       font-size: ${theme.typography.sizes.xs};
       padding-right: ${theme.spacing["2x"]};
diff --git a/packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.tsx b/packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.tsx
index 4b5bb763e..89ea84eab 100644
--- a/packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.tsx
+++ b/packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.tsx
@@ -49,7 +49,7 @@ const CollapsedActions = ({
             >
               <UseLayerTrigger>
                 <ListItem
-                  className={cx("list-item", {
+                  className={cx("collapsed-action-list-item", {
                     ["submenu-is-open"]: open === actionIndex,
                     ["submenu-is-disabled"]: action.isDisabled,
                   })}
@@ -77,7 +77,7 @@ const CollapsedActions = ({
           <ListItem
             key={action.value}
             ref={action.ref}
-            className="list-item"
+            className="collapsed-action-list-item"
             clickable={!action.isDisabled}
             onClick={() => {
               onActionClick(action.value);
diff --git a/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.styles.ts b/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.styles.ts
index c6253843e..2b6acafea 100644
--- a/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.styles.ts
+++ b/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.styles.ts
@@ -19,7 +19,7 @@ const defaultStyles: ThemeStyleFn = ({ theme }) => css`
       padding: ${theme.spacing.base} ${theme.spacing["4x"]};
     }
 
-    .list-item {
+    .context-menu-list-item {
       &.list-item-header {
         .primary {
           font-weight: ${theme.typography.weight?.bold};
diff --git a/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx b/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx
index 7c731b3c2..30e326691 100644
--- a/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx
+++ b/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx
@@ -181,14 +181,14 @@ const ContextMenu = ({
       >
         <Card className={"card-root"}>
           <ListItem
-            className={cx("list-item", "list-item-header")}
+            className={cx("context-menu-list-item", "list-item-header")}
             startAdornment={<GraphIcon />}
           >
             {getDisplayNames(affectedNode)?.name}
           </ListItem>
           <div className={"divider"} />
           <ListItem
-            className={"list-item"}
+            className={"context-menu-list-item"}
             clickable={true}
             onClick={openSidebarPanel("details")}
             startAdornment={<DetailsIcon />}
@@ -196,7 +196,7 @@ const ContextMenu = ({
             Details Panel
           </ListItem>
           <ListItem
-            className={"list-item"}
+            className={"context-menu-list-item"}
             clickable={true}
             onClick={openSidebarPanel("expand")}
             startAdornment={<ExpandGraphIcon />}
@@ -204,7 +204,7 @@ const ContextMenu = ({
             Expand Panel
           </ListItem>
           <ListItem
-            className={"list-item"}
+            className={"context-menu-list-item"}
             clickable={true}
             onClick={openSidebarPanel("nodes-styling", {
               nodeType: affectedNode.data.type,
@@ -215,7 +215,7 @@ const ContextMenu = ({
           </ListItem>
           <div className={"divider"} />
           <ListItem
-            className={"list-item"}
+            className={"context-menu-list-item"}
             clickable={true}
             onClick={handleRemoveFromCanvas([affectedNode.data.id], [])}
             startAdornment={<RemoveFromCanvasIcon color={"red"} />}
@@ -234,14 +234,14 @@ const ContextMenu = ({
       >
         <Card className={"card-root"}>
           <ListItem
-            className={cx("list-item", "list-item-header")}
+            className={cx("context-menu-list-item", "list-item-header")}
             startAdornment={<EdgeIcon />}
           >
             {getDisplayNames(affectedEdge)?.name}
           </ListItem>
           <div className={"divider"} />
           <ListItem
-            className={"list-item"}
+            className={"context-menu-list-item"}
             clickable={true}
             onClick={openSidebarPanel("details")}
             startAdornment={<DetailsIcon />}
@@ -249,7 +249,7 @@ const ContextMenu = ({
             Details Panel
           </ListItem>
           <ListItem
-            className={"list-item"}
+            className={"context-menu-list-item"}
             clickable={true}
             onClick={openSidebarPanel("edges-styling", {
               edgeType: affectedEdge.data.type,
@@ -260,7 +260,7 @@ const ContextMenu = ({
           </ListItem>
           <div className={"divider"} />
           <ListItem
-            className={"list-item"}
+            className={"context-menu-list-item"}
             clickable={true}
             onClick={handleRemoveFromCanvas([], [affectedEdge.data.id])}
             startAdornment={<RemoveFromCanvasIcon color={"red"} />}
@@ -278,7 +278,7 @@ const ContextMenu = ({
     >
       <Card className={"card-root"}>
         <ListItem
-          className={"list-item"}
+          className={"context-menu-list-item"}
           clickable={true}
           onClick={handleFitToFrame}
           startAdornment={<FitToFrameIcon />}
@@ -286,7 +286,7 @@ const ContextMenu = ({
           {nonEmptySelection ? "Fit Selection to Frame" : "Fit to Frame"}
         </ListItem>
         <ListItem
-          className={"list-item"}
+          className={"context-menu-list-item"}
           clickable={true}
           onClick={handleCenter}
           startAdornment={<CenterGraphIcon />}
@@ -294,7 +294,7 @@ const ContextMenu = ({
           {nonEmptySelection ? "Center Selection" : "Center"}
         </ListItem>
         <ListItem
-          className={"list-item"}
+          className={"context-menu-list-item"}
           clickable={true}
           onClick={handleDownloadScreenshot}
           startAdornment={<ScreenshotIcon />}
@@ -303,7 +303,7 @@ const ContextMenu = ({
         </ListItem>
         <div className={"divider"} />
         <ListItem
-          className={"list-item"}
+          className={"context-menu-list-item"}
           clickable={true}
           onClick={handleZoomIn}
           startAdornment={<ZoomInIcon />}
@@ -311,7 +311,7 @@ const ContextMenu = ({
           Zoom in
         </ListItem>
         <ListItem
-          className={"list-item"}
+          className={"context-menu-list-item"}
           clickable={true}
           onClick={handleZoomOut}
           startAdornment={<ZoomOutIcon />}
@@ -322,7 +322,7 @@ const ContextMenu = ({
           <>
             <div className={"divider"} />
             <ListItem
-              className={"list-item"}
+              className={"context-menu-list-item"}
               clickable={true}
               onClick={handleRemoveFromCanvas(
                 Array.from(nodesSelectedIds),
@@ -338,7 +338,7 @@ const ContextMenu = ({
           <>
             <div className={"divider"} />
             <ListItem
-              className={"list-item"}
+              className={"context-menu-list-item"}
               clickable={true}
               onClick={handleRemoveAllFromCanvas}
               startAdornment={<RemoveFromCanvasIcon color={"red"} />}

From 71d924336afae35e14ff03b5f7e5b91a126afa1c Mon Sep 17 00:00:00 2001
From: Kris McGinnes <kmcginnes@me.com>
Date: Mon, 9 Sep 2024 12:14:50 -0500
Subject: [PATCH 2/2] Update changelog

---
 Changelog.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/Changelog.md b/Changelog.md
index 435c975ee..920de5e1c 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -1,5 +1,10 @@
 # graph-explorer Change Log
 
+## Upcoming
+
+- Fix context menu styles
+  ([#600](https://github.com/aws/graph-explorer/pull/600))
+
 ## Release 1.10.0
 
 This release includes some new features to make managing and supporting Graph