feat: Enhance UI Consistency and Refactor Color Naming Conventions for 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 <michael.fortman@datastax.com>

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

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>

* ✨ (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 <michael.fortman@datastax.com>

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">

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

@@ -8,7 +8,7 @@ import CodeAreaModal from "@/modals/codeAreaModal";
 import { APIClassType } from "@/types/api";
 import _, { cloneDeep } from "lodash";
 import { useEffect, useRef, useState } from "react";
-import { useUpdateNodeInternals } from "reactflow";
+import { useReactFlow, useStore, useUpdateNodeInternals } from "reactflow";
 import IconComponent from "../../../../components/genericIconComponent";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
 import {
@@ -322,10 +322,31 @@ export default function NodeToolbarComponent({
     (selectTriggerRef.current! as HTMLElement)?.click();
   };
 
+  // Use ReactFlow's store selector to get zoom updates
+  const zoom = useStore((state) => state.transform[2]);
+  const [scale, setScale] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!zoom) return;
+    if (zoom < 0.65) {
+      const newScale = Math.max(zoom * 1.2, 0.4);
+      setScale(newScale);
+    } else {
+      setScale(1);
+    }
+  }, [zoom]);
+
+  if (scale === null) return <></>;
   return (
     <>
-      <div className="noflow nowheel nopan nodelete nodrag">
-        <div className="flex items-center gap-1 rounded-lg border-[1px] border-border bg-background p-1 shadow-sm">
+      <div
+        className="noflow nowheel nopan nodelete nodrag"
+        style={{
+          transform: `scale(${scale})`,
+          transformOrigin: "bottom",
+        }}
+      >
+        <div className="toolbar-wrapper">
           {hasCode && (
             <ShadTooltip
               content={
@@ -336,6 +357,7 @@ export default function NodeToolbarComponent({
                 />
               }
               side="top"
+              styleClasses="relative bottom-2"
             >
               <Button
                 className="node-toolbar-buttons"
@@ -364,6 +386,7 @@ export default function NodeToolbarComponent({
                 />
               }
               side="top"
+              styleClasses="relative bottom-2"
             >
               <Button
                 className="node-toolbar-buttons"
@@ -379,39 +402,7 @@ export default function NodeToolbarComponent({
               </Button>
             </ShadTooltip>
           )}
-          <ShadTooltip
-            content={
-              <ShortcutDisplay
-                {...shortcuts.find(
-                  ({ name }) => name.toLowerCase() === "freeze path",
-                )!}
-              />
-            }
-            side="top"
-          >
-            <Button
-              className={cn("node-toolbar-buttons", frozen && "text-blue-500")}
-              variant="ghost"
-              onClick={(event) => {
-                event.preventDefault();
-                takeSnapshot();
-                FreezeAllVertices({
-                  flowId: currentFlowId,
-                  stopNodeId: data.id,
-                });
-              }}
-              size="node-toolbar"
-            >
-              <IconComponent
-                name="FreezeAll"
-                className={cn(
-                  "h-4 w-4 transition-all",
-                  frozen ? "animate-wiggle text-ice" : "",
-                )}
-              />
-              <span className="text-[13px] font-medium">Freeze Path</span>
-            </Button>
-          </ShadTooltip>
+
           <ShadTooltip
             content={
               <ShortcutDisplay
@@ -421,6 +412,7 @@ export default function NodeToolbarComponent({
               />
             }
             side="top"
+            styleClasses="relative bottom-2"
           >
             <Button
               className="node-toolbar-buttons h-[2.125rem]"
@@ -434,9 +426,13 @@ export default function NodeToolbarComponent({
               <IconComponent name="Copy" className="h-4 w-4" />
             </Button>
           </ShadTooltip>
-          <ShadTooltip content="All" side="top">
+          <ShadTooltip
+            content="Show More"
+            side="top"
+            styleClasses="relative bottom-2"
+          >
             <Button
-              className="node-toolbar-buttons h-[2.125rem]"
+              className="node-toolbar-buttons h-[2rem]"
               variant="ghost"
               onClick={handleButtonClick}
               size="node-toolbar"
@@ -448,12 +444,13 @@ export default function NodeToolbarComponent({
         </div>
 
         <Select onValueChange={handleSelectChange} value={selectedValue!}>
-          <ShadTooltip content="All" side="bottom">
-            <SelectTrigger ref={selectTriggerRef}>
-              <></>
-            </SelectTrigger>
-          </ShadTooltip>
-          <SelectContent className="relative -left-10 min-w-[14rem]">
+          <SelectTrigger ref={selectTriggerRef}>
+            <></>
+          </SelectTrigger>
+          <SelectContent
+            className="relative min-w-[14rem] bg-background"
+            style={{ transform: `scale(${scale})`, transformOrigin: "top" }}
+          >
             {hasCode && (
               <SelectItem value={"code"}>
                 <ToolbarSelectItem

src/frontend/src/style/applies.css

@@ -174,7 +174,7 @@
     @apply flex gap-2;
   }
   .primary-input {
-    @apply form-input block w-full truncate rounded-md border-[1px] border-border bg-background px-3 text-left text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:placeholder-transparent focus:ring-0 focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
+    @apply form-input block w-full truncate rounded-md border border-border bg-background px-3 text-left text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:placeholder-transparent focus:ring-0 focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
   }
 
   .skeleton-card {
@@ -191,7 +191,7 @@
 
   /* The same as primary-input but no-truncate */
   .textarea-primary {
-    @apply form-input block w-full rounded-md border-[1px] border-border bg-background px-3 text-left shadow-sm placeholder:text-placeholder-foreground hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-[0.75px] focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
+    @apply form-input block w-full rounded-md border border-border bg-background px-3 text-left shadow-sm placeholder:text-placeholder-foreground hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-[0.75px] focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
   }
 
   .input-edit-node {
@@ -777,7 +777,7 @@
     @apply flex-max-width mt-2 h-full;
   }
   .code-area-modal-editor-box {
-    @apply h-[300px] w-full rounded-lg border-[1px] border-ring custom-scroll;
+    @apply h-[300px] w-full rounded-lg border border-ring custom-scroll;
   }
 
   .edit-node-modal-variable {
@@ -790,7 +790,7 @@
     @apply flex-max-width h-fit max-h-[400px];
   }
   .edit-node-modal-box {
-    @apply w-full rounded-lg border-[1px] border-input bg-background;
+    @apply w-full rounded-lg border border-input bg-background;
   }
   .edit-node-modal-table {
     @apply flex h-fit flex-col gap-5;
@@ -1099,7 +1099,7 @@
     @apply flex-max-width h-full flex-col transition-all;
   }
   .ace-editor {
-    @apply h-full w-full rounded-lg border-[1px] border-border custom-scroll;
+    @apply h-full w-full rounded-lg border border-border custom-scroll;
   }
   .ace-editor-save-btn {
     @apply flex-max-width h-fit justify-end;
@@ -1207,7 +1207,7 @@
   }
 
   .bg-lucide-icon {
-    @apply flex h-8 w-8 items-center justify-center rounded-[6px] bg-muted p-[6px];
+    @apply flex h-8 w-8 items-center justify-center rounded-md bg-muted p-[6px];
   }
 
   .integration-icon {
@@ -1260,7 +1260,7 @@
   }
 
   .hit-area-icon {
-    @apply h-[32px] w-[32px] rounded-md;
+    @apply h-8 w-8 rounded-md;
   }
 
   .node-toolbar-buttons {
@@ -1268,7 +1268,11 @@
   }
 
   .last-output-border {
-    @apply rounded-b-[12px];
+    @apply rounded-b-xl;
+  }
+
+  .toolbar-wrapper {
+    @apply flex items-center gap-1 rounded-xl border border-border bg-background p-1 shadow-sm h-10;
   }
 }
 

src/frontend/src/style/index.css

@@ -104,49 +104,43 @@
     --smooth-red: 0 93.3% 94.1%;
     --radius: 0.5rem;
 
-    --inner-yellow: 40.6 96.1% 40.4%;
-    --inner-yellow-foreground: 50.4 97.8% 63.5%;
-    --inner-yellow-muted-foreground: 35.5 91.7% 32.9%;
+    --accent-pink: 327.3 73.3% 97.1%;
+    --accent-pink-foreground: 333.3 71.4% 50.6%;
 
-    --inner-blue: 221.2 83.2% 53.3%;
-    --inner-blue-foreground: 211.7 96.4% 78.4%;
-    --inner-blue-muted-foreground: 224.3 76.3% 48%;
+    --accent-yellow: 40.6 96.1% 40.4%;
+    --accent-yellow-foreground: 54.9 96.7% 88%;
 
-    --inner-gray: 215 13.8% 34.1%;
-    --inner-gray-foreground: 216 12.2% 83.9%;
-    --inner-gray-muted-foreground: 216.9 19.1% 26.7%;
+    --accent-blue: 221.2 83.2% 53.3%;
+    --accent-blue-foreground: 214.3 94.6% 92.7%;
 
-    --inner-lime: 84.8 85.2% 34.5%;
-    --inner-lime-foreground: 82 84.5% 67.1%;
-    --inner-lime-muted-foreground: 85.9 78.4% 27.3%;
+    --accent-gray: 215 13.8% 34.1%;
+    --accent-gray-foreground: 220 14.3% 95.9%;
 
-    --inner-red: 0 72.2% 50.6%;
-    --inner-red-foreground: 0 93.5% 81.8%;
-    --inner-red-muted-foreground: 345.3 82.7% 40.8%;
+    --accent-lime: 84.8 85.2% 34.5%;
+    --accent-lime-foreground: 79.6 89.1% 89.2%;
 
-    --inner-violet: 262.1 83.3% 57.8%;
-    --inner-violet-foreground: 252.5 94.7% 85.1%;
-    --inner-violet-muted-foreground: 263.4 70% 50.4%;
+    --accent-red: 0 72.2% 50.6%;
+    --accent-red-foreground: 0 93.3% 94.1%;
 
-    --inner-emerald: 161.4 93.5% 30.4%;
-    --inner-emerald-foreground: 156.2 71.6% 66.9%;
-    --inner-emerald-muted-foreground: 162.9 93.5% 24.3%;
+    --accent-violet: 262.1 83.3% 57.8%;
+    --accent-violet-foreground: 251.4 91.3% 95.5%;
 
-    --inner-fuchsia: 293.4 69.5% 48.8%;
-    --inner-fuchsia-foreground: 291.1 93.1% 82.9%;
-    --inner-fuchsia-muted-foreground: 294.7 72.4% 39.8%;
+    --accent-emerald: 161.4 93.5% 30.4%;
+    --accent-emerald-foreground: 149.3 80.4% 90%;
 
-    --inner-purple: 271.5 81.3% 55.9%;
-    --inner-purple-foreground: 269.2 97.4% 85.1%;
-    --inner-purple-muted-foreground: 272.1 71.7% 47.1%;
+    --accent-fuchsia: 293.4 69.5% 48.8%;
+    --accent-fuchsia-foreground: 287 100% 95.5%;
 
-    --inner-cyan: 191.6 91.4% 36.5%;
-    --inner-cyan-foreground: 187 92.4% 69%;
-    --inner-cyan-muted-foreground: 192.9 82.3% 31%;
+    --accent-purple: 271.5 81.3% 55.9%;
+    --accent-purple-foreground: 268.7 100% 95.5%;
 
-    --inner-indigo: 243.4 75.4% 58.6%;
-    --inner-indigo-foreground: 229.7 93.5% 81.8%;
-    --inner-indigo-muted-foreground: 244.5 57.9% 50.6%;
+    --accent-cyan: 191.6 91.4% 36.5%;
+    --accent-cyan-foreground: 185.1 95.9% 90.4%;
+
+    --accent-indigo: 243.4 75.4% 58.6%;
+    --accent-indigo-foreground: 226.5 100% 93.9%;
+
+    --node-ring: 240 6% 90%;
   }
 
   .dark {
@@ -252,48 +246,42 @@
     --hard-zinc: 240 5.2% 33.9%;
     --smooth-red: 0 93.3% 94.1%;
 
-    --inner-yellow: 47.9 95.8% 53.1%;
-    --inner-yellow-foreground: 35.5 91.7% 32.9%;
-    --inner-yellow-muted-foreground: 50.4 97.8% 63.5%;
+    --accent-pink: 327.4 87.1% 81.8%;
+    --accent-pink-foreground: 333.3 71.4% 50.6%;
 
-    --inner-blue: 213.1 93.9% 67.8%;
-    --inner-blue-foreground: 224.3 76.3% 48%;
-    --inner-blue-muted-foreground: 211.7 96.4% 78.4%;
+    --accent-yellow: 50.4 97.8% 63.5%;
+    --accent-yellow-foreground: 40.6 96.1% 40.4%;
 
-    --inner-gray: 217.9 10.6% 64.9%;
-    --inner-gray-foreground: 216.9 19.1% 26.7%;
-    --inner-gray-muted-foreground: 216 12.2% 83.9%;
+    --accent-blue: 211.7 96.4% 78.4%;
+    --accent-blue-foreground: 221.2 83.2% 53.3%;
 
-    --inner-lime: 82.7 78% 55.5%;
-    --inner-lime-foreground: 85.9 78.4% 27.3%;
-    --inner-lime-muted-foreground: 82 84.5% 67.1%;
+    --accent-gray: 216 12.2% 83.9%;
+    --accent-gray-foreground: 215 13.8% 34.1%;
 
-    --inner-red: 0 90.6% 70.8%;
-    --inner-red-foreground: 0 73.7% 41.8%;
-    --inner-red-muted-foreground: 0 93.5% 81.8%;
+    --accent-lime: 82 84.5% 67.1%;
+    --accent-lime-foreground: 84.8 85.2% 34.5%;
 
-    --inner-violet: 255.1 91.7% 76.3%;
-    --inner-violet-foreground: 263.4 70% 50.4%;
-    --inner-violet-muted-foreground: 252.5 94.7% 85.1%;
+    --accent-red: 0 93.5% 81.8%;
+    --accent-red-foreground: 0 72.2% 50.6%;
 
-    --inner-emerald: 158.1 64.4% 51.6%;
-    --inner-emerald-foreground: 162.9 93.5% 24.3%;
-    --inner-emerald-muted-foreground: 156.2 71.6% 66.9%;
+    --accent-violet: 252.5 94.7% 85.1%;
+    --accent-violet-foreground: 262.1 83.3% 57.8%;
 
-    --inner-fuchsia: 292 91.4% 72.5%;
-    --inner-fuchsia-foreground: 294.7 72.4% 39.8%;
-    --inner-fuchsia-muted-foreground: 291.1 93.1% 82.9%;
+    --accent-emerald: 156.2 71.6% 66.9%;
+    --accent-emerald-foreground: 161.4 93.5% 30.4%;
 
-    --inner-purple: 270 95.2% 75.3%;
-    --inner-purple-foreground: 272.1 71.7% 47.1%;
-    --inner-purple-muted-foreground: 269.2 97.4% 85.1%;
+    --accent-fuchsia: 291.1 93.1% 82.9%;
+    --accent-fuchsia-foreground: 293.4 69.5% 48.8%;
 
-    --inner-cyan: 187.9 85.7% 53.3%;
-    --inner-cyan-foreground: 192.9 82.3% 31%;
-    --inner-cyan-muted-foreground: 187 92.4% 69%;
+    --accent-purple: 269.2 97.4% 85.1%;
+    --accent-purple-foreground: 293.4 69.5% 48.8%;
+
+    --accent-cyan: 187 92.4% 69%;
+    --accent-cyan-foreground: 191.6 91.4% 36.5%;
+
+    --accent-indigo: 229.7 93.5% 81.8%;
+    --accent-indigo-foreground: 243.4 75.4% 58.6%;
+    --node-ring: 240 6% 90%;
 
-    --inner-indigo: 234.5 89.5% 73.9%;
-    --inner-indigo-foreground: 244.5 57.9% 50.6%;
-    --inner-indigo-muted-foreground: 229.7 93.5% 81.8%;
   }
 }

src/frontend/tailwind.config.mjs

@@ -196,61 +196,51 @@ const config = {
           DEFAULT: "#18181B",
           muted: "#27272A",
         },
-        "inner-yellow": {
-          DEFAULT: "hsl(var(--inner-yellow))",
-          foreground: "hsl(var(--inner-foreground-yellow))",
-          muted: "hsl(var(--inner-yellow-muted-foreground))",
+        "accent-yellow": {
+          DEFAULT: "hsl(var(--accent-yellow))",
+          foreground: "hsl(var(--accent-yellow-foreground))",
         },
-        "inner-blue": {
-          DEFAULT: "hsl(var(--inner-blue))",
-          foreground: "hsl(var(--inner-foreground-blue))",
-          muted: "hsl(var(--inner-blue-muted-foreground))",
+        "accent-blue": {
+          DEFAULT: "hsl(var(--accent-blue))",
+          foreground: "hsl(var(--accent-blue-foreground))",
         },
-        "inner-gray": {
-          DEFAULT: "hsl(var(--inner-gray))",
-          foreground: "hsl(var(--inner-foreground-gray))",
-          muted: "hsl(var(--inner-gray-muted-foreground))",
+        "accent-gray": {
+          DEFAULT: "hsl(var(--accent-gray))",
+          foreground: "hsl(var(--accent-gray-foreground))",
         },
-        "inner-lime": {
-          DEFAULT: "hsl(var(--inner-lime))",
-          foreground: "hsl(var(--inner-foreground-lime))",
-          muted: "hsl(var(--inner-lime-muted-foreground))",
+        "accent-lime": {
+          DEFAULT: "hsl(var(--accent-lime))",
+          foreground: "hsl(var(--accent-lime-foreground))",
         },
-        "inner-red": {
-          DEFAULT: "hsl(var(--inner-red))",
-          foreground: "hsl(var(--inner-foreground-red))",
-          muted: "hsl(var(--inner-red-muted-foreground))",
+        "accent-red": {
+          DEFAULT: "hsl(var(--accent-red))",
+          foreground: "hsl(var(--accent-red-foreground))",
         },
-        "inner-violet": {
-          DEFAULT: "hsl(var(--inner-violet))",
-          foreground: "hsl(var(--inner-foreground-violet))",
-          muted: "hsl(var(--inner-violet-muted-foreground))",
+        "accent-violet": {
+          DEFAULT: "hsl(var(--accent-violet))",
+          foreground: "hsl(var(--accent-violet-foreground))",
         },
-        "inner-emerald": {
-          DEFAULT: "hsl(var(--inner-emerald))",
-          foreground: "hsl(var(--inner-foreground-emerald))",
-          muted: "hsl(var(--inner-emerald-muted-foreground))",
+        "accent-emerald": {
+          DEFAULT: "hsl(var(--accent-emerald))",
+          foreground: "hsl(var(--accent-emerald-foreground))",
         },
-        "inner-fuchsia": {
-          DEFAULT: "hsl(var(--inner-fuchsia))",
-          foreground: "hsl(var(--inner-foreground-fuchsia))",
-          muted: "hsl(var(--inner-fuchsia-muted-foreground))",
+        "accent-fuchsia": {
+          DEFAULT: "hsl(var(--accent-fuchsia))",
+          foreground: "hsl(var(--accent-fuchsia-foreground))",
         },
-        "inner-purple": {
-          DEFAULT: "hsl(var(--inner-purple))",
-          foreground: "hsl(var(--inner-foreground-purple))",
-          muted: "hsl(var(--inner-purple-muted-foreground))",
+        "accent-purple": {
+          DEFAULT: "hsl(var(--accent-purple))",
+          foreground: "hsl(var(--accent-purple-foreground))",
         },
-        "inner-cyan": {
-          DEFAULT: "hsl(var(--inner-cyan))",
-          foreground: "hsl(var(--inner-foreground-cyan))",
-          muted: "hsl(var(--inner-cyan-muted-foreground))",
+        "accent-cyan": {
+          DEFAULT: "hsl(var(--accent-cyan))",
+          foreground: "hsl(var(--accent-cyan-foreground))",
         },
-        "inner-indigo": {
-          DEFAULT: "hsl(var(--inner-indigo))",
-          foreground: "hsl(var(--inner-foreground-indigo))",
-          muted: "hsl(var(--inner-indigo-muted-foreground))",
+        "accent-indigo": {
+          DEFAULT: "hsl(var(--accent-indigo))",
+          foreground: "hsl(var(--accent-indigo-foreground))",
         },
+        "node-ring": "hsl(var(--node-ring))",
       },
       borderRadius: {
         lg: `var(--radius)`,

src/frontend/tests/core/features/freeze-path.spec.ts

@@ -133,7 +133,11 @@ test("user must be able to freeze a path", async ({ page }) => {
 
   await page.waitForTimeout(1000);
 
-  await page.getByTestId("icon-FreezeAll").click();
+  await page.getByTestId("more-options-modal").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("freeze-path-button").click();
 
   await page.waitForTimeout(1000);