From 2aaae1e67bb2263f5fd822a9ceecf03329e78467 Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Tue, 14 Oct 2025 08:47:27 +0200 Subject: [PATCH 1/7] Improve navigation layout: reduce spacing and move help icons inside nav buttons - Reduced horizontal spacing between nav items from sm:space-x-2 lg:space-x-8 to sm:space-x-1 - Moved ContextualHelpIcon components inside Button components for better UX - Removed unnecessary wrapper divs to create more compact layout - Help symbols are now part of the clickable nav area --- src/app/page.tsx | 104 ++++++++++++++++++++++------------------------- 1 file changed, 49 insertions(+), 55 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index c59d05da..84c7a541 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -131,64 +131,58 @@ export default function Home() { {/* Tab Navigation */}
-
From 7f2fce95c141fe69bbcdd9640b67c49020c86f7f Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Tue, 14 Oct 2025 08:49:21 +0200 Subject: [PATCH 2/7] Enhance stop/destroy button hover effects and colors - Added scaling and shadow hover effects to stop/start and destroy buttons - Enhanced color scheme with high-contrast colors: - Stop button: vibrant red (bg-red-600) with red glow shadow - Start button: vibrant green (bg-green-600) with green glow shadow - Destroy button: dark red (bg-red-800) with intense red glow shadow - Added colored borders and smooth transitions for better visual feedback - Improved button visibility and user experience with color-coded actions --- src/app/_components/InstalledScriptsTab.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx index 1169b7e2..fb2f92e3 100644 --- a/src/app/_components/InstalledScriptsTab.tsx +++ b/src/app/_components/InstalledScriptsTab.tsx @@ -1187,6 +1187,10 @@ export function InstalledScriptsTab() { disabled={controllingScriptId === script.id || (containerStatuses.get(script.id) ?? 'unknown') === 'unknown'} variant={(containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'destructive' : 'default'} size="sm" + className={(containerStatuses.get(script.id) ?? 'unknown') === 'running' + ? "bg-red-600 hover:bg-red-700 text-white border border-red-500 hover:border-red-400 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 transition-all duration-200 disabled:hover:scale-100" + : "bg-green-600 hover:bg-green-700 text-white border border-green-500 hover:border-green-400 hover:scale-105 hover:shadow-lg hover:shadow-green-500/25 transition-all duration-200 disabled:hover:scale-100" + } > {controllingScriptId === script.id ? 'Working...' : (containerStatuses.get(script.id) ?? 'unknown') === 'running' ? 'Stop' : 'Start'} @@ -1195,6 +1199,7 @@ export function InstalledScriptsTab() { disabled={controllingScriptId === script.id} variant="destructive" size="sm" + className="bg-red-800 hover:bg-red-900 text-white border border-red-600 hover:border-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-600/30 transition-all duration-200 disabled:hover:scale-100" > {controllingScriptId === script.id ? 'Working...' : 'Destroy'} From d8d5776bb728042b5dab298a3b6590112bf2bf06 Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Tue, 14 Oct 2025 08:54:01 +0200 Subject: [PATCH 3/7] Fix input field alignment in editing mode - Improved vertical alignment of script name and container ID input fields - Removed script path line during editing for cleaner interface - Added consistent min-height and flex centering for both input fields - Enhanced input styling with better padding and focus states - Input fields now align perfectly at the same height level --- src/app/_components/InstalledScriptsTab.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx index fb2f92e3..401bda42 100644 --- a/src/app/_components/InstalledScriptsTab.tsx +++ b/src/app/_components/InstalledScriptsTab.tsx @@ -1067,15 +1067,14 @@ export function InstalledScriptsTab() { > {editingScriptId === script.id ? ( -
+
handleInputChange('script_name', e.target.value)} - className="w-full px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary" + className="w-full px-3 py-2 text-sm font-medium border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring" placeholder="Script name" /> -
{script.script_path}
) : (
@@ -1086,13 +1085,15 @@ export function InstalledScriptsTab() { {editingScriptId === script.id ? ( - handleInputChange('container_id', e.target.value)} - className="w-full px-2 py-1 text-sm font-mono border border-border rounded bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary" - placeholder="Container ID" - /> +
+ handleInputChange('container_id', e.target.value)} + className="w-full px-3 py-2 text-sm font-mono border border-input rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring" + placeholder="Container ID" + /> +
) : ( script.container_id ? (
From fbf9e399db6a68de02b035b587ec718d0a0fea94 Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Tue, 14 Oct 2025 08:57:08 +0200 Subject: [PATCH 4/7] Improve button styling on available scripts page - Made download button smaller and less colorful with subtle blue theme - Updated Clear Selection and Select All Visible buttons to match Settings button styling - Changed buttons to outline variant with default size for consistency - Removed custom border styling to use standard outline appearance - Improved visual hierarchy and button cohesion across the interface --- src/app/_components/ScriptsGrid.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/app/_components/ScriptsGrid.tsx b/src/app/_components/ScriptsGrid.tsx index 14c00ff5..9191aecc 100644 --- a/src/app/_components/ScriptsGrid.tsx +++ b/src/app/_components/ScriptsGrid.tsx @@ -626,11 +626,13 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) { @@ -667,8 +670,8 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) { {filteredScripts.length > 0 && ( From 8835abad152f9c8e6a0b11c1f9e52b1bce3d9c2c Mon Sep 17 00:00:00 2001 From: Michel Roegl-Brunner Date: Tue, 14 Oct 2025 08:58:01 +0200 Subject: [PATCH 5/7] Reduce footer size by approximately 50% - Changed vertical padding from py-6 to py-3 (3rem to 1.5rem) - Reduced gaps between elements from gap-4 to gap-2 throughout - Made footer more compact while maintaining functionality - Improved screen space utilization for main content --- src/app/_components/Footer.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/_components/Footer.tsx b/src/app/_components/Footer.tsx index 90509d30..91f9b964 100644 --- a/src/app/_components/Footer.tsx +++ b/src/app/_components/Footer.tsx @@ -12,10 +12,10 @@ export function Footer({ onOpenReleaseNotes }: FooterProps) { const { data: versionData } = api.version.getCurrentVersion.useQuery(); return ( -