[DevOverlay] Adjust border style for header and footer

vercel · Jan 3, 2025 · fa5c6ed · fa5c6ed
1 parent 6780652
commit fa5c6ed
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/...rc/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts b/...rc/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/...react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts b/...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
@@ -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) {