[DevOverlay] Fix style details and correctly pass version info (#74606)

This PR fixed the followings: - `versionInfo` was omitted in the `Errors` component. - The border radius of the Error type label chip is 6px in design but was 8px in dev. - Removed unnecessary margins and paddings that took unexpected space. ### Light ![CleanShot 2025-01-08 at 03 20 53](https://github.com/user-attachments/assets/86ceb007-7885-4894-8c4e-0122a28a0fcb) ### Dark ![CleanShot 2025-01-08 at 03 21 00](https://github.com/user-attachments/assets/de74cc91-eb35-4c0b-8817-24d455850848)
vercel · Jan 10, 2025 · 2a604cd · 2a604cd
1 parent 08c4e58
commit 2a604cd
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 99 deletions.
diff --git a/...rc/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts b/...rc/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts
@@ -2,18 +2,21 @@ import { noop as css } from '../../helpers/noop-template'
 
 const styles = css`
   [data-nextjs-dialog] {
-    z-index: 50;
     display: flex;
     flex-direction: column;
+
     width: 100%;
+    max-height: calc(100% - 56px);
     margin-right: auto;
     margin-left: auto;
-    outline: none;
-    background: var(--color-background);
+
+    background: var(--color-background-100);
+    border: 1px solid var(--color-gray-400);
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-md);
     max-height: calc(100% - 56px);
     position: relative;
+    outline: none;
   }
 
   @media (max-height: 812px) {
@@ -25,7 +28,6 @@ const styles = css`
   @media (min-width: 576px) {
     [data-nextjs-dialog] {
       max-width: 540px;
-      box-shadow: var(--shadow-2xl);
     }
   }
 
@@ -52,11 +54,6 @@ const styles = css`
   [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {
     flex-shrink: 0;
     padding: var(--size-4);
-    border-top: 1px solid var(--color-gray-400);
-    border-left: 1px solid var(--color-gray-400);
-    border-right: 1px solid var(--color-gray-400);
-    border-top-left-radius: var(--rounded-xl);
-    border-top-right-radius: var(--rounded-xl);
   }
   [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {
     position: relative;

diff --git a/...eact-dev-overlay/_experimental/internal/components/Errors/error-message/error-message.tsx b/...eact-dev-overlay/_experimental/internal/components/Errors/error-message/error-message.tsx
@@ -19,6 +19,7 @@ export function ErrorMessage({ errorMessage }: ErrorMessageProps) {
 
 export const styles = css`
   .nextjs__container_errors_desc {
+    margin: 0;
     color: var(--color-red-900);
     font-weight: 500;
     font-size: var(--size-font);

diff --git a/...imental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx b/...imental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx
@@ -1,6 +1,7 @@
 import { useState, useCallback } from 'react'
 import { ThumbsUp } from '../../../../icons/thumbs/thumbs-up'
 import { ThumbsDown } from '../../../../icons/thumbs/thumbs-down'
+import { noop as css } from '../../../../helpers/noop-template'
 
 interface ErrorFeedbackProps {
   errorCode: string
@@ -66,3 +67,56 @@ export function ErrorFeedback({ errorCode }: ErrorFeedbackProps) {
     </>
   )
 }
+
+export const styles = css`
+  .error-feedback {
+    display: flex;
+    align-items: center;
+    gap: var(--size-gap);
+  }
+
+  .error-feedback-thanks {
+    height: 1.5rem; /* 24px */
+    display: flex;
+    align-items: center;
+    padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */
+  }
+
+  .feedback-button {
+    background: none;
+    border: none;
+    border-radius: var(--rounded-md);
+    padding: var(--size-gap-half);
+    width: 1.5rem; /* 24px */
+    height: 1.5rem; /* 24px */
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      background: var(--color-gray-alpha-100);
+    }
+
+    &:active {
+      background: var(--color-gray-alpha-200);
+    }
+  }
+
+  .feedback-button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  .feedback-button.voted {
+    background: var(--color-gray-alpha-200);
+  }
+
+  .thumbs-up-icon,
+  .thumbs-down-icon {
+    color: var(--color-gray-900);
+  }
+`
diff --git a/...ay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx b/...ay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx
@@ -1,4 +1,6 @@
 import { ErrorFeedback } from './error-feedback/error-feedback'
+import { styles as feedbackStyles } from './error-feedback/error-feedback'
+import { noop as css } from '../../../helpers/noop-template'
 
 export type ErrorOverlayFooterProps = {
   errorCode: string
@@ -16,3 +18,32 @@ export function ErrorOverlayFooter({
     </footer>
   )
 }
+
+export const styles = css`
+  .error-overlay-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--size-3);
+    background: var(--color-background-200);
+    border-top: 1px solid var(--color-gray-400);
+  }
+
+  .error-overlay-footer p {
+    color: var(--color-gray-900);
+    margin: 0;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+
+  .error-overlay-footer-message {
+    color: var(--color-gray-900);
+    margin: 0;
+    font-size: var(--size-font-small);
+    font-weight: 400;
+    line-height: var(--size-font-big);
+  }
+
+  ${feedbackStyles}
+`
diff --git a/...react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts b/...react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
diff --git a/...ev-overlay/_experimental/internal/components/Errors/error-type-label/error-type-label.tsx b/...ev-overlay/_experimental/internal/components/Errors/error-type-label/error-type-label.tsx
@@ -13,23 +13,25 @@ type ErrorTypeLabelProps = {
 
 export function ErrorTypeLabel({ errorType }: ErrorTypeLabelProps) {
   return (
-    <h1
+    <span
       id="nextjs__container_errors_label"
       className="nextjs__container_errors_label"
     >
       {errorType}
-    </h1>
+    </span>
   )
 }
 
 export const styles = css`
   .nextjs__container_errors_label {
-    padding: var(--size-1_5);
-    margin: var(--size-gap-double) 0;
-    border-radius: var(--rounded-lg);
+    padding: var(--size-0_5) var(--size-1_5);
+    margin: 0;
+    margin-bottom: var(--size-3);
+    /* used --size instead of --rounded because --rounded is missing 6px */
+    border-radius: var(--size-1_5);
     background: var(--color-red-100);
     font-weight: 600;
-    font-size: var(--size-3);
+    font-size: var(--size-font-11);
     color: var(--color-red-900);
     font-family: var(--font-stack-monospace);
     line-height: var(--size-5);

diff --git a/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx b/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
@@ -271,6 +271,7 @@ export function Errors({
       activeIdx={activeIdx}
       setActiveIndex={setActiveIndex}
       footerMessage={footerMessage}
+      versionInfo={versionInfo}
     >
       <div className="error-overlay-notes-container">
         {notes ? (
@@ -412,9 +413,9 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
+    margin-bottom: var(--size-3);
   }
   .error-overlay-notes-container {
-    padding: var(--size-4);
-    padding-top: 0;
+    padding: 0 var (--size-4);
   }
 `
diff --git a/...src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx b/...src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx
@@ -4,7 +4,7 @@ import { styles as errorLayout } from '../components/Errors/error-overlay-layout
 import { styles as bottomStacks } from '../components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks'
 import { styles as pagination } from '../components/Errors/error-overlay-pagination/error-overlay-pagination'
 import { styles as overlay } from '../components/Overlay/styles'
-import { styles as footer } from '../components/Errors/error-overlay-footer/styles'
+import { styles as footer } from '../components/Errors/error-overlay-footer/error-overlay-footer'
 import { styles as terminal } from '../components/Terminal/styles'
 import { styles as toast } from '../components/Toast'
 import { styles as versionStaleness } from '../components/VersionStalenessInfo/VersionStalenessInfo'