Polish dev-overlay text styling (#63721)
Follow up for #63522 Adding more polish details for the dev overlay header - The quoted text uses lighter color of text and use default font weight - Use the same color for the link and give it a bold font weight - Use the wilder support sans font for apple devices ### After vs Before <img width="335" alt="image" src="https://github.com/vercel/next.js/assets/4800338/a401f958-a5a1-443d-b2e9-f011de44f882"> <img width="335" alt="image" src="https://github.com/vercel/next.js/assets/4800338/4b1340b7-6664-47ef-8935-cf715d6a3f63"> Closes NEXT-2935
This commit is contained in:
parent
8bb1a79d1b
commit
d01a621961
3 changed files with 23 additions and 16 deletions
|
@ -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"
|
||||
|
@ -307,8 +312,7 @@ export const styles = css`
|
|||
font-size: var(--size-font-big);
|
||||
line-height: var(--size-font-bigger);
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
margin-top: calc(var(--size-gap-double) + var(--size-gap-half));
|
||||
margin: var(--size-gap-double) 0;
|
||||
}
|
||||
.nextjs-container-errors-header small {
|
||||
font-size: var(--size-font-small);
|
||||
|
@ -316,33 +320,35 @@ export const styles = css`
|
|||
margin-left: var(--size-gap-double);
|
||||
}
|
||||
.nextjs-container-errors-header small > span {
|
||||
font-family: sans-serif;
|
||||
font-family: var(--font-stack-sans);
|
||||
}
|
||||
.nextjs-container-errors-header p {
|
||||
font-family: sans-serif;
|
||||
font-family: var(--font-stack-sans);
|
||||
font-size: var(--size-font-small);
|
||||
line-height: var(--size-font-big);
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
margin-top: var(--size-gap-half);
|
||||
margin-top: var(--size-gap);
|
||||
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);
|
||||
font-weight: 500;
|
||||
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: 500;
|
||||
}
|
||||
.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);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nextjs-container-errors-body > h2:not(:first-child) {
|
||||
margin-top: calc(var(--size-gap-double) + var(--size-gap));
|
||||
}
|
||||
|
@ -351,7 +357,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);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -31,6 +31,7 @@ export function Base() {
|
|||
|
||||
--font-stack-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono',
|
||||
Menlo, Courier, monospace;
|
||||
--font-stack-sans: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
|
||||
--color-ansi-selection: rgba(95, 126, 151, 0.48);
|
||||
--color-ansi-bg: #111111;
|
||||
|
@ -62,7 +63,7 @@ export function Base() {
|
|||
|
||||
--color-stack-h6: rgb(200, 200, 204);
|
||||
--color-stack-headline: rgb(99, 99, 102);
|
||||
--color-stack-subline: rgba(142, 142, 147);
|
||||
--color-stack-subline: rgb(121, 121, 121);
|
||||
|
||||
--color-accents-3: rgb(118, 118, 118);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue