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/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);