From 40ca92732fd0e4271140197ed222923160c03cdc Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Wed, 8 Jan 2025 22:55:21 +0900
Subject: [PATCH] gradient background

---
 .../components/Errors/dialog/header.tsx       | 28 ++++++++++++++++++-
 .../error-overlay-layout.tsx                  |  2 +-
 .../_experimental/internal/styles/colors.tsx  |  4 +++
 3 files changed, 32 insertions(+), 2 deletions(-)

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..ca3bda4fc8d3c 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,19 @@ import { noop as css } from '../../../helpers/noop-template'
 
 type ErrorOverlayDialogHeaderProps = {
   children?: React.ReactNode
+  isTurbopack?: boolean
 }
 
 export function ErrorOverlayDialogHeader({
   children,
+  isTurbopack,
 }: ErrorOverlayDialogHeaderProps) {
   return (
-    <DialogHeader className="nextjs-container-errors-header">
+    <DialogHeader
+      className={`nextjs-container-errors-header ${
+        isTurbopack ? 'turbopack' : ''
+      }`}
+    >
       {children}
     </DialogHeader>
   )
@@ -48,4 +54,24 @@ export const DIALOG_HEADER_STYLES = css`
     top: var(--size-4);
     right: var(--size-4);
   }
+
+  .nextjs-container-errors-header.turbopack {
+    background-image: linear-gradient(
+      10deg,
+      var(--color-background-100) 60%,
+      var(--color-turbopack-background-red) 75%,
+      var(--color-turbopack-background-blue) 100%
+    );
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .nextjs-container-errors-header.turbopack {
+      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-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 9c6990876dd42..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
@@ -78,7 +78,7 @@ export function ErrorOverlayLayout({
           isTurbopack={isTurbopack}
         />
         <DialogContent>
-          <ErrorOverlayDialogHeader>
+          <ErrorOverlayDialogHeader isTurbopack={isTurbopack}>
             <div
               className="nextjs__container_errors__error_title"
               // allow assertion in tests before error rating is implemented
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 0ceb4287d4d46..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
@@ -98,6 +98,8 @@ export function Colors() {
           --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) {
@@ -194,6 +196,8 @@ export function Colors() {
             --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;
           }
         }
       `}