From c12c96cfb98544225236cbb9db3a3e5f801b6778 Mon Sep 17 00:00:00 2001
From: Michel Roegl-Brunner
 <73236783+michelroegl-brunner@users.noreply.github.com>
Date: Mon, 13 Oct 2025 13:14:11 +0200
Subject: [PATCH] UI Fixes: Button Styling and Tab Navigation Improvements
 (#119)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix server column alignment in installed scripts table

- 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

* Fix UpdateableBadge overflow on smaller screens

- 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

* Enhance action buttons with blueish theme and hover animations

- 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

* Tone down button colors for better dark theme compatibility

- 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! 😅

* Refactor button styling with semantic variants for uniform appearance

- 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

* Remove rounded bottom border from active tab

- 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

* Apply flat bottom edge to tab hover states

- 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
---
 src/app/_components/InstalledScriptsTab.tsx    | 14 +++++++-------
 src/app/_components/ScriptCard.tsx             |  2 +-
 src/app/_components/ScriptCardList.tsx         |  2 +-
 src/app/_components/ScriptInstallationCard.tsx | 10 +++++-----
 src/app/_components/ui/button.tsx              |  6 ++++++
 src/app/page.tsx                               | 12 ++++++------
 6 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx
index 44a3e78..b272f6d 100644
--- a/src/app/_components/InstalledScriptsTab.tsx
+++ b/src/app/_components/InstalledScriptsTab.tsx
@@ -816,9 +816,9 @@ export function InstalledScriptsTab() {
                           )
                         )}
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
+                      <td className="px-6 py-4 whitespace-nowrap text-left">
                         <span 
-                          className="text-sm px-3 py-1 rounded"
+                          className="text-sm px-3 py-1 rounded inline-block"
                           style={{
                             backgroundColor: script.server_color ?? 'transparent',
                             color: script.server_color ? getContrastColor(script.server_color) : 'inherit'
@@ -842,14 +842,14 @@ export function InstalledScriptsTab() {
                               <Button
                                 onClick={handleSaveEdit}
                                 disabled={updateScriptMutation.isPending}
-                                variant="default"
+                                variant="save"
                                 size="sm"
                               >
                                 {updateScriptMutation.isPending ? 'Saving...' : 'Save'}
                               </Button>
                               <Button
                                 onClick={handleCancelEdit}
-                                variant="outline"
+                                variant="cancel"
                                 size="sm"
                               >
                                 Cancel
@@ -859,7 +859,7 @@ export function InstalledScriptsTab() {
                             <>
                               <Button
                                 onClick={() => handleEditScript(script)}
-                                variant="default"
+                                variant="edit"
                                 size="sm"
                               >
                                 Edit
@@ -867,7 +867,7 @@ export function InstalledScriptsTab() {
                               {script.container_id && (
                                 <Button
                                   onClick={() => handleUpdateScript(script)}
-                                  variant="link"
+                                  variant="update"
                                   size="sm"
                                 >
                                   Update
@@ -875,7 +875,7 @@ export function InstalledScriptsTab() {
                               )}
                               <Button
                                 onClick={() => handleDeleteScript(Number(script.id))}
-                                variant="destructive"
+                                variant="delete"
                                 size="sm"
                                 disabled={deleteScriptMutation.isPending}
                               >
diff --git a/src/app/_components/ScriptCard.tsx b/src/app/_components/ScriptCard.tsx
index 0f20275..3b8d407 100644
--- a/src/app/_components/ScriptCard.tsx
+++ b/src/app/_components/ScriptCard.tsx
@@ -49,7 +49,7 @@ export function ScriptCard({ script, onClick }: ScriptCardProps) {
             </h3>
             <div className="mt-2 space-y-2">
               {/* Type and Updateable status on first row */}
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center space-x-2 flex-wrap gap-1">
                 <TypeBadge type={script.type ?? 'unknown'} />
                 {script.updateable && <UpdateableBadge />}
               </div>
diff --git a/src/app/_components/ScriptCardList.tsx b/src/app/_components/ScriptCardList.tsx
index 7c1b68f..21fde12 100644
--- a/src/app/_components/ScriptCardList.tsx
+++ b/src/app/_components/ScriptCardList.tsx
@@ -70,7 +70,7 @@ export function ScriptCardList({ script, onClick }: ScriptCardListProps) {
                 <h3 className="text-xl font-semibold text-foreground truncate mb-2">
                   {script.name || 'Unnamed Script'}
                 </h3>
-                <div className="flex items-center space-x-3">
+                <div className="flex items-center space-x-3 flex-wrap gap-2">
                   <TypeBadge type={script.type ?? 'unknown'} />
                   {script.updateable && <UpdateableBadge />}
                   <div className="flex items-center space-x-1">
diff --git a/src/app/_components/ScriptInstallationCard.tsx b/src/app/_components/ScriptInstallationCard.tsx
index 94e2dc9..59a34cc 100644
--- a/src/app/_components/ScriptInstallationCard.tsx
+++ b/src/app/_components/ScriptInstallationCard.tsx
@@ -134,7 +134,7 @@ export function ScriptInstallationCard({
             <Button
               onClick={onSave}
               disabled={isUpdating}
-              variant="default"
+              variant="save"
               size="sm"
               className="flex-1 min-w-0"
             >
@@ -142,7 +142,7 @@ export function ScriptInstallationCard({
             </Button>
             <Button
               onClick={onCancel}
-              variant="outline"
+              variant="cancel"
               size="sm"
               className="flex-1 min-w-0"
             >
@@ -153,7 +153,7 @@ export function ScriptInstallationCard({
           <>
             <Button
               onClick={onEdit}
-              variant="default"
+              variant="edit"
               size="sm"
               className="flex-1 min-w-0"
             >
@@ -162,7 +162,7 @@ export function ScriptInstallationCard({
             {script.container_id && (
               <Button
                 onClick={onUpdate}
-                variant="link"
+                variant="update"
                 size="sm"
                 className="flex-1 min-w-0"
               >
@@ -171,7 +171,7 @@ export function ScriptInstallationCard({
             )}
             <Button
               onClick={onDelete}
-              variant="destructive"
+              variant="delete"
               size="sm"
               disabled={isDeleting}
               className="flex-1 min-w-0"
diff --git a/src/app/_components/ui/button.tsx b/src/app/_components/ui/button.tsx
index 705477f..8fb2a4b 100644
--- a/src/app/_components/ui/button.tsx
+++ b/src/app/_components/ui/button.tsx
@@ -34,6 +34,12 @@ const buttonVariants = cva(
           "relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-left after:scale-x-100 hover:after:origin-bottom-right hover:after:scale-x-0 after:transition-transform after:ease-in-out after:duration-300",
         linkHover2:
           "relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-right after:scale-x-0 hover:after:origin-bottom-left hover:after:scale-x-100 after:transition-transform after:ease-in-out after:duration-300",
+        // Dark theme action button variants
+        edit: "bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        update: "bg-cyan-900/20 hover:bg-cyan-900/30 border border-cyan-700/50 text-cyan-300 hover:text-cyan-200 hover:border-cyan-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
+        delete: "bg-red-900/20 hover:bg-red-900/30 border border-red-700/50 text-red-300 hover:text-red-200 hover:border-red-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:hover:scale-100",
+        save: "bg-green-900/20 hover:bg-green-900/30 border border-green-700/50 text-green-300 hover:text-green-200 hover:border-green-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:hover:scale-100",
+        cancel: "bg-gray-800/20 hover:bg-gray-800/30 border border-gray-600/50 text-gray-300 hover:text-gray-200 hover:border-gray-500/60 transition-all duration-200 hover:scale-105 hover:shadow-md",
       },
       size: {
         default: "h-10 px-4 py-2",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6fdf431..16cce0c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -106,8 +106,8 @@ export default function Home() {
                 onClick={() => setActiveTab('scripts')}
                 className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
                   activeTab === 'scripts'
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-accent hover:text-accent-foreground'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
                 }`}> 
                 <Package className="h-4 w-4" />
                 <span className="hidden sm:inline">Available Scripts</span>
@@ -122,8 +122,8 @@ export default function Home() {
                 onClick={() => setActiveTab('downloaded')}
                 className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
                   activeTab === 'downloaded'
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-accent hover:text-accent-foreground'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
                 }`}>
                 <HardDrive className="h-4 w-4" />
                 <span className="hidden sm:inline">Downloaded Scripts</span>
@@ -138,8 +138,8 @@ export default function Home() {
                 onClick={() => setActiveTab('installed')}
                 className={`px-3 py-2 text-sm flex items-center justify-center sm:justify-start gap-2 w-full sm:w-auto ${
                   activeTab === 'installed'
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-accent hover:text-accent-foreground'
+                    ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none'
+                    : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none'
                 }`}>
                 <FolderOpen className="h-4 w-4" />
                 <span className="hidden sm:inline">Installed Scripts</span>