UI Fixes: Button Styling and Tab Navigation Improvements #119
Conversation
This file contains hidden or 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
- Add text-left class to server column td element - Add inline-block class to server name span element - Ensures server column content aligns with header like other columns
- Add flex-wrap and gap classes to badge containers in ScriptCard and ScriptCardList - Prevents badges from overflowing card boundaries on narrow screens - Maintains proper spacing with gap-1/gap-2 for wrapped elements - Improves responsive design for mobile and laptop screens
- Update Edit, Update, Delete, Save, and Cancel buttons with color-coded themes - Edit: Blue theme (bg-blue-50, text-blue-700) - Update: Cyan theme (bg-cyan-50, text-cyan-700) - Delete: Red theme (bg-red-50, text-red-700) - Save: Green theme (bg-green-50, text-green-700) - Cancel: Gray theme (bg-gray-50, text-gray-700) - Add hover effects: scale-105, shadow-md, color transitions - Apply consistent styling to both table and mobile card views - Disabled buttons prevent scale animation and show proper cursor states
- Replace bright flashbang colors with subtle dark theme variants - Use 900-level colors with 20% opacity for backgrounds - Use 300-level colors for text with 200-level on hover - Use 700-level colors with 50% opacity for borders - Maintain color coding but with much more subtle appearance - Better contrast and readability against dark backgrounds - No more flashbang effect! 😅
- Add semantic button variants: edit, update, delete, save, cancel - Each variant has consistent dark theme colors and hover effects - Remove custom className overrides from all button instances - Centralize styling in Button component for maintainability - All action buttons now use semantic variants instead of custom classes - Much cleaner code and consistent styling across the application
- Add rounded-t-md rounded-b-none classes to active tab styling - Creates flat bottom edge that connects seamlessly with content below - Applied to all three tabs: Available Scripts, Downloaded Scripts, Installed Scripts - Maintains rounded top corners for visual appeal while removing bottom rounding
- Add hover:rounded-t-md hover:rounded-b-none to inactive tab hover states - Ensures consistent flat bottom edge on both active and hover states - Creates uniform visual behavior across all tab interactions - Maintains rounded top corners while removing bottom rounding on hover
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.
🎨 UI Improvements
Button Styling Enhancements
Tab Navigation Improvements
Badge Overflow Fix
Code Quality
🚀 Benefits