From d061b562ce82234e1ba5d0636d566a4d0b1a4131 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Fri, 3 Jan 2025 11:52:07 +0900
Subject: [PATCH] [DevOverlay] Adjust border style for header and footer

---
 .../internal/components/Dialog/styles.ts        | 11 ++++++-----
 .../Errors/error-overlay-footer/styles.ts       |  5 +++++
 .../_experimental/internal/styles/Base.tsx      | 17 +++++++++++++++++
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts
index 81d14038be03d..4d415022bdcd7 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts
@@ -10,7 +10,6 @@ const styles = css`
     margin-left: auto;
     outline: none;
     background: var(--color-background);
-    border: 1px solid var(--color-gray-400);
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-md);
     max-height: calc(100% - 56px);
@@ -46,16 +45,18 @@ const styles = css`
     overflow-y: auto;
     border: none;
     margin: 0;
-    /* calc(padding + banner width offset) */
-    padding: calc(var(--size-gap-double) + var(--size-gap-half))
-      var(--size-gap-double);
     height: 100%;
     display: flex;
     flex-direction: column;
   }
   [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {
     flex-shrink: 0;
-    margin-bottom: var(--size-gap-double);
+    padding: var(--size-4);
+    border-top: 1px solid var(--color-gray-400);
+    border-left: 1px solid var(--color-gray-400);
+    border-right: 1px solid var(--color-gray-400);
+    border-top-left-radius: var(--rounded-xl);
+    border-top-right-radius: var(--rounded-xl);
   }
   [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {
     position: relative;
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
index 4cb499f333cf5..bffe66420f182 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
@@ -5,6 +5,11 @@ const styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: var(--size-3);
+    background: var(--color-background-200);
+    border: 1px solid var(--color-gray-400);
+    border-bottom-left-radius: var(--rounded-xl);
+    border-bottom-right-radius: var(--rounded-xl);
   }
 
   .error-overlay-footer p {
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
index 477e7cde1dc46..42558432ab7f8 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
@@ -86,6 +86,23 @@ export function Base() {
           --rounded-xl: 0.75rem; /* 12px */
           --rounded-2xl: 1rem; /* 16px */
           --rounded-3xl: 1.5rem; /* 24px */
+
+          --size-0: 0px;
+          --size-px: 1px;
+          --size-0_5: 0.125rem; /* 2px */
+          --size-1: 0.25rem; /* 4px */
+          --size-1_5: 0.375rem; /* 6px */
+          --size-2: 0.5rem; /* 8px */
+          --size-2_5: 0.625rem; /* 10px */
+          --size-3: 0.75rem; /* 12px */
+          --size-3_5: 0.875rem; /* 14px */
+          --size-4: 1rem; /* 16px */
+          --size-5: 1.25rem; /* 20px */
+          --size-6: 1.5rem; /* 24px */
+          --size-7: 1.75rem; /* 28px */
+          --size-8: 2rem; /* 32px */
+          --size-9: 2.25rem; /* 36px */
+          --size-10: 2.5rem; /* 40px */
         }
 
         @media (prefers-color-scheme: dark) {