From 9e2c69149e9ab9cb55f891abccca73a3f37ced7f Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Tue, 12 Aug 2025 10:55:03 -0600
Subject: [PATCH] refactor: Update dropdown components and styles in
 canvasControls

- Removed unused ShadTooltip import from dropdowns.tsx.
- Adjusted padding and margin styles for DropdownControlButton and CanvasControlsDropdown for improved layout.
- Enhanced button styles in MemoizedComponents for consistency.
- Cleaned up class names in CanvasControls for better readability.
---
 .../core/canvasControlsComponent/dropdowns.tsx | 18 +++++++++---------
 .../core/canvasControlsComponent/index.tsx     |  2 +-
 .../PageComponent/MemoizedComponents.tsx       |  6 +++---
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/core/canvasControlsComponent/dropdowns.tsx b/src/frontend/src/components/core/canvasControlsComponent/dropdowns.tsx
index d70369e2f4..e5b8f54571 100644
--- a/src/frontend/src/components/core/canvasControlsComponent/dropdowns.tsx
+++ b/src/frontend/src/components/core/canvasControlsComponent/dropdowns.tsx
@@ -1,5 +1,4 @@
 import IconComponent, { ForwardedIconComponent } from "@/components/common/genericIconComponent";
-import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -37,7 +36,7 @@ const DropdownControlButton: React.FC<DropdownControlButtonProps> = ({
   <Button
     data-testid={testId}
     className={cn(
-      "group flex items-center justify-center !py-1.5 !px-3 hover:bg-accent h-full rounded-none",
+      "group flex items-center justify-center !py-1.5 !px-2 hover:bg-accent h-full rounded-none",
       disabled && "cursor-not-allowed opacity-50",
     )}
     onClick={onClick}
@@ -45,7 +44,7 @@ const DropdownControlButton: React.FC<DropdownControlButtonProps> = ({
     disabled={disabled}
     title={tooltipText || ""}
   >
-    {iconName && <ForwardedIconComponent name={iconName} className="text-muted-foreground group-hover:text-primary mr-1" />}
+    {iconName && <ForwardedIconComponent name={iconName} className="text-muted-foreground group-hover:text-primary" />}
     <div className="flex flex-row items-center justify-between w-full h-full">
       <span className="text-muted-foreground text-sm mr-2 group-hover:text-primary">{label}</span>
       <div className="flex flex-row items-center justify-center gap-1 text-sm text-placeholder-foreground">
@@ -96,13 +95,14 @@ export const CanvasControlsDropdown: React.FC<CanvasControlsDropdownProps> = ({
   <DropdownMenu open={isOpen} onOpenChange={onOpenChange}>
     <DropdownMenuTrigger asChild>
       <Button
+        variant="ghost"
         data-testid="canvas_controls_dropdown"
-        className="group rounded !p-0"
+        className="group rounded-none px-2 py-2 hover:bg-muted"
+        unstyled
         title="Canvas Controls"
       >
-        <ShadTooltip content="Canvas Controls" side="top" align="end">
-          <div className="rounded py-2.5 px-1 flex items-center justify-center">
-            <div className="text-sm text-primary pr-2">
+          <div className="flex items-center justify-center ">
+            <div className="text-sm text-primary pr-1">
               {formatZoomPercentage(zoom)}
             </div>
             <IconComponent
@@ -111,7 +111,6 @@ export const CanvasControlsDropdown: React.FC<CanvasControlsDropdownProps> = ({
               className="text-primary group-hover:text-primary !h-5 !w-5"
             />
           </div>
-        </ShadTooltip>
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent
@@ -170,8 +169,9 @@ export const HelpDropdown: React.FC<HelpDropdownProps> = ({
       <Button
         variant="ghost"
         size="icon"
-        className="group rounded flex items-center justify-center mr-1"
+        className="group flex items-center justify-center px-2 rounded-none"
         title="Help"
+     
       >
         <IconComponent
           name="Circle-Help"
diff --git a/src/frontend/src/components/core/canvasControlsComponent/index.tsx b/src/frontend/src/components/core/canvasControlsComponent/index.tsx
index 52bbf167d2..86cf18e9b3 100644
--- a/src/frontend/src/components/core/canvasControlsComponent/index.tsx
+++ b/src/frontend/src/components/core/canvasControlsComponent/index.tsx
@@ -107,7 +107,7 @@ const CanvasControls = ({ children }: { children?: ReactNode }) => {
   return (
     <Panel
       data-testid="main_canvas_controls"
-      className="react-flow__controls !left-auto !m-2 flex !flex-row gap-1.5 rounded-md border border-border bg-background fill-foreground stroke-foreground text-primary [&>button]:border-0 [&>button]:bg-background hover:[&>button]:bg-accent"
+      className="react-flow__controls !left-auto !m-2 flex !flex-row rounded-md border border-border bg-background fill-foreground stroke-foreground text-primary [&>button]:border-0"
       position="bottom-right"
     >
       {children}
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx
index c028c7a669..bd8ef48ff6 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx
@@ -1,5 +1,3 @@
-import { Background, Panel } from "@xyflow/react";
-import { memo } from "react";
 import {
   default as ForwardedIconComponent,
   default as IconComponent,
@@ -9,6 +7,8 @@ import LogCanvasControls from "@/components/core/logCanvasControlsComponent";
 import { Button } from "@/components/ui/button";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { cn } from "@/utils/utils";
+import { Background, Panel } from "@xyflow/react";
+import { memo } from "react";
 
 export const MemoizedBackground = memo(() => (
   <Background size={2} gap={20} className="" />
@@ -34,7 +34,7 @@ export const MemoizedCanvasControls = memo(
       <Button
         variant="ghost"
         size="icon"
-        className="group rounded flex items-center justify-center ml-1"
+        className="group flex items-center justify-center px-2 rounded-none"
         title="Add sticky note"
         onClick={(e) => {
           e.stopPropagation();