feat: Enhance UI Consistency and Refactor Color Naming Conventions for Improved UX #4424
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ent-" for better clarity and consistency in naming conventions
…an 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
…oregroundColorName 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
… 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.
…tter visual consistency and clarity
… class based on build status, now correctly returns class for BUILDING status
…lbarComponent using ReactFlow's store selector to dynamically adjust scale based on zoom level.
…olbar with flex layout, spacing, border, background color, padding, and shadow for better visual appearance
…nd readability in the stylesheet.
dosubot
bot
added
size:L
github-actions
bot
added
enhancement
mfortman11
approved these changes
Nov 6, 2024
src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Mike Fortman <[email protected]>
…tipComponent/index.tsx Co-authored-by: Mike Fortman <[email protected]>
…elected nodes for better visual consistency 🔧 (applies.css): Remove unnecessary border width specification in various CSS classes to simplify styling and improve maintainability
…ed-md' instead of 'rounded-[6px]' for consistency and better readability 📝 (applies.css): Update class name to use 'rounded-xl' instead of 'rounded-[12px]' for consistency and better readability
…r 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
…Tooltip 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
…rove consistency and readability
…to freeze a path in the application
joaoguilhermeS
pushed a commit
that referenced
this pull request
Nov 7, 2024
…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]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request includes several changes to improve the consistency of color naming conventions and enhance the user interface components. The most important changes include updating color variables, refactoring components to use new color names, and adjusting styles for better visual consistency.
Color Naming Consistency:
inner-*toaccent-*insrc/frontend/src/style/index.cssto standardize naming conventions.Component Refactoring:
HandleTooltipComponentto use newaccentColorNameandaccentForegroundColorNameprops, and replaceddivelements withBadgecomponents for tooltips. [1] [2]HandleRenderComponentto useaccent-*color variables and updated the pulse animation styles accordingly. [1] [2] [3] [4] [5]Style Adjustments:
NodeStatuscomponent to usemuted-foregroundinstead offoreground.accent-red-foregroundinNodeStatuscomponent.UI Enhancements:
NodeToolbarComponentbased on zoom level using ReactFlow's store selector. [1] [2] [3] [4] [5]GenericNodeandnodeToolbarComponentfiles for cleaner code. [1] [2] [3] [4] [5]