feat(webapp): tidy up the integration setup modals

Connect GitHub repository: the repository filter field no longer draws a blue
border and ring when focused. It is a bare input, so @tailwindcss/forms was
styling its focus state and overriding the app%s own treatment.

Set up Vercel Integration: the project dropdown reads at full brightness,
Cancel becomes secondary, and the TRIGGER_SECRET_KEY note becomes the
dropdown%s field description rather than a detached paragraph, so it sits at
the same distance as every other field hint.

The copy now carries the step on its own, so the redundant "Select Vercel
Project" heading is gone, and it no longer promises to sync "your API keys"
when what actually syncs is one key.

Also brightens the Vercel logo in the install and connect buttons and in the
connected-project line, where it was inheriting dimmed body colour.

Author: samejr

apps/webapp/app/components/integrations/VercelOnboardingModal.tsx

@@ -13,6 +13,7 @@ import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
 import { Header3 } from "~/components/primitives/Headers";
 import { Hint } from "~/components/primitives/Hint";
+import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Select, SelectItem } from "~/components/primitives/Select";
@@ -797,52 +798,51 @@ export function VercelOnboardingModal({
         <div className="mt-4">
           {showProjectSelection && (
             <div className="flex flex-col gap-4">
-              <Header3>Select Vercel Project</Header3>
-              <Paragraph className="text-sm">
-                Choose which Vercel project to connect with this Trigger.dev project. Your API keys
-                will be automatically synced to Vercel.
+              <Paragraph>
+                Choose the Vercel project to pair with this Trigger.dev project.
               </Paragraph>
 
               {availableProjects.length === 0 ? (
                 <Callout variant="warning">
                   No Vercel projects found. Please create a project in Vercel first.
                 </Callout>
               ) : (
-                <Select
-                  disabled={availableProjects.length === 1}
-                  value={selectedVercelProject?.id || ""}
-                  setValue={(value) => {
-                    if (!Array.isArray(value)) {
-                      const project = availableProjects.find((p) => p.id === value);
-                      setSelectedVercelProject(project || null);
-                      setProjectSelectionError(null);
-                    }
-                  }}
-                  items={availableProjects}
-                  filter={availableProjects.length > 5 ? { keys: ["name"] } : undefined}
-                  variant="tertiary/medium"
-                  placeholder="Select a Vercel project"
-                  dropdownIcon
-                  text={selectedVercelProject?.name || "Select a project"}
-                >
-                  {availableProjects.map((project) => (
-                    <SelectItem key={project.id} value={project.id}>
-                      {project.name}
-                    </SelectItem>
-                  ))}
-                </Select>
+                <InputGroup fullWidth>
+                  <Select
+                    disabled={availableProjects.length === 1}
+                    value={selectedVercelProject?.id || ""}
+                    setValue={(value) => {
+                      if (!Array.isArray(value)) {
+                        const project = availableProjects.find((p) => p.id === value);
+                        setSelectedVercelProject(project || null);
+                        setProjectSelectionError(null);
+                      }
+                    }}
+                    items={availableProjects}
+                    filter={availableProjects.length > 5 ? { keys: ["name"] } : undefined}
+                    variant="secondary/medium"
+                    placeholder="Select a Vercel project"
+                    dropdownIcon
+                    text={selectedVercelProject?.name || "Select a project"}
+                  >
+                    {availableProjects.map((project) => (
+                      <SelectItem key={project.id} value={project.id}>
+                        {project.name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                  <Hint>
+                    Your{" "}
+                    <code className="rounded bg-background-raised px-1 py-0.5 text-xs text-text-bright">
+                      TRIGGER_SECRET_KEY
+                    </code>{" "}
+                    is synced to Vercel for each environment once connected.
+                  </Hint>
+                </InputGroup>
               )}
 
               {projectSelectionError && <FormError>{projectSelectionError}</FormError>}
 
-              <Hint>
-                Once connected, your{" "}
-                <code className="text-xs rounded bg-background-raised px-1 py-0.5 text-text-bright">
-                  TRIGGER_SECRET_KEY
-                </code>{" "}
-                will be automatically synced to Vercel for each environment.
-              </Hint>
-
               <FormButtons
                 confirmButton={
                   <div className="flex items-center gap-2">
@@ -866,7 +866,7 @@ export function VercelOnboardingModal({
                   </div>
                 }
                 cancelButton={
-                  <Button variant="tertiary/medium" onClick={handleSkipOnboarding}>
+                  <Button variant="secondary/medium" onClick={handleSkipOnboarding}>
                     Cancel
                   </Button>
                 }

apps/webapp/app/components/primitives/Select.tsx

@@ -699,7 +699,9 @@ export function ComboBox({
       <Ariakit.Combobox
         autoSelect={autoSelect}
         render={<input placeholder={placeholder} />}
-        className="flex-1 bg-transparent text-xs text-text-dimmed outline-hidden"
+        // border-0/ring-0: @tailwindcss/forms styles a focused bare input with a
+        // blue border and ring, which clashes with the app's focus treatment.
+        className="flex-1 border-0 bg-transparent text-xs text-text-dimmed outline-hidden focus:border-0 focus:ring-0"
         {...props}
       />
       {shortcut && (

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx

@@ -594,7 +594,7 @@ function VercelSettingsRows({
               noPermissionTooltip={noPermissionTooltip}
               to={vercelAppInstallPath(organizationSlug, projectSlug)}
               variant="secondary/small"
-              LeadingIcon={() => <VercelLogo className="-mx-1 size-3.5" />}
+              LeadingIcon={() => <VercelLogo className="-mx-1 size-3.5 text-text-bright" />}
             >
               Install Vercel app
             </PermissionLink>
@@ -615,7 +615,7 @@ function VercelSettingsRows({
               LeadingIcon={
                 isLoadingProjects
                   ? () => <SpinnerWhite className="size-4" />
-                  : () => <VercelLogo className="-mx-1 size-3.5" />
+                  : () => <VercelLogo className="-mx-1 size-3.5 text-text-bright" />
               }
             >
               {isLoadingProjects ? "Loading projects…" : "Connect Vercel project"}
@@ -840,7 +840,7 @@ function ConnectedVercelProjectForm({
           <>
             <span className="mr-2 inline-block size-1.5 rounded-full bg-success align-[0.15em]" />
             Vercel project
-            <VercelLogo className="relative -top-px mx-1.5 inline size-3.5 align-text-bottom" />
+            <VercelLogo className="relative -top-px mx-1.5 inline size-3.5 align-text-bottom text-text-bright" />
             {connectedProject.vercelProjectName} connected on{" "}
             <DateTime
               date={connectedProject.createdAt}