From 9b7593d8ccbbb73b839ea9df2ed6f3d9ecc26c1f Mon Sep 17 00:00:00 2001
From: Zane <75694352+zanesq@users.noreply.github.com>
Date: Thu, 7 Aug 2025 08:28:55 -0700
Subject: [PATCH] Fix dark mode rendering of config form and centered providers
 grid for wider screens. (#3837)

---
 .../components/settings/providers/ProviderGrid.tsx |  8 +++++++-
 .../settings/providers/ProviderSettingsPage.tsx    | 14 ++++++++------
 .../forms/DefaultProviderSetupForm.tsx             |  8 +++++---
 .../providers/subcomponents/CardContainer.tsx      |  6 +++---
 .../subcomponents/buttons/CardButtons.tsx          |  4 ++--
 5 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/ui/desktop/src/components/settings/providers/ProviderGrid.tsx b/ui/desktop/src/components/settings/providers/ProviderGrid.tsx
index 48de1027..c3016610 100644
--- a/ui/desktop/src/components/settings/providers/ProviderGrid.tsx
+++ b/ui/desktop/src/components/settings/providers/ProviderGrid.tsx
@@ -6,7 +6,13 @@ import { ProviderDetails } from '../../../api';
 
 const GridLayout = memo(function GridLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="grid grid-cols-[repeat(auto-fill,_minmax(140px,_1fr))] gap-3 [&_*]:z-20">
+    <div
+      className="grid gap-4 [&_*]:z-20 p-1"
+      style={{
+        gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 200px))',
+        justifyContent: 'start',
+      }}
+    >
       {children}
     </div>
   );
diff --git a/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx b/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx
index 5b1f7a70..a0db2348 100644
--- a/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx
+++ b/ui/desktop/src/components/settings/providers/ProviderSettingsPage.tsx
@@ -100,21 +100,23 @@ export default function ProviderSettings({ onClose, isOnboarding }: ProviderSett
     <div className="h-screen w-full flex flex-col">
       <ScrollArea className="flex-1 w-full">
         {isOnboarding && (
-          <div className="group/logo flex justify-left pl-8">
-            <WelcomeGooseLogo className="h-16 w-16 md:h-20 md:w-20 text-black dark:text-white" />
+          <div className="w-full max-w-6xl mx-auto mt-16">
+            <div className="group/logo flex justify-left px-4 sm:px-6 md:px-8">
+              <WelcomeGooseLogo className="h-16 w-16 md:h-20 md:w-20 text-black dark:text-white" />
+            </div>
           </div>
         )}
-        <div className="px-8 pt-6 pb-4">
+        <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pt-6 pb-4">
           {/* Only show back button if not in onboarding mode */}
           {!isOnboarding && <BackButton className={'mt-[42px]'} onClick={onClose} />}
           <h1
-            className="text-3xl font-medium text-textStandard mt-4"
+            className="text-2xl sm:text-3xl font-medium text-textStandard mt-4"
             data-testid="provider-selection-heading"
           >
             {isOnboarding ? 'Configure your providers' : 'Provider Configuration Settings'}
           </h1>
           {isOnboarding && (
-            <p className="text-s text-textSubtle max-w-2xl pt-2">
+            <p className="text-sm sm:text-base text-textSubtle max-w-full sm:max-w-2xl pt-2">
               Select an AI model provider to get started with goose. You'll need to use API keys
               generated by each provider which will be encrypted and stored locally. You can change
               your provider at any time in settings.
@@ -124,7 +126,7 @@ export default function ProviderSettings({ onClose, isOnboarding }: ProviderSett
 
         <div className="py-8 pt-[20px]">
           {/* Content Area */}
-          <div className="max-w-5xl pt-4 px-8">
+          <div className="w-full max-w-6xl mx-auto pt-4 px-4 sm:px-6 md:px-8">
             <div className="relative z-10">
               {loading ? (
                 <div>Loading providers...</div>
diff --git a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx
index f66d14d4..294f3052 100644
--- a/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx
+++ b/ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx
@@ -110,7 +110,9 @@ export default function DefaultProviderSetupForm({
       ) : (
         requiredParameters.map((parameter) => (
           <div key={parameter.name}>
-            <label className="block text-sm font-medium text-gray-700 mb-1">{parameter.name}</label>
+            <label className="block text-sm font-medium text-textStandard mb-1">
+              {parameter.name}
+            </label>
             <Input
               type={parameter.secret ? 'password' : 'text'}
               value={configValues[parameter.name] || ''}
@@ -124,8 +126,8 @@ export default function DefaultProviderSetupForm({
               className={`w-full h-14 px-4 font-regular rounded-lg shadow-none ${
                 validationErrors[parameter.name]
                   ? 'border-2 border-red-500'
-                  : 'border border-gray-300'
-              } bg-white text-lg placeholder:text-gray-400 font-regular text-gray-900`}
+                  : 'border border-borderSubtle hover:border-borderStandard'
+              } bg-background-default text-lg placeholder:text-textSubtle font-regular text-textStandard`}
               required={true}
             />
           </div>
diff --git a/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx b/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx
index 56cf6a5b..5a6e02e9 100644
--- a/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx
+++ b/ui/desktop/src/components/settings/providers/subcomponents/CardContainer.tsx
@@ -11,10 +11,10 @@ interface CardContainerProps {
 function GlowingRing() {
   return (
     <div
-      className={`absolute pointer-events-none w-[260px] h-[260px] top-[-50px] left-[-30px] origin-center 
+      className={`absolute pointer-events-none inset-0 rounded-[9px] origin-center 
                             bg-[linear-gradient(45deg,#13BBAF,#FF4F00)] 
                             animate-[rotate_6s_linear_infinite] z-[-1] 
-                            opacity-0 group-hover/card:opacity-100`}
+                            opacity-0 group-hover/card:opacity-40 transition-opacity duration-300`}
     />
   );
 }
@@ -37,7 +37,7 @@ export default function CardContainer({
   return (
     <div
       data-testid={testId}
-      className={`relative h-full p-[1px] overflow-hidden rounded-[9px] group/card 
+      className={`relative h-full p-[2px] overflow-hidden rounded-[9px] group/card 
                  ${
                    grayedOut
                      ? 'bg-borderSubtle hover:bg-gray-700'
diff --git a/ui/desktop/src/components/settings/providers/subcomponents/buttons/CardButtons.tsx b/ui/desktop/src/components/settings/providers/subcomponents/buttons/CardButtons.tsx
index 7f4395c3..d4eccd2d 100644
--- a/ui/desktop/src/components/settings/providers/subcomponents/buttons/CardButtons.tsx
+++ b/ui/desktop/src/components/settings/providers/subcomponents/buttons/CardButtons.tsx
@@ -72,7 +72,7 @@ export function ConfigureSettingsButton({ tooltip, className, ...props }: Action
       variant="outline"
       text={'Configure'}
       iconClassName="rotate-90"
-      className={className}
+      className={clsx('cursor-pointer', className)}
       {...props}
     />
   );
@@ -86,7 +86,7 @@ export function RocketButton({ tooltip, className, ...props }: ActionButtonProps
       tooltip={tooltip}
       variant="outline"
       text={'Launch'}
-      className={className}
+      className={clsx('cursor-pointer', className)}
       {...props}
     />
   );