decouple

vercel · Jan 10, 2025 · d0813da · d0813da
1 parent e8ff3e0
commit d0813da
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 19 deletions.
diff --git a/.../components/Errors/dialog/dialog-body.tsx → ...nternal/components/Errors/dialog/body.tsx b/.../components/Errors/dialog/dialog-body.tsx → ...nternal/components/Errors/dialog/body.tsx
@@ -14,11 +14,4 @@ export function ErrorOverlayDialogBody({
   )
 }
 
-export const styles = css`
-  .error-overlay-dialog {
-    background: var(--color-background-100);
-    border: 1px solid var(--color-gray-400);
-    border-radius: var(--rounded-xl);
-    box-shadow: var(--shadow-md);
-  }
-`
+export const DIALOG_BODY_STYLES = css``
diff --git a/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx b/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx
@@ -23,7 +23,7 @@ export function ErrorOverlayDialog({
   )
 }
 
-export const styles = css`
+export const DIALOG_STYLES = css`
   .error-overlay-dialog {
     background: var(--color-background-100);
     border: 1px solid var(--color-gray-400);

diff --git a/...omponents/Errors/dialog/dialog-header.tsx → ...ernal/components/Errors/dialog/header.tsx b/...omponents/Errors/dialog/dialog-header.tsx → ...ernal/components/Errors/dialog/header.tsx
@@ -15,7 +15,7 @@ export function ErrorOverlayDialogHeader({
   )
 }
 
-export const styles = css`
+export const DIALOG_HEADER_STYLES = css`
   .nextjs-container-errors-header {
     position: relative;
   }

diff --git a/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
@@ -4,7 +4,7 @@ import type { VersionInfo } from '../../../../../../../../server/dev/parse-versi
 import type { ErrorMessageType } from '../error-message/error-message'
 import type { ErrorType } from '../error-type-label/error-type-label'
 
-import { DialogBody, DialogContent, DialogFooter } from '../../Dialog'
+import { DialogContent, DialogFooter } from '../../Dialog'
 import { Overlay } from '../../Overlay'
 import {
   ErrorOverlayToolbar,
@@ -25,11 +25,13 @@ import {
   ErrorOverlayFloatingHeader,
   styles as floatingHeaderStyles,
 } from '../error-overlay-floating-header/error-overlay-floating-header'
-import { ErrorOverlayDialog, styles as dialogStyles } from '../dialog/dialog'
+
+import { ErrorOverlayDialog, DIALOG_STYLES } from '../dialog/dialog'
 import {
   ErrorOverlayDialogHeader,
-  styles as dialogHeaderStyles,
-} from '../dialog/dialog-header'
+  DIALOG_HEADER_STYLES,
+} from '../dialog/header'
+import { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body'
 
 type ErrorOverlayLayoutProps = {
   errorMessage: ErrorMessageType
@@ -85,9 +87,9 @@ export function ErrorOverlayLayout({
             </div>
             <ErrorMessage errorMessage={errorMessage} />
           </ErrorOverlayDialogHeader>
-          <DialogBody className="nextjs-container-errors-body">
-            {children}
-          </DialogBody>
+
+          <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
+
           <DialogFooter>
             {/* TODO: errorCode should not be undefined whatsoever */}
             <ErrorOverlayFooter
@@ -106,8 +108,10 @@ export function ErrorOverlayLayout({
 }
 
 export const styles = css`
-  ${dialogStyles}
-  ${dialogHeaderStyles}
+  ${DIALOG_STYLES}
+  ${DIALOG_HEADER_STYLES}
+  ${DIALOG_BODY_STYLES}
+
   ${floatingHeaderStyles}
   ${errorTypeLabelStyles}
   ${errorMessageStyles}