From e1f084cd6bffb5f9e6ca63a64485106938882d35 Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Mon, 13 Oct 2025 13:01:18 +0200 Subject: [PATCH 1/7] 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 --- src/app/_components/InstalledScriptsTab.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx index 44a3e78..71dd990 100644 --- a/src/app/_components/InstalledScriptsTab.tsx +++ b/src/app/_components/InstalledScriptsTab.tsx @@ -816,9 +816,9 @@ export function InstalledScriptsTab() { ) )} - + Date: Mon, 13 Oct 2025 13:02:34 +0200 Subject: [PATCH 2/7] 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 --- src/app/_components/ScriptCard.tsx | 2 +- src/app/_components/ScriptCardList.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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) {
{/* Type and Updateable status on first row */} -
+
{script.updateable && }
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) {

{script.name || 'Unnamed Script'}

-
+
{script.updateable && }
From 040c265955dff094fb65affbace26a4bca27c1a7 Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Mon, 13 Oct 2025 13:04:59 +0200 Subject: [PATCH 3/7] 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 --- src/app/_components/InstalledScriptsTab.tsx | 13 +++++++++---- src/app/_components/ScriptInstallationCard.tsx | 18 +++++++++--------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx index 71dd990..a46f8d2 100644 --- a/src/app/_components/InstalledScriptsTab.tsx +++ b/src/app/_components/InstalledScriptsTab.tsx @@ -842,8 +842,9 @@ export function InstalledScriptsTab() { @@ -851,6 +852,7 @@ export function InstalledScriptsTab() { onClick={handleCancelEdit} variant="outline" size="sm" + className="bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-700 hover:text-gray-800 hover:border-gray-300 transition-all duration-200 hover:scale-105 hover:shadow-md" > Cancel @@ -859,25 +861,28 @@ export function InstalledScriptsTab() { <> {script.container_id && ( )} diff --git a/src/app/_components/ScriptInstallationCard.tsx b/src/app/_components/ScriptInstallationCard.tsx index 94e2dc9..555e111 100644 --- a/src/app/_components/ScriptInstallationCard.tsx +++ b/src/app/_components/ScriptInstallationCard.tsx @@ -134,9 +134,9 @@ export function ScriptInstallationCard({ @@ -144,7 +144,7 @@ export function ScriptInstallationCard({ onClick={onCancel} variant="outline" size="sm" - className="flex-1 min-w-0" + className="flex-1 min-w-0 bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-700 hover:text-gray-800 hover:border-gray-300 transition-all duration-200 hover:scale-105 hover:shadow-md" > Cancel @@ -153,28 +153,28 @@ export function ScriptInstallationCard({ <> {script.container_id && ( )} From f585dd520b6dd7d74dee5d2896c0da8cfa70da70 Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Mon, 13 Oct 2025 13:06:33 +0200 Subject: [PATCH 4/7] Tone down button colors for better dark theme compatibility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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! 😅 --- src/app/_components/InstalledScriptsTab.tsx | 10 +++++----- src/app/_components/ScriptInstallationCard.tsx | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx index a46f8d2..a7da3d5 100644 --- a/src/app/_components/InstalledScriptsTab.tsx +++ b/src/app/_components/InstalledScriptsTab.tsx @@ -844,7 +844,7 @@ export function InstalledScriptsTab() { disabled={updateScriptMutation.isPending} variant="outline" size="sm" - className="bg-green-50 hover:bg-green-100 border-green-200 text-green-700 hover:text-green-800 hover:border-green-300 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100" + className="bg-green-900/20 hover:bg-green-900/30 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:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100" > {updateScriptMutation.isPending ? 'Saving...' : 'Save'} @@ -852,7 +852,7 @@ export function InstalledScriptsTab() { onClick={handleCancelEdit} variant="outline" size="sm" - className="bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-700 hover:text-gray-800 hover:border-gray-300 transition-all duration-200 hover:scale-105 hover:shadow-md" + className="bg-gray-800/20 hover:bg-gray-800/30 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" > Cancel @@ -863,7 +863,7 @@ export function InstalledScriptsTab() { onClick={() => handleEditScript(script)} variant="outline" size="sm" - className="bg-blue-50 hover:bg-blue-100 border-blue-200 text-blue-700 hover:text-blue-800 hover:border-blue-300 transition-all duration-200 hover:scale-105 hover:shadow-md" + className="bg-blue-900/20 hover:bg-blue-900/30 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" > Edit @@ -872,7 +872,7 @@ export function InstalledScriptsTab() { onClick={() => handleUpdateScript(script)} variant="outline" size="sm" - className="bg-cyan-50 hover:bg-cyan-100 border-cyan-200 text-cyan-700 hover:text-cyan-800 hover:border-cyan-300 transition-all duration-200 hover:scale-105 hover:shadow-md" + className="bg-cyan-900/20 hover:bg-cyan-900/30 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" > Update @@ -882,7 +882,7 @@ export function InstalledScriptsTab() { variant="outline" size="sm" disabled={deleteScriptMutation.isPending} - className="bg-red-50 hover:bg-red-100 border-red-200 text-red-700 hover:text-red-800 hover:border-red-300 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100" + className="bg-red-900/20 hover:bg-red-900/30 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:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100" > {deleteScriptMutation.isPending ? 'Deleting...' : 'Delete'} diff --git a/src/app/_components/ScriptInstallationCard.tsx b/src/app/_components/ScriptInstallationCard.tsx index 555e111..e1a0c89 100644 --- a/src/app/_components/ScriptInstallationCard.tsx +++ b/src/app/_components/ScriptInstallationCard.tsx @@ -136,7 +136,7 @@ export function ScriptInstallationCard({ disabled={isUpdating} variant="outline" size="sm" - className="flex-1 min-w-0 bg-green-50 hover:bg-green-100 border-green-200 text-green-700 hover:text-green-800 hover:border-green-300 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100" + className="flex-1 min-w-0 bg-green-900/20 hover:bg-green-900/30 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:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100" > {isUpdating ? 'Saving...' : 'Save'} @@ -144,7 +144,7 @@ export function ScriptInstallationCard({ onClick={onCancel} variant="outline" size="sm" - className="flex-1 min-w-0 bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-700 hover:text-gray-800 hover:border-gray-300 transition-all duration-200 hover:scale-105 hover:shadow-md" + className="flex-1 min-w-0 bg-gray-800/20 hover:bg-gray-800/30 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" > Cancel @@ -155,7 +155,7 @@ export function ScriptInstallationCard({ onClick={onEdit} variant="outline" size="sm" - className="flex-1 min-w-0 bg-blue-50 hover:bg-blue-100 border-blue-200 text-blue-700 hover:text-blue-800 hover:border-blue-300 transition-all duration-200 hover:scale-105 hover:shadow-md" + className="flex-1 min-w-0 bg-blue-900/20 hover:bg-blue-900/30 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" > Edit @@ -164,7 +164,7 @@ export function ScriptInstallationCard({ onClick={onUpdate} variant="outline" size="sm" - className="flex-1 min-w-0 bg-cyan-50 hover:bg-cyan-100 border-cyan-200 text-cyan-700 hover:text-cyan-800 hover:border-cyan-300 transition-all duration-200 hover:scale-105 hover:shadow-md" + className="flex-1 min-w-0 bg-cyan-900/20 hover:bg-cyan-900/30 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" > Update @@ -174,7 +174,7 @@ export function ScriptInstallationCard({ variant="outline" size="sm" disabled={isDeleting} - className="flex-1 min-w-0 bg-red-50 hover:bg-red-100 border-red-200 text-red-700 hover:text-red-800 hover:border-red-300 transition-all duration-200 hover:scale-105 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100" + className="flex-1 min-w-0 bg-red-900/20 hover:bg-red-900/30 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:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100" > {isDeleting ? 'Deleting...' : 'Delete'} From b63dcf97daadcf19c4754cf35792a6d3ffb8a61d Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Mon, 13 Oct 2025 13:07:34 +0200 Subject: [PATCH 5/7] 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 --- src/app/_components/InstalledScriptsTab.tsx | 15 +++++--------- .../_components/ScriptInstallationCard.tsx | 20 +++++++++---------- src/app/_components/ui/button.tsx | 6 ++++++ 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx index a7da3d5..b272f6d 100644 --- a/src/app/_components/InstalledScriptsTab.tsx +++ b/src/app/_components/InstalledScriptsTab.tsx @@ -842,17 +842,15 @@ export function InstalledScriptsTab() { @@ -861,28 +859,25 @@ export function InstalledScriptsTab() { <> {script.container_id && ( )} diff --git a/src/app/_components/ScriptInstallationCard.tsx b/src/app/_components/ScriptInstallationCard.tsx index e1a0c89..59a34cc 100644 --- a/src/app/_components/ScriptInstallationCard.tsx +++ b/src/app/_components/ScriptInstallationCard.tsx @@ -134,17 +134,17 @@ export function ScriptInstallationCard({ @@ -153,28 +153,28 @@ export function ScriptInstallationCard({ <> {script.container_id && ( )} 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", From 699ff34ac478070fcb06aa4a6d63d47df8fca436 Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Mon, 13 Oct 2025 13:09:00 +0200 Subject: [PATCH 6/7] 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 --- src/app/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 6fdf431..963be04 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -106,7 +106,7 @@ 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' + ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none' : 'hover:bg-accent hover:text-accent-foreground' }`}> @@ -122,7 +122,7 @@ 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' + ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none' : 'hover:bg-accent hover:text-accent-foreground' }`}> @@ -138,7 +138,7 @@ 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' + ? 'bg-accent text-accent-foreground rounded-t-md rounded-b-none' : 'hover:bg-accent hover:text-accent-foreground' }`}> From 4dc8d3054a610c10d9d913323b685dccad32219d Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Mon, 13 Oct 2025 13:09:36 +0200 Subject: [PATCH 7/7] 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/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 963be04..16cce0c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -107,7 +107,7 @@ export default function Home() { 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 rounded-t-md rounded-b-none' - : 'hover:bg-accent hover:text-accent-foreground' + : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none' }`}> Available Scripts @@ -123,7 +123,7 @@ export default function Home() { 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 rounded-t-md rounded-b-none' - : 'hover:bg-accent hover:text-accent-foreground' + : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none' }`}> Downloaded Scripts @@ -139,7 +139,7 @@ export default function Home() { 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 rounded-t-md rounded-b-none' - : 'hover:bg-accent hover:text-accent-foreground' + : 'hover:bg-accent hover:text-accent-foreground hover:rounded-t-md hover:rounded-b-none' }`}> Installed Scripts