SVI/ProxmoxVE-Local
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE-Local.git synced 2026-03-31 06:23:54 -04:00
Code Issues 56 Packages Projects Releases 7 Wiki Activity

[PR #119] [MERGED] UI Fixes: Button Styling and Tab Navigation Improvements #194

New Issue
Closed
opened 2025-11-20 04:13:27 -05:00 by saavagebueno · 0 comments
saavagebueno commented 2025-11-20 04:13:27 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/119
Author: @michelroegl-brunner
Created: 10/13/2025
Status: ✅ Merged
Merged: 10/13/2025
Merged by: @michelroegl-brunner

Base: main ← Head: fix/ui_fixes

📝 Commits (7)

  • e1f084c Fix server column alignment in installed scripts table
  • 36da3ad Fix UpdateableBadge overflow on smaller screens
  • 040c265 Enhance action buttons with blueish theme and hover animations
  • f585dd5 Tone down button colors for better dark theme compatibility
  • b63dcf9 Refactor button styling with semantic variants for uniform appearance
  • 699ff34 Remove rounded bottom border from active tab
  • 4dc8d30 Apply flat bottom edge to tab hover states

📊 Changes

6 files changed (+26 additions, -20 deletions)

View changed files

📝 src/app/_components/InstalledScriptsTab.tsx (+7 -7)
📝 src/app/_components/ScriptCard.tsx (+1 -1)
📝 src/app/_components/ScriptCardList.tsx (+1 -1)
📝 src/app/_components/ScriptInstallationCard.tsx (+5 -5)
📝 src/app/_components/ui/button.tsx (+6 -0)
📝 src/app/page.tsx (+6 -6)

📄 Description

🎨 UI Improvements

Button Styling Enhancements

  • Semantic Button Variants: Added semantic variants (edit, update, delete, save, cancel) with consistent dark theme colors
  • Uniform Styling: Centralized button styling in Button component for better maintainability
  • Hover Effects: Added scale animation (hover:scale-105) and shadow effects for better user feedback
  • Dark Theme Colors: Used subtle 900-level colors with opacity for better dark theme compatibility

Tab Navigation Improvements

  • Flat Bottom Edge: Removed rounded bottom border from active tabs for seamless content integration
  • Consistent Hover States: Applied same flat bottom styling to hover states
  • Visual Polish: Maintained rounded top corners while creating clean connection with content below

Badge Overflow Fix

  • Responsive Design: Fixed UpdateableBadge overflow on smaller screens
  • Flex Wrapping: Added flex-wrap and gap classes to prevent badges from hanging over card boundaries
  • Mobile Optimization: Improved display on laptop and mobile screens

Code Quality

  • Cleaner Code: Removed custom className overrides in favor of semantic variants
  • Maintainability: Centralized styling makes future updates easier
  • Consistency: All action buttons now use the same styling system

🚀 Benefits

  • Better visual hierarchy and user experience
  • Improved responsive design for various screen sizes
  • More maintainable and consistent codebase
  • Enhanced dark theme compatibility

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/119 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/13/2025 **Status:** ✅ Merged **Merged:** 10/13/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `fix/ui_fixes` --- ### 📝 Commits (7) - [`e1f084c`](https://github.com/community-scripts/ProxmoxVE-Local/commit/e1f084cd6bffb5f9e6ca63a64485106938882d35) Fix server column alignment in installed scripts table - [`36da3ad`](https://github.com/community-scripts/ProxmoxVE-Local/commit/36da3ad68d19fe49f2565dddf1f196aca79fdcf9) Fix UpdateableBadge overflow on smaller screens - [`040c265`](https://github.com/community-scripts/ProxmoxVE-Local/commit/040c265955dff094fb65affbace26a4bca27c1a7) Enhance action buttons with blueish theme and hover animations - [`f585dd5`](https://github.com/community-scripts/ProxmoxVE-Local/commit/f585dd520b6dd7d74dee5d2896c0da8cfa70da70) Tone down button colors for better dark theme compatibility - [`b63dcf9`](https://github.com/community-scripts/ProxmoxVE-Local/commit/b63dcf97daadcf19c4754cf35792a6d3ffb8a61d) Refactor button styling with semantic variants for uniform appearance - [`699ff34`](https://github.com/community-scripts/ProxmoxVE-Local/commit/699ff34ac478070fcb06aa4a6d63d47df8fca436) Remove rounded bottom border from active tab - [`4dc8d30`](https://github.com/community-scripts/ProxmoxVE-Local/commit/4dc8d3054a610c10d9d913323b685dccad32219d) Apply flat bottom edge to tab hover states ### 📊 Changes **6 files changed** (+26 additions, -20 deletions) <details> <summary>View changed files</summary> 📝 `src/app/_components/InstalledScriptsTab.tsx` (+7 -7) 📝 `src/app/_components/ScriptCard.tsx` (+1 -1) 📝 `src/app/_components/ScriptCardList.tsx` (+1 -1) 📝 `src/app/_components/ScriptInstallationCard.tsx` (+5 -5) 📝 `src/app/_components/ui/button.tsx` (+6 -0) 📝 `src/app/page.tsx` (+6 -6) </details> ### 📄 Description ## 🎨 UI Improvements ### Button Styling Enhancements - **Semantic Button Variants**: Added semantic variants (edit, update, delete, save, cancel) with consistent dark theme colors - **Uniform Styling**: Centralized button styling in Button component for better maintainability - **Hover Effects**: Added scale animation (hover:scale-105) and shadow effects for better user feedback - **Dark Theme Colors**: Used subtle 900-level colors with opacity for better dark theme compatibility ### Tab Navigation Improvements - **Flat Bottom Edge**: Removed rounded bottom border from active tabs for seamless content integration - **Consistent Hover States**: Applied same flat bottom styling to hover states - **Visual Polish**: Maintained rounded top corners while creating clean connection with content below ### Badge Overflow Fix - **Responsive Design**: Fixed UpdateableBadge overflow on smaller screens - **Flex Wrapping**: Added flex-wrap and gap classes to prevent badges from hanging over card boundaries - **Mobile Optimization**: Improved display on laptop and mobile screens ### Code Quality - **Cleaner Code**: Removed custom className overrides in favor of semantic variants - **Maintainability**: Centralized styling makes future updates easier - **Consistency**: All action buttons now use the same styling system ## 🚀 Benefits - Better visual hierarchy and user experience - Improved responsive design for various screen sizes - More maintainable and consistent codebase - Enhanced dark theme compatibility --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
saavagebueno added the pull-request label 2025-11-20 04:13:27 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
enhancement
enhancement
feature
in progress
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
saavagebueno
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: SVI/ProxmoxVE-Local#194
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?