Update the context menu styles and icons (#670)

* Update the context menu styles and icons * Ensure connection icon doesn’t shrink * Use view instead of canvas or graph * Make it consistent * Update changelog * Fix height of legend
aws · Nov 12, 2024 · 419b925 · 419b925
1 parent 4a79bc4
commit 419b925
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 16 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -44,6 +44,8 @@ including any Neptune Notebook instances you have.
   row [#657](https://github.com/aws/graph-explorer/pull/657)
 - **Improved** style for the sidebar buttons
   [#651](https://github.com/aws/graph-explorer/pull/651)
+- **Improved** styles in the context menu to be easier to read
+  ([#670](https://github.com/aws/graph-explorer/pull/670))
 - **Improved** Docker image size, reducing it by 196 MB
   ([#619](https://github.com/aws/graph-explorer/pull/619))
 - **Improved** query when searching across all node types
@@ -63,7 +65,8 @@ including any Neptune Notebook instances you have.
   remaining in the image
   ([#616](https://github.com/aws/graph-explorer/pull/616))
 - **Fixed** minor layout issue on connections screen
-  ([#648](https://github.com/aws/graph-explorer/pull/648))
+  ([#648](https://github.com/aws/graph-explorer/pull/648),
+  [#670](https://github.com/aws/graph-explorer/pull/670))
 - **Updated** multiple dependencies
   ([#611](https://github.com/aws/graph-explorer/pull/611),
   [#614](https://github.com/aws/graph-explorer/pull/614),

diff --git a/packages/graph-explorer/src/modules/AvailableConnections/AvailableConnections.tsx b/packages/graph-explorer/src/modules/AvailableConnections/AvailableConnections.tsx
@@ -201,7 +201,7 @@ function ConfigRow({
       className="bg-background-secondary hover:ring-primary-dark has-[:checked]:ring-primary-dark flex items-center gap-4 rounded-lg px-3 py-1.5 ring-1 ring-transparent transition-shadow duration-200 hover:cursor-pointer hover:ring-1"
       onClick={() => !isDisabled && makeSelected()}
     >
-      <DatabaseIcon className="text-primary-main size-6" />
+      <DatabaseIcon className="text-primary-main size-6 shrink-0" />
       <div className="grow">
         <div className="text-text-primary font-bold">
           {config.displayLabel || config.id}

diff --git a/packages/graph-explorer/src/modules/GraphViewer/GraphViewer.tsx b/packages/graph-explorer/src/modules/GraphViewer/GraphViewer.tsx
@@ -326,7 +326,7 @@ function Legend({ onClose }: { onClose: () => void }) {
   return (
     <Card
       className={
-        "z-panes absolute bottom-2 right-2 top-2 h-full min-w-48 max-w-80 overflow-auto"
+        "z-panes absolute bottom-2 right-2 top-2 min-w-48 max-w-80 overflow-auto"
       }
     >
       <div className="mb-4 flex items-center justify-between">

diff --git a/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.styles.ts b/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.styles.ts
@@ -15,7 +15,7 @@ const defaultStyles: ThemeStyleFn = ({ theme }) => css`
 
     .title {
       font-weight: ${theme.typography.weight?.bold};
-      font-size: ${theme.typography.sizes.xs};
+      font-size: ${theme.typography.sizes.base};
       padding: ${theme.spacing.base} ${theme.spacing["4x"]};
     }
 
@@ -26,21 +26,21 @@ const defaultStyles: ThemeStyleFn = ({ theme }) => css`
         }
         background: ${fade(theme.palette.primary.main, 0.3)};
       }
-      font-size: ${theme.typography.sizes.xs};
+      font-size: ${theme.typography.sizes.base};
 
       .content {
         min-height: 28px;
-        height: 28px;
+        height: 32px;
         padding-right: ${theme.spacing["2x"]};
       }
 
       .list-item-chip {
-        font-size: ${theme.typography.sizes.xs};
+        font-size: ${theme.typography.sizes.base};
         height: 16px;
       }
 
       .start-adornment {
-        font-size: ${theme.typography.sizes.base};
+        font-size: ${theme.typography.sizes.xl};
         color: ${theme.palette.text.disabled};
         margin: 0;
       }

diff --git a/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx b/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx
@@ -24,6 +24,7 @@ import { useDisplayNames, useEntities, useTranslations } from "@/hooks";
 import useGraphGlobalActions from "../useGraphGlobalActions";
 import defaultStyles from "./ContextMenu.styles";
 import { EdgeId, VertexId } from "@/@types/entities";
+import { MinusCircleIcon } from "lucide-react";
 
 export type ContextMenuProps = {
   className?: string;
@@ -213,15 +214,15 @@ const ContextMenu = ({
             onClick={openSidebarPanel("details")}
             startAdornment={<DetailsIcon />}
           >
-            Details Panel
+            Details panel
           </ListItem>
           <ListItem
             className={"context-menu-list-item"}
             clickable={true}
             onClick={openSidebarPanel("expand")}
             startAdornment={<ExpandGraphIcon />}
           >
-            Expand Panel
+            Expand panel
           </ListItem>
           <ListItem
             className={"context-menu-list-item"}
@@ -231,16 +232,16 @@ const ContextMenu = ({
             })}
             startAdornment={<StylingIcon />}
           >
-            Customize Panel
+            Customize panel
           </ListItem>
           <div className={"divider"} />
           <ListItem
             className={"context-menu-list-item"}
             clickable={true}
             onClick={handleRemoveFromCanvas([affectedNode.id], [])}
-            startAdornment={<RemoveFromCanvasIcon color={"red"} />}
+            startAdornment={<MinusCircleIcon className="size-5" />}
           >
-            Remove {t("graph-viewer.node")} from canvas
+            Remove {t("graph-viewer.node").toLowerCase()} from view
           </ListItem>
         </Card>
       </div>

diff --git a/packages/graph-explorer/src/modules/SearchSidebar/NodeSearchResult.tsx b/packages/graph-explorer/src/modules/SearchSidebar/NodeSearchResult.tsx
@@ -56,7 +56,7 @@ export function NodeSearchResult({ node }: { node: Vertex }) {
           </div>
         </div>
         <Tooltip
-          text={hasBeenAdded ? "Remove from graph" : "Add to graph"}
+          text={hasBeenAdded ? "Remove node from view" : "Add node to view"}
           delayEnter={200}
         >
           <div className="flex size-8 shrink-0 items-center justify-center">
@@ -66,15 +66,15 @@ export function NodeSearchResult({ node }: { node: Vertex }) {
                 variant="text"
                 onPress={removeFromGraph}
               >
-                <span className="sr-only">Remove from graph</span>
+                <span className="sr-only">Remove node from view</span>
               </Button>
             ) : (
               <Button
                 icon={<PlusCircleIcon />}
                 variant="text"
                 onPress={addToGraph}
               >
-                <span className="sr-only">Add to Graph</span>
+                <span className="sr-only">Add node to view</span>
               </Button>
             )}
           </div>