[dev-overlay] use stop icon for hide devtools button (#76212)

This PR replaced the "Stop Icon" with the "Hide Dev Tools" button.

| Light | Dark |
|--------|--------|
| ![CleanShot 2025-02-19 at 23 02
45](https://github.com/user-attachments/assets/85e372f9-5093-45d7-84be-a4edf9913d24)
| ![CleanShot 2025-02-19 at 23 01
09](https://github.com/user-attachments/assets/3436e867-fe75-40ea-bbb8-c3546aa74253)
|

Closes NDX-850

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
 
@@ -360,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}
               />
@@ -374,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/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>
+  )
+}