From 601931e50bb6dc6826f288346589cb2e4d044b34 Mon Sep 17 00:00:00 2001
From: Missy Turco <60163079+mcturco@users.noreply.github.com>
Date: Thu, 28 May 2026 23:45:31 -0400
Subject: [PATCH] fix: first request homepage ui tweaks (#9981)

* adding subtle hover state to outline buttons

* subtle style tweaks to send request ux layout

* small spacing change to first request destination popover
---
 .../src/basic-components/select-popover.tsx   |  2 +-
 .../insomnia/src/basic-components/utils.ts    |  2 +-
 .../ui/components/first-request-creation.tsx  | 28 +++++++++----------
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/insomnia/src/basic-components/select-popover.tsx b/packages/insomnia/src/basic-components/select-popover.tsx
index 0de611d304..64a74cdd90 100644
--- a/packages/insomnia/src/basic-components/select-popover.tsx
+++ b/packages/insomnia/src/basic-components/select-popover.tsx
@@ -100,7 +100,7 @@ export function SelectPopover<T extends SelectPopoverItem>({
           )}
         >
           {title ? (
-            <Heading className="flex shrink-0 items-center px-3 py-2 text-sm font-semibold text-(--hl)">
+            <Heading className="flex shrink-0 items-center px-4 py-4 pb-1 text-sm font-semibold text-(--hl)">
               {title}
             </Heading>
           ) : null}
diff --git a/packages/insomnia/src/basic-components/utils.ts b/packages/insomnia/src/basic-components/utils.ts
index 17ce0d1b1b..4a15ceb0dc 100644
--- a/packages/insomnia/src/basic-components/utils.ts
+++ b/packages/insomnia/src/basic-components/utils.ts
@@ -25,7 +25,7 @@ export function getBorderColorClasses(color: ButtonColor) {
   return {
     primary: '',
     danger: '',
-    default: 'border border-(--hl-md)',
+    default: 'border border-(--hl-md) data-hovered:border-(--hl-lg)',
   }[color];
 }
 
diff --git a/packages/insomnia/src/ui/components/first-request-creation.tsx b/packages/insomnia/src/ui/components/first-request-creation.tsx
index c7150f13d3..8f080bc28b 100644
--- a/packages/insomnia/src/ui/components/first-request-creation.tsx
+++ b/packages/insomnia/src/ui/components/first-request-creation.tsx
@@ -332,8 +332,8 @@ export const FirstRequestCreation = ({
     ? 'w-full rounded-sm bg-[radial-gradient(95.72%_95.72%_at_-0.32%_2.6%,#999999_0%,#DDDDDD_100%),radial-gradient(100%_100.41%_at_100%_99.92%,#999999_0%,#DDDDDD_100%)] p-px'
     : 'w-full rounded-sm bg-[radial-gradient(100%_100.41%_at_100%_99.92%,#4C4C4C_0%,rgba(3,3,3,0)_100%),radial-gradient(95.72%_95.72%_at_-0.32%_2.6%,#4C4C4C_0%,rgba(3,3,3,0)_100%)] p-px';
   const wrapperSurfaceClassName = isLightTheme
-    ? 'flex w-full flex-col items-center rounded-[inherit] bg-[#FFFFFF] bg-linear-[360deg,rgba(27,27,27,0)_27.2%,rgba(96,48,191,0.2)_100%] px-6 pt-6 pb-5'
-    : 'flex w-full flex-col items-center rounded-[inherit] bg-[#1B1B1B] bg-linear-[360deg,rgba(27,27,27,0)_27.2%,rgba(165,151,248,0.2)_100%] px-6 pt-6 pb-5';
+    ? 'flex w-full flex-col items-center rounded-[inherit] bg-[#FFFFFF] bg-linear-[360deg,rgba(27,27,27,0)_27.2%,rgba(96,48,191,0.2)_100%] px-6 pt-8 pb-5'
+    : 'flex w-full flex-col items-center rounded-[inherit] bg-[#1B1B1B] bg-linear-[360deg,rgba(27,27,27,0)_27.2%,rgba(165,151,248,0.2)_100%] px-6 pt-8 pb-5';
 
   return (
     <>
@@ -354,7 +354,7 @@ export const FirstRequestCreation = ({
                   ref={inputRef}
                   autoFocus
                   aria-label="Request endpoint or cURL input"
-                  className="h-full w-full flex-1 resize-none text-xs"
+                  className="text-md h-full w-full flex-1 resize-none font-mono"
                   placeholder="Enter an endpoint URL or paste cURL, or ⌘N for a new blank request"
                   value={requestInput}
                   onChange={event => {
@@ -370,14 +370,14 @@ export const FirstRequestCreation = ({
                 <Tooltip message="Upload Postman, OpenAPI, etc.">
                   <Button
                     aria-label="Attach content"
-                    className="w-10 rounded-full px-0"
-                    size="lg"
+                    className="w-10 rounded-md px-0"
+                    size="md"
                     variant="text"
                     icon={<Icon className="text-lg" icon="paperclip" />}
                     onPress={() => setIsImportModalOpen(true)}
                   />
                 </Tooltip>
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2">
                   <SelectPopover
                     isOpen={selectOpen}
                     onOpenChange={isOpen => setSelectOpen(isOpen)}
@@ -392,14 +392,14 @@ export const FirstRequestCreation = ({
                         New Collection
                       </Button>
                     }
-                    triggerClassName="h-8 rounded-xs px-3 text-sm"
+                    triggerClassName="h-8 rounded-md px-3 text-sm"
                     popoverClassName="w-[240px]"
                     dialogClassName="w-[240px]"
                     renderTrigger={selectedItem => (
-                      <>
+                      <div className="flex items-center gap-2">
                         <span className="truncate">{selectedItem?.label ?? 'New collection'}</span>
                         <Icon icon="chevron-down" className="w-3 shrink-0" />
-                      </>
+                      </div>
                     )}
                     renderItem={(item, isSelected) => (
                       <>
@@ -415,10 +415,7 @@ export const FirstRequestCreation = ({
                     isDisabled={!trimmedInput || isCreatingRequest}
                     onPress={() => handleCreateRequest()}
                   >
-                    <span>Create</span>
-                    <span aria-hidden="true" className="text-sm leading-none">
-                      ↵
-                    </span>
+                    <span>Create ⏎</span>
                   </Button>
                 </div>
               </div>
@@ -427,7 +424,7 @@ export const FirstRequestCreation = ({
               <div className="mt-2 text-xs text-[#FF5631]">Invalid cURL. Verify your input and try again.</div>
             )}
             <div className="my-6 px-4">
-              <p className="text-xs font-semibold text-(--hl)">
+              <p className="text-sm font-semibold text-(--hl)">
                 {shouldShowJumpBackIn ? 'Jump back in' : 'Not sure where to start?'}
               </p>
               <div className="mt-3 flex flex-wrap gap-2">
@@ -437,6 +434,7 @@ export const FirstRequestCreation = ({
                         key={recentRequest.request._id}
                         variant="outlined"
                         size="md"
+                        className="px-2"
                         onPress={() => {
                           navigate(
                             `/organization/${organizationId}/project/${projectId}/workspace/${recentRequest.workspaceId}/debug/request/${recentRequest.request._id}`,
@@ -448,7 +446,7 @@ export const FirstRequestCreation = ({
                       </Button>
                     ))
                   : quickStartItems.map(item => (
-                      <Button key={item.id} variant="outlined" size="md" onPress={item.onClick}>
+                      <Button key={item.id} variant="outlined" size="md" className="px-2" onPress={item.onClick}>
                         {item.icon}
                         <span>{item.label}</span>
                       </Button>