Fix dark mode rendering of config form and centered providers grid for wider screens. (#3837)

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>
   );

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>

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>

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'

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}
     />
   );