feat: Enhance UI Consistency and Refactor Color Naming Conventions fo…

…r Improved UX (#4424)

* 📝 (tailwind.config.mjs): refactor color classes from "inner-" to "accent-" for better clarity and consistency in naming conventions

* 🔧 (GenericNode/index.tsx): Remove unused imports and constants to clean up the code and improve maintainability
♻️ (GenericNode/index.tsx): Refactor GenericNode component by removing unnecessary code related to BuildStatus and BorderBeam to simplify the component and improve readability

* 🔧 (handleRenderComponent/index.tsx): rename innerColorName and innerForegroundColorName variables to accentColorName and accentForegroundColorName for better clarity and consistency
🔧 (handleRenderComponent/index.tsx): update CSS variables to use accent prefix instead of inner for better naming convention and readability
🔧 (handleRenderComponent/index.tsx): pass accentColorName and accentForegroundColorName props to HandleTooltipComponent for improved customization and styling

* 📝 (HandleTooltipComponent/index.tsx): Refactor HandleTooltipComponent to use Badge component for tooltip styling and add support for custom accent colors and foreground colors based on left alignment. Update styles and data-testid attributes accordingly.

* 📝 (NodeStatus/index.tsx): update border and text color classes for better visual consistency and clarity

* 🐛 (get-class-from-build-status.ts): fix incorrect condition to return class based on build status, now correctly returns class for BUILDING status

* ✨ (nodeToolbarComponent/index.tsx): Add zoom functionality to NodeToolbarComponent using ReactFlow's store selector to dynamically adjust scale based on zoom level.

* 📝 (applies.css): add a new CSS class .toolbar-wrapper to style the toolbar with flex layout, spacing, border, background color, padding, and shadow for better visual appearance

* 📝 (index.css): Update accent color variables to improve consistency and readability in the stylesheet.

* [autofix.ci] apply automated fixes

* Update src/frontend/src/style/applies.css

Co-authored-by: Mike Fortman <[email protected]>

* Update src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx

Co-authored-by: Mike Fortman <[email protected]>

* ✨ (NodeStatus/index.tsx): Improve border styling for selected and unselected nodes for better visual consistency
🔧 (applies.css): Remove unnecessary border width specification in various CSS classes to simplify styling and improve maintainability

* 🔧 (PageComponent/index.tsx): Update innerColor variable to accentColor for better clarity and consistency in styling
🔧 (sidebarFilterComponent/index.tsx): Update backgroundColor style to use accent color instead of inner color for better visual consistency
🔧 (nodeToolbarComponent/index.tsx): Add relative positioning to the buttons in the NodeToolbarComponent for better alignment on the page

* ✨ (nodeToolbarComponent/index.tsx): Add styleClasses property to ShadTooltip component to apply custom styling for positioning
♻️ (applies.css): Refactor CSS classes to use shorthand notation for height and width properties, and update class names for better readability and maintainability

* 🔧 (nodeToolbarComponent/index.tsx): update button height class to improve consistency and readability

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Mike Fortman <[email protected]>

src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx

@@ -1,28 +1,34 @@
 import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
+import { Badge } from "@/components/ui/badge";
 
 export default function HandleTooltipComponent({
   isInput,
   tooltipTitle,
-  colors,
   isConnecting,
   isCompatible,
   isSameNode,
+  accentColorName,
+  accentForegroundColorName,
+  left,
 }: {
   isInput: boolean;
-  colors: string[];
   tooltipTitle: string;
   isConnecting: boolean;
   isCompatible: boolean;
   isSameNode: boolean;
+  accentColorName: string;
+  accentForegroundColorName: string;
+  left: boolean;
 }) {
   const tooltips = tooltipTitle.split("\n");
   const plural = tooltips.length > 1 ? "s" : "";
+
   return (
     <div className="font-medium">
       {isSameNode ? (
         "Can't connect to the same node"
       ) : (
-        <div className="flex items-start gap-1.5">
+        <div className="flex items-center gap-1.5">
           {isConnecting ? (
             isCompatible ? (
               <span>
@@ -40,22 +46,26 @@ export default function HandleTooltipComponent({
             </span>
           )}
           {tooltips.map((word, index) => (
-            <div
-              className="rounded-sm px-1.5 text-xs font-medium"
+            <Badge
+              className="h-6 rounded-md p-1"
               style={{
-                backgroundColor: `${colors[index]}40`, // Add 40 (25%) opacity to background
-                color: colors[index], // Keep text the same color but solid
+                backgroundColor: left
+                  ? `hsl(var(--${accentColorName}))`
+                  : `hsl(var(--${accentColorName}-foreground))`,
+                color: left
+                  ? `hsl(var(--${accentForegroundColorName}))`
+                  : `hsl(var(--${accentColorName}))`,
               }}
               data-testid={`${isInput ? "input" : "output"}-tooltip-${convertTestName(word)}`}
             >
               {word}
-            </div>
+            </Badge>
           ))}
           {isConnecting && <span>{isInput ? `input` : `output`}</span>}
         </div>
       )}
       {!isConnecting && (
-        <div className="mt-2 flex flex-col gap-0.5 text-xs">
+        <div className="mt-2 flex flex-col gap-0.5 text-xs leading-6">
           <div>
             <b>Drag</b> to connect compatible {!isInput ? "inputs" : "outputs"}
           </div>

src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx

@@ -99,8 +99,8 @@ export default function NodeStatus({
   const getBaseBorderClass = (selected) => {
     let className =
       selected && !isBuilding
-        ? " border-[1px] ring-[0.75px] ring-foreground border-foreground hover:shadow-node"
-        : "border-[1px] ring-[0.5px] hover:shadow-node ring-border";
+        ? " border ring-[0.75px] ring-muted-foreground border-muted-foreground hover:shadow-node"
+        : "border ring-[0.5px] hover:shadow-node ring-border";
     let frozenClass = selected ? "border-ring-frozen" : "border-frozen";
     return frozen ? frozenClass : className;
   };
@@ -218,7 +218,7 @@ export default function NodeStatus({
                 <div className="max-h-100 p-2">
                   <div className="max-h-80 overflow-auto">
                     {validationString && (
-                      <div className="ml-1 pb-2 text-status-red">
+                      <div className="ml-1 pb-2 text-accent-red-foreground">
                         {validationString}
                       </div>
                     )}

src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx

@@ -43,8 +43,8 @@ export default function HandleRenderComponent({
 }) {
   const handleColorName = colorName?.[0] ?? "";
 
-  const innerColorName = `inner-${handleColorName}`;
-  const innerForegroundColorName = `${innerColorName}-foreground`;
+  const accentColorName = `accent-${handleColorName}`;
+  const accentForegroundColorName = `${accentColorName}-foreground`;
 
   const setHandleDragging = useFlowStore((state) => state.setHandleDragging);
   const setFilterType = useFlowStore((state) => state.setFilterType);
@@ -174,14 +174,14 @@ export default function HandleRenderComponent({
     () =>
       isNullHandle
         ? dark
-          ? "conic-gradient(hsl(var(--inner-gray)) 0deg 360deg)"
-          : "conic-gradient(hsl(var(--inner-gray-foreground)) 0deg 360deg)"
+          ? "conic-gradient(hsl(var(--accent-gray)) 0deg 360deg)"
+          : "conic-gradient(hsl(var(--accent-gray-foreground)) 0deg 360deg)"
         : "conic-gradient(" +
           colorName!
             .concat(colorName![0])
             .map(
               (color, index) =>
-                `hsl(var(--inner-${color}))` +
+                `hsl(var(--accent-${color}))` +
                 " " +
                 ((360 / colors.length) * index - 360 / (colors.length * 4)) +
                 "deg " +
@@ -203,34 +203,34 @@ export default function HandleRenderComponent({
       styleSheet.textContent = `
         @keyframes pulseNeon {
           0% {
-            box-shadow: 0 0 0 2px hsl(var(--border)),
-                        0 0 2px hsl(var(--inner-${colorName![0]})),
-                        0 0 4px hsl(var(--inner-${colorName![0]})),
-                        0 0 6px hsl(var(--inner-${colorName![0]})),
-                        0 0 8px hsl(var(--inner-${colorName![0]})),
-                        0 0 10px hsl(var(--inner-${colorName![0]})),
-                        0 0 15px hsl(var(--inner-${colorName![0]})),
-                        0 0 20px hsl(var(--inner-${colorName![0]}));
+            box-shadow: 0 0 0 2px hsl(var(--node-ring)),
+                        0 0 2px hsl(var(--accent-${colorName![0]})),
+                        0 0 4px hsl(var(--accent-${colorName![0]})),
+                        0 0 6px hsl(var(--accent-${colorName![0]})),
+                        0 0 8px hsl(var(--accent-${colorName![0]})),
+                        0 0 10px hsl(var(--accent-${colorName![0]})),
+                        0 0 15px hsl(var(--accent-${colorName![0]})),
+                        0 0 20px hsl(var(--accent-${colorName![0]}));
           }
           50% {
-            box-shadow: 0 0 0 2px hsl(var(--border)),
-                        0 0 4px hsl(var(--inner-${colorName![0]})),
-                        0 0 8px hsl(var(--inner-${colorName![0]})),
-                        0 0 12px hsl(var(--inner-${colorName![0]})),
-                        0 0 16px hsl(var(--inner-${colorName![0]})),
-                        0 0 20px hsl(var(--inner-${colorName![0]})),
-                        0 0 25px hsl(var(--inner-${colorName![0]})),
-                        0 0 30px hsl(var(--inner-${colorName![0]}));
+            box-shadow: 0 0 0 2px hsl(var(--node-ring)),
+                        0 0 4px hsl(var(--accent-${colorName![0]})),
+                        0 0 8px hsl(var(--accent-${colorName![0]})),
+                        0 0 12px hsl(var(--accent-${colorName![0]})),
+                        0 0 16px hsl(var(--accent-${colorName![0]})),
+                        0 0 20px hsl(var(--accent-${colorName![0]})),
+                        0 0 25px hsl(var(--accent-${colorName![0]})),
+                        0 0 30px hsl(var(--accent-${colorName![0]}));
           }
           100% {
-            box-shadow: 0 0 0 2px hsl(var(--border)),
-                        0 0 2px hsl(var(--inner-${colorName![0]})),
-                        0 0 4px hsl(var(--inner-${colorName![0]})),
-                        0 0 6px hsl(var(--inner-${colorName![0]})),
-                        0 0 8px hsl(var(--inner-${colorName![0]})),
-                        0 0 10px hsl(var(--inner-${colorName![0]})),
-                        0 0 15px hsl(var(--inner-${colorName![0]})),
-                        0 0 20px hsl(var(--inner-${colorName![0]}));
+            box-shadow: 0 0 0 2px hsl(var(--node-ring)),
+                        0 0 2px hsl(var(--accent-${colorName![0]})),
+                        0 0 4px hsl(var(--accent-${colorName![0]})),
+                        0 0 6px hsl(var(--accent-${colorName![0]})),
+                        0 0 8px hsl(var(--accent-${colorName![0]})),
+                        0 0 10px hsl(var(--accent-${colorName![0]})),
+                        0 0 15px hsl(var(--accent-${colorName![0]})),
+                        0 0 20px hsl(var(--accent-${colorName![0]}));
           }
         }
       `;
@@ -302,11 +302,13 @@ export default function HandleRenderComponent({
           content={
             <HandleTooltipComponent
               isInput={left}
-              colors={colors}
               tooltipTitle={tooltipTitle}
               isConnecting={!!filterPresent && !ownHandle}
               isCompatible={openHandle}
               isSameNode={sameNode && !ownHandle}
+              accentColorName={accentColorName}
+              accentForegroundColorName={accentForegroundColorName}
+              left={left}
             />
           }
           side={left ? "left" : "right"}
@@ -366,12 +368,12 @@ export default function HandleRenderComponent({
             height: "10px",
             transition: "all 0.2s",
             boxShadow: getNeonShadow(
-              innerForegroundColorName,
+              accentForegroundColorName,
               isHovered || openHandle,
             ),
             animation:
               (isHovered || openHandle) && !isNullHandle
-                ? "pulseNeon 0.7s ease-in-out infinite"
+                ? "pulseNeon 1.1s ease-in-out infinite"
                 : "none",
             border: isNullHandle ? "2px solid hsl(var(--muted))" : "none",
           }}

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,6 +1,3 @@
-import { Badge } from "@/components/ui/badge";
-import { BorderBeam } from "@/components/ui/border-beams";
-import { BuildStatus } from "@/constants/enums";
 import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
 import { useEffect, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -291,16 +288,6 @@ export default function GenericNode({
           !hasOutputs && "pb-4",
         )}
       >
-        {BuildStatus.BUILDING === buildStatus && (
-          <BorderBeam
-            colorFrom="hsl(var(--foreground))"
-            colorTo="hsl(var(--muted-foreground))"
-            className="z-10"
-            borderWidth={1.75}
-            size={300}
-          />
-        )}
-
         <div
           data-testid={`${data.id}-main-node`}
           className={cn(

src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts

@@ -8,7 +8,9 @@ export const getSpecificClassFromBuildStatus = (
 ): string => {
   let isInvalid = validationStatus && !validationStatus.valid;
 
-  if ((isInvalid || buildStatus === BuildStatus.ERROR) && !isBuilding) {
+  if (BuildStatus.BUILDING === buildStatus) {
+    return "border-foreground border-[1px] ring-[0.75px] ring-foreground";
+  } else if ((isInvalid || buildStatus === BuildStatus.ERROR) && !isBuilding) {
     return "border-destructive border-[1px] ring-[0.75px] ring-destructive";
   } else {
     return "";

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -570,10 +570,8 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
       nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] ||
       "hsl(var(--foreground))";
 
-    console.log(edge?.data?.targetHandle);
-
-    const innerColor = `hsl(var(--inner-${color}-muted-foreground))`;
-    document.documentElement.style.setProperty("--selected", innerColor);
+    const accentColor = `hsl(var(--accent-${color}-foreground))`;
+    document.documentElement.style.setProperty("--selected", accentColor);
   };
 
   const { open } = useSidebar();

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx

@@ -17,7 +17,7 @@ export function SidebarFilterComponent({
     <div
       className={`mb-0.5 flex w-full items-center justify-between rounded border p-2 text-sm text-foreground`}
       style={{
-        backgroundColor: `hsl(var(--inner-${color}-foreground))`,
+        backgroundColor: `hsl(var(--accent-${color}-foreground))`,
       }}
     >
       <div className="flex flex-1 items-center gap-1.5">