[dev-overlay] use stop icon for hide devtools button

packages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx

@@ -37,11 +37,13 @@ export default function ReactDevOverlay({
 
         <RenderError state={state} isAppDir={true}>
           {({ runtimeErrors, totalErrorCount }) => {
+            const isBuildError = runtimeErrors.length === 0
             return (
               <>
                 <DevToolsIndicator
                   state={state}
                   errorCount={totalErrorCount}
+                  isBuildError={isBuildError}
                   setIsErrorOverlayOpen={setIsErrorOverlayOpen}
                 />
 

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -3,13 +3,14 @@ import type { OverlayState } from '../../../../../shared'
 
 import { useState, useEffect, useRef, createContext, useContext } from 'react'
 import { Toast } from '../../toast'
-import { Cross, NextLogo } from './internal/next-logo'
+import { NextLogo } from './internal/next-logo'
 import { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'
 import { useIsDevRendering } from './internal/dev-render-indicator'
 import { useDelayedRender } from '../../../hooks/use-delayed-render'
 import { noop as css } from '../../../helpers/noop-template'
 import { TurbopackInfo } from './dev-tools-info/turbopack-info'
 import { RouteInfo } from './dev-tools-info/route-info'
+import { StopIcon } from '../../../icons/stop-icon'
 
 // TODO: add E2E tests to cover different scenarios
 
@@ -23,11 +24,13 @@ type DevToolsIndicatorPosition = typeof INDICATOR_POSITION
 export function DevToolsIndicator({
   state,
   errorCount,
+  isBuildError,
   setIsErrorOverlayOpen,
   position = INDICATOR_POSITION,
 }: {
   state: OverlayState
   errorCount: number
+  isBuildError: boolean
   setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>
   // Technically this prop isn't needed, but useful for testing.
   position?: DevToolsIndicatorPosition
@@ -47,6 +50,7 @@ export function DevToolsIndicator({
         isTurbopack={!!process.env.TURBOPACK}
         position={position}
         disabled={state.disableDevIndicator}
+        isBuildError={isBuildError}
       />
     )
   )
@@ -71,6 +75,7 @@ function DevToolsPopover({
   isStaticRoute,
   isTurbopack,
   position,
+  isBuildError,
   hide,
   setIsErrorOverlayOpen,
 }: {
@@ -80,6 +85,7 @@ function DevToolsPopover({
   semver: string | undefined
   isTurbopack: boolean
   position: DevToolsIndicatorPosition
+  isBuildError: boolean
   hide: () => void
   setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>
 }) {
@@ -263,6 +269,7 @@ function DevToolsPopover({
         openErrorOverlay={openErrorOverlay}
         isDevBuilding={useIsDevBuilding()}
         isDevRendering={useIsDevRendering()}
+        isBuildError={isBuildError}
       />
 
       {routeInfoMounted && (
@@ -354,7 +361,7 @@ function DevToolsPopover({
               <MenuItem
                 data-hide-dev-tools
                 label="Hide Dev Tools"
-                value={<Cross color="var(--color-gray-900)" />}
+                value={<StopIcon />}
                 onClick={hide}
                 index={isTurbopack ? 2 : 3}
               />
@@ -368,12 +375,12 @@ function DevToolsPopover({
 
 function ChevronRight() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
       <path
         fill="#666"
         fillRule="evenodd"
-        d="m7.5 3.94.53.53 4.824 4.823a1 1 0 0 1 0 1.414L8.03 15.53l-.53.53L6.44 15l.53-.53L11.44 10 6.97 5.53 6.44 5 7.5 3.94Z"
         clipRule="evenodd"
+        d="M5.50011 1.93945L6.03044 2.46978L10.8537 7.293C11.2442 7.68353 11.2442 8.31669 10.8537 8.70722L6.03044 13.5304L5.50011 14.0608L4.43945 13.0001L4.96978 12.4698L9.43945 8.00011L4.96978 3.53044L4.43945 3.00011L5.50011 1.93945Z"
       />
     </svg>
   )

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx

@@ -7,6 +7,7 @@ interface Props extends React.ComponentProps<'button'> {
   issueCount: number
   isDevBuilding: boolean
   isDevRendering: boolean
+  isBuildError: boolean
   onTriggerClick: () => void
   openErrorOverlay: () => void
 }
@@ -62,6 +63,7 @@ export const NextLogo = forwardRef(function NextLogo(
     issueCount,
     isDevBuilding,
     isDevRendering,
+    isBuildError,
     onTriggerClick,
     openErrorOverlay,
     ...props
@@ -224,7 +226,9 @@ export const NextLogo = forwardRef(function NextLogo(
             gap: var(--padding);
             align-items: center;
             padding-left: 8px;
-            padding-right: ${disabled ? '8px' : 'calc(var(--padding) * 2)'};
+            padding-right: ${disabled || isBuildError
+              ? '8px'
+              : 'calc(var(--padding) * 2)'};
             height: 32px;
             margin: 0 var(--padding);
             border-radius: 9999px;
@@ -462,7 +466,7 @@ export const NextLogo = forwardRef(function NextLogo(
                   )}
                 </div>
               </button>
-              {!disabled && (
+              {!disabled && !isBuildError && (
                 <button
                   data-issues-collapse
                   aria-label="Collapse issues badge"

packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/stop-icon.tsx

@@ -0,0 +1,18 @@
+export function StopIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM5 7.25H4.25V8.75H5H11H11.75V7.25H11H5Z"
+        fill="#666"
+      />
+    </svg>
+  )
+}

packages/next/src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx

@@ -41,24 +41,28 @@ export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
         <ComponentStyles />
 
         <RenderError state={state} isAppDir={false}>
-          {({ runtimeErrors, totalErrorCount }) => (
-            <>
-              <DevToolsIndicator
-                state={state}
-                errorCount={totalErrorCount}
-                setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-              />
-
-              {(hasRuntimeErrors || hasBuildError) && (
-                <ErrorOverlay
+          {({ runtimeErrors, totalErrorCount }) => {
+            const isBuildError = runtimeErrors.length === 0
+            return (
+              <>
+                <DevToolsIndicator
                   state={state}
-                  runtimeErrors={runtimeErrors}
-                  isErrorOverlayOpen={isErrorOverlayOpen}
+                  errorCount={totalErrorCount}
+                  isBuildError={isBuildError}
                   setIsErrorOverlayOpen={setIsErrorOverlayOpen}
                 />
-              )}
-            </>
-          )}
+
+                {(hasRuntimeErrors || hasBuildError) && (
+                  <ErrorOverlay
+                    state={state}
+                    runtimeErrors={runtimeErrors}
+                    isErrorOverlayOpen={isErrorOverlayOpen}
+                    setIsErrorOverlayOpen={setIsErrorOverlayOpen}
+                  />
+                )}
+              </>
+            )
+          }}
         </RenderError>
       </ShadowPortal>
     </>