Polish dev-overlay text styling

vercel · Mar 26, 2024 · 03c43a0 · 03c43a0
1 parent 7569c80
commit 03c43a0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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/...client/components/react-dev-overlay/internal/container/root-layout-missing-tags-error.tsx b/...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