From 03c43a030c2924b7ad28a893fc991ffb5c977b7a Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 26 Mar 2024 15:31:36 +0100
Subject: [PATCH] Polish dev-overlay text styling

---
 .../internal/container/Errors.tsx             | 27 ++++++++++++-------
 .../root-layout-missing-tags-error.tsx        |  2 +-
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
index bbd372429e3bc..acdeff694c1d5 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
@@ -266,13 +266,18 @@ export function Errors({
             </h1>
             <p
               id="nextjs__container_errors_desc"
-              className="nextjs__container_errors_desc nextjs__container_errors_desc--error"
+              className="nextjs__container_errors_desc"
             >
               {error.name}: <HotlinkedText text={error.message} />
             </p>
             {hydrationWarning && (
               <>
-                <p id="nextjs__container_errors__extra">{hydrationWarning}</p>
+                <p
+                  id="nextjs__container_errors__extra"
+                  className="nextjs__container_errors__extra"
+                >
+                  {hydrationWarning}
+                </p>
                 {activeError.componentStackFrames?.length ? (
                   <PseudoHtmlDiff
                     className="nextjs__container_errors__extra_code"
@@ -308,7 +313,7 @@ export const styles = css`
     line-height: var(--size-font-bigger);
     font-weight: bold;
     margin: 0;
-    margin-top: calc(var(--size-gap-double) + var(--size-gap-half));
+    margin-top: var(--size-gap-double);
   }
   .nextjs-container-errors-header small {
     font-size: var(--size-font-small);
@@ -322,27 +327,29 @@ export const styles = css`
     font-family: sans-serif;
     font-size: var(--size-font-small);
     line-height: var(--size-font-big);
-    font-weight: bold;
     margin: 0;
     margin-top: var(--size-gap-half);
     white-space: pre-wrap;
   }
-  .nextjs__container_errors_desc--error {
+  .nextjs__container_errors_desc {
     padding-left: var(--size-gap);
     border-left: 4px solid var(--color-accents-1);
-    color: var(--color-font);
+    margin-top: var(--size-gap);
+    color: var(--color-stack-subline);
   }
   .nextjs__container_errors__extra {
-    margin: 20px 0;
+    margin: var(--size-gap-half) 0;
+    color: var(--color-stack-headline);
+    font-weight: bold;
   }
   .nextjs-container-errors-header > div > small {
     margin: 0;
     margin-top: var(--size-gap-half);
   }
   .nextjs-container-errors-header > p > a {
-    color: var(--color-ansi-red);
+    color: inherit;
+    font-weight: bold;
   }
-
   .nextjs-container-errors-body > h2:not(:first-child) {
     margin-top: calc(var(--size-gap-double) + var(--size-gap));
   }
@@ -351,7 +358,7 @@ export const styles = css`
     font-size: var(--size-font-big);
   }
   .nextjs__container_errors__extra_code {
-    margin: 20px 0;
+    margin-top: var(--size-gap);
     padding: 12px 32px;
     color: var(--color-ansi-fg);
     background: var(--color-ansi-bg);
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/root-layout-missing-tags-error.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/root-layout-missing-tags-error.tsx
index 4cb31c0fa71a8..517c061a6c610 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/root-layout-missing-tags-error.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/internal/container/root-layout-missing-tags-error.tsx
@@ -29,7 +29,7 @@ export const RootLayoutMissingTagsError: React.FC<RootLayoutMissingTagsErrorProp
               {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
               <p
                 id="nextjs__container_errors_desc"
-                className="nextjs__container_errors_desc nextjs__container_errors_desc--error"
+                className="nextjs__container_errors_desc"
               >
                 <HotlinkedText
                   text={`The following tags are missing in the Root Layout: ${missingTags