[devtools] polish icon and label color (#80976)

* In devtool panel the icons should be gray-1000 Closes NEXT-4584

![image](https://github.com/user-attachments/assets/5eba7071-706c-4c64-9ac4-f86fe8457296)


* In segment explorer the page label color should be -900 Closes NEXT-4581

![image](https://github.com/user-attachments/assets/71b78c28-08a8-4f46-94aa-f96fe364abb9)

* hide side bar when there's no error

![image](https://github.com/user-attachments/assets/30eaeac8-0c9e-4347-a489-dd0672fd21df)

Author: huozhi

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/issues-tab/issues-tab-sidebar.tsx

@@ -18,6 +18,10 @@ export function IssuesTabSidebar({
   activeIdx: number
   setActiveIndex: (idx: number) => void
 }) {
+  if (runtimeErrors.length === 0) {
+    return null
+  }
+
   return (
     <aside data-nextjs-devtools-panel-tab-issues-sidebar>
       {runtimeErrors.map((runtimeError, idx) => {

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx

@@ -384,7 +384,7 @@ export const DEVTOOLS_PANEL_STYLES = css`
     align-items: center;
     justify-content: center;
     padding: 6px;
-    color: var(--color-gray-600);
+    color: var(--color-gray-1000);
     border-radius: 4px;
     transition: all 0.2s ease;
 

packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx

@@ -233,7 +233,7 @@ export const DEV_TOOLS_INFO_RENDER_FILES_STYLES = css`
   }
   .segment-explorer-file-label--page {
     background-color: var(--color-blue-300);
-    color: var(--color-blue-800);
+    color: var(--color-blue-900);
   }
   .segment-explorer-file-label--not-found,
   .segment-explorer-file-label--forbidden,