Repository: vercel/next.js
Pull request: [dev-tools] Navigation header replaces close button

This PR implements the latest changes from @pranathip to our info popovers.

| Before | After |
|:------:|:-----:|
| ![CleanShot 2025-06-03 at 13 54 48@2x](https://github.com/user-attachments/assets/164109f9-ae41-4c8a-9154-9ec1f6b8297d) | ![CleanShot 2025-06-03 at 13 54 29@2x](https://github.com/user-attachments/assets/267e9e88-2f61-48f1-88a9-d639e4750734) |



Changed files:
filename: packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx
patch: @@ -12,7 +12,6 @@ export interface DevToolsInfoProps extends DevToolsInfoPropsCore {
   title: React.ReactNode
   children: React.ReactNode
   learnMoreLink?: string
-  closeButton?: boolean
 }
 
 export function DevToolsInfo({
@@ -21,7 +20,6 @@ export function DevToolsInfo({
   learnMoreLink,
   isOpen,
   triggerRef,
-  closeButton = true,
   close,
   ...props
 }: DevToolsInfoProps) {
@@ -55,20 +53,21 @@ export function DevToolsInfo({
       data-rendered={rendered}
     >
       <div className="dev-tools-info-container">
-        <h1 className="dev-tools-info-title">{title}</h1>
-        {children}
-        {(closeButton || learnMoreLink) && (
-          <div className="dev-tools-info-button-container">
-            {closeButton ? (
-              <button
-                ref={closeButtonRef}
-                className="dev-tools-info-close-button"
-                onClick={close}
-              >
-                Close
-              </button>
-            ) : null}
-            {learnMoreLink && (
+        <div className="dev-tools-info-header">
+          <button
+            ref={closeButtonRef}
+            className="dev-tools-info-close-button"
+            onClick={close}
+            aria-label="Close dialog"
+          >
+            <IconChevronLeft />
+          </button>
+          <h3 className="dev-tools-info-title">{title}</h3>
+        </div>
+        <div className="dev-tools-info-body">
+          {children}
+          {learnMoreLink && (
+            <div className="dev-tools-info-button-container">
               <a
                 className="dev-tools-info-learn-more-button"
                 href={learnMoreLink}
@@ -77,9 +76,9 @@ export function DevToolsInfo({
               >
                 Learn More
               </a>
-            )}
-          </div>
-        )}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )
@@ -117,15 +116,43 @@ export const DEV_TOOLS_INFO_STYLES = `
   }
 
   .dev-tools-info-container {
-    padding: 12px;
     width: 100%;
   }
 
+  .dev-tools-info-body {
+    padding: 16px;
+  }
+
+  .dev-tools-info-header {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-bottom: 1px solid var(--color-gray-alpha-400);
+  }
+
+  .dev-tools-info-close-button {
+    all: unset;
+    width: 20px;
+    height: 20px;    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-gray-900);
+    transition: color 150ms ease;
+    translate: 0 1px;
+    border-radius: 3px;
+
+    &:hover {
+      color: var(--color-gray-1000);
+    }
+  }
+
   .dev-tools-info-title {
-    padding: 8px 6px;
     color: var(--color-gray-1000);
-    font-size: var(--size-16);
-    font-weight: 600;
+    font-size: var(--size-14);
+    font-weight: 500;
     line-height: var(--size-20);
     margin: 0;
   }
@@ -147,24 +174,6 @@ export const DEV_TOOLS_INFO_STYLES = `
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 6px;
-  }
-
-  .dev-tools-info-close-button {
-    padding: 0 8px;
-    height: var(--size-28);
-    font-size: var(--size-14);
-    font-weight: 500;
-    line-height: var(--size-20);
-    transition: background var(--duration-short) ease;
-    color: var(--color-gray-1000);
-    border-radius: var(--rounded-md-2);
-    border: 1px solid var(--color-gray-alpha-400);
-    background: var(--color-background-200);
-  }
-
-  .dev-tools-info-close-button:hover {
-    background: var(--color-gray-400);
   }
 
   .dev-tools-info-learn-more-button {
@@ -178,6 +187,7 @@ export const DEV_TOOLS_INFO_STYLES = `
     color: var(--color-background-100);
     border-radius: var(--rounded-md-2);
     background: var(--color-gray-1000);
+    margin-left: auto;
   }
 
   .dev-tools-info-learn-more-button:hover {
@@ -186,3 +196,20 @@ export const DEV_TOOLS_INFO_STYLES = `
     opacity: 0.9;
   }
 `
+
+function IconChevronLeft() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.14645 8.70703C4.75595 8.31651 4.75595 7.68349 5.14645 7.29297L10.5 1.93945L11.5605 3L6.56051 8L11.5605 13L10.5 14.0605L5.14645 8.70703Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

filename: packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx
patch: @@ -200,7 +200,6 @@ function ThemeIcon({ theme }: { theme: 'dark' | 'light' | 'system' }) {
 
 export const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`
   .preferences-container {
-    padding: 8px 6px;
     width: 100%;
   }
 

filename: packages/next/src/client/components/react-dev-overlay/ui/components/overview/segment-explorer.tsx
patch: @@ -3,7 +3,6 @@ import { css } from '../../../utils/css'
 import type { DevToolsInfoPropsCore } from '../errors/dev-tools-indicator/dev-tools-info/dev-tools-info'
 import { DevToolsInfo } from '../errors/dev-tools-indicator/dev-tools-info/dev-tools-info'
 import { cx } from '../../utils/cx'
-import { LeftArrow } from '../../icons/left-arrow'
 import {
   useSegmentTreeClientState,
   type SegmentNode,
@@ -126,36 +125,13 @@ export function SegmentsExplorer(
   }
 
   return (
-    <DevToolsInfo
-      title={
-        <>
-          <button
-            className="segment-explorer-back-button"
-            onClick={props.close}
-          >
-            <LeftArrow />
-          </button>
-          {'Segment Explorer'}
-        </>
-      }
-      closeButton={false}
-      {...props}
-    >
+    <DevToolsInfo title="Segment Explorer" {...props}>
       <PageSegmentTree tree={ctx.tree} />
     </DevToolsInfo>
   )
 }
 
 export const DEV_TOOLS_INFO_RENDER_FILES_STYLES = css`
-  .segment-explorer-back-button {
-    margin-right: 12px;
-    color: var(--color-gray-1000);
-  }
-  .segment-explorer-back-button svg {
-    width: 20px;
-    height: 20px;
-  }
-
   .segment-explorer-content {
     overflow-y: auto;
     padding: 0 12px;