From 55bbf1b42e7c02edf2e18a6beaa9d71006b34293 Mon Sep 17 00:00:00 2001 From: Jiwon Choi Date: Sat, 11 Jan 2025 01:10:52 +0800 Subject: [PATCH] [DevOverlay] Apply Turbopack Styling (#74636) This PR added Turbopack styling. ### Light ![CleanShot 2025-01-08 at 22 55 43](https://github.com/user-attachments/assets/ae636df8-16cd-49a3-861a-42dace9cd431) ### Dark ![CleanShot 2025-01-08 at 22 55 56](https://github.com/user-attachments/assets/c47128b1-236f-4bfe-b8e5-80f7d4638814) Closes NDX-636 --------- Co-authored-by: Jiachi Liu --- .../components/Errors/dialog/dialog.tsx | 18 +++++++++- .../components/Errors/dialog/header.tsx | 19 +++++++++- .../error-overlay-floating-header.tsx | 7 +++- .../error-overlay-layout.stories.tsx | 7 ++++ .../error-overlay-layout.tsx | 8 +++-- .../VersionStalenessInfo.tsx | 36 +++++++++++++------ .../_experimental/internal/styles/colors.tsx | 16 +++++++++ 7 files changed, 95 insertions(+), 16 deletions(-) diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx index 023e483fdfdfb..004ea166257f2 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx @@ -2,11 +2,13 @@ import { Dialog } from '../../Dialog/Dialog' import { noop as css } from '../../../helpers/noop-template' type ErrorOverlayDialogProps = { + isTurbopack?: boolean children?: React.ReactNode onClose?: () => void } export function ErrorOverlayDialog({ + isTurbopack, children, onClose, }: ErrorOverlayDialogProps) { @@ -16,7 +18,7 @@ export function ErrorOverlayDialog({ aria-labelledby="nextjs__container_errors_label" aria-describedby="nextjs__container_errors_desc" onClose={onClose} - className="error-overlay-dialog" + className={`error-overlay-dialog ${isTurbopack ? 'nextjs-error-overlay-dialog-turbopack-background' : ''}`} > {children} @@ -31,4 +33,18 @@ export const DIALOG_STYLES = css` box-shadow: var(--shadow-md); position: relative; } + + .nextjs-error-overlay-dialog-turbopack-background { + border: 1px solid transparent; + background: + linear-gradient(var(--color-background-100), var(--color-background-100)) + padding-box, + linear-gradient( + to right top, + var(--color-gray-400) 75%, + var(--color-turbopack-border-blue) 87.5%, + var(--color-turbopack-border-red) 100% + ) + border-box; + } ` diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx index 121bca96ee219..06aefec1332d0 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx @@ -3,13 +3,21 @@ import { noop as css } from '../../../helpers/noop-template' type ErrorOverlayDialogHeaderProps = { children?: React.ReactNode + isTurbopack?: boolean } export function ErrorOverlayDialogHeader({ children, + isTurbopack, }: ErrorOverlayDialogHeaderProps) { return ( - + {children} ) @@ -48,4 +56,13 @@ export const DIALOG_HEADER_STYLES = css` top: var(--size-4); right: var(--size-4); } + + .nextjs-error-overlay-dialog-header-turbopack-background { + background-image: linear-gradient( + 10deg, + var(--color-background-100) 60%, + var(--color-turbopack-background-red) 75%, + var(--color-turbopack-background-blue) 100% + ); + } ` diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx index 4124bf0a4322c..456f6fdaaaf0e 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx @@ -10,6 +10,7 @@ type ErrorOverlayFloatingHeaderProps = { activeIdx?: number setActiveIndex?: (index: number) => void versionInfo?: VersionInfo + isTurbopack?: boolean } export function ErrorOverlayFloatingHeader({ @@ -17,6 +18,7 @@ export function ErrorOverlayFloatingHeader({ activeIdx, setActiveIndex, versionInfo, + isTurbopack, }: ErrorOverlayFloatingHeaderProps) { return (
@@ -26,7 +28,10 @@ export function ErrorOverlayFloatingHeader({ activeIdx={activeIdx ?? 0} onActiveIndexChange={setActiveIndex ?? (() => {})} /> - +
) } diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.stories.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.stories.tsx index 10d9ccbdeb573..168a528ecbb1c 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.stories.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.stories.tsx @@ -26,3 +26,10 @@ export const Default: Story = { children: "Module not found: Cannot find module './missing-module'", }, } + +export const Turbopack: Story = { + args: { + ...Default.args, + isTurbopack: true, + }, +} diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx index ee0cc4b278b32..e6766bfd7ac96 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx @@ -48,6 +48,7 @@ type ErrorOverlayLayoutProps = { activeIdx?: number setActiveIndex?: (index: number) => void footerMessage?: string + isTurbopack?: boolean } export function ErrorOverlayLayout({ @@ -64,19 +65,20 @@ export function ErrorOverlayLayout({ activeIdx, setActiveIndex, footerMessage, + isTurbopack = !!process.env.TURBOPACK, }: ErrorOverlayLayoutProps) { return ( - - + - +
+ {text} @@ -107,18 +111,30 @@ export const styles = css` stroke: var(--color-red-300); } - .turbopack-text { - background: linear-gradient(280deg, #0096ff 0%, #ff1e56 100%); + .nextjs-container-build-error-version-status.turbopack-border { + border: 1px solid transparent; + background: + linear-gradient(var(--color-background-100), var(--color-background-100)) + padding-box, + linear-gradient( + to right, + var(--color-turbopack-border-red) 0%, + var(--color-turbopack-border-blue) 100% + ) + border-box; + border-radius: var(--rounded-full); + } + + .nextjs-container-build-error-version-status > .turbopack-text { + background: linear-gradient( + to right, + var(--color-turbopack-text-red) 0%, + var(--color-turbopack-text-blue) 100% + ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } - - @media (prefers-color-scheme: dark) { - .turbopack-text { - background: linear-gradient(280deg, #45b2ff 0%, #ff6d92 100%); - } - } ` function Eclipse({ className }: { className: string }) { diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx index 90f7236c5a8a0..d5501f754edca 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx @@ -92,6 +92,14 @@ export function Colors() { --color-green-800: #388e4a; --color-green-900: #297c3b; --color-green-1000: #18311e; + + /* Turbopack Light - Temporary */ + --color-turbopack-text-red: #ff1e56; + --color-turbopack-text-blue: #0096ff; + --color-turbopack-border-red: #f0adbe; + --color-turbopack-border-blue: #adccea; + --color-turbopack-background-red: #fff7f9; + --color-turbopack-background-blue: #f6fbff; } @media (prefers-color-scheme: dark) { @@ -182,6 +190,14 @@ export function Colors() { --color-green-800: #388e4a; --color-green-900: #63c174; --color-green-1000: #e5fbeb; + + /* Turbopack Dark - Temporary */ + --color-turbopack-text-red: #ff6d92; + --color-turbopack-text-blue: #45b2ff; + --color-turbopack-border-red: #6e293b; + --color-turbopack-border-blue: #284f80; + --color-turbopack-background-red: #250d12; + --color-turbopack-background-blue: #0a1723; } } `}