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>
2024-11-06 16:42:48 -03:00 · 2024-11-06 16:42:48 -03:00 · 9394fe1ca6
commit 9394fe1ca6
parent 0c049deee3
12 changed files with 208 additions and 226 deletions
--- a/src/frontend/tailwind.config.mjs
+++ b/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)`,